/* Azularia · Inicio — hoja común. Identidad Azularia: Space Grotesk · Azul #0033FF · Marino #04185A · Beige #F0E8D5 · Crema #FFFBF1 */
:root{
  --marino:#04185A; --azul:#0033FF; --azul-hover:#0029CC; --beige:#F0E8D5; --crema:#FFFBF1;
  --tinta:#04185A; --gris:#5D656F; --apagado:#8A93A6;
  --borde:#EAE3D2; --tile:#E2E9FF;
  --ok:#1B7A46; --aviso:#B45309; --peligro:#C3421D; --peligro-suave:#FBEDE8;
  --radio:16px; --pildora:999px;
  --sombra:0 1px 2px rgba(4,24,90,.05), 0 10px 30px -12px rgba(4,24,90,.16);
  --sombra-hover:0 2px 4px rgba(4,24,90,.06), 0 22px 44px -14px rgba(4,24,90,.24);
  --fuente:"Space Grotesk","Trebuchet MS",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--fuente);background:var(--crema);color:var(--tinta);min-height:100vh;font-feature-settings:"tnum" 1}
h1,h2,h3{letter-spacing:-.3px}
/* ---- botones píldora ---- */
.btn{font:inherit;font-size:13px;font-weight:600;border:none;cursor:pointer;border-radius:var(--pildora);padding:9px 18px;
     transition:background .15s,color .15s,opacity .15s;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1.1}
.btn-primario{background:var(--azul);color:#fff}
.btn-primario:hover{background:var(--azul-hover)}
.btn-marino{background:var(--marino);color:#fff}
.btn-marino:hover{background:var(--azul)}
.btn-suave{background:var(--tile);color:var(--marino)}
.btn-suave:hover{background:#cfdaff}
.btn-fantasma{background:transparent;color:var(--apagado);padding:9px 10px}
.btn-fantasma:hover{color:var(--peligro);background:var(--peligro-suave)}
.btn-peligro{background:var(--peligro);color:#fff}
.btn-peligro:hover{background:#a2361a}
.btn-grande{width:100%;justify-content:center;padding:13px 18px;font-size:14.5px}
.btn:disabled{opacity:.45;cursor:default}
/* ---- campos ---- */
.etiqueta{display:block;font-size:12px;font-weight:500;color:var(--gris);margin:0 0 5px}
.campo{font:inherit;font-size:14.5px;width:100%;padding:10px 13px;border:1px solid #CFC6AE;border-radius:11px;background:#fff;color:var(--tinta)}
.campo:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--tile)}
textarea.campo{resize:vertical}
.campo-ojo{position:relative}
.campo-ojo .campo{padding-right:56px}
.ojo{position:absolute;right:13px;top:12px;font-size:12px;font-weight:600;color:var(--apagado);cursor:pointer;user-select:none}
.ojo:hover{color:var(--azul)}
/* ---- avisos y chips ---- */
.aviso{background:var(--beige);color:var(--tinta);font-size:13px;padding:10px 14px;border-radius:10px;margin-bottom:16px;line-height:1.5}
.aviso.error{background:var(--peligro-suave);color:var(--peligro)}
.chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--pildora);background:var(--tile);color:var(--marino);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.chip.admin{background:var(--marino);color:#fff}
.chip.baja{background:var(--peligro-suave);color:var(--peligro)}
.chip.pide{background:#FBF1DC;color:var(--aviso)}
/* ---- marca ---- */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca .simbolo{width:40px;height:40px;border-radius:50%;background:var(--crema);color:var(--azul);padding:4px;flex:none}
.marca .simbolo.azul{background:var(--azul);color:#fff}
.marca .logotipo{font-size:30px;font-weight:600;letter-spacing:-.5px;line-height:1}
.claim{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gris)}
/* ---- avatar (iniciales) ---- */
.avatar{width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* ---- páginas secundarias ---- */
.pagina{max-width:1000px;margin:0 auto;padding:0 5vw 60px}
.barra{position:sticky;top:0;z-index:10;background:rgba(255,251,241,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 16px;margin-bottom:20px;border-bottom:1px solid var(--borde)}
.barra h1{font-size:21px;font-weight:700}
.barra .sub{font-size:13.5px;color:var(--gris);margin-top:3px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px 24px;box-shadow:var(--sombra)}
.oculto,.hidden{display:none!important}