/* ================================================================
   ALERTHOR Enterprise — Main Stylesheet
   Dark theme · Hostinger shared hosting compatible

   Restyling Etapa 3 (ver RECETA_RESTYLING_ETAPA3.md): la Etapa 2 se validó
   como piloto aislado a pagInicio.php (css/restyle-piloto.css, hoy eliminado).
   Esta base fusiona esos tokens acá — todo el sistema (menús, login, todas
   las páginas) hereda la paleta nueva por la cascada de custom properties,
   sin tener que reescribir cada componente.
   ================================================================ */

@font-face {
  font-family: 'InterV';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg0:    #0a111c;
  --bg1:    #0d1522;
  --bg2:    #131c2b;
  --card:   #16202f;
  --card2:  #1b2738;
  --border: #263349;
  --bord2:  #33435e;
  --a:  #4e9fdf; --ad: rgba(78,159,223,.14); --ag: rgba(78,159,223,.32);
  --r:  #ff5a4c; --rd: rgba(255,90,76,.14);  --rg: rgba(255,90,76,.35);
  --y:  #f5b23c; --yd: rgba(245,178,60,.15); --yg: rgba(245,178,60,.32);
  --o:  #f58c3c; --od: rgba(245,140,60,.15);
  --p:  #a78bfa; --pd: rgba(167,139,250,.14);
  --bl: #4e9fdf; --bld: rgba(78,159,223,.14);
  --g:  #3ecf8e; --gd: rgba(62,207,142,.13);
  --lm: #3ecf8e; --lmd: rgba(62,207,142,.13);
  --t1: #e7edf6;
  --t2: #9caabf;
  --t3: #647084;
  --mono: 'Courier New', monospace;
  --rad: 10px; --rads: 6px; --radl: 14px;
  --sw: 224px;
  /* ── Skin tokens (overrideables por skin) ── */
  --bg-body:   #0d1522;
  --bg-chrome: #0a111c;
  --bg-modal:  #0a111c;
  --bg-glow:   rgba(20,60,95,.5);
  --bg-grid:   rgba(255,255,255,.022);
  --a-glow:    rgba(78,159,223,.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-body);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 30%, var(--bg-glow) 0%, transparent 70%),
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
  color: var(--t1);
  font-family: 'InterV', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-x: hidden;
}

input, select, textarea, button { font-family: inherit; }

h1, h2, h3, .whdr__title { font-weight: 650; letter-spacing: -.012em; }
.sb-user__name, .sb-logo__name { letter-spacing: -.01em; }

/* Set de íconos SVG (ver libIconos.php): trazo uniforme, hereda color del contenedor */
svg.ico {
  display: inline-block; vertical-align: middle; flex-shrink: 0; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

a { color: var(--a); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bord2); border-radius: 2px; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.shell   { display: flex; min-height: 100vh; overflow-x: hidden; }
.main    { margin-left: var(--sw); flex: 1; min-width: 0; overflow-x: hidden;
           display: flex; flex-direction: column; min-height: 100vh; }
.content { flex: 1; padding: 20px; min-width: 0; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sb {
  width: var(--sw);
  background: var(--bg-chrome);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 80;
}
.sb-logo { padding: 16px 15px; border-bottom: 1px solid var(--border); }
.sb-logo__name { font-size: 15px; font-weight: 900; color: var(--a); letter-spacing: .07em; }
.sb-logo__sub  { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.sb-nav  { flex: 1; padding: 8px 0; overflow-y: auto; }

.ni {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  color: rgba(255,255,255,.82); font-size: 13px;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.ni:hover { background: rgba(255,255,255,.03); color: var(--t1); text-decoration: none; }
.ni.on    { color: var(--a); border-left-color: var(--a); background: var(--ad); }
.ni__icon { width: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: currentColor; }

/* Encabezados de sección del menú lateral/drawer — agrupa un menú de rol
   personalizado con muchos ítems (ver REVISION_USABILIDAD_TIER1.md P3 #7) */
.ni-seccion {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--t3); padding: 14px 14px 4px; font-weight: 700;
}
body.sb-collapsed .ni-seccion { display: none; }

.sb-nav-sep {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--t3); padding: 12px 16px 5px;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px;
}
.mob-drawer__sep {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--t3); padding: 12px 16px 5px;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: 4px;
}
.sb-foot { padding: 12px 14px; border-top: 1px solid var(--border); }
.sb-user { display: flex; align-items: center; gap: 9px; }
.sb-user__name { font-size: 12px; font-weight: 600; }
.sb-user__role { font-size: 10px; color: var(--t2); }
.sb-user__inst { font-size: 10px; color: rgba(255,255,255,.28); margin-top: 2px; }

/* ── SIDEBAR LOGO RESTRUCTURADO ──────────────────────────── */
.sb-logo__brand { display: flex; align-items: center; gap: 10px; }
.sb-logo__ico   { font-size: 18px; flex-shrink: 0; line-height: 1; }

/* ── SIDEBAR TOGGLE (solo desktop) ──────────────────────── */
.sb-toggle {
  position: absolute;
  right: -13px; top: 44px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-chrome);
  border: 1px solid var(--bord2);
  color: var(--t3);
  cursor: pointer;
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 82;
  transition: color .15s, border-color .15s;
  user-select: none;
}
.sb-toggle:hover { color: var(--t1); border-color: var(--a); }
.sb { transition: width .25s ease; }
.main { transition: margin-left .25s ease; }

/* Estado colapsado */
body.sb-collapsed .sb  { width: 56px; }
body.sb-collapsed .main { margin-left: 56px; }
body.sb-collapsed .sb-logo { padding: 12px 0; display: flex; justify-content: center; }
body.sb-collapsed .sb-logo__text { display: none; }
body.sb-collapsed .sb-logo__brand { justify-content: center; }
body.sb-collapsed .ni { justify-content: center; padding: 10px 0; gap: 0; border-left-color: transparent !important; }
body.sb-collapsed .ni span:not(.ni__icon) { display: none; }
body.sb-collapsed .sb-nav-sep { display: none; }
body.sb-collapsed .sb-foot { padding: 10px 0; }
body.sb-collapsed .sb-user { justify-content: center; }
body.sb-collapsed .sb-user > div { display: none; }
body.sb-collapsed .sb-foot .btn { display: none; }

/* Campana de notificaciones */
.notif-bell {
  position: relative; font-size: 17px; text-decoration: none;
  padding: 4px 6px; border-radius: 6px;
  color: rgba(255,255,255,.35);
  transition: color .15s;
}
.notif-bell:hover { color: rgba(255,255,255,.75); }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1; pointer-events: none;
}

/* ── TOP HEADER ─────────────────────────────────────────────── */
.whdr {
  height: 54px;
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  position: sticky; top: 0; z-index: 50;
}
.whdr__title { font-size: 15px; font-weight: 700; flex: 1; }

/* ── AVATARS ────────────────────────────────────────────────── */
.ava {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  border: 1.5px solid;
}
.ava--teal   { background: var(--ad);  border-color: var(--a);  color: var(--a); }
.ava--red    { background: var(--rd);  border-color: var(--r);  color: var(--r); }
.ava--yellow { background: var(--yd);  border-color: var(--y);  color: var(--y); }
.ava--purple { background: var(--pd);  border-color: var(--p);  color: var(--p); }
.ava--blue   { background: var(--bld); border-color: var(--bl); color: var(--bl);}
.ava--orange { background: var(--od);  border-color: var(--o);  color: var(--o); }
.ava--lime   { background: var(--lmd); border-color: var(--lm); color: var(--lm);}
.ava--lg { width: 44px; height: 44px; font-size: 15px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 15px; border-radius: var(--rad);
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--card); color: var(--t1);
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.btn:hover    { border-color: var(--bord2); background: var(--card2); text-decoration: none; }
.btn--primary       { background: var(--a); color: #03060b; border-color: var(--a); }
.btn--primary:hover { opacity: .9; }
.btn--danger  { background: var(--r); color: #fff; border-color: var(--r); }
.btn--yellow  { background: var(--y); color: #03060b; border-color: var(--y); }
.btn--ghost   { background: none; border-color: var(--border); color: var(--t2); }
.btn--ghost:hover { border-color: var(--a); color: var(--a); }
.btn--sm      { padding: 4px 11px; font-size: 11px; }
.btn--full    { width: 100%; justify-content: center; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.card:last-child { margin-bottom: 0; }
.card--accent  { border-color: var(--ag); background: var(--ad); }
.card--danger  { border-color: rgba(255,90,76,.3); background: var(--rd); }
.card--warn    { border-color: rgba(245,178,60,.3); background: var(--yd); }
.card__title   { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--t2); margin-bottom: 11px; }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 8px;
  border-radius: 20px; font-weight: 700; letter-spacing: .05em; border: 1px solid;
}
.badge--green  { background: rgba(78,159,223,.13);  color: var(--a);  border-color: var(--ag); }
.badge--red    { background: var(--rd); color: var(--r); border-color: rgba(255,90,76,.28); }
.badge--yellow { background: var(--yd); color: var(--y); border-color: var(--yg); }
.badge--orange { background: var(--od); color: var(--o); border-color: rgba(255,140,66,.28); }
.badge--blue   { background: var(--bld); color: var(--bl); border-color: rgba(96,165,250,.28); }
.badge--gray   { background: rgba(255,255,255,.05); color: var(--t2); border-color: var(--border); }

/* ── PILLS ───────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 10px; border-radius: 20px; border: 1px solid; }
.pill--green { color: var(--a); border-color: var(--ag); }

/* ── ROLE CHIPS ─────────────────────────────────────────────── */
.rc {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 2px 9px;
  border-radius: 20px; font-weight: 600; border: 1px solid;
}
.rc--admin-corp  { background: var(--bld); color: var(--bl); border-color: rgba(96,165,250,.3); }
.rc--coord-corp  { background: var(--pd);  color: var(--p);  border-color: rgba(167,139,250,.3); }
.rc--admin-inst  { background: var(--od);  color: var(--o);  border-color: rgba(255,140,66,.3); }
.rc--coord-inst  { background: var(--ad);  color: var(--a);  border-color: var(--ag); }
.rc--inspector   { background: var(--lmd); color: var(--lm); border-color: rgba(134,239,172,.3); }
.rc--supervisor  { background: var(--yd);  color: var(--y);  border-color: var(--yg); }
.rc--brigadista  { background: var(--rd);  color: var(--r);  border-color: rgba(255,90,76,.3); }

/* ── GRIDS ───────────────────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.ga { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }

/* Grilla de 12 columnas para renderizar Formularios de Evento — cada campo
   lleva grid-column:span N (1 a 12) según su ancho definido en el constructor
   (ver pagFormularios.php / servicioFormularios.php). En mobile colapsa a una
   sola columna: un campo angosto de a caballo con otro no tiene sentido en
   una pantalla angosta. */
.frm-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 10px 12px; }
@media (max-width: 640px) { .frm-grid { grid-template-columns: 1fr; } .frm-grid > * { grid-column: auto !important; } }

/* ── FORMS ───────────────────────────────────────────────────── */
.fld   { margin-bottom: 14px; }
.flbl  { display: block; font-size: 11px; color: var(--t2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.finp  { width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--t1); padding: 9px 12px; border-radius: var(--rads); outline: none; font-size: 13px; font-family: inherit; }
.finp:focus  { border-color: var(--a); }
.fsel  { width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--t1); padding: 9px 12px; border-radius: var(--rads); outline: none; font-size: 13px; font-family: inherit; }
.fsel:focus  { border-color: var(--a); }
.ftxt  { width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--t1); padding: 9px 12px; border-radius: var(--rads); outline: none; resize: vertical; min-height: 80px; font-family: inherit; font-size: 13px; }
.ferr  { font-size: 11px; color: var(--r); margin-top: 4px; }

/* ── TABLES ──────────────────────────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--t2); padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.03); font-size: 13px; vertical-align: middle; }
.tabla tr:hover td { background: rgba(255,255,255,.02); }
.tabla tr:last-child td { border-bottom: none; }

/* ── FLASH MESSAGES ──────────────────────────────────────────── */
.flash {
  padding: 10px 16px; border-radius: var(--rads);
  border: 1px solid; margin-bottom: 16px; font-size: 13px;
}

/* ── METRIC CARDS ────────────────────────────────────────────── */
.mc  { background: var(--card); border: 1px solid var(--border); border-radius: var(--rad); padding: 14px; text-align: center; }
.mc__n { font-size: 30px; font-weight: 700; font-family: var(--mono); color: var(--a); }
.mc__n--r { color: var(--r); }
.mc__n--y { color: var(--y); }
.mc__n--o { color: var(--o); }
.mc__l { font-size: 10px; color: var(--t2); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.bc { font-size: 11px; color: var(--t2); margin-bottom: 14px; display: flex; align-items: center; gap: 5px; }
.bc .sep { color: var(--t3); }

/* ── MODALS ──────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.overlay.hidden { display: none !important; }
.modal { background: var(--bg-modal); border: 1px solid var(--bord2); border-radius: var(--radl); padding: 26px; width: 94%; max-width: 580px; max-height: 90vh; overflow-y: auto; position: relative; }
.modal--lg { max-width: 740px; }
.modal--sm { max-width: 400px; }
.mclose { position: absolute; top: 13px; right: 13px; background: var(--bg-modal); border: 1px solid var(--border); color: var(--t2); font-size: 16px; padding: 4px 9px; border-radius: var(--rads); cursor: pointer; }
.modal__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; color: var(--a); }
.modal__sub   { font-size: 12px; color: var(--t2); margin-bottom: 18px; }

/* ── TOUR GUIADO (js/tourOnboarding.js) ─────────────────────────
   .tour-cutout usa el truco de box-shadow gigante: la sombra ES el gris de
   fondo, así el recuadro recortado queda realmente "hueco" sobre el elemento
   resaltado, sin superponer una capa aparte que tape el clic/scroll de él. */
.tour-backdrop { position: fixed; inset: 0; z-index: 1999; background: rgba(4,7,12,.8); }
.tour-cutout {
  position: fixed; z-index: 2000; display: none;
  border-radius: 10px; border: 2px solid var(--a);
  box-shadow: 0 0 0 9999px rgba(4,7,12,.8), 0 0 24px rgba(78,159,223,.5);
  pointer-events: none;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tour-card {
  position: fixed; z-index: 2001;
  background: var(--bg-modal); border: 1px solid var(--bord2); border-radius: var(--radl);
  padding: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.55);
  transition: top .22s ease, left .22s ease;
}
.tour-card__paso   { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--a); font-weight: 700; margin-bottom: 6px; }
.tour-card__titulo { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.tour-card__texto  { font-size: 12.5px; color: var(--t2); line-height: 1.6; margin-bottom: 14px; }
.tour-card__acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-card__nav     { display: flex; gap: 6px; }
.tour-card__saltar  { background: none; border: none; color: var(--t3); font-size: 11.5px; cursor: pointer; padding: 4px 0; }
.tour-card__saltar:hover { color: var(--t2); text-decoration: underline; }
@media (max-width: 480px) { .tour-card { max-width: calc(100vw - 24px) !important; } }

/* ── PERM CHIP ───────────────────────────────────────────────── */
.perm-chip { background: rgba(245,178,60,.1); color: var(--y); border: 1px solid var(--yg); font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600; }

/* ── TOASTS ──────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--bg-chrome); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--rad); font-size: 12px; max-width: 360px; text-align: center; }
.toast--ok   { border-color: var(--a);  color: var(--a); }
.toast--err  { border-color: var(--r);  color: var(--r); }
.toast--warn { border-color: var(--y);  color: var(--y); }
.toast--info { border-color: var(--bl); color: var(--bl);}

/* ── AUTH PAGES ──────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg0); padding: 20px; }
.auth-box  { width: 100%; max-width: 420px; }
.auth-logo { text-align: center; margin-bottom: 30px; }
.auth-logo__main { font-size: 26px; font-weight: 900; color: var(--a); letter-spacing: .07em; }
.auth-logo__sub  { font-size: 11px; color: var(--t3); margin-top: 3px; text-transform: uppercase; letter-spacing: .1em; }
.auth-card { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radl); padding: 30px; }
.auth-card h2 { font-size: 18px; margin-bottom: 4px; }
.auth-card p  { font-size: 12px; color: var(--t2); margin-bottom: 22px; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* ── SELECTION GRID (tipo picker) ────────────────────────────── */
.sg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.sb2 {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--rads);
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.sb2:hover { border-color: var(--a); background: rgba(78,159,223,.06); }
.sb2.on    { border-color: var(--a); background: rgba(78,159,223,.13); color: var(--a); }
.si { font-size: 17px; flex-shrink: 0; }

/* ── RADIO BUTTON CARD (criticidad picker) ───────────────────── */
.rb {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--rads);
  padding: 10px 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  color: var(--t1); text-align: center;
  font-family: inherit;
}
.rb:hover { border-color: var(--a); background: rgba(78,159,223,.06); }
.rb.on    { border-color: var(--a); background: rgba(78,159,223,.10); }

/* ── MISC UTILITIES ──────────────────────────────────────────── */
.sh   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.acts { white-space: nowrap; }

/* ── TABLE SCROLL WRAPPER ────────────────────────────────────── */
.tbl-outer { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── LEAFLET Z-INDEX FIX ──────────────────────────────────────── */
/* Sin z-index explícito, los panes internos de Leaflet (z-index 200-700)
   quedan en el contexto raíz y tapan drawers, modales y overlays.
   Al fijar z-index:1 en el contenedor se crea un stacking context propio
   que contiene todos los panes internos sin afectar el comportamiento del mapa. */
.leaflet-container { z-index: 1; }

/* ── MOBILE TOP BAR ─────────────────────────────────────────── */
.mob-bar {
  display:none;
  height:50px; background:var(--bg-chrome);
  border-bottom:1px solid var(--border);
  align-items:center; gap:10px;
  padding:0 14px;
  position:sticky; top:0; z-index:90;
}
.mob-bar__logo {
  flex:1; text-align:center;
  font-size:14px; font-weight:900; letter-spacing:.06em;
  color:var(--a); line-height:1.2;
}
.mob-bar__btn {
  background:none; border:none; color:var(--t2);
  font-size:22px; line-height:1; cursor:pointer;
  padding:6px; border-radius:6px;
  -webkit-tap-highlight-color:transparent;
}
.mob-bar__btn:active { color:var(--t1); }

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────── */
.mob-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:var(--bg-chrome); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mob-nav__items { display:flex; }
.mob-nav__item {
  flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  padding:7px 2px;
  color:rgba(255,255,255,.65); font-size:10px; font-weight:500;
  text-decoration:none; border:none; background:none;
  cursor:pointer; font-family:inherit;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  min-width:0;
}
.mob-nav__item:hover, .mob-nav__item:active { text-decoration:none; }
.mob-nav__item.on { color:var(--a); }
.mob-nav__icon { display: flex; align-items: center; justify-content: center; }
.mob-nav__lbl  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58px; }

/* ── Botón central (Home) ──────────────────────────────── */
.mob-nav__item--home {
  position:relative; top:-14px; flex:none;
  width:54px; height:54px; border-radius:50%;
  background:var(--a);
  box-shadow:0 4px 18px var(--a-glow);
  color:#fff !important; padding:0;
  justify-content:center;
}
.mob-nav__item--home .mob-nav__icon { font-size:26px; }
.mob-nav__item--home.on { filter:brightness(.85); }

/* ── MOBILE DRAWER ────────────────────────────────────────────── */
.mob-ov {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.78);
}
.mob-ov.open { display:block; }
.mob-drawer {
  position:absolute; top:0; left:0; bottom:0;
  width:270px; max-width:82vw;
  background:var(--bg-chrome); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.mob-ov.open .mob-drawer { transform:translateX(0); }
.mob-drawer__head { padding:16px; border-bottom:1px solid var(--border); }
.mob-drawer__nav  { flex:1; padding:8px 0; overflow-y:auto; }
.mob-drawer__foot { padding:12px 14px; border-top:1px solid var(--border); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  /* Layout base */
  .sb   { display: none; }
  .main { margin-left: 0; }

  /* Grids colapsan a 1 columna */
  .g2, .g3, .g4 { grid-template-columns: 1fr; }

  /* Ocultar header de escritorio, mostrar barra mobile */
  .whdr    { display: none; }
  .mob-bar { display: flex; }
  .mob-nav { display: block; }

  /* Espaciado del contenido */
  .content {
    padding: 14px;
    padding-bottom: calc(62px + env(safe-area-inset-bottom,0px) + 14px);
    padding-top: 10px;
  }

  /* Toast por encima de la nav inferior */
  #toast-container {
    bottom: calc(64px + env(safe-area-inset-bottom,0px));
  }

  /* Modales: full-width */
  .modal { width: 96%; padding: 20px 14px; }
}

/* ── WEBVIEW / APP MODE ──────────────────────────────────────── */
/* Cuando la web corre dentro del webview nativo (?app=1) */
body.is-app .mob-bar { display: none; }
body.is-app .content { padding-top: 14px; }
/* El navbar inferior se mantiene a menos que el nativo lo reemplace */

/* ================================================================
   SKIN: LIGHT — fondo blanco, texto oscuro, acento teal
   ================================================================ */
[data-skin="light"] {
  --bg0:       #f0f4f8;
  --bg1:       #ffffff;
  --bg2:       #e9edf3;
  --bg-body:   #f0f4f8;
  --bg-chrome: #ffffff;
  --bg-modal:  #ffffff;
  --bg-glow:   rgba(58,137,195,.07);
  --bg-grid:   rgba(0,0,0,.028);
  --card:      rgba(0,0,0,.04);
  --card2:     rgba(0,0,0,.08);
  --border:    rgba(0,0,0,.1);
  --bord2:     rgba(0,0,0,.18);
  --t1:        #111827;
  --t2:        rgba(17,24,39,.58);
  --t3:        rgba(17,24,39,.35);
  --a-glow:    rgba(58,137,195,.3);
}
/* Inputs en modo claro */
[data-skin="light"] .finp,
[data-skin="light"] .fsel,
[data-skin="light"] .ftxt { background: rgba(0,0,0,.04); color: var(--t1); }
/* Nav hover en modo claro */
[data-skin="light"] .ni:hover { background: rgba(0,0,0,.04); }
/* Separadores del sidebar */
[data-skin="light"] .sb-nav-sep,
[data-skin="light"] .mob-drawer__sep { border-top-color: rgba(0,0,0,.08); }
/* Campana de notificaciones */
[data-skin="light"] .notif-bell { color: rgba(17,24,39,.4); }
[data-skin="light"] .notif-bell:hover { color: rgba(17,24,39,.75); }
/* Botón hamburguesa mobile */
[data-skin="light"] .mob-bar__btn { color: rgba(17,24,39,.5); }
[data-skin="light"] .mob-bar__btn:active { color: var(--t1); }
/* Tablas */
[data-skin="light"] .tabla th { background: rgba(0,0,0,.025); border-bottom-color: rgba(0,0,0,.1); }
[data-skin="light"] .tabla td { border-bottom-color: rgba(0,0,0,.06); }
[data-skin="light"] .tabla tr:hover td { background: rgba(0,0,0,.025); }
/* Modal y close button */
[data-skin="light"] .mclose { border-color: rgba(0,0,0,.12); color: rgba(17,24,39,.5); }
/* Scrollbar */
[data-skin="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
/* Selection grid */
[data-skin="light"] .sb2 { background: rgba(0,0,0,.04); }
[data-skin="light"] .sb2:hover { background: rgba(58,137,195,.08); }
[data-skin="light"] .sb2.on   { background: rgba(58,137,195,.13); }
/* Radio button card (criticidad) */
[data-skin="light"] .rb { background: rgba(0,0,0,.04); }
[data-skin="light"] .rb:hover { background: rgba(58,137,195,.07); }
[data-skin="light"] .rb.on   { background: rgba(58,137,195,.12); }
/* Usuario en el pie del sidebar */
[data-skin="light"] .sb-user__inst { color: rgba(17,24,39,.3); }
/* Barra mobile logo */
[data-skin="light"] .mob-bar__logo { color: var(--a); }
/* Auth pages */
[data-skin="light"] .auth-wrap { background: var(--bg0); }
[data-skin="light"] .auth-card { background: var(--bg1); border-color: rgba(0,0,0,.1); }
/* ── Overrides globales para páginas con estilos embebidos ── */
/* Fuerza el fondo de body/content usando !important para superar <style> en páginas */
[data-skin="light"] body { background-color: var(--bg-body) !important; }
/* Perm chips y badges con rgba blanco */
[data-skin="light"] .perm-chip { background: rgba(17,24,39,.06); color: rgba(17,24,39,.6); border-color: rgba(17,24,39,.15); }
/* Toasts en modo claro */
[data-skin="light"] .toast { color: var(--t1); }
/* Pill "Conectado" */
[data-skin="light"] .pill--green { background: rgba(58,137,195,.1); }
/* Cualquier elemento con role chip: mantiene sus colores semánticos */
/* Fix del overlay de lone worker y modal en light */
[data-skin="light"] .overlay { background: rgba(0,0,0,.75); }
/* Toggle track: mantiene colores semánticos (rojo/verde) — no tocar */
/* Fix de la barra de separación entre header y contenido */
[data-skin="light"] .whdr { box-shadow: 0 1px 0 var(--border); }

/* ================================================================
   SKIN: CARBON — grises grafito cálidos, acento ámbar
   ================================================================ */
[data-skin="carbon"] {
  --bg0:       #1c1917;
  --bg1:       #242220;
  --bg2:       #2d2a27;
  --bg-body:   #171412;
  --bg-chrome: #111110;
  --bg-modal:  #242220;
  --bg-glow:   rgba(245,158,11,.15);
  --bg-grid:   rgba(255,255,255,.018);
  --card:      rgba(255,255,255,.05);
  --card2:     rgba(255,255,255,.09);
  --border:    rgba(255,255,255,.09);
  --bord2:     rgba(255,255,255,.16);
  --a:         #f59e0b;
  --ad:        rgba(245,158,11,.13);
  --ag:        rgba(245,158,11,.32);
  --t1:        #fafaf9;
  --t2:        rgba(250,250,249,.56);
  --t3:        rgba(250,250,249,.3);
  --a-glow:    rgba(245,158,11,.45);
}
/* Botón home de la nav mobile (color textual directo porque --a es ámbar) */
[data-skin="carbon"] .mob-nav__item--home { color: #111 !important; }
/* Hover states que usan rgba teal hardcodeado → reemplazar por ámbar */
[data-skin="carbon"] .sb2:hover { background: rgba(245,158,11,.06); }
[data-skin="carbon"] .sb2.on    { background: rgba(245,158,11,.13); color: var(--a); }
[data-skin="carbon"] .rb:hover  { background: rgba(245,158,11,.06); }
[data-skin="carbon"] .rb.on     { background: rgba(245,158,11,.10); border-color: var(--a); }
/* Badge "green" semantic: en carbón mantiene verde (es estado, no acento) */
/* Barra de eventos activos en carbon usa acento ámbar */
[data-skin="carbon"] .brig-drawer__tab-pill { background: var(--a); color: #111; }
[data-skin="carbon"] .bev-chat-btn { border-color: rgba(245,158,11,.3); }
/* chat-tab hover en carbon */
[data-skin="carbon"] .chat-tab:hover { background: rgba(245,158,11,.1); }

/* ── Login page ─────────────────────────────────────────────────────────── */
body.auth-body { background: radial-gradient(ellipse at top, #13202f 0%, #0a111c 60%); }
.auth-card     { box-shadow: 0 0 60px rgba(78,159,223,.06); }
.auth-logo__main { text-shadow: 0 0 30px rgba(78,159,223,.3); }
.login-tabs { display: flex; gap: 0; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.login-tab {
  flex: 1; padding: 10px 8px; text-align: center; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.38); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s; user-select: none;
}
.login-tab:hover  { color: rgba(255,255,255,.65); }
.login-tab.active { color: var(--a); border-bottom-color: var(--a); }
.code-input {
  display: block; width: 100%; padding: 16px 14px; font-size: 24px; font-weight: 800;
  font-family: 'Courier New', monospace; letter-spacing: .18em; text-align: center;
  text-transform: uppercase; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.15);
  border-radius: 12px; color: var(--t1); outline: none; transition: border-color .15s;
  caret-color: var(--a); -webkit-appearance: none;
}
.code-input:focus { border-color: var(--a); }
.code-input::placeholder { color: rgba(255,255,255,.2); letter-spacing: .1em; font-size: 18px; }

/* ── Chat panel ─────────────────────────────────────────────────────────── */
.chat-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80;
  background: var(--bg-chrome); border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px; padding: 10px 7px;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11px; color: var(--a); letter-spacing: .06em;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: background .2s;
}
.chat-tab:hover   { background: rgba(78,159,223,.1); }
.chat-tab.open    { right: 282px; }
.chat-badge {
  position: absolute; top: -5px; right: -5px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
  border: 2px solid var(--bg-chrome);
}
.chat-p {
  width: 282px; background: var(--bg-chrome); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; right: -283px; top: 41px; bottom: 0; z-index: 70;
  transition: right .25s ease;
}
.chat-p.open { right: 0; }
@media (max-width: 768px) {
  .chat-tab {
    top: auto;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 56px);
    transform: none; writing-mode: horizontal-tb;
    border-radius: 8px 0 0 8px; padding: 8px 9px; font-size: 12px;
  }
  .chat-tab.open { display: none; } /* en mobile el cierre es la ✕ del header, ver widgetChat.php */
  .chat-p { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* Chat a pantalla completa (estilo WhatsApp) — RECETA_CHAT_MOBILE_FULLSCREEN.md.
     right:-100% (no -283px) para que no quede ningún borde asomando cerrado. */
  .chat-p { width: 100%; right: -100%; border-left: none; }
}
.cp-hdr  { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.cp-title { font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.cp-chs  { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-btn {
  font-size: 10px; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--border); background: none;
  color: var(--t2); cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 4px;
}
.cc-btn:hover, .cc-btn.on { border-color: var(--a); color: var(--a); background: var(--ad); }
.cc-btn--ev { border-color: rgba(248,113,113,.35); }
.cc-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cp-msgs {
  flex: 1; overflow-y: auto; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.cmsg    { max-width: 93%; }
.cmsg.ow { align-self: flex-end; }
.cbub {
  padding: 7px 10px; border-radius: 9px; font-size: 12px; line-height: 1.45;
  background: var(--card); border: 1px solid var(--border);
}
.cmsg.ow .cbub { background: var(--ad); border-color: var(--ag); }
.cmeta         { font-size: 10px; color: var(--t3); margin-top: 2px; }
.cmsg.ow .cmeta { text-align: right; }
.cp-inp  { padding: 8px 12px; border-top: 1px solid var(--border); }
.cp-q    { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.cq {
  font-size: 10px; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--border); background: none; color: var(--t2); cursor: pointer;
}
.cq:hover    { border-color: var(--a); color: var(--a); }
.cp-row      { display: flex; gap: 5px; }
.cp-finp {
  flex: 1; min-width: 0; /* sin esto el input no baja de ~170px (mínimo intrínseco) y puede empujar el mic/enviar fuera del panel */
  background: var(--card); border: 1px solid var(--border);
  color: var(--t1); padding: 6px 9px; border-radius: var(--rads); outline: none; font-size: 13px;
}
.cp-send { flex-shrink: 0; }
.cp-finp:focus { border-color: var(--a); }
.cp-send {
  background: var(--a); color: #03060b; font-weight: 700;
  border: none; padding: 6px 12px; border-radius: var(--rads); cursor: pointer; font-size: 14px;
}
.cp-send:hover { opacity: .88; }

/* ══════════════════════════════════════════════════════════════════════════════
   EL PIZARRÓN — pizarra de pase de turno. Ver muestrario-pizarra.html /
   RECETA_PIZARRA.md. Único objeto cálido/análogo del sistema: pizarrón verde
   gastado + marco madera + papelitos pinchados. Ningún otro módulo hereda esta
   paleta (ni siquiera el skin "carbon": el pizarrón no sigue al acento).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Solapa: posición/offsets sin cambios (los usa FIX_FLOTANTES_INICIO) ── */
.piz-tab {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 160;
  background: #1c1812; border: 1px solid rgba(212,168,75,.35); border-left: none;
  border-radius: 0 8px 8px 0; padding: 10px 7px;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11px; color: #d4a84b; letter-spacing: .06em;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: background .2s;
}
.piz-tab:hover { background: rgba(212,168,75,.1); }
@media (max-width: 768px) {
  .piz-tab {
    top: auto; bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 56px);
    transform: none; writing-mode: horizontal-tb;
    border-radius: 0 8px 8px 0; padding: 8px 9px; font-size: 12px;
  }
}
.piz-badge {
  position: absolute; top: -5px; right: -5px;
  background: radial-gradient(circle at 35% 30%, #e2604e, #c0392b 55%, #7c1d12);
  color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
  border: 2px solid var(--bg-chrome);
}

/* ── Velo detrás del pizarrón abierto ── */
.pz-velo {
  position: fixed; inset: 0; background: rgba(3,7,13,.55); z-index: 940;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.pz-velo.open { opacity: 1; visibility: visible; }

/* ── El pizarrón: entra por la izquierda, hoja ancha en desktop ── */
.piz-p {
  width: min(68vw, 900px); background: none; border: none;
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 950;
  transform: translateX(-105%); transition: transform .25s ease;
}
.piz-p.open { transform: translateX(0); }
@media (max-width: 768px) {
  .piz-p { width: 100vw; }
}

/* ── Marco de madera ── */
.pz-marco {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #a5834f, #8a6a3f 55%, #74562f);
  padding: 12px; box-shadow: 4px 0 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  border-radius: 0 10px 10px 0;
}
@media (max-width: 768px) { .pz-marco { border-radius: 0; } }

/* ── Superficie verde gastada ── */
.pz-tablero {
  flex: 1; min-height: 0; border-radius: 4px; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 18% 8%,  rgba(255,255,255,.055), transparent 58%),
    radial-gradient(100% 90% at 85% 92%, rgba(233,229,214,.045), transparent 55%),
    radial-gradient(60% 40% at 55% 45%,  rgba(233,229,214,.025), transparent 70%),
    #33443b;
  box-shadow: inset 0 0 46px rgba(0,0,0,.32);
  display: flex; flex-direction: column;
}
.pz-cab { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 10px; flex-shrink: 0; }
.pz-cab__titulo {
  color: #e9e5d6; font-size: 15px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: underline wavy rgba(233,229,214,.3); text-decoration-thickness: 1.5px; text-underline-offset: 7px;
}
.pz-cab__conteo { color: rgba(233,229,214,.55); font-size: 12px; }
.pz-cab__acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pz-cab__accion {
  background: none; border: 1.5px solid rgba(233,229,214,.3); color: rgba(233,229,214,.8);
  height: 30px; padding: 0 9px; border-radius: 15px; display: flex; align-items: center; gap: 4px;
  font-size: 13px; cursor: pointer;
}
.pz-cab__accion:hover { background: rgba(233,229,214,.1); color: #e9e5d6; }
.pz-cab__accion.activo { background: rgba(233,229,214,.16); border-color: rgba(233,229,214,.5); color: #e9e5d6; }
.pz-cab__accion--vacia { opacity: .55; }
.pz-cab__accion-count { font-size: 10px; font-weight: 700; }
.pz-cab__cerrar {
  margin-left: 0; background: none; border: 1.5px solid rgba(233,229,214,.35);
  color: #e9e5d6; width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.pz-cab__cerrar:hover { background: rgba(233,229,214,.1); }

/* ── Grilla de papelitos, en columnas — no freeform ── */
.pz-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 18px 18px; columns: 3 220px; column-gap: 14px;
}
.pz-grid > * { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 768px) { .pz-grid { columns: 2; padding: 8px 12px 12px; } }
.pz-vacio { color: rgba(233,229,214,.55); font-size: 13px; text-align: center; padding: 40px 12px; }

/* ── El papelito ── */
.pz-papel {
  background: linear-gradient(180deg, #f9f3e2, #f6efdb 40%, #efe4c6);
  color: #3b352a; border-radius: 2px;
  padding: 16px 14px 9px; position: relative;
  box-shadow: 0 7px 16px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.3);
  font-size: 13px; line-height: 1.55; word-break: break-word;
}
.pz-papel::before {
  content: ""; position: absolute; top: -6px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e2604e, #c0392b 55%, #7c1d12);
  box-shadow: 0 2px 4px rgba(0,0,0,.45);
}
.pz-papel__titulo { font-weight: 750; font-size: 14px; margin-bottom: 5px; letter-spacing: -.005em; }
.pz-papel__firma {
  display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 6px;
  border-top: 1px dashed rgba(59,53,42,.22);
  font-size: 11px; color: #6b6252;
}
.pz-papel__firma .pz-del {
  margin-left: auto; background: none; border: none; color: rgba(107,98,82,.55);
  font-size: 13px; cursor: pointer; padding: 0 2px;
}
.pz-papel__firma .pz-del:hover { color: #b23a2b; }
.pz-papel--viejo {
  background: linear-gradient(180deg, #ecdfbd, #e6d7b2 45%, #ddcda4);
  color: #55503f;
}
.pz-papel--viejo .pz-papel__firma { color: #837a63; }
.pz-grid .pz-papel:nth-child(4n+1) { transform: rotate(-1.1deg); }
.pz-grid .pz-papel:nth-child(4n+2) { transform: rotate(.9deg); }
.pz-grid .pz-papel:nth-child(4n+3) { transform: rotate(-.5deg); }
.pz-grid .pz-papel:nth-child(4n)   { transform: rotate(1.3deg); }

/* ── Papelera de la pizarra (RECETA_MEJORAS_LOTE1.md, Punto 3) ── */
.pz-papel--papelera { opacity: .55; filter: grayscale(.4); }
.pz-papel--papelera::before {
  background: radial-gradient(circle at 35% 30%, #c2c2c2, #8a8a8a 55%, #555);
}
.pz-papelera__acciones { display: flex; gap: 6px; margin-top: 8px; }
.pz-papelera__leyenda { column-span: all; color: rgba(233,229,214,.5); font-size: 11px; text-align: center; padding: 4px 12px 10px; }

/* ── Toast flotante del widget de pizarra (ej. "Enviada a la papelera") ── */
.pz-toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: #1c2a22; color: #e9e5d6; border: 1px solid rgba(233,229,214,.25);
  border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 5;
  opacity: 1; transition: opacity .4s ease;
}
.pz-toast--fuera { opacity: 0; }

/* ── Papel de componer, fijo al pie del tablero ── */
.pz-componer {
  flex-shrink: 0; margin: 0 18px 16px; background: linear-gradient(180deg, #f9f3e2, #f6efdb);
  border-radius: 3px; padding: 10px 12px; transform: rotate(-.3deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
}
@media (max-width: 768px) { .pz-componer { margin: 0 12px 12px; } }
.pz-componer__titulo {
  width: 100%; border: none; background: none; font-weight: 700; font-size: 13px;
  color: #3b352a; margin-bottom: 4px; font-family: inherit; outline: none;
}
.pz-componer__titulo::placeholder { color: rgba(59,53,42,.4); }
.pz-componer__texto {
  width: 100%; border: none; background: none; resize: none; font-size: 12.5px;
  color: #3b352a; font-family: inherit; outline: none; line-height: 1.5;
}
.pz-componer__texto::placeholder { color: rgba(59,53,42,.45); }
.pz-componer__fila { display: flex; justify-content: flex-end; margin-top: 8px; }
.pz-componer__btn {
  background: #8a6a3f; color: #f6efdb; border: none; border-radius: 7px;
  font-size: 12px; font-weight: 700; padding: 6px 16px; cursor: pointer;
}
.pz-componer__btn:hover { background: #9c7847; }
.pz-componer__btn:disabled { opacity: .6; cursor: wait; }

/* ── Porta-tiza decorativo ── */
.pz-porta {
  margin-top: 10px; height: 14px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(180deg, #79592e, #684b24);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
.pz-porta__tiza { width: 34px; height: 7px; border-radius: 3px; background: linear-gradient(180deg, #f4f0e4, #cfcabb); }
.pz-porta__borrador { width: 46px; height: 9px; border-radius: 2px; background: linear-gradient(180deg, #4a4038, #322b25); }

.pz-inp  { padding: 8px 12px; border-top: 1px solid rgba(212,168,75,.2); }
.pz-row  { display: flex; gap: 5px; }
.pz-finp {
  flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #eeeeee; padding: 6px 9px; border-radius: var(--rads); outline: none;
  font-size: 12px; resize: none; font-family: inherit;
}
.pz-finp::placeholder { color: rgba(255,255,255,.22); }
.pz-finp:focus { border-color: rgba(212,168,75,.5); }
.pz-send {
  background: #d4a84b; color: #111; font-weight: 700;
  border: none; padding: 6px 12px; border-radius: var(--rads); cursor: pointer; font-size: 12px;
}
.pz-send:hover { background: #c49a3c; }

/* ── Dashboard (pag_dashboard) ──────────────────────────────────────────── */
body.page-dashboard { overflow: hidden; }
body.page-dashboard .content { padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important; }
@media (max-width:768px) { body.page-dashboard .content { padding-bottom: calc(62px + env(safe-area-inset-bottom,0px))!important; } }
.up-wrap { flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative; }
.up-hdr  { display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--border); }
.up-body {
  flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding:14px 16px;
  display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--bg-body);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 30%, var(--bg-glow) 0%, transparent 70%),
    linear-gradient(var(--bg-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
  background-size:100% 100%,36px 36px,36px 36px;
}
.bi-stats  { display:grid;gap:10px;width:100%;max-width:480px; }
.bi-stat   { background:var(--card);border:1px solid var(--border);border-radius:var(--rad);padding:14px 12px 12px;text-align:center;text-decoration:none;color:var(--t1);display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .18s,box-shadow .18s;border-top-width:3px; }
.bi-stat:hover { text-decoration:none; }
.bi-stat--blue   { border-top-color:#4e9fdf; } .bi-stat--blue:hover   { border-color:#4e9fdf;box-shadow:0 0 10px rgba(58,137,195,.2); }
.bi-stat--red    { border-top-color:#ff3d2e; } .bi-stat--red:hover    { border-color:#ff3d2e;box-shadow:0 0 10px rgba(255,61,46,.2); }
.bi-stat--yellow { border-top-color:#f5c518; } .bi-stat--yellow:hover { border-color:#f5c518;box-shadow:0 0 10px rgba(245,197,24,.2); }
.bi-stat--green  { border-top-color:#3ecf8e; } .bi-stat--green:hover  { border-color:#3ecf8e;box-shadow:0 0 10px rgba(34,197,94,.2); }
.bi-stat--dim    { border-top-color:var(--border); }
.bi-stat__val  { font-size:32px;font-weight:900;line-height:1; }
.bi-stat--blue   .bi-stat__val { color:#4e9fdf; }
.bi-stat--red    .bi-stat__val { color:#ff3d2e; }
.bi-stat--yellow .bi-stat__val { color:#f5c518; }
.bi-stat--green  .bi-stat__val { color:#3ecf8e; }
.bi-stat--dim    .bi-stat__val { color:var(--t3); }
.bi-stat__icon { font-size:26px;line-height:1; }
.bi-stat__dot  { width:14px;height:14px;border-radius:50%;display:inline-block; }
.bi-stat__dot--on  { background:#f5c518;box-shadow:0 0 8px 3px rgba(245,197,24,.5); }
.bi-stat__dot--off { background:var(--t3); }
.bi-stat__lbl  { font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;line-height:1.4; }
.up-sup-block  { display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;width:100%; }
.up-ring-card  { display:flex;flex-direction:column;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--rad);padding:14px;text-decoration:none;color:var(--t1);transition:border-color .18s; }
.up-ring-card:hover { border-color:var(--a);text-decoration:none; }
.up-comm-card  { display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card);border:1px solid rgba(245,178,60,.25);background:rgba(245,178,60,.04);border-radius:var(--rad);padding:16px 20px;text-decoration:none;color:var(--t1);transition:border-color .18s;min-width:100px; }
.up-comm-card:hover { text-decoration:none;border-color:rgba(245,178,60,.5); }
.brig-st    { display:flex;align-items:center;gap:12px;flex:1;min-width:0; }
.brig-st__lbl  { font-weight:700;font-size:14px;white-space:nowrap;line-height:1.2; }
.brig-st__lbl.av  { color:#22e664; } .brig-st__lbl.nav { color:#ff3d2e; }
.brig-st__src  { font-size:10px;color:var(--t3);margin-top:2px; }
.brig-st__next { font-size:10px;color:var(--t3);margin-top:1px; }
.sw-tgl { position:relative;display:inline-block;width:54px;height:30px;flex-shrink:0;cursor:pointer; }
.sw-tgl input { opacity:0;width:0;height:0;position:absolute; }
.sw-tgl__track { position:absolute;inset:0;border-radius:15px;background:rgba(255,55,45,.28);border:1.5px solid rgba(255,55,45,.55);transition:background .28s,border-color .28s; }
.sw-tgl__track::after { content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#ff3d2e;transition:transform .28s,background .28s;animation:tglPulseRed 1.8s ease-in-out infinite; }
.sw-tgl input:checked+.sw-tgl__track { background:rgba(34,230,100,.2);border-color:rgba(34,230,100,.55); }
.sw-tgl input:checked+.sw-tgl__track::after { transform:translateX(24px);background:#22e664;animation:tglPulseGreen 1.8s ease-in-out infinite; }
@keyframes tglPulseRed   { 0%,100%{box-shadow:0 0 5px 2px rgba(255,60,46,.45)}50%{box-shadow:0 0 16px 6px rgba(255,60,46,.85)} }
@keyframes tglPulseGreen { 0%,100%{box-shadow:0 0 5px 2px rgba(34,230,100,.45)}50%{box-shadow:0 0 16px 6px rgba(34,230,100,.85)} }
.brig-inst-sel { background:var(--card);border:1px solid var(--border);color:var(--t1);padding:6px 10px;border-radius:var(--rads);font-size:12px;font-family:inherit;outline:none;max-width:170px;cursor:pointer; }
.brig-inst-sel:focus { border-color:var(--a); }
.brig-inst-lbl { font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px; }
.bi-ev-bar { display:flex;align-items:center;gap:9px;background:rgba(255,60,46,.1);border:1.5px solid rgba(255,60,46,.5);border-radius:30px;padding:8px 16px 8px 12px;cursor:pointer;width:calc(100% - 32px);max-width:360px;align-self:center;animation:evBarPulse 1.8s ease-in-out infinite; }
.bi-ev-bar__n    { font-size:24px;font-weight:900;line-height:1;color:#ff3d2e; }
.bi-ev-bar__lbl  { font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ff3d2e;flex:1; }
.bi-ev-bar__type { font-size:10px;color:var(--t2); } .bi-ev-bar__arr { font-size:10px;color:var(--t3); }
@keyframes evBarPulse { 0%,100%{box-shadow:0 0 5px 2px rgba(255,60,46,.28)}50%{box-shadow:0 0 18px 7px rgba(255,60,46,.65)} }
.bi-report { width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:var(--rad);padding:14px;display:flex;flex-direction:column;gap:10px; }
.bi-report__title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t2); }
.bi-report__chips { display:flex;flex-wrap:wrap;gap:6px; }
.bi-rchip { font-size:11px;font-weight:600;color:var(--t1);background:rgba(58,137,195,.1);border:1px solid rgba(58,137,195,.3);border-radius:20px;padding:5px 12px;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s; }
.bi-rchip:hover,.bi-rchip.active { background:rgba(58,137,195,.22);border-color:#4e9fdf;color:#4e9fdf; }
.bi-report__row { display:flex;gap:8px; }
.bi-report__inp { flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--t1);font-family:inherit;outline:none;transition:border-color .15s; }
.bi-report__inp:focus { border-color:#4e9fdf; } .bi-report__inp::placeholder { color:var(--t3); }
.bi-report__btn { font-size:12px;font-weight:700;color:#fff;background:#4e9fdf;border:none;border-radius:8px;padding:7px 14px;cursor:pointer;font-family:inherit;white-space:nowrap; }
.bi-report__reply { font-size:11px;color:#4e9fdf;background:rgba(58,137,195,.08);border-radius:7px;padding:7px 10px;border-left:2px solid #4e9fdf; }

/* ── Central de Operaciones ──────────────────────────────────────── */
.co-wrap { display:flex;height:calc(100vh - 130px);min-height:480px;border-radius:12px;overflow:hidden;border:1px solid var(--border);margin-top:10px; }
.co-side { width:300px;flex-shrink:0;background:#07111f;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden; }
.co-filters { padding:10px;display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border); }
.co-fbtn { font-size:11px;padding:4px 9px;border-radius:20px;border:1px solid var(--border);background:transparent!important;color:var(--t2)!important;cursor:pointer;font-weight:600;transition:background .12s,color .12s,border-color .12s;outline:none!important;box-shadow:none!important;user-select:none;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center; }
.co-fbtn:hover { background:rgba(255,255,255,.06)!important; }
.co-fbtn.on { background:rgba(78,159,223,.15)!important;color:var(--a)!important;border-color:rgba(78,159,223,.4)!important; }
.co-list { flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px; }
.co-item { padding:10px 12px;border-radius:8px;border:1px solid var(--border);border-left:3px solid;background:rgba(255,255,255,.03);cursor:pointer;transition:background .1s;user-select:none; }
.co-item:hover { background:rgba(255,255,255,.07); }
.co-item.sel { background:rgba(78,159,223,.08);border-color:rgba(78,159,223,.4)!important; }
.co-item__hd { display:flex;align-items:center;gap:6px;margin-bottom:3px; }
.co-item__ico { font-size:14px;flex-shrink:0; }
.co-item__ttl { font-size:13px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.co-item__ago { font-size:10px;color:var(--t3);flex-shrink:0; }
.co-item__sub { font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.co-item__ft  { display:flex;align-items:center;gap:6px;margin-top:5px; }
.co-item__nopos { font-size:10px;color:var(--t3); }
.co-map-area { flex:1;display:flex;min-width:0;overflow:hidden; }
.co-map-col  { flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;overflow:hidden; }
#coMap       { flex:1;min-width:0;min-height:0; }
.co-layers { flex-shrink:0;display:flex;align-items:center;gap:5px;padding:7px 10px;flex-wrap:wrap;border-bottom:1px solid var(--border);background:rgba(5,12,22,.97); }
.co-lchip { display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:16px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer;border:1.5px solid;transition:opacity .18s,background .18s;user-select:none;-webkit-tap-highlight-color:transparent; }
.co-lchip.off { opacity:.28; }
.co-lchip--ar { border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.08);color:#c084fc; }
.co-lchip--el { border-color:rgba(58,137,195,.5);background:rgba(58,137,195,.08);color:#4e9fdf; }
.co-lchip-n { font-size:9px;background:rgba(255,255,255,.12);border-radius:10px;padding:1px 5px;min-width:14px;text-align:center; }
.co-detail { width:300px;flex-shrink:0;background:#07111f;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width .25s ease; }
.co-detail.hidden { width:0;border-left:none; }
.co-detail__head { display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0; }
.co-detail__ico  { font-size:20px;flex-shrink:0; }
.co-detail__ttl  { flex:1;font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.co-detail__close { width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;outline:none; }
.co-detail__close:hover { background:rgba(255,255,255,.08);color:var(--t1); }
.co-detail__body { flex:1;overflow-y:auto;padding:14px; }
.co-detail__row  { display:flex;flex-direction:column;gap:2px;margin-bottom:12px; }
.co-detail__lbl  { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3); }
.co-detail__val  { font-size:13px;color:var(--t1);line-height:1.4; }
.co-detail__link { display:block;text-align:center;padding:9px 14px;margin-top:16px;background:rgba(78,159,223,.1);border:1px solid rgba(78,159,223,.3);color:var(--a);border-radius:8px;text-decoration:none;font-size:12px;font-weight:700;transition:background .12s; }
.co-detail__link:hover { background:rgba(78,159,223,.2); }
.mm { width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.35); }
.mm--ev-live { animation:ev-pulse 1.6s ease-in-out infinite; }
.mm--qr-live { animation:qr-pulse 1.8s ease-in-out infinite; }
.mm--sos     { animation:sos-pulse 1.2s ease-in-out infinite; }
@keyframes ev-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.75)} 50%{box-shadow:0 0 0 14px rgba(239,68,68,0)} }
@keyframes qr-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.75)} 50%{box-shadow:0 0 0 12px rgba(245,158,11,0)} }
@keyframes sos-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.75)} 50%{box-shadow:0 0 0 14px rgba(220,38,38,0)} }
.co-cnt { display:inline-block;min-width:16px;height:16px;border-radius:8px;background:var(--r);color:#fff;font-size:10px;font-weight:700;padding:0 4px;line-height:16px;margin-left:3px;vertical-align:middle; }
.co-cnt.zero { background:rgba(255,255,255,.12);color:var(--t3); }
.co-sb { display:inline-block;padding:1px 6px;border-radius:20px;font-size:10px;font-weight:700; }
.co-sb--red    { background:rgba(239,68,68,.18);color:#f87171; }
.co-sb--orange { background:rgba(249,115,22,.18);color:#fb923c; }
.co-sb--yellow { background:rgba(234,179,8,.18);color:#facc15; }
.co-sb--green  { background:rgba(34,197,94,.18);color:#4ade80; }
.co-upd { position:absolute;top:10px;right:10px;z-index:1000;background:rgba(13,27,42,.88);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:11px;color:var(--t2);pointer-events:none; }
.co-empty { text-align:center;padding:36px 16px;color:var(--t3);font-size:13px; }
.leaflet-popup-content-wrapper { background:#0d1b2a!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:10px!important;color:#f0f4ff!important;box-shadow:0 4px 20px rgba(0,0,0,.6)!important; }
.leaflet-popup-tip { background:#0d1b2a!important; }
.leaflet-popup-close-button { color:var(--t2)!important; }
.leaflet-popup-content { margin:10px 13px!important; }
@media (max-width:768px) {
  .co-wrap { flex-direction:column;height:auto;border-radius:0;margin-top:6px; }
  .co-side { width:100%;height:210px;border-right:none;border-top:1px solid var(--border);order:2; }
  .co-map-area { height:calc(100vh - 400px);min-height:260px;order:1; }
  .co-layers { flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 8px; }
  .co-layers::-webkit-scrollbar { display:none; }
  .co-detail:not(.hidden) { position:absolute;bottom:0;left:0;right:0;width:100%!important;height:58%;border-left:none;border-top:1px solid var(--border);z-index:500; }
}

/* ── Notificaciones ──────────────────────────────────────────────── */
.notif-item { border-left:3px solid rgba(255,255,255,.06);transition:border-color .15s; }
.notif-item:hover { border-left-color:var(--a); }

/* ── Equipo / Brigadistas ────────────────────────────────────────── */
.ts-row { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px; }
.ts-box { flex:1;min-width:60px;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--rad);padding:10px 8px; }
.ts-g { border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.05); }
.ts-y { border-color:rgba(245,178,60,.3);background:rgba(245,178,60,.05); }
.ts-b { border-color:rgba(58,137,195,.3);background:rgba(58,137,195,.05); }
.ts-r { border-color:rgba(255,90,76,.3);background:rgba(255,90,76,.05); }
.ts-n { font-size:26px;font-weight:800;line-height:1; }
.ts-l { font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-top:4px; }

/* ── Alertas / Eventos (brigadista) ─────────────────────────────── */
.aev-empty { text-align:center;padding:48px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--rad);margin-bottom:18px; }
.aev-card { background:rgba(58,137,195,.06);border:1px solid rgba(58,137,195,.4);border-radius:12px;margin-bottom:10px;overflow:hidden;box-shadow:0 0 14px rgba(58,137,195,.08);transition:box-shadow .2s; }
.aev-card.open { box-shadow:0 0 22px rgba(58,137,195,.18);border-color:rgba(58,137,195,.65); }
.aev-hdr { display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent; }
.aev-hdr__left { flex:1;min-width:0; }
.aev-hdr__right { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.aev-type { display:block;font-size:15px;font-weight:800;color:#4e9fdf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.aev-code { display:block;font-size:10px;color:var(--t3);margin-top:2px;letter-spacing:.04em; }
.aev-resp-pill { font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(58,137,195,.15);border:1px solid rgba(58,137,195,.35);color:#4e9fdf;white-space:nowrap; }
.aev-resp-pill--pend { background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--t3); }
.aev-arrow { font-size:10px;color:var(--t3);transition:transform .28s cubic-bezier(.4,0,.2,1);display:inline-block; }
.aev-card.open .aev-arrow { transform:rotate(180deg); }
.aev-body { max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.4,0,.2,1); }
.aev-card.open .aev-body { max-height:700px; }
.aev-body__inner { padding:0 16px 16px;display:flex;flex-direction:column;gap:12px; }
.aev-loc   { font-size:13px;color:var(--t2); }
.aev-stats { font-size:11px;color:var(--t3);display:flex;gap:5px; }
.aev-map   { height:200px;border-radius:8px;overflow:hidden;border:1px solid rgba(58,137,195,.25); }
.aev-resp__lbl  { font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px; }
.aev-resp__btns { display:flex;flex-wrap:wrap;gap:7px; }
.aev-rb { font-size:12px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:var(--t2);border-radius:8px;padding:7px 13px;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent; }
.aev-rb:hover { background:rgba(58,137,195,.12);border-color:rgba(58,137,195,.4);color:#4e9fdf; }
.aev-rb--active { background:rgba(58,137,195,.18);border-color:#4e9fdf;color:#4e9fdf;font-weight:700; }

/* ── Planificador ────────────────────────────────────────────────── */
.sch-table { width:100%;border-collapse:collapse; }
.sch-table th { text-align:left;padding:8px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);border-bottom:1px solid var(--border); }
.sch-table td { padding:10px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle; }
.sch-tr--today td { background:rgba(78,159,223,.05); }
.sch-tr--today td:first-child { color:var(--a);font-weight:600; }
.sch-time { width:100%;padding:5px 8px; }
.sch-time:disabled { opacity:.3;cursor:not-allowed; }
.bi-pizarra { width:100%;max-width:400px;display:flex;flex-direction:column;gap:8px; }
.bi-pizarra__title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t2); }
.bi-pizarra__empty { font-size:12px;color:var(--t3);padding:10px 0; }
.bi-pizarra__entry { background:var(--card);border:1px solid var(--border);border-left:3px solid rgba(58,137,195,.5);border-radius:var(--rad);padding:10px 12px;display:flex;flex-direction:column;gap:5px; }
.bi-pizarra__text { font-size:13px;color:var(--t1);line-height:1.5; }
.bi-pizarra__meta { font-size:10px;color:var(--t3); }
.brig-drawer { position:absolute;bottom:0;left:0;right:0;max-height:72%;display:flex;flex-direction:column;background:var(--bg-modal);border-radius:14px 14px 0 0;border-top:1px solid rgba(78,159,223,.25);box-shadow:0 -4px 24px rgba(0,0,0,.5);transform:translateY(calc(100% - 46px));transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:60; }
.brig-drawer.open { transform:translateY(0); }
.brig-drawer__tab { flex-shrink:0;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;user-select:none; }
.brig-drawer__handle { width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.2); }
.brig-drawer__tab-pill { display:flex;align-items:center;gap:7px;background:var(--a);color:#03060b;border-radius:20px;padding:4px 14px;font-size:12px;font-weight:800;line-height:1; }
.brig-drawer__tab-dot { width:7px;height:7px;border-radius:50%;background:#03060b;opacity:.5;animation:drawerDotPulse 1.4s ease-in-out infinite; }
@keyframes drawerDotPulse { 0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.4);opacity:1} }
.brig-drawer__tab-arrow { font-size:9px;transition:transform .32s; }
.brig-drawer.open .brig-drawer__tab-arrow { transform:rotate(180deg); }
.brig-drawer__body { flex:1;overflow-y:auto;padding:4px 13px 16px;display:flex;flex-direction:column;gap:10px; }
.bev-acc { background:var(--card);border:1px solid var(--border);border-left:3px solid var(--bord2);border-radius:var(--rad);overflow:hidden;opacity:.52;transition:opacity .25s,border-color .25s; }
.bev-acc.open { background:var(--card);border-color:rgba(255,90,76,.28);border-left-color:var(--r);opacity:1; }
.bev-acc__hdr { display:flex;align-items:center;gap:8px;padding:11px 13px;cursor:pointer;user-select:none;transition:background .15s; }
.bev-acc__hdr:hover { background:var(--card2); }
.bev-acc.open .bev-acc__hdr { border-bottom:1px solid var(--border); }
.bev-acc__type { font-weight:800;font-size:14px; } .bev-acc__meta { font-size:11px;color:var(--t3);margin-top:2px; }
.bev-acc__arr { font-size:11px;color:var(--t3);transition:transform .28s; }
.bev-acc.open .bev-acc__arr { transform:rotate(90deg); }
.bev-acc__body { max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1); }
.bev-acc.open .bev-acc__body { max-height:420px; }
.bev-acc__inner { padding:10px 13px 13px; }
.bev-acc__resp { margin-bottom:10px; }
.bev-resp-done { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.bev-resp-done__lbl { font-size:11px;color:var(--t2); }
.bev-change-btn { font-size:10px;padding:2px 8px;border-radius:20px;border:1px solid var(--border);background:none;color:var(--t3);cursor:pointer;font-family:inherit;margin-left:auto; }
.bev-resp-prompt { font-size:11px;color:var(--t2);margin-bottom:7px; }
.bev-resp-btns  { display:flex;flex-wrap:wrap;gap:5px; }
.bev-rb { font-size:11px;padding:5px 10px;border-radius:var(--rads);border:1px solid var(--border);background:none;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .15s; }
.bev-rb:hover { border-color:var(--a);color:var(--a);background:var(--ad); }
.bev-acc__foot { display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:8px;border-top:1px solid var(--border); }
.bev-apoyo-sm  { font-size:11px;font-weight:600;color:var(--r);background:none;border:none;cursor:pointer;font-family:inherit;padding:0; }
.bev-detail-btn { font-size:11px;font-weight:600;color:var(--t2);text-decoration:none; }
.bev-chat-btn  { font-size:11px;font-weight:600;color:var(--a);background:var(--ad);border:1px solid rgba(78,159,223,.3);border-radius:var(--rads);padding:5px 11px;cursor:pointer;font-family:inherit;margin-left:auto; }
.bev-badge-pulse { animation:evPls 2s ease-in-out infinite; }
@keyframes evPls { 0%,100%{box-shadow:0 0 0 0 rgba(255,90,76,.45)}50%{box-shadow:0 0 0 5px rgba(255,90,76,0)} }

/* ── Panel Supervisor (pag_monitor) ──────────────────────────────── */
body.page-monitor { overflow:hidden; }
body.page-monitor .content { padding:0 !important;overflow:hidden !important;display:flex !important;flex-direction:column !important; }
@media (max-width:768px) { body.page-monitor .content { padding-bottom:calc(62px + env(safe-area-inset-bottom,0px)) !important; } }
.sup-wrap { flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative; }
.sup-hdr { flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:11px 16px 10px;border-bottom:1px solid var(--border); }
.sup-hdr-role { font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3); }
.sup-hdr-inst { font-size:16px;font-weight:800; }
.sup-badge { display:flex;align-items:center;gap:5px;border-radius:20px;padding:4px 9px;font-size:11px;font-weight:700; }
.sup-badge--r { background:var(--rd);border:1px solid var(--r);color:var(--r); }
.sup-dot { width:6px;height:6px;border-radius:50%;background:currentColor;animation:dotPulse 1s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6} }
.sup-body { flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;background-color:#080e14;background-image:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(12,65,80,.55) 0%,transparent 70%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:100% 100%,36px 36px,36px 36px; }
.sup-feed { display:flex;flex-direction:column;align-items:center;gap:20px;padding:14px 14px 0; }
.sup-stats { width:100%;max-width:380px;grid-template-columns:repeat(2,1fr) !important; }
.sup-monitor-btn { display:flex;align-items:center;gap:12px;width:100%;max-width:380px;background:rgba(78,159,223,.06);border:1px solid rgba(78,159,223,.25);border-radius:var(--rad);padding:12px 14px;text-decoration:none;color:var(--t1);transition:background .18s,border-color .18s,transform .15s; }
.sup-monitor-btn:hover { background:rgba(78,159,223,.12);border-color:rgba(78,159,223,.5);transform:translateY(-1px);text-decoration:none; }
.sup-ring-wrap { display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-decoration:none; }
.sup-ring-aura { position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 70%);opacity:.3;pointer-events:none;animation:auraBreath 2.8s ease-in-out infinite; }
@keyframes auraBreath { 0%,100%{opacity:.25;transform:translate(-50%,-58%) scale(1)}50%{opacity:.5;transform:translate(-50%,-58%) scale(1.12)} }
.sup-ring-svg { display:block;width:130px;height:130px; }
.sup-ring-lbl { font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-top:-2px; }
.sup-sec-hdr { font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:9px; }
.sup-card { background:var(--card);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden; }
.sup-rpt-link  { float:right;font-size:10px;color:var(--t3);text-decoration:none;font-weight:400;text-transform:none;letter-spacing:0; }
.sup-rpt-link:hover { color:var(--a); }
.sup-rpt-row   { background:var(--card);border:1px solid var(--border);border-radius:var(--rad);padding:10px 12px;margin-bottom:6px;display:flex;flex-direction:column;gap:6px; }
.sup-rpt-row--unread { border-left:3px solid var(--a); }
.sup-rpt-row__main { display:flex;align-items:flex-start;gap:9px; }
.sup-rpt-name  { font-size:11px;font-weight:700;color:var(--t2); }
.sup-rpt-msg   { font-size:13px;color:var(--t1);margin-top:2px;line-height:1.35; }
.sup-rpt-time  { font-size:10px;color:var(--t3);margin-top:2px; }
.sup-rpt-reply-btn { flex-shrink:0;font-size:11px;font-weight:700;background:rgba(58,137,195,.1);border:1px solid rgba(58,137,195,.35);color:var(--a);border-radius:20px;padding:4px 11px;cursor:pointer;font-family:inherit;white-space:nowrap; }
.sup-rpt-reply { font-size:11px;color:var(--t2);background:rgba(58,137,195,.06);border-radius:7px;padding:6px 9px;line-height:1.4; }
.sup-rpt-form  { display:flex;gap:6px; }
.sup-rpt-form.hidden { display:none; }
.sup-rpt-inp   { flex:1;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--t1);font-family:inherit;outline:none; }
.sup-rpt-inp:focus { border-color:var(--a); }
.sup-rpt-send  { font-size:11px;font-weight:700;color:#fff;background:var(--a);border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit; }
.sup-ev-card { background:rgba(255,255,255,.04);border:1px solid rgba(255,90,76,.22);border-left:3px solid var(--r);border-radius:12px;padding:12px 14px; }
.sup-ev-card-hdr { display:flex;align-items:flex-start;gap:10px;margin-bottom:10px; }
.sup-ev-type { font-weight:800;font-size:14px; }
.sup-ev-meta { font-size:11px;color:var(--t2);margin-top:3px; }
.sup-ev-stats { display:flex;gap:6px; }
.sup-ev-stat  { flex:1;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--rads);padding:7px 4px;text-align:center; }
.sup-ev-stat-n { display:block;font-size:18px;font-weight:800;line-height:1; }
.sup-ev-stat-l { display:block;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);margin-top:3px; }
@media (max-width:420px) { .sup-feed { padding:10px 10px 0;gap:16px; } }

/* ── Historial de Eventos ─────────────────────────────────────────── */
.suph-close-btn { font-size:11px;font-weight:700;background:rgba(255,90,76,.08);border:1px solid rgba(255,90,76,.3);color:var(--r);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s; }
.suph-close-btn:hover { background:rgba(255,90,76,.18); }
.suph-close-btn:disabled { opacity:.4;cursor:default; }

/* ── Reportes QR ──────────────────────────────────────────────────── */
.qrr-wrap   { display:flex;gap:16px;align-items:flex-start; }
.qrr-list   { flex:1;min-width:0; }
.qrr-detail { width:320px;flex-shrink:0;position:sticky;top:16px; }
@media(max-width:768px){ .qrr-wrap{flex-direction:column} .qrr-detail{width:100%;position:static} }
.qrr-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;position:relative; }
.qrr-card:hover { border-color:rgba(255,255,255,.2); }
.qrr-card.active  { border-color:var(--a); }
.qrr-card.pending { border-left:3px solid #ff3d2e; }
.qrr-card.claimed { border-left:3px solid #f5b23c; }
.qrr-card.linked  { border-left:3px solid #3ecf8e; }
.qrr-card.closed  { border-left:3px solid #64748b;opacity:.65; }
.qrr-stat   { text-align:center; }
.qrr-stat-n { font-size:22px;font-weight:900;line-height:1; }
.qrr-stat-l { font-size:10px;color:var(--t2);margin-top:2px; }

/* ── Historial Trabajo Solitario ──────────────────────────────────── */
.ci-ok   { color:#2ea043; }
.ci-miss { color:var(--r); }
.ci-stat { font-size:.8rem;display:flex;align-items:center;gap:4px; }
.tl-section    { margin-bottom:20px; }
.tl-section h3 { font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:12px; }
.tl { position:relative;padding-left:26px; }
.tl::before { content:'';position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--border); }
.tl-item { position:relative;margin-bottom:10px; }
.tl-dot { position:absolute;left:-22px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:var(--card); }
.tl-dot--start { border-color:var(--a);background:var(--a); }
.tl-dot--end   { border-color:var(--t3);background:var(--t3); }
.tl-dot--ok    { border-color:#2ea043;background:#2ea043; }
.tl-dot--miss  { border-color:var(--y);background:var(--y); }
.tl-dot--esc2  { border-color:var(--y);background:var(--yd); }
.tl-dot--esc3  { border-color:var(--r);background:var(--rd); }
.tl-dot--chat  { border-color:var(--a);background:var(--ad); }
.tl-msg   { font-size:.84rem;line-height:1.4; }
.tl-time  { font-size:.74rem;color:var(--t3);margin-top:1px; }
.tl-note  { font-size:.8rem;color:var(--t3);font-style:italic;margin-top:3px; }
.tl-chat-user { font-size:.76rem;font-weight:600;color:var(--a); }
.tl-chat-ch   { font-size:.72rem;color:var(--t3);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1px 6px;margin-left:6px; }
.tl-chat-msg  { margin-top:3px;font-size:.84rem; }
.no-chat { font-size:.82rem;color:var(--t3);font-style:italic;padding:10px 0; }

/* ── Botonera de incidentes ──────────────────────────────────────── */
.btn-inc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.btn-inc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 12px; border-radius: 12px;
  background: var(--card); border: 2px solid var(--border);
  cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.btn-inc:active  { transform: scale(.96); }
.btn-inc.selected { border-color: var(--a); background: var(--ad); }
.btn-inc__icon  { font-size: 32px; line-height: 1; }
.btn-inc__label { font-size: 12px; font-weight: 700; color: var(--t1); line-height: 1.3; }

/* ── Canales de Chat ─────────────────────────────────────────────── */
.ch-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  transition: border-color .15s;
}
.ch-card:hover { border-color: rgba(78,159,223,.3); }
.ch-card__top  { display: flex; align-items: center; gap: 10px; }
.ch-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.ch-name { font-size: 14px; font-weight: 700; }
.ch-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }

.adm-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 900; padding: 20px;
}
.adm-modal-overlay.hidden { display: none; }
.adm-modal-card {
  background: var(--bg-modal); border: 1px solid var(--bord2);
  border-radius: 16px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: admModalIn .18s ease;
  overflow: hidden;
}
@keyframes admModalIn {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.adm-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px;
}
.adm-modal-close {
  background: none; border: none; color: var(--t2);
  font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.adm-modal-close:hover { background: var(--card2); color: var(--t1); }
.adm-modal-body   { padding: 18px; }
.adm-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--border);
}
.adm-field   { margin-bottom: 14px; }
.adm-label   { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 6px; }
.adm-input   {
  width: 100%; background: var(--card); border: 1px solid var(--border);
  color: var(--t1); padding: 8px 12px; border-radius: 8px; font-size: 13px;
}
.adm-input:focus { outline: none; border-color: var(--a); background: rgba(255,255,255,.07); }
.color-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.color-opt {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.color-opt:hover   { transform: scale(1.15); }
.color-opt.selected { border-color: #fff; transform: scale(1.2); }
.member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.member-row:hover { background: rgba(255,255,255,.05); }
.member-row:hover input[type=checkbox] { accent-color: var(--a); }
.member-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}

/* ── Eventos (coord) ─────────────────────────────────────────────── */
.ev-tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.ev-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: none; color: var(--t2);
  cursor: pointer; text-decoration: none; transition: all .15s;
}
.ev-tab:hover { border-color: var(--a); color: var(--a); }
.ev-tab.on    { background: var(--ad); border-color: var(--a); color: var(--a); }
.ev-tab .ev-tab-cnt {
  display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 10px;
  background: rgba(255,255,255,.1); margin-left: 4px;
}
.ev-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 10px; transition: border-color .15s;
}
.ev-card:hover        { border-color: rgba(78,159,223,.25); }
.ev-card--active      { border-left: 3px solid var(--r); }
.ev-card--controlled  { border-left: 3px solid var(--y); }
.ev-card--drill       { border-left: 3px solid #60a5fa; }
.ev-card--closed      { opacity: .7; }
.ev-top  { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ev-code { font-size: 18px; font-weight: 700; color: var(--t1); letter-spacing: .04em; }
.ev-type { font-size: 13px; color: var(--t2); margin-top: 1px; }
.ev-loc  { font-size: 11px; color: var(--t3); margin-top: 3px; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: 11px; color: var(--t3); }
.ev-meta span { display: flex; align-items: center; gap: 4px; }
.ev-resps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ev-resp-pill {
  font-size: 10px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--t2);
}
.ev-resp-pill.has-val { border-color: var(--a); color: var(--a); background: var(--ad); }
.ev-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-confirm {
  display: none; align-items: center; gap: 8px;
  background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.3);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--t2);
}
.ev-confirm.show { display: flex; }
.pill--blue { border-color: rgba(96,165,250,.4); color: #60a5fa; background: rgba(96,165,250,.1); }

/* ── Role checkboxes y tiles ─────────────────────────────────────── */
.role-cb {
  width: 28px; height: 28px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,.15); margin: 0 auto;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--a);
  transition: border-color .15s, background .15s; user-select: none;
}
.role-cb:hover       { border-color: var(--a); background: var(--ad); }
.role-cb--on         { background: var(--ad); border-color: var(--ag); color: var(--a); }
.role-cb--yellow:hover { border-color: var(--y); background: var(--yd); }
.role-cb--on-y       { background: var(--yd); border-color: var(--y); color: var(--y); }
.role-cb.loading     { opacity: .4; pointer-events: none; }
.role-tile {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--rads);
  cursor: pointer; font-size: 12px; transition: border-color .15s, background .15s;
}
.role-tile:has(input:checked) { border-color: var(--a); background: var(--ad); }
.role-tile:hover { border-color: rgba(255,255,255,.3); }

/* ── UCL (user checklist) ────────────────────────────────────────── */
.ucl { display: flex; flex-direction: column; }
.ucl-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); transition: background .12s; cursor: pointer;
}
.ucl-row:last-child  { border-bottom: none; }
.ucl-row:hover       { background: rgba(255,255,255,.04); }
.ucl-row.ucl-hidden  { display: none; }
.ucl-row input[type="checkbox"] { accent-color: var(--a); width: 15px; height: 15px; cursor: pointer; }
.ucl-badge {
  font-size: 10px; padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--t3); margin-left: auto;
}

/* ── Permisos por rol ────────────────────────────────────────────── */
.prm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.prm-tab {
  padding: 7px 16px; border-radius: var(--rad);
  border: 1px solid var(--border); background: rgba(255,255,255,.04);
  color: var(--t2); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.prm-tab:hover  { background: rgba(255,255,255,.08); color: var(--t1); }
.prm-tab.active {
  background: rgba(58,137,195,.15); border-color: rgba(58,137,195,.5); color: #4e9fdf;
}
.prm-panel.hidden { display: none; }
.prm-sw-wrap {
  position: relative; display: inline-block;
  width: 40px; height: 22px; cursor: pointer;
}
.prm-sw-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.prm-sw {
  position: absolute; inset: 0; border-radius: 11px;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
  transition: background .2s, border-color .2s;
}
.prm-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: transform .2s, background .2s;
}
.prm-sw-wrap input:checked + .prm-sw { background: rgba(34,197,94,.2); border-color: #3ecf8e; }
.prm-sw-wrap input:checked + .prm-sw::after { transform: translateX(18px); background: #3ecf8e; }
.prm-sw-wrap.busy { opacity: .5; pointer-events: none; }
.prm-reset-btn {
  padding: 6px 14px; border-radius: var(--rad);
  border: 1px solid rgba(255,180,0,.35); background: rgba(255,180,0,.07);
  color: rgba(255,180,0,.8); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.prm-reset-btn:hover    { background: rgba(255,180,0,.15); border-color: rgba(255,180,0,.6); color: #ffb400; }
.prm-reset-btn:disabled { opacity: .4; pointer-events: none; }

/* ── Historial de Chat ───────────────────────────────────────────── */
.chl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: flex-end; }
.chl-filters label { font-size: 11px; color: var(--t3); display: flex; flex-direction: column; gap: 3px; }
.chl-filters select,
.chl-filters input[type=date] {
  background: var(--card); border: 1px solid var(--border); color: var(--t1);
  padding: 5px 8px; border-radius: var(--rads); font-size: 12px; min-width: 140px;
}
.chl-log  { display: flex; flex-direction: column; gap: 4px; }
.chl-row  {
  display: grid; grid-template-columns: 160px 1fr 130px 80px;
  gap: 0 12px; align-items: start; padding: 10px 14px;
  border-radius: 6px; background: var(--card); border: 1px solid var(--border);
}
.chl-row:hover { border-color: rgba(78,159,223,.25); }
.chl-who  { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chl-name { font-size: 12px; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chl-ch-badge {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--t2); white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.chl-ev .chl-ch-badge { border-color: rgba(248,113,113,.4); color: #f87171; }
.chl-msg  { color: var(--t1); font-size: 12px; line-height: 1.5; word-break: break-word; }
.chl-time { color: var(--t3); font-size: 11px; text-align: right; white-space: nowrap; }
.chl-ava  {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
}
.chl-pager { display: flex; gap: 5px; margin-top: 16px; flex-wrap: wrap; }
.chl-pager a {
  padding: 4px 10px; border-radius: var(--rads); font-size: 12px;
  border: 1px solid var(--border); color: var(--t2); text-decoration: none;
}
.chl-pager a.on,
.chl-pager a:hover { border-color: var(--a); color: var(--a); background: var(--ad); }
@media (max-width: 640px) {
  .chl-row  { grid-template-columns: 1fr; gap: 5px; }
  .chl-time { text-align: left; }
}

/* ── Leaflet map backgrounds ─────────────────────────────────────── */
#geoMainMap .leaflet-container { background: #1a1a2e; }
#brigMap    .leaflet-container { background: #1a1a2e; }


/* Dot de timeline: toma de caso */
.tl-dot--taken { background: var(--y); box-shadow: 0 0 6px var(--y); }

/* Dot de timeline: esc2 y esc3 */
.tl-dot--esc2 { background: #f5b23c; }
.tl-dot--esc3 { background: var(--r); box-shadow: 0 0 8px var(--r); }

/* ── Central: banner de filtro de modo ─────────────────────────────── */
.co-filter-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--rads);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.co-filter-banner--event { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }
.co-filter-banner--qr    { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }
.co-filter-banner__ico   { font-size: 22px; flex-shrink: 0; }
.co-filter-banner__info  { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.co-filter-banner__code  { font-size: 13px; font-weight: 800; color: var(--t1); font-family: var(--mono); }
.co-filter-banner__sep   { color: var(--t3); }
.co-filter-banner__type  { font-size: 13px; font-weight: 700; color: var(--t1); }
.co-filter-banner__loc   { font-size: 11px; color: var(--t2); }
.co-filter-banner__badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}
.co-filter-banner__badge--red    { background: rgba(239,68,68,.18);   color: #f87171; }
.co-filter-banner__badge--orange { background: rgba(249,115,22,.18);  color: #fb923c; }
.co-filter-banner__badge--yellow { background: rgba(234,179,8,.18);   color: #facc15; }
.co-filter-banner__badge--green  { background: rgba(34,197,94,.18);   color: #4ade80; }

/* ── Central: tabla de convocados ──────────────────────────────────── */
.co-convocados {
  margin-top: 20px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rad);
}
.co-convocados__hd {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.co-convocados__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
}
.co-conv-stat { font-size: 12px; font-weight: 600; }
.co-resp-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.co-resp-pill--none {
  background: rgba(255,255,255,.06);
  color: var(--t3);
  border: 1px solid rgba(255,255,255,.1);
}

/* ── CONVOCADOS SIDEBAR PANEL ────────────────────────────── */
.co-side--ev .co-list { flex: none; }
.co-conv-panel {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; border-top: 1px solid var(--border);
}
.co-conv-panel__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; color: var(--t2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.co-conv-panel__stats {
  display: flex; gap: 10px;
  font-size: 11px; font-weight: 700;
}
.co-conv-panel__list {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 1px;
  background: rgba(255,255,255,.06);
}
.co-conv-panel__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  background: #07111f;
}
.co-conv-panel__name {
  font-size: 11px; font-weight: 700; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-conv-panel__pill { align-self: flex-start; }
.co-conv-panel__sub {
  font-size: 10px; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTROLES DE FORMULARIO — estilo global
   La mayoría de las páginas migradas usan <input>/<select>/<textarea> SIN clase
   (a diferencia del sistema original, que ponía .finp en cada uno). Estas reglas
   estilizan los controles "pelados" dentro de .content y de los modales (.overlay),
   sin tocar los que ya tienen clase propia (.finp, .adm-input, toggles, etc.).
   ══════════════════════════════════════════════════════════════════════════════ */
.content  input:not([class]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]),
.content  select:not([class]),
.content  textarea:not([class]),
.overlay  input:not([class]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=color]),
.overlay  select:not([class]),
.overlay  textarea:not([class]) {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--t1);
  padding: 9px 12px;
  border-radius: var(--rads);
  outline: none;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 4px;
}
.content  input:not([class]):focus,
.content  select:not([class]):focus,
.content  textarea:not([class]):focus,
.overlay  input:not([class]):focus,
.overlay  select:not([class]):focus,
.overlay  textarea:not([class]):focus { border-color: var(--a); }

.content  textarea:not([class]),
.overlay  textarea:not([class]) { min-height: 60px; resize: vertical; }

/* Flecha custom para <select> sin clase (el nativo se ve mal sobre fondo oscuro) */
.content  select:not([class]),
.overlay  select:not([class]) {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.content select:not([class]) option,
.overlay select:not([class]) option { background: var(--bg1); color: var(--t1); }

/* Checkboxes y radios sin clase → color del tema (bajo :where para no pisar los toggles) */
.content :where(input[type=checkbox]:not([class]), input[type=radio]:not([class])),
.overlay :where(input[type=checkbox]:not([class]), input[type=radio]:not([class])) {
  accent-color: var(--a);
  cursor: pointer;
}

/* Etiquetas sueltas de formulario (no las que envuelven un control) */
.content form label:where(:not(:has(input)):not(:has(select)):not(:has(textarea))),
.overlay label:where(:not(:has(input)):not(:has(select)):not(:has(textarea))) {
  display: block;
  font-size: 11px;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin: 12px 0 5px;
}

/* Skin claro: fondo de controles sin clase */
[data-skin="light"] .content input:not([class]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]),
[data-skin="light"] .content select:not([class]),
[data-skin="light"] .content textarea:not([class]),
[data-skin="light"] .overlay input:not([class]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]),
[data-skin="light"] .overlay select:not([class]),
[data-skin="light"] .overlay textarea:not([class]) { background: rgba(0,0,0,.04); color: var(--t1); }


/* Nav móvil dividida (izquierda | home | derecha) — estaba inline en el footer original */
@media (max-width:768px) {
  .mob-nav--split { display:flex !important; align-items:center; }
  .mob-nav--split .mob-nav__side { flex:1; display:flex; justify-content:space-evenly; align-items:center; height:100%; }
  .mob-nav--split .mob-nav__items { display:none; }
}

/* Utilitarias de grilla/tabs usadas por algunas páginas migradas */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:768px) { .grid3 { grid-template-columns:1fr; } }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* ══════════════════════════════════════════════════════════════════════════════
   SELECTOR DE CONTEXTO (rol / instalación) — en el pie del sidebar y del drawer.
   Solo se renderiza si el usuario tiene más de una asignación. El menú abre hacia
   arriba (está anclado abajo). Estética alineada al resto del sistema.
   ══════════════════════════════════════════════════════════════════════════════ */
.ctx-switch { position: relative; margin-top: 10px; }
.ctx-switch__btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--t2); padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 12px; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.ctx-switch__btn:hover { border-color: var(--a); color: var(--a); background: rgba(255,255,255,.07); }
.ctx-switch__ico { font-size: 13px; flex-shrink: 0; }
.ctx-switch__lbl { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-switch__car { font-size: 9px; flex-shrink: 0; transition: transform .2s; }
.ctx-switch.open .ctx-switch__car { transform: rotate(180deg); }

.ctx-switch__menu {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg1); border: 1px solid var(--border); border-radius: 11px;
  padding: 6px; box-shadow: 0 -10px 34px rgba(0,0,0,.55);
  z-index: 300; max-height: 340px; overflow-y: auto;
}
.ctx-switch.open .ctx-switch__menu { display: block; animation: ctxIn .16s ease; }
@keyframes ctxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ctx-switch__ttl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--t3); padding: 6px 8px 8px; }

.ctx-switch__item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--t1); padding: 9px 8px;
  border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit;
  transition: background .12s;
}
.ctx-switch__item:hover { background: rgba(255,255,255,.06); }
.ctx-switch__item.on { background: var(--ad); }
.ctx-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ctx-switch__item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ctx-switch__rol  { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-switch__inst { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-switch__check { color: var(--a); font-weight: 700; flex-shrink: 0; }

/* En el sidebar colapsado se oculta (el usuario expande el menú para cambiar) */
body.sb-collapsed .ctx-switch { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   HOME COMPUESTA (pagInicio.php) — franja de estado, indicadores y accesos
   rápidos generados por libComposicion.php. Mismo inventario de bloques en
   mobile y desktop: solo cambia el layout (columnas) y el recorte por CSS.

   En mobile rige la sección 9 de SOLUCION_DISENO_UI_ROLES_PERMISOS.md: CERO
   SCROLL. Es un sistema de emergencias — nada puede cambiar de lugar mientras
   se usa. body.page-inicio fija el viewport SOLO en mobile (media query de
   más abajo); en desktop el scroll normal de .content sigue intacto.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Franja de estado personal (toggle de disponibilidad + SOS) ── */
.home-status-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-radius: 14px; }
.disp-toggle-wrap { display: flex; align-items: center; gap: 12px; }
.disp-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.disp-toggle input { opacity: 0; width: 0; height: 0; }
.disp-toggle__slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 26px;
  background: var(--rd); border: 1px solid var(--border); transition: background .2s;
}
.disp-toggle__slider::before {
  content: ""; position: absolute; width: 19px; height: 19px; left: 2.5px; top: 2.5px;
  background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.disp-toggle input:checked + .disp-toggle__slider { background: var(--g); }
.disp-toggle input:checked + .disp-toggle__slider::before { transform: translateX(20px); }
.disp-toggle input:disabled + .disp-toggle__slider { opacity: .6; cursor: wait; }
#dispEtiqueta { font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; }
#dispSubEtiqueta { font-size: 11.5px; }
#btnSOS.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rd); border: 1px solid rgba(255,90,76,.45);
  color: var(--r); box-shadow: none;
}

/* ── D1 desktop: grilla de tarjetas de indicador (severidad → borde de color).
      Oculta por defecto: en mobile rigen los chips compactos de más abajo;
      se activa recién en el media query de escritorio (min-width:769px). ── */
.ind-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
.ind-card {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  text-decoration: none; color: inherit; border-left: 3px solid var(--border);
  transition: transform .12s, border-color .12s;
}
.ind-card:hover { transform: translateY(-1px); }
.ind-card__icono { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--t2); }
.ind-card__valor { font-size: 20px; font-weight: 800; color: var(--t1); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ind-card__etiqueta { font-size: 11px; color: var(--t3); }
.ind-card--critico  { border-left-color: var(--r); }
.ind-card--atencion { border-left-color: var(--o); }
.ind-card--info     { border-left-color: var(--bl); }
.ind-card--ok       { border-left-color: var(--a); }

/* ── D1 mobile: fila fija de chips compactos (máx. 4) + chip "+N" con overlay ── */
.ind-chip-row { display: flex; gap: 8px; }
.ind-grid { display: none; }
.ind-chip {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--border); border-top: 3px solid var(--border);
  text-decoration: none; color: inherit; font-family: inherit; cursor: pointer;
}
.ind-chip__icono { font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--t2); }
.ind-chip__valor { font-size: 14.5px; font-weight: 700; color: var(--t1); line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ind-chip--critico  { border-top-color: var(--r); }
.ind-chip--atencion { border-top-color: var(--o); }
.ind-chip--info     { border-top-color: var(--bl); }
.ind-chip--ok       { border-top-color: var(--a); }
.ind-chip--mas { color: var(--t2); font-weight: 800; font-size: 15px; }

/* ── D2: grilla de acciones rápidas — recorte a 6 tiles en mobile, 10 en desktop ── */
.accion-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.accion-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px 8px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--border); text-decoration: none; color: inherit;
  text-align: center; transition: transform .12s, border-color .12s; min-height: 84px;
}
.accion-tile:hover { transform: translateY(-1px); border-color: var(--a); }
.accion-tile__icono {
  width: 38px; height: 38px; margin: 0 auto;
  border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--ad); color: var(--a);
}
.accion-tile__etiqueta { font-size: 11.5px; font-weight: 600; letter-spacing: -.005em; margin-top: 2px; }
.accion-tile--extra { display: none; }

/* Color por módulo — el color de MÓDULO (qué es) queda separado del color de
   SEVERIDAD (cómo está, en badges/bordes de indicador) para no mezclar los
   dos vocabularios. Ver muestrario-restyling.html, decisión 6. */
.mod-red    .accion-tile__icono { background: rgba(255,90,76,.14);  color: #ff5a4c; }
.mod-orange .accion-tile__icono { background: rgba(245,140,60,.15); color: #f58c3c; }
.mod-blue   .accion-tile__icono { background: rgba(78,159,223,.14); color: #4e9fdf; }
.mod-teal   .accion-tile__icono { background: rgba(62,207,142,.13); color: #3ecf8e; }
.mod-violet .accion-tile__icono { background: rgba(167,139,250,.14);color: #a78bfa; }
.mod-amber  .accion-tile__icono { background: rgba(245,178,60,.15); color: #f5b23c; }

@media (min-width: 769px) {
  .ind-chip-row { display: none; }
  .ind-grid { display: grid; grid-template-columns: repeat(4,1fr); }
  .accion-grid { grid-template-columns: repeat(5,1fr); }
  .accion-tile--extra { display: flex; }
}

/* ── Zona crítica (eventos activos) — estilos válidos en cualquier breakpoint.
   En mobile, además, tiene altura reservada y nunca la modifica (ver más abajo). ── */
.ini-critica__ok {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 58px; border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  color: var(--t3); font-size: 12px; padding: 10px;
}
.ini-critica__card {
  border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--r); padding: 12px 14px;
}
.ini-critica__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ini-critica__tipo { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; letter-spacing: -.008em; }
.ini-critica__tipo svg { color: var(--r); flex-shrink: 0; }
.ini-critica__meta { font-size: 11.5px; color: var(--t3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.ini-critica__ubic { min-height: 18px; margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.ini-critica__ubic-linea { font-size: 12px; color: var(--t3); display: flex; align-items: center; gap: 5px; }
.ini-critica__resp .btn--primary { color: #fff; }
.ini-critica__resp { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.ini-critica__pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.ini-critica__pager button {
  background: none; border: none; color: var(--t2); font-size: 16px; cursor: pointer;
  padding: 2px 8px; font-family: inherit;
}
.ini-critica__pager span { font-size: 11px; color: var(--t3); }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — CERO SCROLL. Viewport fijo: cada zona reserva su altura desde el
   primer render. Un evento entrante cambia el CONTENIDO de su zona, nunca la
   geometría de la página. Ver §9 de SOLUCION_DISENO_UI_ROLES_PERMISOS.md.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.page-inicio { overflow: hidden; }
  body.page-inicio .content {
    padding: 0 !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
  }

  .ini-wrap {
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px calc(62px + env(safe-area-inset-bottom,0px) + 10px);
  }

  /* La bienvenida no entra en el presupuesto de mobile: ya está en el drawer */
  .ini-bienvenida { display: none; }

  .home-status-bar, .ini-critica, .ind-chip-row { flex-shrink: 0; }

  /* En mobile los botones de respuesta no envuelven: se deslizan horizontal
     dentro de su propia fila fija en vez de crecer verticalmente la zona */
  .ini-critica__resp { flex-wrap: nowrap; overflow-x: auto; }
  .ini-critica__resp .btn { flex-shrink: 0; }

  /* Acciones: la única zona que puede ceder altura si el espacio aprieta */
  .ini-acciones-wrap { flex: 1; min-height: 0; overflow: hidden; display: flex; }
  .ini-acciones-wrap .accion-grid { flex: 1; grid-auto-rows: 1fr; grid-template-rows: repeat(2, 1fr); }
  .ini-acciones-wrap .accion-tile { min-height: 0; padding: 8px 6px; }

  .ini-empty { flex: 1; display: flex; align-items: center; justify-content: center; }

  /* ── Flotantes: la grilla de acciones les cede la banda inferior.
     Reserva condicional por presencia (clases tiene-* emitidas por libHTML.php):
     sin flotantes no se pierde altura. Dos niveles: el FAB solo necesita ~84px;
     las solapas de chat/pizarra llegan más arriba (~104px) y pisan al FAB si
     está, así que su valor domina (regla posterior = gana en el cascade). ── */
  body.page-inicio.tiene-fab .ini-wrap {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 84px);
  }
  body.page-inicio.tiene-chat .ini-wrap,
  body.page-inicio.tiene-pizarra .ini-wrap {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 104px);
  }
}

/* ══ Reproductor de mensajes de voz del chat (estilo WhatsApp) ═════════════════
   RECETA_CHAT_AUDIOS.md — lo renderiza js/audioMensajes.js dentro de las
   burbujas del widget de chat y de las filas de pagChatHistorial.php. */
.amsg { display: flex; align-items: center; gap: 8px; width: 220px; max-width: 100%; padding: 2px 0; }
.amsg-play {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--a); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.amsg-play:hover { filter: brightness(1.12); }
.amsg-wave { flex: 1; height: 26px; display: flex; align-items: center; gap: 1px; cursor: pointer; min-width: 80px; }
.amsg-bar { width: 2px; border-radius: 1px; background: var(--t3); opacity: .5; flex-shrink: 0; pointer-events: none; }
.amsg-bar.on { background: var(--a); opacity: 1; }
.amsg-time { font-size: 11px; color: var(--t3); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.amsg-vel {
  font-size: 10px; font-weight: 700; color: var(--t2); background: none;
  border: 1px solid var(--border); border-radius: 10px; padding: 2px 6px;
  cursor: pointer; flex-shrink: 0; line-height: 1.4;
}
.amsg-vel:hover { border-color: var(--a); color: var(--a); }

/* Barra de grabación del widget (reemplaza a la fila de entrada mientras se graba) */
.cp-rec-nivel { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; overflow: hidden; min-width: 60px; }
.cp-rec-nivel span { width: 3px; border-radius: 2px; background: var(--g); flex-shrink: 0; height: 12%; transition: height .09s linear; }
.cp-rec-btn-enviar {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--g); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cp-rec-btn-enviar:hover { filter: brightness(1.12); }
.cp-rec-btn-basura {
  background: none; border: none; color: var(--t3); cursor: pointer; padding: 4px;
  display: flex; align-items: center; flex-shrink: 0;
}
.cp-rec-btn-basura:hover { color: var(--r); }

/* ══════════════════════════════════════════════════════════════════════════
   VIDEOLLAMADA — overlay de llamada + banner de "llamada entrante"
   Componente único compartido por las 4 variantes de llamada del sistema:
   QR saliente/entrante (qr/index.php), botonera interna (pagBotonera.php),
   llamada QR entrante del lado del personal (widgetLlamadaQR.php) e
   intercomunicador (widgetIntercomunicador.php). Antes cada una tenía su
   propia copia casi idéntica con un prefijo de clase distinto
   (call-, bp-call-, llqr-, ic-) — ahora es una sola definición.
   ══════════════════════════════════════════════════════════════════════════ */
.call-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px; margin-bottom: 16px; background: transparent; color: var(--a);
  font-size: 14px; font-weight: 800; border: 2px solid var(--a); border-radius: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.call-cta:active { background: var(--ad); }

.call-overlay {
  position: fixed; inset: 0; background: #000; z-index: 9999; display: flex;
  flex-direction: column; align-items: center; justify-content: center; color: var(--t1);
  text-align: center; padding: 24px;
}
.call-overlay.hidden { display: none; }
.call-video-remoto { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; background: #0a1420; }
.call-video-remoto.hidden { display: none; }
.call-video-local {
  position: absolute; bottom: 110px; right: 16px; width: 96px; height: 130px;
  object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.25);
  background: #0a1420; z-index: 2;
}
.call-video-local.hidden { display: none; }
.call-estado-box {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 10px; max-width: 340px;
}
.call-estado-box--top {
  position: absolute; top: 24px; left: 50%; transform: translate(-50%,0);
  padding: 8px 16px; background: rgba(0,0,0,.5); border-radius: 20px; flex-direction: row; gap: 8px;
}
.call-video-espera {
  width: min(86vw,320px); aspect-ratio: 16/9; border-radius: 12px;
  overflow: hidden; background: #0a1420; box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.call-video-espera.hidden { display: none; }
.call-video-espera iframe { width: 100%; height: 100%; border: 0; display: block; }
.call-estado-icon { font-size: 56px; line-height: 1; }
.call-estado-icon.hidden { display: none; }
.call-estado-titulo { font-size: 18px; font-weight: 800; }
.call-estado-sub { font-size: 13px; color: var(--t2); line-height: 1.5; }
.call-estado-sub.hidden { display: none; }
.call-pulso {
  width: 14px; height: 14px; border-radius: 50%; background: var(--a);
  animation: callPulso 1.2s ease-in-out infinite;
}
.call-pulso.hidden { display: none; }
@keyframes callPulso { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.call-colgar-btn {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%; background: var(--r); border: none; color: #fff;
  font-size: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px var(--rg);
}
.call-colgar-btn.hidden { display: none; }
.call-cerrar-btn {
  margin-top: 8px; padding: 12px 20px; background: transparent; color: var(--t2);
  border: 1px solid var(--border); border-radius: 10px; font-size: 13px; cursor: pointer;
}
.call-cerrar-btn.hidden { display: none; }
.call-debug-line {
  position: absolute; bottom: 6px; left: 6px; right: 6px; z-index: 4;
  font-size: 10px; line-height: 1.4; color: #7ee787; background: rgba(0,0,0,.55);
  padding: 4px 8px; border-radius: 6px; font-family: monospace; word-break: break-all;
}

/* ── Banner de "llamada entrante" (Aceptar/Rechazar) — usado tanto por quien
   recibe una llamada iniciada desde un QR/botonera, como por el camino
   inverso (operador llamando a quien reportó). El modificador --flotante es
   para los widgets que aparecen sobre CUALQUIER página del sistema (ancho
   completo no tendría sentido ahí); sin el modificador, se estira de borde
   a borde — pensado para pantallas angostas de una sola columna, como
   qr/index.php o pagBotonera.php. ── */
.entrante-banner {
  position: fixed; top: 14px; left: 12px; right: 12px; z-index: 9990;
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--a); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); animation: entranteEntrada .2s ease-out;
}
.entrante-banner.hidden { display: none; }
@keyframes entranteEntrada { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
.entrante-banner--flotante { left: 50%; right: auto; max-width: 92vw; animation-name: entranteEntradaFlotante; }
@keyframes entranteEntradaFlotante { from { opacity: 0; transform: translate(-50%,-14px); } to { opacity: 1; transform: translate(-50%,0); } }
.entrante-icon { font-size: 28px; flex-shrink: 0; animation: entranteIconPulso 1s ease-in-out infinite; }
@keyframes entranteIconPulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.entrante-texto { flex: 1; min-width: 0; }
.entrante-titulo { font-size: 14px; font-weight: 800; color: var(--t1); }
.entrante-sub { font-size: 11px; color: var(--t2); }
.entrante-acciones { display: flex; flex-direction: column; gap: 6px; }
.entrante-btn { border: none; border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.entrante-btn--rechazar { background: transparent; border: 1px solid var(--border); color: var(--t2); }
.entrante-btn--aceptar { background: var(--a); color: #0d1b2a; }

/* ══════════════════════════════════════════════════════════════════════════
   UTILITARIAS — Etapa 2 de unificación de estilos (RECETA_ESTILOS_UNICOS.md).
   Un puñado de clases chicas para las combinaciones de layout/texto que se
   repetían, copiadas y pegadas, en decenas de "style=" inline por todo el
   sistema — no es un framework atómico completo a propósito (eso sería
   cambiar de problema, no resolverlo): solo los patrones que de verdad
   aparecían una y otra vez.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout flex ── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }

/* ── Márgenes verticales (el valor más repetido en "margin-bottom" suelto) ── */
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mr-6  { margin-right: 6px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-14 { margin-top: 14px; }

/* ── Texto ── */
.text-dim    { color: var(--t3); }
.text-muted  { color: var(--t2); }
.text-xs     { font-size: 11px; }
.text-sm     { font-size: 12px; }
.text-bold   { font-weight: 700; }
.text-center { text-align: center; }

/* Etiqueta de campo de formulario (label chico, mayúsculas, con tracking) —
   el mismo patrón exacto aparecía copiado y pegado en cada formulario. */
.form-label {
  font-size: 11px; color: var(--t3); text-transform: uppercase;
  letter-spacing: .06em; display: block; margin-bottom: 5px;
}

/* Checkbox de tamaño estándar (16×16, cursor pointer) — repetido en cada
   lista de checks (grupos, canales, comité, etc.). */
.chk-std { width: 16px; height: 16px; cursor: pointer; }

/* Utilitarias añadidas en la segunda pasada de Etapa 2 — cubren patrones que
   aparecían repetidos en muchos archivos pero no tenían clase equivalente. */
.text-md { font-size: 13px; }
.w-full { width: 100%; }
.cursor-pointer { cursor: pointer; }
.mt-4  { margin-top: 4px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-20 { margin-bottom: 20px; }