/* ============================================================
   IEAD Credenciales — Sistema de diseño del panel
   Portado 1:1 del prototipo aprobado (.claude/prototipo/index.html).
   Las clases conservan el nombre del prototipo para que el panel
   se vea EXACTAMENTE igual. Se renderiza en plantilla full-page
   propia (templates/panel-app.php), sin chrome del tema.
   ============================================================ */

/* ---- TOKENS ---- */
:root{
  --f-ui:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-cond:"Barlow Condensed","Barlow",ui-sans-serif,system-ui,sans-serif;
  --bg:#fff; --surface:#fff; --soft:#f4f3f1; --soft2:#eceae7;
  --text:#1c1917; --muted:#6b6560; --faint:#94908a; --border:#e6e4e1; --border2:#d8d5d1;
  --ink:#1c1917; --ink-deep:#000;
  --brand:#1473a3; --brand-hover:#105f87; --brand-deep:#155d83; --brand-soft:#e7f1f7;
  --teal:#9cd9d9; --teal-soft:#e4f4f4; --teal-ink:#0f4f50;
  --ok:#15803d; --ok-soft:#ecfdf3; --warn:#b45309; --warn-soft:#fef6e7; --danger:#b91c1c; --danger-soft:#fef2f2;
  /* Amarillo "semáforo" clásico, más franco/vívido que --warn (que es un
     ámbar oscuro/marrón, muy cerca en tono de --danger y poco distinguible
     a simple vista en textos/iconos chicos). */
  --yellow:#a16207; --yellow-soft:#fef3c7;
  --hero:#1c1917; --hero-ink:#fff; --hero-muted:rgba(255,255,255,.62); --hero-border:rgba(255,255,255,.12);
  --r1:8px; --r2:12px; --r3:16px; --pill:999px;
  --sh1:0 1px 2px rgba(28,25,23,.06),0 2px 8px rgba(28,25,23,.05);
  --sh2:0 12px 32px rgba(28,25,23,.14);
  --ease:cubic-bezier(.4,0,.2,1);
  --side-w:248px;
}

/* ---- Reset acotado al panel ---- */
.iead-rc-body{margin:0;padding:0;background:var(--soft);font-family:var(--f-ui);color:var(--text);-webkit-font-smoothing:antialiased}
.iead-rc-body *{box-sizing:border-box}
.iead-rc-body img{max-width:100%}

/* ============================================================
   APP SHELL
   ============================================================ */
/* 100vh en mobile mide el viewport CON la barra de direcciones visible; esa
   barra aparece/desaparece al scrollear, así que 100vh cambia de valor en
   vivo y todo lo que dependa de esa altura (acá, dónde termina .scroll y por
   lo tanto dónde "descansa" .actionbar con margin-top:auto) se corre —
   se ve fijo en desktop pero salta en el celular real. 100dvh (dynamic
   viewport height) se recalcula con la barra ya resuelta; en navegadores que
   no lo soportan, la línea es inválida y el 100vh de arriba sigue rigiendo. */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;height:100vh;height:100dvh;background:var(--soft);overflow:hidden}
.app.no-shell{display:block;height:100vh;height:100dvh;overflow:auto}

/* ---- Sidebar ---- */
.side{background:var(--hero);color:var(--hero-ink);display:flex;flex-direction:column;padding:14px 12px;transition:padding .2s}
.side__brand{display:flex;align-items:center;gap:8px;padding:4px 6px 16px;margin-bottom:10px;border-bottom:1px solid var(--hero-border);min-height:46px}
.side__logo{height:26px;color:#fff;flex:1;min-width:0;display:flex;align-items:center}
.side__logo svg{height:100%;width:auto;max-width:100%}
.side__sym{width:28px;height:30px;color:#fff;flex:0 0 auto;display:none}
.side__collapse{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;flex:0 0 auto}
.side__collapse:hover{background:rgba(255,255,255,.08);color:#fff}
.side__collapse svg{width:18px;height:18px}
.side__close{display:none;place-items:center;width:34px;height:34px;border-radius:9px;border:0;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;flex:0 0 auto;margin-left:auto}
.side__close:hover{background:rgba(255,255,255,.12);color:#fff}
.side__close svg{width:18px;height:18px}
.side__nav{display:flex;flex-direction:column;gap:1px;flex:1}
.side__lbl{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.38);padding:14px 12px 6px}
.side__link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--hero-muted);
  text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;border:0;background:transparent;width:100%;text-align:left;position:relative}
.side__link:hover{background:rgba(255,255,255,.05);color:#fff}
.side__link.is-active{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.side__link.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--brand)}
.side__link svg{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.side__link .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
.side__foot{border-top:1px solid var(--hero-border);padding-top:10px;margin-top:6px;position:relative}
.side__user{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;color:#fff;padding:8px;border-radius:9px;cursor:pointer;text-align:left}
.side__user:hover{background:rgba(255,255,255,.05)}
.side__av{width:32px;height:32px;border-radius:50%;background:var(--teal);color:var(--teal-ink);display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.side__un{font-size:13px;font-weight:600;line-height:1.25;min-width:0}
.side__un small{display:block;font-weight:500;font-size:11px;opacity:.55}
.side__user>svg{width:16px;height:16px;margin-left:auto;opacity:.5;transition:transform .2s}
.side__foot.is-open .side__user>svg{transform:rotate(180deg)}

/* menú de cuenta (popover, estilo app) */
.umenu{position:absolute;left:6px;right:6px;bottom:62px;background:#fff;color:var(--text);border-radius:12px;
  box-shadow:var(--sh2);padding:6px;z-index:40;display:none}
.umenu.is-open{display:block}
.umenu__row{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;text-align:left;
  font-family:var(--f-ui);font-size:13.5px;font-weight:500;color:var(--text);padding:10px 11px;border-radius:8px;cursor:pointer;text-decoration:none}
.umenu__row:hover{background:var(--soft2)}
.umenu__row svg{width:17px;height:17px;color:var(--muted)}
.umenu__row.danger{color:var(--danger)} .umenu__row.danger svg{color:var(--danger)}
.umenu__hd{display:flex;align-items:center;gap:10px;padding:9px 11px 6px}
.umenu__hd b{font-size:13.5px;font-weight:600;line-height:1.2;display:block}
.umenu__hd small{font-size:11.5px;color:var(--muted)}
.umenu hr{border:0;border-top:1px solid var(--border);margin:5px 4px}
.umenu-catch{position:fixed;inset:0;z-index:39}

/* botón colapsar: muestra "cerrar panel" expandido, "abrir panel" colapsado */
.side__collapse-open{display:none}

/* ---- estado COLAPSADO (solo escritorio) ---- */
@media (min-width:861px){
  .app.is-collapsed{grid-template-columns:74px 1fr}
  .is-collapsed .side{padding:14px 10px;align-items:stretch}
  .is-collapsed .side__logo{display:none}
  .is-collapsed .side__brand{justify-content:center;gap:0;padding:4px 0 14px;min-height:40px}
  .is-collapsed .side__sym{display:block;margin:0 auto}
  .is-collapsed .side__collapse{display:none;margin:0 auto}
  .is-collapsed .side__collapse-close{display:none}
  .is-collapsed .side__collapse-open{display:inline-flex}
  .is-collapsed .side__brand:hover .side__sym,.is-collapsed .side__brand:focus-within .side__sym{display:none}
  .is-collapsed .side__brand:hover .side__collapse,.is-collapsed .side__brand:focus-within .side__collapse{display:inline-grid}
  .is-collapsed .side__link{justify-content:center;gap:0;padding:11px 0}
  .is-collapsed .side__link span,.is-collapsed .side__link .badge{display:none}
  .is-collapsed .side__lbl{text-align:center;font-size:0;padding:12px 0 4px}
  .is-collapsed .side__lbl::after{content:"•••";font-size:10px;letter-spacing:.1em}
  .is-collapsed .side__user{justify-content:center;padding:8px 0}
  .is-collapsed .side__un,.is-collapsed .side__user>svg{display:none}
  .is-collapsed .umenu{left:calc(100% + 8px);right:auto;bottom:8px;width:218px;z-index:95}
}

/* ---- Main ---- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--soft);position:relative}
.topbar{display:flex;align-items:center;gap:12px;height:54px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);flex:0 0 auto}
.topbar .topbar__burger{display:none}
.topbar__crumb{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;min-width:0}
.topbar__crumb b{color:var(--text);font-weight:600}
.topbar__crumb svg{width:14px;height:14px;opacity:.4}
.topbar__sp{flex:1}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:transparent;border-radius:10px;color:var(--muted);cursor:pointer;position:relative;flex:0 0 auto;text-decoration:none}
.iconbtn:hover{background:var(--soft2);color:var(--text)}
.iconbtn svg{width:19px;height:19px}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}

/* display:flex column: permite que .actionbar use margin-top:auto y quede
   siempre pegada abajo del viewport aunque el contenido de la pestaña activa
   sea corto (con position:sticky solo alcanza cuando hay scroll real — en
   una pestaña con pocos campos, sin nada para scrollear, la barra quedaba
   pegada justo debajo del contenido en vez de fija abajo del todo). Páginas
   sin actionbar no cambian: los hijos siguen apilados igual que con block. */
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;display:flex;flex-direction:column}
/* Bug real que rompió TODAS las pantallas (listado, ficha, editar) apenas se
   agregó el flex de arriba: un flex item con margin-inline:auto en el eje
   transversal (acá, el ancho, porque el flex es column) hace que el navegador
   IGNORE el align-items:stretch por defecto y en cambio encoja el elemento a
   su contenido para centrarlo con esos márgenes — .phead y .wrap, que ya
   usaban margin-inline:auto para su propio centrado bajo max-width, quedaban
   angostos y centrados como una caja chica en vez de ocupar todo el ancho.
   width:100% explícito saca el ancho del modo "auto" y desactiva ese
   comportamiento, sin cambiar nada más (max-width sigue limitando igual). */
.scroll>*{width:100%}
.wrap{padding:24px 28px 40px;max-width:980px;margin-inline:auto}
.wrap--wide{max-width:1100px}

/* ---- Page header ---- */
.phead{position:relative;background:var(--soft);padding:18px 28px 6px;max-width:980px;margin-inline:auto}
.phead--wide{max-width:1100px}
.phead__row{display:flex;align-items:flex-start;gap:12px 16px;flex-wrap:wrap}
.phead__back{margin-top:3px;flex:0 0 auto}
.phead__main{min-width:min(100%,240px);flex:1 1 240px}
.eyebrow{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:600;color:var(--brand-deep);margin:0 0 3px}
.h1{font-family:var(--f-cond);font-size:clamp(23px,4vw,28px);line-height:1.08;font-weight:700;margin:0;letter-spacing:.005em;text-wrap:balance}
.sub{font-size:14px;color:var(--muted);margin:5px 0 0;line-height:1.45;max-width:64ch}
.phead__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap}
.is-mobile .phead__actions{flex-basis:100%;margin-top:2px}
.is-mobile .phead__actions .btn{flex:1 1 auto;justify-content:center}

/* ---- Typography helpers ---- */
.h2{font-family:var(--f-cond);font-size:18px;font-weight:600;margin:0;letter-spacing:.01em}
.section{margin-top:30px}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.section__head .link{font-size:13px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.sechint{font-size:12.5px;color:var(--muted);margin:0 0 12px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--pill);border:1px solid transparent;
  font-family:var(--f-ui);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  padding:10px 16px;font-size:14px;background:var(--surface);color:var(--text);border-color:var(--border2)}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:hover{background:var(--soft2)}
.btn--brand{background:var(--brand);color:#fff;border-color:transparent}
.btn--brand:hover{background:var(--brand-hover)}
.btn--dark{background:var(--ink);color:#fff;border-color:transparent}
.btn--dark:hover{background:var(--ink-deep)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--text)}
.btn--ghost:hover{background:var(--soft2)}
.btn--sm{padding:7px 12px;font-size:13px}
.btn--lg{padding:13px 22px;font-size:15px}
.btn--block{width:100%}
.btn--danger{color:var(--danger);border-color:transparent;background:transparent}
.btn--danger:hover{background:var(--danger-soft)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn.is-loading{opacity:.7;pointer-events:none;position:relative}
.btn.is-loading svg{visibility:hidden}
.btn.is-loading::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:iead-rc-spin .7s linear infinite}
@keyframes iead-rc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation-duration:1.6s}}

/* ---- Text link ---- */
.link{color:var(--brand-deep);text-decoration:none;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:0;border:0;font-family:inherit;font-size:inherit;padding:0}
.link:hover{color:var(--brand-hover);text-decoration:underline}
.link svg{width:15px;height:15px}

/* icon-only button (acciones por fila) */
.ib{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;text-decoration:none}
.ib:hover{border-color:var(--border2);color:var(--text);background:var(--soft)}
.ib svg{width:17px;height:17px}

/* ---- Foco visible por teclado (consistente en toda la app) ---- */
.btn:focus-visible,.ib:focus-visible,.link:focus-visible,.iconbtn:focus-visible,
.side__link:focus-visible,.side__user:focus-visible,.fch:focus-visible,
.st:focus-visible,.credflip__inner:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}

/* ---- Status chips ---- */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st--ok{color:var(--ok)} .st--warn{color:var(--warn)} .st--danger{color:var(--danger)} .st--info{color:var(--brand-deep)} .st--off{color:var(--faint)}

/* ============================================================
   DASHBOARD
   ============================================================ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpis--3{grid-template-columns:repeat(3,1fr)}
.kpi{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px;text-decoration:none;color:inherit}
.kpi__top{display:flex;align-items:center;gap:9px;color:var(--muted)}
.kpi__top svg{width:17px;height:17px}
.kpi__top span{font-size:12.5px;font-weight:600;letter-spacing:.01em}
.kpi__n{font-family:var(--f-cond);font-size:36px;font-weight:700;line-height:1;margin:10px 0 0}
.kpi__d{font-size:12px;margin-top:6px;display:flex;align-items:center;gap:5px}
.kpi__d svg{width:13px;height:13px}
.kpi--alert .kpi__n{color:var(--danger)}
.kpi--warn .kpi__n{color:var(--warn)}
/* Variantes "semáforo": tarjetas de ciclo de entrega pendiente en el
   Tablero. Un texto/ícono de línea fina en color, sobre fondo blanco, se
   nota poco (bajo contraste real) — en vez de eso el ícono va en una
   "chapita" de fondo sólido (mismo patrón que .feed__ic), que es lo que
   realmente salta a la vista. El link de abajo toma el mismo color que la
   tarjeta en vez de quedar siempre azul, así cada tarjeta es un solo color
   de punta a punta y no una mezcla de 4 tonos distintos. */
.kpi--danger .kpi__top,.kpi--yellow .kpi__top,.kpi--ok .kpi__top{color:var(--text);font-weight:600}
.kpi--danger .kpi__top svg,.kpi--yellow .kpi__top svg,.kpi--ok .kpi__top svg{
  width:26px;height:26px;padding:5px;border-radius:8px;box-sizing:border-box}
.kpi--danger .kpi__top svg{background:var(--danger-soft);color:var(--danger)}
.kpi--yellow .kpi__top svg{background:var(--yellow-soft);color:var(--yellow)}
.kpi--ok .kpi__top svg{background:var(--ok-soft);color:var(--ok)}
.kpi--danger .kpi__n{color:var(--danger)}
.kpi--yellow .kpi__n{color:var(--yellow)}
.kpi--ok .kpi__n{color:var(--ok)}
.kpi--link{transition:border-color .15s,box-shadow .15s}
.kpi--link:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.kpi--link .kpi__d{color:var(--brand)}
.kpi--danger .kpi__d{color:var(--danger)}
.kpi--yellow .kpi__d{color:var(--yellow)}
.kpi--ok .kpi__d{color:var(--ok)}

.dgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:24px;align-items:stretch}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2)}
.card__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)}
.card__h h3{font-family:var(--f-cond);font-size:16px;font-weight:600;margin:0}
.card__b{padding:16px 18px}
/* Las 2 tarjetas del dgrid (barras/donut) deben quedar de igual altura en
   escritorio/tablet — antes cada .card medía solo su propio contenido
   (align-items:start) y el donut, más corto, se veía más bajo que las barras. */
.dgrid .card{display:flex;flex-direction:column}
.dgrid .card__b{flex:1;display:flex;flex-direction:column;justify-content:center}

/* bar chart */
.bars{display:flex;align-items:flex-end;gap:14px;height:150px;padding-top:8px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar__col{width:100%;max-width:46px;border-radius:7px 7px 0 0;background:var(--brand);position:relative;transition:.3s}
.bar__v{font-size:12px;font-weight:700;font-family:var(--f-cond)}
.bar__x{font-size:11px;color:var(--muted)}
.bar--warn .bar__col{background:#e6a23c}
.bar--danger .bar__col{background:var(--danger)}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:18px}
.donut{width:120px;height:120px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--ok) 0 76%,var(--warn) 76% 90%,var(--danger) 90% 100%);
  display:grid;place-items:center;position:relative}
.donut::after{content:"";width:78px;height:78px;border-radius:50%;background:var(--surface)}
.donut__c{position:absolute;text-align:center}
.donut__c b{font-family:var(--f-cond);font-size:26px;display:block;line-height:1}
.donut__c span{font-size:11px;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:9px;font-size:13px}
.legend .st{font-weight:600}
.legend i{margin-left:auto;font-style:normal;font-family:var(--f-cond);font-size:15px}

/* activity / checklist list (genérico: también lo usa "Antes de emitir",
   sin padding horizontal propio — se apoya en el padding del contenedor). */
.feed{display:flex;flex-direction:column}
.feed__i{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.feed__i:first-child{border-top:0}

/* Lista de notificaciones del drawer: mismo modelo de caja que .tbl/.row —
   el contenedor (.drawer__b) no tiene padding horizontal propio y cada fila
   trae el suyo (18px), así el hover llega al borde real del panel. La
   sección "Requiere tu atención" del Tablero ya NO usa .feed — reutiliza
   directamente .tbl/.row (ver iead_rc_render_route_dashboard), la misma
   lista que "Editados recientemente", para no reinventar su comportamiento. */
.feed--notif .feed__i{padding:12px 18px}
.feed--notif a.feed__i{text-decoration:none;color:inherit;cursor:pointer;transition:background .12s var(--ease)}
.feed--notif a.feed__i:hover{background:var(--soft)}
.feed__ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--soft2);color:var(--muted)}
.feed__ic svg{width:17px;height:17px}
.feed__ic.is-warn{background:var(--warn-soft);color:var(--warn)}
.feed__ic.is-danger{background:var(--danger-soft);color:var(--danger)}
.feed__ic.is-ok{background:var(--ok-soft);color:var(--ok)}
.feed__ic.is-info{background:var(--brand-soft);color:var(--brand-deep)}
.feed__ic.is-yellow{background:var(--yellow-soft);color:var(--yellow)}
.feed__t{font-size:13.5px;line-height:1.4}
.feed__t b{font-weight:600}
.feed__m{font-size:12px;color:var(--faint);margin-top:2px}

/* ============================================================
   PERSONAS — buscador + lista
   ============================================================ */
.searchbar-wrap{position:relative}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--pill);padding:11px 16px}

/* ---- Desplegable del buscador predictivo (hasta 3 sugerencias) ---- */
.searchbar__suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--r2);box-shadow:var(--sh2, 0 12px 28px rgba(0,0,0,.14));overflow:hidden}
.searchbar__suggest__item{display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border)}
.searchbar__suggest__item:last-child{border-bottom:0}
.searchbar__suggest__item:hover,.searchbar__suggest__item.is-active{background:var(--soft2)}
.searchbar__suggest__av{width:30px;height:30px;border-radius:50%;background:var(--soft2);color:var(--muted);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto;overflow:hidden}
.searchbar__suggest__av img{width:100%;height:100%;object-fit:cover}
.searchbar__suggest__n{font-size:13.5px;font-weight:600;color:var(--text)}
.searchbar__suggest__m{font-size:11.5px;color:var(--muted)}
.searchbar__suggest__empty{padding:12px 14px;font-size:12.5px;color:var(--muted)}
.searchbar svg{width:18px;height:18px;color:var(--faint);flex:0 0 auto}

/* ---- Combobox "buscador" de cascada geográfica (nacionalidad/provincia/localidad) ----
   Input de texto normal (sin flecha nativa de <select> ni popup de <datalist>)
   con lista desplegable propia, scroll interno sutil cuando hay muchas
   coincidencias. El texto libre siempre queda permitido: esto solo sugiere. */
.geocombo{position:relative}
.geocombo__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--r2);box-shadow:var(--sh2, 0 12px 28px rgba(0,0,0,.14));
  max-height:230px;overflow-y:auto;scrollbar-width:thin}
.geocombo__list::-webkit-scrollbar{width:6px}
.geocombo__list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
.geocombo__opt{padding:9px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border)}
.geocombo__opt:last-child{border-bottom:0}
.geocombo__opt:hover,.geocombo__opt.is-active{background:var(--soft2)}
.searchbar input{border:0;outline:0;flex:1;font-family:var(--f-ui);font-size:15px;background:transparent;color:var(--text)}
.filters{display:flex;gap:8px;margin-top:14px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.fch{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:var(--pill);cursor:pointer;text-decoration:none}
.fch svg{width:14px;height:14px;flex:0 0 auto}
.fch.is-on{background:var(--ink);color:#fff;border-color:transparent}
/* Filtros de ciclo de entrega pendiente: mismo lenguaje "semáforo" (rojo/
   amarillo/verde) que las tarjetas del Tablero.
   Fondo sólido (soft) en vez de solo texto + borde tenue: un chip de texto
   fino en color no se distingue bien del resto — un relleno de color sí. */
.fch--danger{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.fch--yellow{color:var(--yellow);background:var(--yellow-soft);border-color:transparent}
.fch--ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.fch--danger.is-on,.fch--yellow.is-on,.fch--ok.is-on{background:var(--ink);color:#fff;border-color:transparent}

.tbl{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--border);cursor:pointer;text-decoration:none;color:inherit}
.row:first-child{border-top:0}
.row:hover{background:var(--soft)}
/* Fondo de fila según etapa de ciclo de entrega pendiente (reemplaza al
   punto de color que se confundía con el del chip Vigente/Vencida). */
.row--danger{background:var(--danger-soft)}
.row--yellow{background:var(--yellow-soft)}
.row--ok{background:var(--ok-soft)}
.row--danger:hover{background:#fde4e4}
.row--yellow:hover{background:#fde9a8}
.row--ok:hover{background:#d9f5e3}
.row__av{width:42px;height:42px;border-radius:10px;flex:0 0 auto;background:var(--soft2);display:grid;place-items:center;color:var(--faint);font-weight:700;font-family:var(--f-cond);font-size:16px;overflow:hidden}
.row__av svg{width:20px;height:20px}
.row__av img{width:100%;height:100%;object-fit:cover}
.row__main{min-width:0;flex:1}
.row__n{font-size:15px;font-weight:600;line-height:1.2}
.row__meta{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.row__meta span{display:inline-flex;align-items:center;gap:4px}
.row__meta svg{width:12px;height:12px;opacity:.6}
.row__st{flex:0 0 auto;text-align:right}
.row__st .when{font-size:11.5px;color:var(--faint);margin-top:3px}
.row__st-line{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.row__go{flex:0 0 auto;color:var(--faint)}
.row__go svg{width:18px;height:18px}
.listhead{display:flex;align-items:center;justify-content:space-between;margin:22px 0 0;font-size:12.5px;color:var(--muted)}

/* ---- Paginación (sutil, arriba y abajo del listado) ---- */
.pager{display:flex;align-items:center;gap:10px}
.pager__nav{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--muted);text-decoration:none}
.pager__nav:hover{background:var(--soft2);color:var(--text)}
.pager__nav svg{width:14px;height:14px}
.pager__nav.is-disabled{opacity:.3;pointer-events:none}
.pager__info{font-size:12px;color:var(--muted);white-space:nowrap}
.tbl + .pager{justify-content:center;margin-top:16px}

/* ============================================================
   FICHA DE PERSONA — key/value
   ============================================================ */
.profile{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
/* Los hijos de un grid tienen min-width:auto por defecto: si algo adentro
   (ej. la vista previa de la credencial) tiene un ancho de contenido mayor
   al viewport, la fila entera se desborda aunque .profile ya haya colapsado
   a una sola columna en mobile — el bug clásico de "grid no responsive". */
.profile>*{min-width:0}
.idblock{display:flex;gap:18px;align-items:center;margin-bottom:6px}
.idphoto{width:92px;height:110px;border-radius:12px;background:var(--soft2);flex:0 0 auto;display:grid;place-items:center;color:var(--faint);overflow:hidden;border:1px solid var(--border)}
.idphoto svg{width:34px;height:34px}
.idphoto img{width:100%;height:100%;object-fit:cover}
.idmeta .name{font-family:var(--f-cond);font-size:26px;font-weight:700;line-height:1.05}
.idmeta .role{font-size:14px;color:var(--muted);margin-top:3px}
.idmeta .sts{margin-top:9px;display:flex;gap:14px;align-items:center}

.dl{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;margin-top:8px}
.dl--1{grid-template-columns:1fr}
.dli{padding:11px 0;border-top:1px solid var(--border)}
.dli dt{font-size:11.5px;color:var(--faint);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.dli dt svg{width:13px;height:13px}
.dli dd{margin:0;font-size:14.5px;font-weight:500}
.locked{filter:blur(5px);user-select:none;transition:filter .15s var(--ease)}
.section.is-revealed .locked{filter:none;user-select:auto}

.sidecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px;position:sticky;top:14px}

/* ---- Credencial realista ---- */
.cred{aspect-ratio:1011/638;background:linear-gradient(135deg,#1d6c98,#0f4a69);border-radius:12px;color:#fff;padding:13px 15px;position:relative;overflow:hidden;box-shadow:var(--sh1)}
.cred::after{content:"";position:absolute;right:-30px;bottom:-40px;width:170px;height:170px;opacity:.08;
  background:currentColor;-webkit-mask:var(--sym-mask) center/contain no-repeat;mask:var(--sym-mask) center/contain no-repeat}
.cred__h{display:flex;align-items:center;gap:7px;font-family:var(--f-cond);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.cred__h .sym{width:15px;height:16px}
.cred__b{display:flex;gap:11px;margin-top:11px}
.cred__photo{width:62px;height:74px;border-radius:6px;background:rgba(255,255,255,.16);flex:0 0 auto;display:grid;place-items:center;overflow:hidden}
.cred__photo svg{width:24px;height:24px;opacity:.7}
.cred__f{min-width:0;flex:1}
.cred__name{font-family:var(--f-cond);font-size:17px;font-weight:700;line-height:1.05;text-transform:uppercase}
.cred__sub{font-size:11px;opacity:.8;margin-top:1px}
.cred__rows{margin-top:7px;font-size:10.5px;line-height:1.55;opacity:.92}
.cred__rows b{font-weight:600;opacity:.7}
.cred__foot{position:absolute;left:15px;right:15px;bottom:11px;display:flex;justify-content:space-between;font-size:9px;opacity:.7;font-family:var(--f-cond);letter-spacing:.04em}
.cred--light{background:linear-gradient(135deg,#e9e7e4,#d6d3cf);color:#1c1917}
.cred--light .cred__h{opacity:.55}
.cred--light .cred__photo{background:rgba(0,0,0,.06)}
.cred--light .cred__name{color:#111}

/* ---- Credencial REAL: plantilla PNG + datos superpuestos ---- */
.credreal{position:relative;width:100%;aspect-ratio:1011/638;border-radius:14px;overflow:hidden;
  box-shadow:var(--sh1);background:#fff;container-type:inline-size;font-family:var(--f-ui)}
.credreal>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.credreal .cr-f{position:absolute;color:#1c1917;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden}
.credreal .cr-val{font-size:3.5cqw;letter-spacing:.2cqw}
.credreal .cr-foto{border-radius:1cqw;overflow:hidden;background:#dedad5;display:grid;place-items:center;color:#57534e}
.credreal .cr-foto svg{width:26%;height:26%}
.credreal .cr-foto img{width:100%;height:100%;object-fit:cover}
.credreal .cr-foto--empty{font-size:2.6cqw;font-weight:700;letter-spacing:.02em;text-transform:uppercase;text-align:center;padding:6%;
  background:repeating-linear-gradient(135deg,#dedad5,#dedad5 10px,#d2cdc7 10px,#d2cdc7 20px)}
.credreal .cr-code{color:#1473a3;font-weight:700;font-size:2.9cqw;letter-spacing:.15cqw}
.credreal .cr-small{font-size:3cqw;font-weight:600}
.credreal .cr-mask{filter:blur(2.4cqw);color:#1c1917;user-select:none}
.credreal .cr-foto.is-mask{filter:blur(3cqw)}
.credreal--preview>img.bg{filter:grayscale(1) brightness(1.28) contrast(.78)}
.credpair{display:grid;gap:14px}
.credcap{font-size:11.5px;color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;display:flex;align-items:center;gap:6px}
.credcap svg{width:13px;height:13px}

/* ---- Ojo translúcido sobre la vista previa: abre el modal de zoom ---- */
.credpreview{position:relative}
.credpreview__eye{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:0;
  background:rgba(28,25,23,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(2px);
  transition:background .15s var(--ease)}
.credpreview__eye:hover{background:rgba(28,25,23,.78)}
.credpreview__eye svg{width:16px;height:16px}

/* ---- Modal de zoom (frente/dorso en color, con zoom tipo visor de imágenes) ---- */
dialog.imgzoom{border:0;padding:0;width:min(92vw,1100px);max-width:92vw;height:min(88vh,900px);
  background:#161412;border-radius:var(--r2);overflow:hidden}
/* El <dialog> nativo ya viene con "display:none" hasta que showModal() le pone
   [open]; forzar display:flex en el selector base (como estaba) pisaba esa
   regla y lo dejaba SIEMPRE visible en el flujo del documento, como un bloque
   negro fijo — "aparece antes de tiempo y no se cierra". El flex solo debe
   aplicarse cuando está realmente abierto. */
dialog.imgzoom[open]{display:flex;flex-direction:column}
dialog.imgzoom::backdrop{background:rgba(10,9,8,.72)}
.imgzoom__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#0f0e0d;flex:0 0 auto}
.imgzoom__title{color:#e7e4e0;font-size:13px;font-weight:600}
.imgzoom__actions{display:flex;gap:6px}
.imgzoom__actions .iconbtn{background:rgba(255,255,255,.08);color:#fff}
.imgzoom__actions .iconbtn:hover{background:rgba(255,255,255,.16)}
.imgzoom__stage{position:relative;flex:1 1 auto;overflow:hidden;display:grid;place-items:center;cursor:zoom-in;touch-action:none}
.imgzoom__stage.is-zoomed{cursor:grab}
.imgzoom__stage.is-dragging{cursor:grabbing}
.imgzoom__stage img{max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none;
  will-change:transform}
.imgzoom__status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;padding:0 24px;text-align:center;color:#c9c5c0;font-size:14px;line-height:1.5}
@media (max-width:640px){dialog.imgzoom{width:100vw;height:100vh;max-width:100vw;border-radius:0}}

/* ---- Credencial con giro 3D (click, teclado y drag/swipe) ---- */
.credflip{position:relative;width:100%;max-width:460px;margin:0 auto;perspective:1800px;text-align:center;touch-action:none}
.credflip__inner{position:relative;width:100%;aspect-ratio:1011/638;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.22,1,.36,1);cursor:grab;will-change:transform;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.credflip__inner img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.credflip__inner:active{cursor:grabbing}
.credflip.is-flipped .credflip__inner{transform:rotateY(180deg)}
.credflip.is-dragging .credflip__inner{transition:none}
.credflip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.credflip__face--back{transform:rotateY(180deg)}
/* "Plástico": sombra ambiental suave + apoyo + brillo superior sutil (sin exagerar) */
.credflip__face .credreal{
  box-shadow:0 1px 1px rgba(28,25,23,.06),0 10px 22px rgba(28,25,23,.14),0 24px 40px -12px rgba(28,25,23,.18);
  position:relative}
.credflip__face .credreal::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 78%,rgba(255,255,255,.12) 100%)}
.credflip.is-dragging .credflip__face .credreal{
  box-shadow:0 2px 2px rgba(28,25,23,.08),0 18px 34px rgba(28,25,23,.20),0 32px 54px -14px rgba(28,25,23,.24)}
.credflip__btn{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;padding:9px 16px;border-radius:var(--pill);
  border:1px solid var(--border2);background:var(--surface);color:var(--text);font-family:var(--f-ui);font-weight:600;font-size:13px;cursor:pointer}
.credflip__btn:hover{background:var(--soft2)}
.credflip__btn svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.credflip.is-flipped .credflip__btn svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.credflip__inner{transition:none}}
.crednote{display:inline-flex;align-self:center;align-items:center;gap:7px;margin-top:12px;background:var(--soft2);color:var(--muted);
  font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:var(--pill)}
.crednote svg{width:14px;height:14px}

/* controles de edición de foto (cropper) */
.cropbox{position:relative;border-radius:var(--r2);overflow:hidden;background:#1c1917;aspect-ratio:4/3;display:grid;place-items:center}
.cropbox .frame{position:absolute;width:120px;height:144px;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5);border-radius:6px}
.cropbox .ph{color:rgba(255,255,255,.4)}
.cropbox .ph svg{width:48px;height:48px}
.cropctrls{display:flex;gap:8px;margin-top:12px;justify-content:center}

/* timeline de estado */
.tline{display:flex;align-items:flex-start;margin:4px 0}
.tstep{flex:1;text-align:center;position:relative;font-size:11px;color:var(--faint)}
.tstep::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--border2)}
.tstep:first-child::before{display:none}
.tstep .dot{width:20px;height:20px;border-radius:50%;background:var(--surface);border:2px solid var(--border2);margin:0 auto 6px;display:grid;place-items:center;position:relative;z-index:1;color:transparent}
.tstep .dot svg{width:11px;height:11px}
.tstep.done{color:var(--ok)} .tstep.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.tstep.done::before{background:var(--ok)}
.tstep.now{color:var(--brand-deep);font-weight:700} .tstep.now .dot{border-color:var(--brand);background:var(--brand);color:#fff}
.tstep .lab{display:block;font-weight:inherit}

/* ============================================================
   WIZARD
   ============================================================ */
.stepsbar{position:sticky;top:0;z-index:20;background:var(--soft);padding:12px 0 14px;margin-bottom:8px}
.steps{display:flex;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--pill);padding:5px;box-shadow:var(--sh1)}
.steps__i{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 8px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:var(--faint);text-decoration:none}
.steps__i .num{width:22px;height:22px;border-radius:50%;background:var(--soft2);color:var(--muted);display:grid;place-items:center;font-size:12px;font-weight:700}
.steps__i.is-active{background:var(--ink);color:#fff}
.steps__i.is-active .num{background:rgba(255,255,255,.22);color:#fff}
.steps__i.is-done{color:var(--ok)}
.steps__i.is-done .num{background:var(--ok);color:#fff}
.steps__i.is-done .num svg{width:12px;height:12px}

/* ---- Pestañas (Gestionar credencial, Editar persona) ---- */
/* overflow-x:auto solo, sin overflow-y explícito, hace que el navegador
   trate el eje Y como "auto" también (spec CSS) — con la altura ajustada al
   contenido, cualquier diferencia de 1px (borde del tab activo, etc.) hacía
   aparecer una scrollbar vertical espuria. */
.tabs__nav{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--border2);margin-bottom:20px;overflow-x:auto;overflow-y:hidden}
.tabs__btn{appearance:none;border:0;background:none;padding:10px 16px;font-family:var(--f-ui);font-size:13.5px;font-weight:600;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs__btn:hover{color:var(--text)}
.tabs__btn.is-on{color:var(--brand-deep);border-bottom-color:var(--brand)}
.tabs__panel{display:none}
.tabs__panel.is-on{display:block}

.fblock{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:20px 22px;margin-bottom:16px}
.fblock__h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.fblock__h .n{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-weight:700;font-size:13px;font-family:var(--f-cond);flex:0 0 auto}
.fblock__h .n svg{width:15px;height:15px}
.fblock__h h3{font-family:var(--f-cond);font-size:17px;font-weight:600;margin:0}
.fblock__hint{font-size:12.5px;color:var(--muted);margin:0 0 16px 36px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.fgrid--3{grid-template-columns:1fr 1fr 1fr}
.f-col-2{grid-column:span 2}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:6px}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-ui);font-size:14.5px;color:var(--text);background:var(--surface);
  border:1px solid var(--border2);border-radius:10px;padding:11px 13px;outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field .help{font-size:11.5px;color:var(--faint);margin-top:5px}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--danger)}
.field.is-invalid input:focus,.field.is-invalid select:focus,.field.is-invalid textarea:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.field__err{display:none;font-size:12px;font-weight:600;color:var(--danger);margin-top:5px}
.field.is-invalid .field__err:not(:empty){display:block}

/* ---- Diálogo de confirmación (reemplaza confirm() nativo) ---- */
dialog.confirmdlg{border:0;border-radius:var(--r2);padding:0;max-width:400px;width:calc(100% - 40px);
  box-shadow:0 24px 60px rgba(28,25,23,.28)}
dialog.confirmdlg::backdrop{background:rgba(28,25,23,.45)}
.confirmdlg__in{padding:22px}
.confirmdlg__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.confirmdlg__head .iconbtn{margin:-8px -8px -8px 0}
.confirmdlg__msg{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:var(--text)}
.confirmdlg__head .confirmdlg__msg{margin:0;font-weight:600}
.confirmdlg__actions{display:flex;justify-content:flex-end;gap:10px}
.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:400;color:var(--muted);cursor:pointer;line-height:1.4;padding-top:3px}
.checkrow input{width:auto;margin:2px 0 0;accent-color:var(--brand);flex:0 0 auto}

.actionbar{position:sticky;bottom:0;z-index:25;margin-top:auto;flex:0 0 auto;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-top:1px solid var(--border)}
.actionbar__in{max-width:980px;margin-inline:auto;display:flex;align-items:center;gap:12px;padding:14px 28px}
/* Bug de layout real (no hacía falta ver un dispositivo para encontrarlo,
   sale de leer el CSS): páginas como Editar persona, Ficha de persona y
   Gestionar credencial envuelven su contenido en .wrap--wide (1100px), pero
   esta barra quedaba siempre a 980px — 120px más angosta que el contenido
   de arriba, así que no coincidía con los bordes salvo en pantallas chicas
   donde igual se ve angosta. */
.actionbar__in--wide{max-width:1100px}
.actionbar .sp{flex:1}
.actionbar__note{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.actionbar__note svg{width:15px;height:15px;color:var(--brand)}

/* alert inline */
.note{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r2);font-size:13.5px;line-height:1.45}
.note svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.note--info{background:var(--brand-soft);color:var(--brand-deep)}
.note--warn{background:var(--warn-soft);color:var(--warn)}
.note--ok{background:var(--ok-soft);color:var(--ok)}
.note b{font-weight:700}

/* foto step */
.photo-area{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.photo-area>*{min-width:0}
.photo-area>*{min-width:0}
.idphoto--out{width:100%;max-width:220px;margin-inline:auto;aspect-ratio:300/360;height:auto;border-radius:12px}
.idphoto--out img{width:100%;height:100%;object-fit:cover;display:block}
/* La vista previa en vivo del recorte (#iead_rc_preview_out /
   #iead_rc_edit_preview_out) ya no usa la opción "preview" de Cropper.js
   (bug conocido de la librería: github.com/fengyuanchen/cropperjs/issues/1111
   — cachea el tamaño del contenedor y se desincroniza con cualquier resize/
   layout, no solo responsive). Ahora se dibuja a mano con getCroppedCanvas()
   en assets/js/vendor (ver paso-foto.php / persona-form.php), reusando el
   mismo dato que ya se usaba para el recorte final guardado. */
.idphoto--out canvas{width:100%;height:100%;display:block;border-radius:inherit}
.dropzone{border:2px dashed var(--border2);border-radius:var(--r2);background:var(--surface);min-height:300px;display:grid;place-items:center;text-align:center;padding:30px}
.dropzone svg{width:40px;height:40px;color:var(--faint);margin-bottom:12px}
.dropzone h4{font-family:var(--f-cond);font-size:18px;margin:0 0 5px}

/* FAB flotante */
.fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:30;display:grid;place-items:center;
  width:54px;height:54px;padding:0;border:0;border-radius:50%;background:var(--brand);color:#fff;cursor:pointer;text-decoration:none;
  font-family:var(--f-ui);font-weight:600;font-size:14.5px;box-shadow:var(--sh2);transition:background .15s,transform .15s}
.fab:hover{background:var(--brand-hover);transform:translateY(-1px)}
.fab:focus-visible{outline:3px solid var(--surface);outline-offset:3px;box-shadow:0 0 0 5px var(--brand)}
.fab__icon{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.fab .fab__icon .fab__svg{position:static!important;display:block!important;width:22px!important;height:22px!important;margin:0!important;transform:none!important;overflow:visible!important}
.fab__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-mobile .fab{padding:0;width:54px;height:54px;justify-content:center;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}

/* toggle / switch */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:500;
  border:0;background:transparent;color:var(--text);font-family:var(--f-ui);padding:0}
.switch .tr{width:40px;height:23px;border-radius:var(--pill);background:var(--border2);position:relative;transition:.2s;flex:0 0 auto}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.is-on .tr{background:var(--ok)}
.switch.is-on .tr::after{left:19px}

/* ============================================================
   NOTIFICACIONES (drawer)
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(28,25,23,.35);z-index:90;opacity:0;pointer-events:none;transition:.2s}
.scrim.is-on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90%;background:var(--surface);z-index:91;
  transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column;box-shadow:var(--sh2)}
.drawer.is-on{transform:none}
.drawer__h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer__h h3{font-family:var(--f-cond);font-size:18px;margin:0}
.drawer__tabs{display:flex;gap:4px;padding:12px 18px 0}
.drawer__tab{border:0;background:transparent;font-size:13px;font-weight:600;color:var(--muted);padding:7px 12px;border-radius:8px;cursor:pointer;text-decoration:none}
.drawer__tab.is-on{background:var(--soft2);color:var(--text)}
.drawer__b{flex:1;overflow:auto;padding:8px 0 18px}

/* ============================================================
   TOAST (rediseñado: claro, rectangular, delicado — NO negro)
   ============================================================ */
.iead-rc-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);
  display:flex;align-items:center;gap:11px;min-width:240px;max-width:min(92vw,420px);
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;font-size:13.5px;font-weight:600;line-height:1.35;
  box-shadow:0 10px 30px rgba(28,25,23,.12),0 2px 6px rgba(28,25,23,.06);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.iead-rc-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.iead-rc-toast__ic{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;flex:0 0 auto;background:var(--ok-soft);color:var(--ok)}
.iead-rc-toast__ic svg{width:16px;height:16px}
.iead-rc-toast--info .iead-rc-toast__ic{background:var(--brand-soft);color:var(--brand-deep)}
.iead-rc-toast--warn .iead-rc-toast__ic{background:var(--warn-soft);color:var(--warn)}
.iead-rc-toast--danger .iead-rc-toast__ic{background:var(--danger-soft);color:var(--danger)}
.iead-rc-toast__msg{min-width:0}
.iead-rc-toast.is-clickable.is-on{pointer-events:auto;cursor:pointer}

/* ============================================================
   PÚBLICO (fuera del panel) + LOGIN
   ============================================================ */
.pub{min-height:100vh;background:var(--soft);display:flex;flex-direction:column}
.pub__bar{background:var(--hero);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:10px}
.pub__bar .sym{width:22px;height:24px}
.pub__bar b{font-family:var(--f-cond);font-size:16px;letter-spacing:.02em}
.pub__body{flex:1;display:grid;place-items:center;padding:30px 20px}
.pubcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--sh1);width:100%;max-width:440px;padding:30px;text-align:center}
.pubcard .logo{height:34px;margin:0 auto 18px;color:var(--brand-deep);display:block}
.verok{width:60px;height:60px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px}
.verok svg{width:30px;height:30px}
.pubhero{width:100%;max-width:960px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.pubhero__art{position:relative}
.pubhero__art .credstack{position:relative}
.pubhero__art .credstack .credreal:last-child{position:absolute;left:14%;top:26%;width:86%;transform:rotate(5deg);box-shadow:0 22px 48px rgba(0,0,0,.22)}
.pubhero__art .credstack .credreal:first-child{transform:rotate(-4deg);position:relative;z-index:2;box-shadow:0 22px 48px rgba(0,0,0,.22)}
.pubhero__art .maskhint{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:3;
  background:var(--soft2);color:var(--muted);font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:999px;display:flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:var(--sh1)}
.pubhero__art .maskhint svg{width:14px;height:14px}
.is-mobile .pubhero{grid-template-columns:1fr;gap:48px 0}
.is-mobile .pubhero__art{order:-1}

/* Verificación pública: resultado real, compacto y sin datos de consulta visibles. */
.iead-rc-public__result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.iead-rc-public__again{border:0;background:transparent;color:var(--brand-deep);font:600 13px/1 var(--f-ui);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.iead-rc-public__credential{margin:4px 0 20px;max-width:520px}
.login__form.has-result{max-width:600px!important;width:100%}
.iead-rc-public__credential .credreal{box-shadow:var(--sh1)}
.iead-rc-captcha{display:grid;gap:10px;margin-bottom:18px;padding:16px;border:1px solid currentColor;border-radius:var(--r2);background:var(--warn-soft);color:var(--warn)}
.iead-rc-captcha[hidden]{display:none}
.iead-rc-public__msg[hidden],.iead-rc-public__result[hidden],.iead-rc-public__form > [hidden]{display:none!important}
.iead-rc-captcha__head{display:flex;gap:10px;align-items:flex-start}
.iead-rc-captcha__head svg{width:20px;height:20px;flex:0 0 auto}
.iead-rc-captcha__head strong,.iead-rc-captcha__head span{display:block}
.iead-rc-captcha__head span{margin-top:3px;font-size:12.5px;line-height:1.4}
.iead-rc-captcha label{font-size:13px;font-weight:700}
.iead-rc-captcha input{width:100%;min-height:44px;padding:10px 12px;border:1px solid currentColor;border-radius:var(--r1);background:var(--surface);color:var(--text);font:500 15px var(--f-ui)}
.cred-review .credpair{filter:grayscale(1) contrast(1.32) brightness(.92)}
/* Mismo tratamiento "prototipo sin emitir", para cuando se muestra un único
   lado suelto (sin el grid .credpair alrededor) — ficha de persona sin
   credencial. */
.cred-review--solo{filter:grayscale(1) contrast(1.32) brightness(.92)}
.cred-review .credreal{box-shadow:none}
.btn--icon-action{width:44px;height:44px;padding:0;justify-content:center;flex:0 0 44px}
.btn--icon-action svg{margin:0}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login__art{background:var(--hero);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login__art::after{content:"";position:absolute;right:-60px;bottom:-60px;width:340px;height:340px;opacity:.06;
  background:#fff;-webkit-mask:var(--sym-mask) center/contain no-repeat;mask:var(--sym-mask) center/contain no-repeat}
.login__logo{height:30px;color:#fff}
.login__art h2{font-family:var(--f-cond);font-size:34px;font-weight:700;line-height:1.05;margin:0;max-width:14ch}
.login__art p{color:var(--hero-muted);font-size:14px;max-width:38ch;margin:12px 0 0;line-height:1.5}
.login__form{padding:48px;display:flex;flex-direction:column;justify-content:center;max-width:420px}

.help-tip{font-size:12px;color:var(--faint);text-align:center;padding:14px 22px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Zona muerta real entre el colapso del sidebar (860px, más abajo) y
   desktop completo: .profile (columna fija de 320px) y .photo-area (columna
   fija de 280px, y a veces anidada DENTRO de la columna principal de
   .profile) suman con el sidebar de la app (248px) más de 900px de ancho
   fijo antes de darle nada a la columna flexible — con el viewport apenas
   por debajo de ~1300px esa columna "1fr" quedaba angosta o negativa:
   texto de una palabra por línea, botones superpuestos con etiquetas
   ("Elegir imagen" pisado por "Foto actual"). No hacía falta ver un
   dispositivo para encontrarlo, salía de sumar los anchos fijos del CSS.
   Colapsar acá, antes de que el propio sidebar necesite colapsar, evita esa
   franja rota en tablets/notebooks chicas. */
@media (max-width:1300px){
  .profile{grid-template-columns:1fr}
  .photo-area{grid-template-columns:1fr}
  .sidecard{position:static}
}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:92;transform:translateX(-100%);transition:transform .25s var(--ease);overflow-y:auto}
  .side.is-open{transform:none}
  .topbar .topbar__burger{display:inline-grid}
  .side__collapse{display:none}
  .side__close{display:inline-grid}
  .side__logo{display:flex}
  .side__sym{display:none}
  .wrap,.phead{padding-left:18px;padding-right:18px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .dgrid{grid-template-columns:1fr}
  .fgrid,.fgrid--3,.dl{grid-template-columns:1fr}
  .f-col-2{grid-column:auto}
  .login,.pubhero{grid-template-columns:1fr}
  .login__art{display:none}
  .login__form,.login__form.has-result{padding:28px 20px;max-width:none;width:100%}
  .actionbar__in{padding:12px 18px;gap:8px;flex-wrap:wrap}
  .actionbar__note{display:none}
  .actionbar__in .btn{flex:0 0 auto}
  .actionbar__in .btn--brand{flex:1 1 auto}
  .drawer{width:100%}
  .phead__actions{flex-basis:100%;margin-top:2px}
  .phead__actions .btn{flex:1 1 auto;justify-content:center}
  .fab{padding:0;width:54px;height:54px;justify-content:center;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .credflip__inner{transition:none}
  .fab{transition:none}
}