/* ══════════════════════════════════════════════════════════════════
   EASY OPTICS — Campaña Salud Visual
   Piel "clínica sobria", alineada con el Expediente Clínico.
   Reescrito el 3 sep 2026 (Entrega A del rediseño).

   Reglas del sistema, para que futuras adiciones no lo rompan:
     · Bordes de 1 px. Nunca 2 px salvo el subrayado de pestaña activa.
     · Sombra: solo var(--sh). Nunca sombras de 8 px o más, salvo
       modales y menús flotantes.
     · Pesos: 600 para lo importante, 500 para lo normal, 400 para
       texto corrido. Nunca 700 ni 800.
     · El color es acento, no fondo. Fondos: --bg y blanco.
     · Radio: var(--r) = 8 px. Tarjetas 10 px. Píldoras 999 px.

   Los nombres de token viejos (--pri, --pale, --acc, --bdr, --txt…)
   SE CONSERVAN a propósito: hay ~112 usos de var(--…) escritos en
   línea dentro de app.js e index.html. Redefinirlos aquí es lo que
   hace que toda la app cambie de piel sin tocar el JavaScript.
══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta nueva ── */
  --pri:        #1c5f77;   /* azul de marca, profundo y desaturado   */
  --pri-dark:   #144a5e;   /* estados :hover / :active                */
  --pri2:       #2a7d9b;   /* variante clara — foco de inputs         */
  --pale:       #eaf2f5;   /* fondo suave del acento                  */
  --acc:        #d2dbe0;   /* línea fuerte (bordes de input, reglas)  */

  --bg:         #fafbfc;
  --wh:         #ffffff;
  --card:       #ffffff;
  --bdr:        #d2dbe0;   /* borde de control                        */
  --bdr-soft:   #e5eaed;   /* borde de contenedor                     */
  --txt:        #16232a;
  --muted:      #647680;

  /* ── Semáforo (separado del acento, a propósito) ── */
  --ok:         #1f6b46;  --ok-soft:   #e9f3ed;  --ok-line:   #cfe4d8;
  --warn:       #8a5a12;  --warn-soft: #fbf3e4;  --warn-line: #ecdcb8;
  --danger:     #9c3a2c;  --danger-soft:#f9ece9; --danger-line:#eed3cd;
  --neutral:    #647680;  --neutral-soft:#f1f4f5;--neutral-line:#dfe5e8;

  --r:   8px;
  --r-card: 10px;
  --sh:  0 1px 2px rgba(22,35,42,.04), 0 1px 3px rgba(22,35,42,.03);
  --sh-float: 0 8px 28px rgba(22,35,42,.14);
  --ring: 0 0 0 3px rgba(28,95,119,.13);
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }

body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg); color:var(--txt); min-height:100vh;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}

::selection { background:var(--pale); color:var(--pri-dark) }
:focus-visible { outline:2px solid var(--pri2); outline-offset:2px }

/* ── SCREENS ── */
.scr{display:none;min-height:100vh;flex-direction:column}
.scr.on{display:flex}

/* ── HEADER ──
   Barra blanca con una línea abajo, como el expediente. El contenido
   manda; el cromo desaparece. */
.hdr{background:var(--wh);color:var(--txt);padding:0 16px;min-height:56px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--bdr-soft)}
.hdr h1{font-size:15px;font-weight:600;flex:1;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .back{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;
  padding:6px 10px 6px 0;line-height:1;font-family:inherit;transition:color .15s}
.hdr .back:hover{color:var(--txt)}
.hdr .badge{background:var(--pale);color:var(--pri-dark);border:1px solid var(--bdr-soft);
  border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;
  letter-spacing:0;text-transform:none;white-space:nowrap}
.hdr .ico-btn{background:none;border:none;color:var(--muted);cursor:pointer;
  padding:6px;line-height:0;border-radius:6px;display:flex;align-items:center;
  justify-content:center;transition:background .15s,color .15s}
.hdr .ico-btn:hover{background:var(--neutral-soft);color:var(--txt)}
.hdr .ico-btn svg{display:block}
/* Los botones de la barra de acción que solo llevan icono */
.btn > svg{display:block;flex:none}

/* ── CONTENT ── */
.cnt{flex:1;padding:16px;overflow-y:auto}

/* ── LOGIN ──
   Sin degradado: fondo sobrio y una tarjeta con borde de 1 px. */
.login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px;background:var(--bg);min-height:100vh}
/* El logotipo es un lockup horizontal de proporción ~10:1, así que va
   suelto y centrado, sin la caja cuadrada que tenía el símbolo anterior. */
.login-logo{width:100%;max-width:250px;margin:0 auto 24px;display:block}
.login-logo img{display:block;width:100%;height:auto}
.login-logo span{font-size:28px}
.login-title{color:var(--txt);font-size:19px;font-weight:600;text-align:center;
  margin-bottom:4px;letter-spacing:-.015em}
.login-sub{color:var(--muted);font-size:13px;text-align:center;margin-bottom:26px}
.login-card{background:var(--wh);border:1px solid var(--bdr-soft);border-radius:14px;
  padding:26px 24px;width:100%;max-width:380px;box-shadow:var(--sh)}
.login-card label{display:block;font-size:12px;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:0;margin-bottom:6px}
.login-card input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--bdr);
  border-radius:var(--r);font-size:16px;font-weight:500;letter-spacing:0;
  text-transform:none;text-align:left;margin-bottom:16px;outline:none;
  background:var(--wh);color:var(--txt);font-family:inherit;
  transition:border-color .15s,box-shadow .15s}
.login-card input[type=password]{border:1px solid var(--bdr);border-radius:var(--r);
  outline:none;background:var(--wh);color:var(--txt);
  transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.login-card input:focus{border-color:var(--pri);box-shadow:var(--ring)}
#login-err{color:var(--danger)}

.role-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 10px;
  border-radius:var(--r);border:1px solid var(--bdr);background:var(--wh);cursor:pointer;
  transition:border-color .15s,background .15s;font-family:inherit}
.role-btn:hover,.role-btn:focus{border-color:var(--pri);background:var(--pale)}
.role-btn .ri{display:none}
.role-btn .rl{font-size:13.5px;font-weight:600;color:var(--pri-dark)}
.role-btn .rs{font-size:12px;color:var(--muted);text-align:center;line-height:1.4}

/* ── TARJETA DE PACIENTE ──
   Franja de estado de 3 px en vez de borde grueso de color; el estado
   se lee por la franja y por la píldora, sin necesidad de icono. */
.pcard{background:var(--wh);border:1px solid var(--bdr-soft);border-radius:var(--r-card);
  padding:12px 14px;margin-bottom:8px;box-shadow:var(--sh);cursor:pointer;
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  transition:border-color .12s,background .12s}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--neutral-line)}
.pcard:hover{border-color:var(--bdr);background:#fcfdfd}
.pcard:active{background:var(--neutral-soft)}
.pcard.s-en_revision::before{background:var(--warn)}
.pcard.s-listo_vendedor::before{background:var(--pri)}
.pcard.s-completado::before{background:var(--ok)}
.pcard .ci{flex:1;min-width:0;padding-left:4px}
.pcard .cn{font-size:14.5px;font-weight:600;color:var(--txt);letter-spacing:-.005em}
.pcard .cm{font-size:12.5px;color:var(--muted);margin-top:1px}
.pcard .ca{color:var(--muted);font-size:17px;flex:none}

/* ── PÍLDORAS DE ESTADO ── */
.sbadge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:600;text-transform:none;letter-spacing:.02em;border:1px solid transparent}
.sb-en_revision{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.sb-listo_vendedor{background:var(--pale);color:var(--pri-dark);border-color:#cfe0e7}
.sb-completado{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}

/* ── FORMULARIOS ── */
.fsec{background:var(--wh);border:1px solid var(--bdr-soft);border-radius:var(--r-card);
  padding:18px 16px;margin-bottom:12px;box-shadow:var(--sh)}
.stitle{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.09em;padding-bottom:0;margin-bottom:14px;border-bottom:0}
.frow{display:grid;gap:10px;margin-bottom:10px}
.frow.c2{grid-template-columns:1fr 1fr}
.frow.c3{grid-template-columns:1fr 1fr 1fr}
.fg{display:flex;flex-direction:column;min-width:0}
.fg label{font-size:12px;font-weight:600;color:var(--muted);text-transform:none;
  letter-spacing:0;margin-bottom:5px}
.fg input,.fg textarea,.fg select{width:100%;min-width:0;padding:9px 11px;
  border:1px solid var(--bdr);border-radius:var(--r);font-size:14px;font-family:inherit;
  color:var(--txt);outline:none;background:var(--wh);
  transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--pri);box-shadow:var(--ring)}
.fg input::placeholder,.fg textarea::placeholder{color:#9aa8ae}
.fg textarea{resize:vertical;min-height:76px;line-height:1.55}

/* ── CASILLAS ──
   El cuadrito lo dibuja el CSS (.ci2), no un emoticono. El estado vive
   en la clase .on, que el JavaScript ya alterna en todos los casos. */
.cbg{display:flex;flex-wrap:wrap;gap:7px}
.cbi{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--bdr);
  border-radius:var(--r);cursor:pointer;font-size:12.5px;font-weight:500;
  transition:border-color .15s,background .15s,color .15s;background:var(--wh);
  color:var(--txt);user-select:none;line-height:1.35}
.cbi:hover{border-color:var(--pri2)}
.cbi input{display:none}
.cbi.on{border-color:var(--pri);background:var(--pale);color:var(--pri-dark);font-weight:600}
.cbi .ci2{font-size:0;flex:none;width:15px;height:15px;border:1px solid var(--bdr);
  border-radius:4px;background:var(--wh);display:inline-block;position:relative;
  transition:background .15s,border-color .15s}
.cbi.on .ci2{background:var(--pri);border-color:var(--pri)}
.cbi.on .ci2::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ── REJILLA DE LENTES ── */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.litem{padding:9px 6px;border:1px solid var(--bdr);border-radius:var(--r);text-align:center;
  font-size:11px;font-weight:500;cursor:pointer;background:var(--wh);color:var(--txt);
  user-select:none;line-height:1.3;transition:border-color .15s,background .15s,color .15s}
.litem:hover{border-color:var(--pri2)}
.litem.sel{border-color:var(--pri);background:var(--pale);color:var(--pri-dark);font-weight:600}

/* ── GRADUACIÓN EN PANTALLA ── */
.rxbox{background:var(--wh);border:1px solid var(--bdr-soft);border-radius:var(--r);
  padding:13px 14px;margin-bottom:8px}
.rxtitle{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:9px;
  text-transform:uppercase;letter-spacing:.09em}
.rxg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rxi{text-align:center}
.rxi .rxl{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em}
.rxi .rxv{font-size:16px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}

/* ── FILAS DE INFORMACIÓN ── */
.irow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--bdr-soft)}
.irow:last-child{border-bottom:none}
.il{font-size:12px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.iv{font-size:13.5px;font-weight:600;color:var(--txt);text-align:right}

/* ── BOTONES ── */
.btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;
  border-radius:var(--r);border:1px solid transparent;font-size:13.5px;font-weight:600;
  font-family:inherit;cursor:pointer;line-height:1.25;
  transition:background .15s,border-color .15s,color .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn-pri{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn-pri:hover{background:var(--pri-dark);border-color:var(--pri-dark)}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-ok:hover{background:#185536;border-color:#185536}
.btn-out{background:var(--wh);color:var(--pri-dark);border:1px solid var(--bdr)}
.btn-out:hover{background:var(--pale);border-color:var(--pri);color:var(--pri-dark)}
.btn-dark{background:var(--txt);color:#fff;border-color:var(--txt)}
.btn-dark:hover{background:#0d171c;border-color:#0d171c}
.btn-w{width:100%}
.btn-sm{padding:8px 13px;font-size:12.5px}

/* ── MARCA DE "ENVIADO" EN LA COLA DE ATENCIÓN OFTALMOLÓGICA ──
   Antes el símbolo era la etiqueta del botón; ahora la dibuja el CSS. */
.aop-dot{width:34px;height:34px;border-radius:50%;border:1px solid var(--bdr);
  background:var(--wh);cursor:pointer;position:relative;flex-shrink:0;padding:0;
  transition:background .15s,border-color .15s}
.aop-dot:hover{border-color:var(--pri2)}
.aop-dot.on{background:var(--ok);border-color:var(--ok)}
.aop-dot.on::after{content:"";position:absolute;left:12.5px;top:9px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ── BOTÓN FLOTANTE ── */
.fab{position:fixed;bottom:22px;right:18px;width:52px;height:52px;border-radius:50%;
  background:var(--pri);color:#fff;border:none;font-size:24px;cursor:pointer;
  box-shadow:0 4px 14px rgba(20,74,94,.28);display:flex;align-items:center;
  justify-content:center;transition:background .15s,transform .12s;z-index:90}
.fab:hover{background:var(--pri-dark)}
.fab:active{transform:scale(.94)}

/* ── BARRA DE ACCIÓN ── */
.abar{position:sticky;bottom:0;background:var(--wh);padding:11px 16px;
  border-top:1px solid var(--bdr-soft);display:flex;gap:8px;z-index:80}

/* ── ESTADO VACÍO ──
   Sin icono gigante: una línea de título y una de explicación. */
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty .ei{display:none}
.empty h3{font-size:15px;font-weight:600;margin-bottom:5px;color:var(--txt)}
.empty p{font-size:13px;line-height:1.55;max-width:36ch;margin:0 auto}

/* ── AVISOS ── */
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-14px);
  background:var(--txt);color:#fff;padding:11px 16px;border-radius:var(--r);font-size:13.5px;
  font-weight:500;opacity:0;transition:opacity .22s,transform .22s;z-index:1000;
  max-width:calc(100vw - 32px);text-align:center;pointer-events:none;
  box-shadow:var(--sh-float);border-left:3px solid transparent}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.t-ok{border-left-color:#4fbf87}
.toast.t-err{border-left-color:#e08272}
.toast.t-warn{border-left-color:#d9a441}

/* ── CARGANDO ── */
.loader{position:fixed;inset:0;background:rgba(250,251,252,.86);display:none;
  align-items:center;justify-content:center;z-index:500;flex-direction:column;gap:12px}
.loader.on{display:flex}
.spin{width:32px;height:32px;border:2.5px solid var(--acc);border-top-color:var(--pri);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── ETIQUETAS DE SECCIÓN ── */
.slabel{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.09em;margin:16px 0 8px}

.sp80{height:80px}

/* ── SELECT DE PRECIO ── */
.psel{width:100%;padding:9px 11px;border:1px solid var(--bdr);border-radius:var(--r);
  font-size:14px;font-family:inherit;color:var(--txt);background-color:var(--wh);outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23647680' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
  transition:border-color .15s,box-shadow .15s}
.psel:focus{border-color:var(--pri);box-shadow:var(--ring)}
.psel optgroup{font-weight:600;color:var(--muted);font-size:12px}
.psel option{font-weight:400;padding:4px 0;color:var(--txt)}

/* ── DESGLOSE DE PRECIO ── */
.pbrk{background:var(--wh);border:1px solid var(--bdr-soft);border-radius:var(--r);
  padding:13px 14px;margin-top:10px;margin-bottom:2px}
.pbrk .pb-row{display:flex;justify-content:space-between;align-items:center;
  padding:3px 0;font-size:12.5px;color:var(--muted)}
.pbrk .pb-row.tot{border-top:1px solid var(--acc);margin-top:7px;padding-top:9px;
  font-size:14px;font-weight:600;color:var(--txt)}
.pbrk .pb-val{font-weight:600;color:var(--txt);font-size:12.5px;font-variant-numeric:tabular-nums}
.pbrk .pb-row.tot .pb-val{font-size:16px;color:var(--pri-dark)}

/* ══════════════════════════════════════════
   PRINT STYLES  — no tocar: de aquí salen los
   tickets térmicos y las hojas impresas.
══════════════════════════════════════════ */
@media print {
  body > *:not(#prt){display:none !important}
  #prt{display:block !important}
  .ppage{page-break-after:always;padding:16px 20px;font-family:Arial,sans-serif}
  .ppage:last-child{page-break-after:avoid}
}
#prt{display:none}

/* ── ESTADO DE GARANTÍAS ── */
.gs-solicitada{color:var(--warn);background:var(--warn-soft)}
.gs-en_proceso{color:var(--pri-dark);background:var(--pale)}
.gs-completada{color:var(--ok);background:var(--ok-soft)}
.gs-no_procede{color:var(--neutral);background:var(--neutral-soft)}
.gar-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:600;text-transform:none;letter-spacing:.02em;border:1px solid rgba(0,0,0,.06)}

/* ── TIRA DE INDICADORES ── */
.kpi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:14px;
  background:var(--bdr-soft);border:1px solid var(--bdr-soft);border-radius:var(--r-card);
  overflow:hidden}
.kpi-card{background:var(--wh);border-radius:0;padding:14px 8px;text-align:center;box-shadow:none}
.kpi-num{font-size:23px;font-weight:600;color:var(--pri-dark);line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi-lbl{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:5px;
  text-transform:uppercase;letter-spacing:.07em}

/* ── VISTA GLOBAL "PACIENTES" (director) ── */
.dir-filters .frow{margin-bottom:8px}
#dir-modal-overlay{display:none;position:fixed;inset:0;background:rgba(22,35,42,.42);z-index:998}
#dir-modal-overlay.open{display:block}
#dir-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:999;background:var(--wh);border:1px solid var(--bdr-soft);border-radius:14px;
  padding:22px;width:88%;max-width:340px;box-shadow:var(--sh-float)}
#dir-modal.open{display:block}
#dir-modal .dm-name{font-size:15.5px;font-weight:600;color:var(--txt);margin-bottom:2px}
#dir-modal .dm-sub{font-size:12.5px;color:var(--muted);margin-bottom:16px}

/* ── MODAL GENÉRICO DE TEXTO (reemplaza prompt() nativo) ── */
#txt-modal-overlay{display:none;position:fixed;inset:0;background:rgba(22,35,42,.42);z-index:1000}
#txt-modal-overlay.open{display:block}
#txt-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1001;background:var(--wh);border:1px solid var(--bdr-soft);border-radius:14px;
  padding:22px;width:88%;max-width:360px;box-shadow:var(--sh-float)}
#txt-modal.open{display:block}
#txt-modal .tm-title{font-size:15.5px;font-weight:600;color:var(--txt);margin-bottom:2px}
#txt-modal .tm-sub{font-size:12.5px;color:var(--muted);margin-bottom:14px}
#txt-modal input{width:100%;padding:10px 12px;border:1px solid var(--bdr);border-radius:var(--r);
  font-size:15px;font-weight:500;margin-bottom:16px;outline:none;font-family:inherit;
  color:var(--txt);background:var(--wh);transition:border-color .15s,box-shadow .15s}
#txt-modal input:focus{border-color:var(--pri);box-shadow:var(--ring)}
#txt-modal .tm-btns{display:flex;gap:8px}
#txt-modal .tm-btns button{flex:1}

/* ── PANEL DE ADMINISTRACIÓN ── */
.atab{display:flex;gap:8px;margin-bottom:12px}
.atab button{flex:1}
.arow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:11px 0;
  border-bottom:1px solid var(--bdr-soft)}
.arow:last-child{border-bottom:none}
.arow .al{flex:1 1 140px;min-width:0}
.arow .al .an{font-weight:600;font-size:14px;color:var(--txt)}
.arow .al .as{font-size:12px;color:var(--muted);margin-top:1px}
.arow .ap-input{width:88px;padding:8px 9px;border:1px solid var(--bdr);border-radius:var(--r);
  font-size:14px;font-weight:600;text-align:right;font-family:inherit;color:var(--txt);
  background:var(--wh);outline:none;font-variant-numeric:tabular-nums;
  transition:border-color .15s,box-shadow .15s}
.arow .ap-input:focus{border-color:var(--pri);box-shadow:var(--ring)}
.arow select{padding:8px 9px;border:1px solid var(--bdr);border-radius:var(--r);font-size:12.5px;
  font-weight:500;font-family:inherit;background:var(--wh);color:var(--txt);outline:none}
.agrp{font-weight:700;font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.09em;margin:16px 0 6px}
.agrp:first-child{margin-top:0}
.achk{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  color:var(--muted);cursor:pointer;user-select:none}

/* ── MENÚ DE CAMBIO DE VISTA ── */
#sw-overlay{display:none;position:fixed;inset:0;z-index:998}
#sw-overlay.open{display:block}
#switch-menu{display:none;position:fixed;top:52px;left:12px;z-index:999;background:var(--wh);
  border:1px solid var(--bdr-soft);border-radius:12px;box-shadow:var(--sh-float);
  overflow:hidden;min-width:220px}
#switch-menu.open{display:block}
.sw-hdr{padding:12px 18px 9px;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--bdr-soft)}
.sw-item{display:flex;align-items:center;gap:0;padding:12px 18px;cursor:pointer;border:none;
  background:none;width:100%;font-family:inherit;font-size:14px;font-weight:500;
  color:var(--txt);text-align:left;transition:background .15s}
.sw-item:hover,.sw-item:focus{background:var(--pale);color:var(--pri-dark)}
.sw-item .sw-ico{display:none}
.sw-item.sw-out{color:var(--danger)}
.sw-item.sw-out:hover{background:var(--danger-soft)}

/* ── PANTALLAS CHICAS ──
   El archivo no tenía ninguna media query de pantalla; estas evitan
   que las filas de 3 columnas y la barra superior se aprieten. */
@media (max-width:420px){
  .cnt{padding:12px}
  .hdr{padding:0 12px;gap:8px}
  .hdr h1{font-size:14px}
  .fsec{padding:15px 13px}
  .frow.c3{gap:7px}
  /* 16 px evita que iOS haga zoom automático al enfocar un campo. */
  .fg input,.fg textarea,.fg select{padding:9px 9px;font-size:16px}
  .login-card input,#txt-modal input,.arow .ap-input{font-size:16px}
  .lgrid{gap:6px}
  .litem{font-size:10.5px;padding:8px 4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}