/* SGDEEF · hoja de estilos (una sola para todo el sistema) */
:root{
  --paper:#F4F5F6; --card:#FFFFFF; --card-2:#F8F9FA;
  --ink:#212529; --ink-2:#495057; --muted:#6C757D; --line:#DEE2E6; --line-2:#EDEFF1;
  --accent:#9B2F3E; --accent-ink:#7C2432; --accent-soft:#F7EAEC;
  --barra:#9B2F3E; --barra-ink:#FFFFFF;
  --c-alu:#A62F44; --c-doc:#0F6FBE; --c-adm:#8F7A0F;
  --ok:#2E7D51; --ok-soft:#E4F1EA;
  --warn:#8F6B08; --warn-soft:#F7EFDA;
  --crit:#B3392F; --crit-soft:#F8E5E3;
  --info:#1B5E8F; --info-soft:#E4EEF6;
  --shadow:0 1px 2px rgba(33,37,41,.06), 0 8px 24px -18px rgba(33,37,41,.35);
  --r:8px;
  color-scheme:light;
}
/* El sistema es siempre claro, como las plataformas de la SEC: no cambia
   aunque la computadora o el celular estén en modo oscuro. */
html{color-scheme:light;background:var(--paper)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Archivo,"IBM Plex Sans",system-ui,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.015em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
a{color:var(--accent-ink)}
.hidden{display:none!important}

/* ---------- shell ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:10px 20px;background:var(--barra);color:var(--barra-ink);border-bottom:3px solid rgba(0,0,0,.18)}
.lockup{display:flex;align-items:center;gap:11px;min-width:0}
.seal{width:34px;height:34px;flex:none;border-radius:6px;background:#fff;
  display:grid;place-items:center;color:var(--barra);font-family:Archivo;font-weight:700;font-size:12px;letter-spacing:.02em}
.lockup .t1{font-family:Archivo;font-weight:700;font-size:14px;line-height:1.15;letter-spacing:-.01em}
.lockup .t2{font-size:11px;color:rgba(255,255,255,.78);letter-spacing:.04em;text-transform:uppercase}
.topbar .spacer{flex:1}
.tb-btn{background:transparent;border:1px solid var(--line);border-radius:6px;padding:6px 11px;
  font-size:13px;cursor:pointer;color:var(--ink-2)}
.tb-btn:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.topbar .tb-btn{border-color:rgba(255,255,255,.45);color:#fff}
.topbar .tb-btn:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.topbar .badge-demo{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- la campanita de avisos ---------- */
.campana{position:relative;flex:none}
.campana>summary{list-style:none;cursor:pointer;display:grid;place-items:center;position:relative;
  width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.45);
  color:#fff;transition:background .12s,border-color .12s}
.campana>summary::-webkit-details-marker{display:none}
.campana>summary:hover,.campana[open]>summary{background:rgba(255,255,255,.16);border-color:#fff}
.campana>summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.campana .cmp-ic{display:block;color:#fff}
.campana[data-hay]>summary{border-color:#fff}
.campana .cmp-num{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:#fff;color:var(--barra);font-size:10.5px;font-weight:700;
  line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--barra)}
.cmp-caja{position:absolute;top:calc(100% + 9px);right:0;z-index:60;width:min(360px,calc(100vw - 32px));
  max-height:min(70vh,520px);overflow:auto;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.cmp-head{position:sticky;top:0;background:var(--card);display:flex;align-items:center;gap:10px;
  justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--line);font-size:14px}
.cmp-todos{background:none;border:0;padding:0;cursor:pointer;font-size:12px;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:2px}
.cmp-vacio{margin:0;padding:16px 13px;font-size:12.5px;color:var(--muted);line-height:1.5}
.cmp-item{display:flex;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line-2);
  text-decoration:none;color:inherit}
.cmp-item:last-child{border-bottom:0}
.cmp-item:hover{background:var(--accent-soft)}
.cmp-item.nuevo{background:rgba(155,47,62,.055)}
.cmp-item.nuevo:hover{background:var(--accent-soft)}
.cmp-mod{flex:none;width:27px;height:27px;border-radius:7px;display:grid;place-items:center;
  background:var(--line-2);color:var(--accent-ink);font-size:13px}
.cmp-item.nuevo .cmp-mod{background:var(--accent);color:#fff}
.cmp-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.cmp-t{font-size:13px;font-weight:600;line-height:1.35}
.cmp-d{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.cmp-c{font-size:11px;color:var(--muted)}

/* la franja de la página de módulos */
.franja{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;
  padding:12px 15px;border-radius:var(--r);border:1px solid var(--accent);
  background:var(--accent-soft);font-size:13.5px}
.franja .fr-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:14px}
.franja .fr-txt{flex:1;min-width:180px;line-height:1.45}
.franja form{margin:0}
.franja .fr-x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:18px;
  line-height:1;padding:2px 6px;border-radius:6px}
.franja .fr-x:hover{background:rgba(0,0,0,.06);color:var(--ink)}

@media (max-width:860px){
  /* En pantalla chica la barra se aprieta: se deja el nombre fuera para que
     quepan la campana y los botones. La clase ya venía en la cabecera. */
  .ocultar-movil{display:none}
}
@media (max-width:640px){
  .cmp-caja{position:fixed;left:16px;right:16px;top:60px;width:auto}
  .topbar{gap:9px;padding:9px 13px}
  .lockup .t1{font-size:12.5px}
  .lockup .t2{font-size:10px}
  .topbar .tb-btn{padding:6px 9px;font-size:12.5px}
}
@media (max-width:560px){
  /* El nombre de la Dependencia ya no cabe sin partirse en tres renglones.
     Se deja el sello, que sigue siendo la liga al inicio. */
  .lockup > div:not(.seal){display:none}
}
.badge-demo{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-adm);
  border:1px solid currentColor;border-radius:99px;padding:2px 8px;font-weight:600}
.wrap{max-width:1240px;margin:0 auto;padding:22px 20px 60px}
.app{display:grid;grid-template-columns:212px 1fr;gap:26px;align-items:start;
  max-width:1340px;margin:0 auto;padding:22px 20px 60px}
/* Sin esto, una tabla ancha estira la columna y toda la página se recorre de lado */
.app>*{min-width:0}
@media(max-width:900px){.app{grid-template-columns:1fr;gap:14px}}
.side{position:sticky;top:74px;display:flex;flex-direction:column;gap:2px}
@media(max-width:900px){.side{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px;min-width:0;
    scrollbar-width:thin}
  .side .nav{flex:none}}
.side .who{padding:10px 12px 12px;margin-bottom:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
@media(max-width:900px){.side .who{display:none}}
.side .who .n{font-weight:600;font-size:13.5px}
.side .who .r{font-size:11.5px;color:var(--muted);margin-top:2px}
.nav{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--ink-2);font-size:13.5px;text-align:left;white-space:nowrap}
.nav:hover{background:var(--card)}
.nav[aria-current="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);
  font-weight:600;box-shadow:none;border-left:3px solid var(--accent);border-radius:0 8px 8px 0}
.nav .ic{width:16px;flex:none;opacity:.85}

/* ---------- los módulos en la barra de la izquierda ---------- */
/* Arriba van todos los módulos; abajo, ya con una raya de por medio, el
   menú del módulo en el que se está. El módulo actual se marca suavecito
   para que no se confunda con la sección actual, que sí lleva su barra. */
.rail-mods{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.rail-mods .nav{font-size:13px;padding:7px 11px}
.rail-mods .nav.aqui{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.rail-mods .nav.aqui .cont{background:var(--accent-ink)}

/* Qué se ve en cada tamaño. En computadora los módulos viven en la barra
   lateral; en celular y tableta, en el desplegable de arriba. */
/* Ojo: más abajo hay una regla `a.nav,a.tb-btn,a.btn{display:flex}` que gana
   por orden. Por eso estas dos llevan !important y dicen qué display usar
   según el elemento: el desplegable es un <details>, no una liga. */
.solo-chico{display:none!important}
@media(max-width:900px){
  .rail-mods{display:none}
  .solo-grande{display:none!important}
  a.solo-chico{display:flex!important}
  details.solo-chico{display:block!important}
}

/* ---------- el desplegable de módulos (celular y tableta) ---------- */
.cambiar{position:relative;flex:none}
.cambiar>summary{list-style:none;display:flex;align-items:center;gap:6px}
.cambiar>summary::-webkit-details-marker{display:none}
.cambiar[open]>summary{background:rgba(255,255,255,.16);border-color:#fff}
.cambiar .cb-num{min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#fff;
  color:var(--barra);font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.cb-caja{position:fixed;left:16px;right:16px;top:60px;z-index:60;
  max-height:min(70vh,520px);overflow:auto;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.cb-head{position:sticky;top:0;background:var(--card);padding:11px 13px;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.cb-item{display:flex;align-items:center;gap:10px;padding:11px 13px;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--line-2);font-size:14px}
.cb-item:last-child{border-bottom:0}
.cb-item:hover{background:var(--accent-soft)}
.cb-item .cb-ic{flex:none;width:27px;height:27px;border-radius:7px;display:grid;place-items:center;
  background:var(--line-2);color:var(--accent-ink);font-size:13px}
.cb-item .cb-t{flex:1;min-width:0}
.cb-item .cont{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);
  color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center}
.cb-todos{color:var(--muted);font-size:13px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-p{padding:16px 18px}
.sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec-head h2{font-size:19px;font-weight:600}
.sec-head .sub{font-size:13px;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- kpi ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kpis{grid-template-columns:1fr}}
.kpi{padding:14px 16px 15px}
.kpi .lab{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .val{font-family:Archivo;font-weight:700;font-size:31px;letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .val small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.kpi .foot{font-size:12.5px;color:var(--muted);margin-top:5px}
.meter{height:6px;border-radius:99px;background:var(--line-2);margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--accent)}

.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:14px}
/* Sin esto, una columna con una tabla ancha adentro se estira más allá de la
   pantalla: por omisión un elemento de grid mide lo que mide su contenido. */
.grid2>*{min-width:0}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
/* En Dependencias el formulario es angosto y la lista necesita el aire. */
.grid2.lista-ancha{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
@media(max-width:980px){.grid2.lista-ancha{grid-template-columns:1fr}}

/* ---------- chart ---------- */
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.chart-head h3{font-size:15px;font-weight:600}
.chart-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:3px;flex:none}
svg .grid-l{stroke:var(--line-2);stroke-width:1}
svg .axis-t{fill:var(--muted);font-size:10.5px;font-family:"IBM Plex Mono",monospace}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow);padding:8px 10px;font-size:12.5px;min-width:150px;opacity:0;transition:opacity .1s}
.tip .th{font-weight:600;margin-bottom:5px;font-size:12.5px}
.tip .tr{display:flex;justify-content:space-between;gap:14px;align-items:center}
.tip .tr b{font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- table ---------- */
.tw{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--barra-ink);
  font-weight:600;padding:10px 12px;border-bottom:0;white-space:nowrap;background:var(--barra)}
td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--card-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:99px;white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-crit{background:var(--crit-soft);color:var(--crit)}
.chip-mut{background:var(--line-2);color:var(--muted)}
.chip-info{background:var(--info-soft);color:var(--info)}
.pct{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.pct .bar{width:52px;height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;flex:none}
.pct .bar i{display:block;height:100%;background:var(--accent)}

/* ---------- filtros ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters select,.filters input{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:13px;min-width:0}
.filters input[type=search]{min-width:210px}
.f-count{font-size:12.5px;color:var(--muted);margin-left:auto}

/* ---------- portada ---------- */
.entrada{max-width:396px;margin:0 auto;padding:52px 0 40px}
.marca{display:flex;align-items:center;gap:14px;margin-bottom:22px;justify-content:center}
.marca .sig{font-family:Archivo;font-weight:700;font-size:27px;letter-spacing:.01em;line-height:1}
.marca .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.login-card{padding:22px 22px 20px}
.demo-cuentas{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.demo-cuentas button{display:flex;justify-content:space-between;gap:12px;width:100%;margin-top:6px;
  background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer;
  font-size:12.5px;color:var(--ink-2);text-align:left}
.demo-cuentas button:hover{border-color:var(--accent);color:var(--accent-ink)}
.demo-cuentas button span:last-child{color:var(--muted);white-space:nowrap}
.urlrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.urlrow code{font-family:"IBM Plex Mono",monospace;font-size:13.5px;background:var(--accent-soft);
  color:var(--accent-ink);padding:6px 11px;border-radius:7px;font-weight:500}

/* ---------- módulos ---------- */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-top:20px}
.modc{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:17px 18px 15px;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .15s,border-color .15s;color:inherit;font:inherit}
.modc:hover{transform:translateY(-2px);border-color:var(--accent)}
.modc.off{cursor:default;opacity:.72}
.modc.off:hover{transform:none;border-color:var(--line)}
.modc.ghost{cursor:default;background:transparent;box-shadow:none;border-style:dashed}
.modc .mh{display:flex;justify-content:space-between;align-items:center;gap:6px;
          flex-wrap:wrap;margin-bottom:12px}
.modc .mh .chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modc .mi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);font-size:16px}
.modc.off .mi,.modc.ghost .mi{background:var(--line-2);color:var(--muted)}
.modc h3{font-size:17px;font-weight:600}
.modc p{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.modc .mf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;
  padding-top:11px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.modc .go{color:var(--accent-ink);font-weight:600;white-space:nowrap}

/* ---------- pasos y formulario ---------- */
.steps{display:flex;gap:0;align-items:center;margin:0 0 20px}
.step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.step .b{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:11.5px;
  font-weight:700;background:var(--line-2);color:var(--muted);font-family:"IBM Plex Mono",monospace}
.step.on .b{background:var(--accent);color:#fff}
.step.on{color:var(--ink);font-weight:600}
.step.done .b{background:var(--accent-soft);color:var(--accent-ink)}
.step-line{flex:1;height:1px;background:var(--line);margin:0 12px;min-width:16px}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field .hint{font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}
.field select,.field input,.field textarea{width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px}
.field textarea{min-height:74px;resize:vertical}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}
.rowset{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.rowset .rh{padding:9px 14px;background:var(--card-2);border-bottom:1px solid var(--line);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.rowset .rb{padding:14px}
.leyenda{font-size:12.5px;color:var(--accent-ink);background:var(--accent-soft);border-radius:7px;
  padding:8px 11px;margin-bottom:13px;line-height:1.45}
.calc{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-top:12px}
.calc b{font-family:Archivo;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.btn{background:var(--accent);color:#fff;border:1px solid transparent;border-radius:8px;padding:10px 18px;
  font-weight:600;font-size:14px;cursor:pointer}
.btn:hover{background:var(--accent-ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-2{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn-2:hover{background:var(--card-2);color:var(--ink)}
.btn-row{display:flex;gap:10px;justify-content:space-between;margin-top:18px;flex-wrap:wrap}
.ident{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--accent-soft);
  border-radius:var(--r);margin-bottom:16px;flex-wrap:wrap}
.ident .cct{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent-ink);font-weight:500}
.ident .nm{font-weight:600;font-size:14.5px}
.ok-mark{width:54px;height:54px;border-radius:99px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px}
.folio{font-family:"IBM Plex Mono",monospace;font-size:16px;letter-spacing:.02em;background:var(--card-2);
  border:1px dashed var(--line);border-radius:8px;padding:10px 14px;display:inline-block;margin:6px 0 4px}
.recap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 4px;text-align:left}
@media(max-width:600px){.recap{grid-template-columns:1fr}}
.recap div{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.recap .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.recap .v{font-family:Archivo;font-weight:700;font-size:21px;margin-top:3px;font-variant-numeric:tabular-nums}

/* ---------- login ---------- */
.roles{display:flex;flex-direction:column;gap:8px;margin:4px 0 18px}
.role{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;background:var(--card);text-align:left}
.role[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.role>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.role .rn{font-weight:600;font-size:13.5px}
.role .rd{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.role .rk{width:9px;height:9px;border-radius:99px;border:1.5px solid var(--muted);margin-top:5px;flex:none}
.role[aria-pressed="true"] .rk{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px var(--card)}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,14,14,.42);z-index:70;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100%);background:var(--paper);z-index:71;
  border-left:1px solid var(--line);overflow-y:auto;transform:translateX(100%);transition:transform .22s ease}
.drawer.open{transform:none;visibility:visible}
.drawer{visibility:hidden}
.scrim.open{opacity:1;visibility:visible;pointer-events:auto}
.dh{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);padding:14px 18px;
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dh h3{font-size:16.5px;font-weight:600;line-height:1.25}
.dh .x{background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted);line-height:1;padding:2px 4px}
.db{padding:18px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.hist{display:flex;gap:4px;align-items:flex-end;height:52px;margin-top:10px}
.hist div{flex:1;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
.hist-x{display:flex;gap:4px;margin-top:5px}
.hist-x span{flex:1;text-align:center;font-size:9.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:8px;font-size:13.5px;z-index:90;opacity:0;transition:.2s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.empty{padding:34px;text-align:center;color:var(--muted);font-size:13.5px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- añadidos de la versión en servidor ---------- */
.avisos{margin:0 0 16px}
.aviso{padding:11px 14px;border-radius:var(--r);font-size:13.5px;margin-bottom:10px;border:1px solid transparent}
.aviso-err{background:var(--crit-soft);color:var(--crit);border-color:currentColor}
.aviso-ok{background:var(--ok-soft);color:var(--ok);border-color:currentColor}
.aviso-info{background:var(--accent-soft);color:var(--accent-ink)}
a.nav,a.tb-btn,a.btn,a.modc{text-decoration:none;display:flex}
a.btn,a.tb-btn{display:inline-block;text-align:center}
a.modc{flex-direction:column}
table a{color:inherit;text-decoration:none}
.paginado{display:flex;gap:6px;justify-content:center;margin-top:14px}
.paginado a,.paginado span{padding:5px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;text-decoration:none;color:var(--ink-2)}
.paginado .act{background:var(--accent);color:#fff;border-color:transparent}
.ficha-sec{margin-bottom:14px}

/* ---------- indicadores por turno ---------- */
table.ind td.pctd{font-weight:700;font-family:Archivo,sans-serif;font-size:15px}
table.ind tr.fila-total td{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;
  border-top:2px solid var(--accent);border-bottom:0}
table.ind tr.fila-total td.pctd{font-size:16px}
table.ind th[colspan]{text-align:center}

/* ---------- corrección de reportes (administrador) ---------- */
.corrige{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:6px}
.corrige .rowset{margin-bottom:0}
.btn-peligro{background:var(--crit);border-color:transparent}
.btn-peligro:hover{background:var(--crit);filter:brightness(.9)}

/* ---------- módulo de oficios ---------- */
.acuse-ok{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--accent-soft);border-radius:var(--r)}
.acuse-ok .ico{width:42px;height:42px;flex:none;border-radius:8px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.03em}
input[type=file]{width:100%;background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:12px;font-size:13px}
input[type=file]:hover{border-color:var(--accent)}

/* ---------- módulo de usuarios: una tarjeta por cuenta ---------- */
.usuarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.usuario{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column}
.usuario.inactivo{opacity:.7}
.uc-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.uc-nombre{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;line-height:1.25}
.uc-nombre:hover{color:var(--accent-ink)}
.uc-cargo{font-size:12.5px;color:var(--muted);margin-top:3px}
.uc-correo{font-size:11.5px;color:var(--muted);margin-top:3px;word-break:break-all}
.uc-permisos{padding:10px 0;flex:1}
.uc-perm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font-size:13px}
.uc-perm .m{color:var(--ink-2);white-space:nowrap}
.uc-perm .n{font-weight:600;color:var(--accent-ink);text-align:right}
.uc-perm.sin .m{color:var(--muted)}
.uc-perm.sin .n{color:var(--muted);font-weight:400}
.uc-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:11px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.uc-pie a{font-size:12.5px}
.btn-mini{padding:5px 13px;font-size:12.5px;border-radius:7px;line-height:1.3;text-decoration:none;
  display:inline-block;font-weight:600}
/* Solo el mini sólido va en blanco. Sin el :not, esta regla le ganaba por
   especificidad a .btn-2 y el texto salía blanco sobre fondo claro. */
a.btn.btn-mini:not(.btn-2){color:#fff}
a.btn.btn-mini:not(.btn-2):hover{background:var(--accent-ink);color:#fff}

/* ---------- módulo de recursos humanos ---------- */
.embudo{display:flex;gap:8px;flex-wrap:wrap}
.embudo .etapa{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;text-decoration:none;color:inherit;background:var(--card)}
.embudo .etapa:hover{border-color:var(--accent)}
.embudo .etapa.sel{border-color:var(--accent);background:var(--accent-soft)}
.embudo .etapa b{font-family:Archivo,sans-serif;font-size:17px;font-variant-numeric:tabular-nums}
table.tabla-vacantes{min-width:960px}
/* Quién atiende la vacante: el nombre de la persona, debajo del papel que
   le toca. En gris, porque lo que manda en el renglón es la vacante; el
   nombre es para saber a quién preguntarle. */
.atiende{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}
.atiende .quien{display:inline-block;max-width:100%;padding:1px 7px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font-size:11.5px;line-height:1.5;white-space:normal}
.atiende .quien-falta{border-color:var(--warn);color:var(--warn);background:transparent}
/* Cuánto lleva parada: en días hábiles. En rojo pasando del límite
   (ajustes.rh_dias_alerta), con una franja en el renglón para que se vea
   de corrido sin tener que leer la columna. */
/* Ojo con el nombre: `.espera` ya existe más abajo para los recuadros de
   «le toca a otro» de Agenda, Jurídico y la ficha de RH. Este es otro. */
.dias-espera{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11.5px;line-height:1.5;
  border:1px solid var(--line);color:var(--ink-2);background:var(--card);white-space:nowrap}
.dias-espera.tarde{border-color:var(--crit);color:var(--crit);font-weight:600;background:var(--crit-soft)}
tr.fila-tarde>td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
tr.fila-tarde>td{background:rgba(179,57,47,.05)}
.tb-btn.tb-tarde{border-color:var(--crit);color:var(--crit);font-weight:600}
/* Los cuatro documentos del supervisor. Van después de todo lo demás para
   que nada de arriba les gane (ver la nota de .paso-coment). */
ul.docs-sup{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.docs-sup>li{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--card)}
.docs-sup .ds-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}
.docs-sup .ds-ver{font-size:11.5px;color:var(--muted)}
.docs-sup .ds-ayuda{font-size:12px;color:var(--muted);margin-top:3px}
.docs-sup .ds-obs{margin-top:6px;padding:7px 10px;border-radius:8px;font-size:12.5px;line-height:1.5;
  background:var(--crit-soft);color:var(--crit)}
.docs-sup .ds-acc{margin-top:8px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.docs-sup .ds-sube{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.docs-sup .ds-sube input[type=file]{font-size:12px;max-width:100%}
.docs-sup details.ds-rech>summary,.docs-sup details.ds-hist>summary{cursor:pointer;font-size:12.5px;
  color:var(--muted);list-style:none}
.docs-sup details.ds-rech[open]>summary{margin-bottom:6px;color:var(--ink-2)}
.docs-sup details.ds-rech>div.field{max-width:420px}
.docs-sup details.ds-hist{margin-top:6px}
.docs-sup details.ds-hist ol{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--muted);line-height:1.6}
@media(max-width:560px){.docs-sup .ds-sube input[type=file]{width:100%}}
.ruta{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);
  background:var(--accent-soft);color:var(--accent-ink);font-size:13.5px;margin-bottom:14px}
.linea{position:relative;padding-left:20px}
.linea .paso{position:relative;padding:0 0 14px 0}
.linea .paso::before{content:'';position:absolute;left:-20px;top:5px;width:9px;height:9px;border-radius:99px;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.linea .paso::after{content:'';position:absolute;left:-16px;top:18px;bottom:0;width:1px;background:var(--line)}
.linea .paso:last-child::after{display:none}
.linea .paso .t{font-size:13.5px;font-weight:600}
.linea .paso .m{font-size:12.5px;color:var(--muted)}
/* Comentarios dentro del historial de la vacante: el mismo hilo que los
   cambios de etapa. El punto del paso va relleno porque lo pone el sistema;
   el del comentario va hueco, porque lo escribió una persona. Van DESPUÉS
   de las reglas de .linea: si no, el punto relleno les gana. */
.linea .paso-coment::before{background:var(--card);box-shadow:0 0 0 2px var(--accent)}
.linea .paso-coment .t{color:var(--accent-ink)}
.linea .paso-coment .cm-t{font-size:13px;line-height:1.5;word-break:break-word;margin:3px 0 2px;
  padding:7px 10px;border-radius:8px;background:var(--card-2);border:1px solid var(--line-2)}
/* El «eliminar» del administrador: discreto, no un botón que invite. */
.btn-liga{background:none;border:0;padding:0;margin-left:6px;cursor:pointer;
  font:inherit;font-size:inherit;color:var(--muted);text-decoration:underline}
.btn-liga:hover{color:var(--crit)}

/* ---------- documentos adjuntos de RH ---------- */
.doc{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.doc .dh2{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.doc .dn{font-weight:600;font-size:13.5px}
.doc .da{font-size:12px;color:var(--muted);margin-top:2px}
.doc .dfile{display:flex;gap:10px;align-items:center;margin-top:10px;background:var(--accent-soft);
  border-radius:8px;padding:9px 11px}
.doc .dfile .ico{width:34px;height:34px;flex:none;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:700;font-size:10.5px}
.doc .field{margin-bottom:0}

/* ---------- control segmentado (turno, tipo de plaza, tipo de vacante) ---------- */
.seg{display:grid;gap:4px;background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:4px}
/* Las columnas se acomodan solas según el ancho que de veras tenga el
   control, no según el de la pantalla: dentro de una columna angosta el de
   cuatro se parte en dos renglones en vez de salirse. */
.seg.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.cuatro{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;
  padding:10px 8px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--ink-2);
  text-align:center;line-height:1.25;transition:background .14s,color .14s,box-shadow .14s;
  -webkit-user-select:none;user-select:none;white-space:nowrap}
.seg label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg label:hover{background:var(--card);color:var(--ink)}
.seg label.on,.seg label:has(input:checked){background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.16)}
.seg label.foco{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- encabezado de sección dentro de un formulario ---------- */
.sec-form{display:flex;align-items:baseline;gap:10px;margin:24px 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--line-2)}
.sec-form .num{width:22px;height:22px;flex:none;border-radius:99px;background:var(--accent-soft);
  color:var(--accent-ink);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;font-weight:600}
.sec-form h3{font-size:15.5px;font-weight:600}
.sec-form p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- panel de resumen en vivo ---------- */
.resumen{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.resumen .dato{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.resumen .dato:last-of-type{border-bottom:0}
.resumen .dato b{font-family:Archivo,sans-serif;font-size:16px;font-variant-numeric:tabular-nums}
.resumen .ruta-prev{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent-ink);font-size:12.5px;line-height:1.45}
.resumen .ruta-prev b{font-family:inherit;font-size:12.5px}

/* ---------- buscador de centros de trabajo ---------- */
.busca-ct{position:relative}
.sugerencias{position:absolute;z-index:30;top:100%;left:0;right:0;margin-top:4px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px -12px rgba(16,26,27,.4);
  max-height:290px;overflow-y:auto;padding:4px}
.sugerencias .sug{display:grid;grid-template-columns:104px 1fr;gap:2px 10px;width:100%;text-align:left;
  padding:8px 10px;border:0;background:transparent;border-radius:7px;cursor:pointer;font:inherit}
.sugerencias .sug:hover,.sugerencias .sug.act{background:var(--accent-soft)}
.sugerencias .s-cct{grid-row:span 2;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--accent-ink);font-weight:500;align-self:center}
.sugerencias .s-nom{font-size:13.5px;font-weight:600;color:var(--ink)}
.sugerencias .s-det{font-size:12px;color:var(--muted)}

/* ---------- módulo de directorio ---------- */
table.tabla-directorio{min-width:1000px}
.dato-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-2);font-size:13.5px}
.dato-fila:last-of-type{border-bottom:0}
.dato-fila b{font-family:Archivo,sans-serif;font-size:19px;font-variant-numeric:tabular-nums}
a.card.kpi:hover{border-color:var(--accent)}

/* ---------- centro elegido desde el directorio ---------- */
.ct-elegido{background:var(--accent-soft);border-radius:var(--r);padding:11px 14px;margin-top:-4px}
.ct-elegido .ct-nom{font-weight:600;font-size:14px;color:var(--accent-ink)}
.ct-elegido .ct-det,.ct-elegido .ct-det2{font-size:12.5px;color:var(--accent-ink);opacity:.85;margin-top:2px}

/* ---------- Recursos humanos: bandejas y ruta del trámite ---------- */
.nav .cont{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}
.nav[aria-current="true"] .cont{background:var(--accent-ink)}

.cinta{display:flex;align-items:center;gap:12px;padding:11px 15px;margin-bottom:14px;text-decoration:none;
  background:var(--accent-soft);border:1px solid rgba(155,47,62,.28);border-radius:var(--r);
  color:var(--ink);font-size:13.5px}
.cinta:hover{border-color:var(--accent)}
.cinta.vacia{background:var(--card);border-color:var(--line);color:var(--muted)}
.cinta .ci{width:28px;height:28px;flex:none;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:14px}
.cinta.vacia .ci{background:var(--line-2);color:var(--muted)}
.cinta b{font-family:Archivo,sans-serif;font-size:16px}
.cinta .go{margin-left:auto;color:var(--accent-ink);font-weight:600;white-space:nowrap}
@media(max-width:640px){.cinta .go{display:none}}

.tabs-bandeja{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabb{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);
  border-radius:99px;background:var(--card);text-decoration:none;color:var(--ink-2);font-size:13.5px}
.tabb:hover{border-color:var(--accent);color:var(--accent-ink)}
.tabb.sel{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.tabb b{font-variant-numeric:tabular-nums}

.bandeja-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.bandeja-kpi .bk{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r)}
.bandeja-kpi .bk-n{font-family:Archivo,sans-serif;font-size:26px;line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:34px}
.bandeja-kpi .bk-e{font-size:12px;color:var(--muted);margin-top:5px}

.pasos{display:flex;flex-wrap:wrap;gap:4px 0;align-items:center;margin-bottom:12px}
.pasos .pp{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;font-size:12.5px;
  color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:99px;margin-right:6px}
.pasos .pp i{width:8px;height:8px;border-radius:99px;background:var(--line);flex:none}
.pasos .pp.hecho{color:var(--ok);border-color:rgba(46,125,81,.35);background:var(--ok-soft)}
.pasos .pp.hecho i{background:var(--ok)}
.pasos .pp.aqui{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:600}
.pasos .pp.aqui i{background:#fff}

.dosvias{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.dosvias{grid-template-columns:1fr}}
.dosvias .via{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;background:var(--card-2)}
.dosvias .via.ok{border-color:rgba(46,125,81,.4);background:var(--ok-soft)}
.dosvias .via .field{margin-bottom:9px}

.espera{font-size:13.5px;color:var(--muted);margin:0;padding:11px 13px;background:var(--card-2);
  border:1px dashed var(--line);border-radius:var(--r)}
.kv .fch{color:var(--muted);font-size:12px}
.seg.tres{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
@media(max-width:560px){.seg.tres{grid-template-columns:1fr}}

/* ---------- selector de zonas escolares (módulo de usuarios) ---------- */
.zona-acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.zona-cuenta{font-size:12.5px;font-weight:600;color:var(--accent-ink)}
.zonas-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-top:8px}
.zchip{position:relative;display:grid;place-items:center;padding:10px 4px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-2);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;user-select:none;
  transition:background .12s,border-color .12s,color .12s}
.zchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.zchip:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.zchip.on,.zchip:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.zchip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---------- tabla del reparto de tareas ---------- */
table.tabla-reparto{min-width:640px}
table.tabla-reparto td.c{text-align:center;white-space:nowrap}
table.tabla-reparto th:not(:first-child){text-align:center}
.rep-no{color:var(--line);font-size:16px}
.rep-todas{font-size:12px;color:var(--muted)}

/* ---------- aviso de folio ya capturado (DGIPDE / DGP) ---------- */
.folio-ya{font-size:12.5px;line-height:1.5;padding:9px 12px;border-radius:var(--r);margin:0 0 12px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink-2)}
.folio-ya.ok{border-color:rgba(46,125,81,.35);background:var(--ok-soft);color:var(--ok)}
.folio-ya.av{border-color:rgba(143,107,8,.35);background:var(--warn-soft);color:var(--warn)}

/* ---------- oficios: series y correspondencia ---------- */
.series{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.serie{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);
  border-radius:99px;background:var(--card);text-decoration:none;color:var(--ink-2);font-size:13.5px}
.serie:hover{border-color:var(--accent);color:var(--accent-ink)}
.serie.sel{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.serie b{font-variant-numeric:tabular-nums}
.pill-serie{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:2px 7px;border-radius:99px;background:var(--line-2);color:var(--muted);vertical-align:middle}
.pill-serie.dgipde{background:var(--info-soft);color:var(--info)}
.pill-serie.dgp{background:var(--warn-soft);color:var(--warn)}
.pill-serie.ti{background:var(--ok-soft);color:var(--ok)}

/* Los nombres largos de nivel no deben desbordar la barra lateral */
.side .who .chip{white-space:normal;text-align:left;line-height:1.35;align-items:flex-start}
.side .who .chip .dot{margin-top:6px;flex:none}

/* ---------- visor de documentos ---------- */
body.sin-scroll{overflow:hidden}
.visor{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(33,37,41,.66)}
.visor[hidden]{display:none!important}
.visor-caja{display:flex;flex-direction:column;width:min(1040px,100%);height:min(88vh,100%);
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 28px 70px -22px rgba(0,0,0,.55)}
.visor-cab{display:flex;align-items:center;gap:12px;padding:9px 11px;
  border-bottom:1px solid var(--line);background:var(--card-2)}
.visor-tit{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.visor-tit .vt-ico{width:32px;height:32px;flex:none;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:10.5px;font-weight:700;letter-spacing:.03em}
.visor-tit .vt-nom{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor-acc{display:flex;gap:7px;flex:none}
.visor-acc .v-cerrar{font-size:14px;line-height:1;padding:6px 10px}
.visor-cuerpo{flex:1;min-height:0;overflow:auto;background:#5A6067;
  display:grid;place-items:center;position:relative}
.visor-cuerpo iframe{width:100%;height:100%;border:0;background:#fff}
.visor-cuerpo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.visor-cargando{position:absolute;inset:0;display:grid;place-items:center;padding:24px;
  text-align:center;color:#fff;font-size:13.5px;background:#5A6067}
.visor-pie{flex:none;padding:7px 12px;border-top:1px solid var(--line);background:var(--card-2);
  color:var(--muted);font-size:11.5px;text-align:center}
.visor-pie[hidden]{display:none}
@media(max-width:760px){
  .visor{padding:0}
  .visor-caja{width:100%;height:100%;border:0;border-radius:0}
  .visor-tit .vt-ico{display:none}
  .visor-acc .tb-btn{padding:6px 9px;font-size:12.5px}
}
@media(max-width:420px){.visor-acc .v-bajar{display:none}}
/* Las imágenes que se pueden ampliar avisan que son clicables */
img[data-visor]{cursor:zoom-in}

/* En columnas angostas, los botones del adjunto bajan a su propio renglón */
.doc .dfile{flex-wrap:wrap;row-gap:8px}
.doc .dfile>div{flex:1 1 150px}

/* ---------- Agenda de atención ---------- */
table.tabla-agenda{min-width:900px}

/* a quién se le encarga */
.encargados{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.enc{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:13px;
  transition:background .12s,border-color .12s}
.enc:hover{border-color:var(--accent);background:var(--accent-soft)}
.enc input{width:auto;flex:none;margin-top:2px}
.enc span{min-width:0}
.enc b{display:block;font-weight:600}
.enc i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px}
.enc:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

.quienes{display:flex;flex-direction:column;gap:8px}
.quienes .qui{display:flex;align-items:center;gap:10px;padding:9px 11px;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r)}
.quienes .ini{width:32px;height:32px;flex:none;border-radius:99px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:700;font-size:14px}
.quienes .nm{font-size:13.5px;font-weight:600}
.quienes .cg{font-size:11.5px;color:var(--muted)}

/* la caja para registrar un avance */
.caja-avance{padding:13px 14px;margin-bottom:14px;border:1px solid rgba(155,47,62,.28);
  border-radius:var(--r);background:var(--accent-soft)}
.caja-avance .field{margin-bottom:10px}
.caja-avance textarea{background:var(--card)}

/* la bitácora de avances */
.bitacora{display:flex;flex-direction:column;gap:10px}
.anot{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r);
  padding:11px 13px;background:var(--card)}
.anot.avance{border-left-color:var(--warn)}
.anot.terminado{border-left-color:var(--info)}
.anot.conclusion{border-left-color:var(--ok);background:var(--ok-soft)}
.anot.observacion{border-left-color:var(--crit);background:var(--crit-soft)}
.anot.sistema{border-left-color:var(--line);background:var(--card-2)}
.anot .an-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.anot .an-quien{font-size:12.5px;font-weight:600}
.anot .an-cuando{font-size:11.5px;color:var(--muted)}
.anot .an-texto{font-size:13.5px;color:var(--ink);line-height:1.55;white-space:normal}
.anot.sistema .an-texto{font-size:12.5px;color:var(--muted)}
.anot .an-arch{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.adj{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 10px 6px 6px;
  border:1px solid var(--line);border-radius:99px;background:var(--card);text-decoration:none;
  color:var(--ink-2);font-size:12.5px}
.adj:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.adj .ico{width:26px;height:26px;flex:none;border-radius:99px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:9px;font-weight:700}
.adj .nm{font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adj .pz{color:var(--muted);font-size:11.5px;flex:none}

/* bloques de texto largo (tema, objetivo, contexto, conclusión) */
.bloque{margin-bottom:12px}
.bloque .txt{font-size:13.5px;line-height:1.55;margin-top:3px}

/* Las tarjetas de indicador que además son enlace no deben verse subrayadas */
a.card.kpi{text-decoration:none;color:inherit}
a.card.kpi .lab,a.card.kpi .foot{text-decoration:none}

/* El primer encabezado de sección no necesita aire arriba */
.card>.sec-form:first-child,form>.sec-form:first-child,.grid2>div>.sec-form:first-child{margin-top:0}

/* =====================================================================
   CASOS JURÍDICOS
   ===================================================================== */
/* El aviso de expediente reservado */
.reserva{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;margin-bottom:14px;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
  background:var(--accent-soft);font-size:13px;line-height:1.5;color:var(--ink-2)}
.reserva .ll{font-size:15px;line-height:1.3;flex:none;opacity:.85}
.reserva b{color:var(--accent-ink)}

.tabla-casos td{vertical-align:top}
.tabla-casos tr{cursor:pointer}
/* La matriz es ancha: se le da aire a cada columna y, si no cabe,
   la tarjeta la desliza de lado en vez de encimar el texto. */
.tabla-casos{min-width:1000px}
.tabla-casos .c-personas{min-width:170px;max-width:230px;font-size:12.5px}
.tabla-casos .c-motivo{min-width:160px;max-width:220px;font-size:12.5px}
.tabla-casos .c-centro{min-width:135px;max-width:190px;font-size:12.5px}

/* =====================================================================
   ELIMINAR UN ANEXO MAL SUBIDO
   Se esconde tras un desplegable para que no se apriete sin querer, y
   dice de frente a qué paso va a regresar el trámite.
   ===================================================================== */
.doc details.quitar{width:100%;margin-top:8px}
.doc details.quitar>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--crit);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.doc details.quitar>summary::-webkit-details-marker{display:none}
.doc details.quitar>summary::before{content:"✕";font-size:10px;width:16px;height:16px;flex:none;
  border:1px solid currentColor;border-radius:99px;display:grid;place-items:center}
.doc details.quitar>summary:hover{text-decoration:underline}
.qcuerpo{margin-top:10px;padding:12px;border:1px solid var(--line);border-left:3px solid var(--crit);
  border-radius:var(--r);background:var(--bg)}
.qcuerpo p{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.qcuerpo p.qcomp{color:var(--warn-ink,var(--ink-2));background:var(--card);padding:8px 10px;
  border-radius:8px;border:1px solid var(--line-2)}
.qcuerpo .field{margin-bottom:10px}
.qcheck{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;
  margin:0 0 12px;cursor:pointer}
.qcheck input{width:auto;flex:none;margin-top:2px}
.tb-btn.btn-quitar{color:var(--crit);border-color:var(--line)}
.tb-btn.btn-quitar:hover{border-color:var(--crit);background:var(--card)}

/* =====================================================================
   TRÁMITE IMPROCEDENTE
   No es un error ni una cancelación: es un trámite que quedó fuera del
   proceso porque no hubo cómo atenderlo. Se ve sobrio, no alarmante.
   ===================================================================== */
.fuera{border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:var(--r);
  background:var(--bg);padding:12px 14px;margin:0 0 12px}
.fuera .fh{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--ink-2)}
.fuera .fi{font-size:16px;line-height:1.2;flex:none;color:var(--muted)}
.fuera .fnota{margin-top:12px;padding:10px 12px;background:var(--card);border:1px solid var(--line-2);
  border-radius:8px}
.fuera .fnota .txt{font-size:13px;line-height:1.55;margin-top:3px}
.fuera .fpie{margin-top:10px;font-size:11.5px;color:var(--muted)}
/* En la tira de pasos, el último cuadro de un trámite improcedente se apaga */
/* El último cuadro de un trámite improcedente no se pinta de guinda: no es
   un paso logrado, es donde se salió del proceso. */
.pasos .pp.aqui.fuera-paso{color:var(--ink-2);background:var(--card);border-color:var(--line)}
.pasos .pp.aqui.fuera-paso i{background:var(--muted)}

/* =====================================================================
   SELECTOR DE DGIPDE / DGP
   El número no se teclea: se busca entre los que ya están capturados en
   Correspondencia y se elige. Un cero de más ya no crea un duplicado.
   ===================================================================== */
.elige-folio{position:relative}
.elige-folio .ef-buscador{position:relative}
.elige-folio .ef-q{width:100%}
.ef-lista{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:290px;
  overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(20,12,14,.14)}
.ef-op{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;width:100%;
  padding:9px 12px;background:none;border:0;border-bottom:1px solid var(--line-2);text-align:left;
  cursor:pointer;font:inherit;color:var(--ink)}
.ef-op:last-child{border-bottom:0}
.ef-op:hover,.ef-op.sel{background:var(--accent-soft)}
.ef-op .ef-of{font-size:13px;font-weight:600;white-space:nowrap}
.ef-op .ef-sub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-op .ef-vac{font-size:11px;color:var(--accent-ink);background:var(--accent-soft);
  padding:1px 7px;border-radius:99px;white-space:nowrap}
.ef-op .ef-arc{font-size:12px;color:var(--ok);width:14px;text-align:center}
.ef-op .ef-arc.sin{color:var(--muted)}
.ef-vacio{padding:12px;font-size:12.5px;color:var(--muted);line-height:1.5}

.ef-elegido{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid var(--accent);border-radius:var(--r);background:var(--accent-soft)}
/* `display:flex` le gana al `display:none` que trae `hidden`: hay que decirlo */
.ef-elegido[hidden],.ef-buscador[hidden],.ef-lista[hidden]{display:none}
.ef-elegido .ef-num{font-size:14px;font-weight:600;color:var(--accent-ink)}
.ef-elegido .ef-det{font-size:11.5px;color:var(--muted);min-width:0;flex:1}
.ef-elegido .ef-cambiar{margin-left:auto;flex:none}
@media(max-width:520px){
  .ef-op{grid-template-columns:1fr auto;row-gap:2px}
  .ef-op .ef-sub{grid-column:1/-1}
}

/* El formato de validación es ancho: se desliza dentro de su tarjeta */
.tabla-validacion{min-width:1180px}
.tabla-validacion td{vertical-align:middle}

/* Marcar vacantes en la bandeja para armar el reporte */
.elegir-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 14px;margin:14px 0 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.eb-todas{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}
.eb-todas input{width:auto}
.eb-cuenta{font-size:12.5px;color:var(--muted)}
.elegir-barra .btn{margin-left:auto}
.elegir-barra .btn:disabled{opacity:.45;cursor:not-allowed}
td.c-elige,th.c-elige{width:34px;text-align:center;cursor:default}
td.c-elige input{width:auto;margin:0}
@media(max-width:620px){.elegir-barra .btn{margin-left:0;width:100%}}

/* =====================================================================
   NÚMERO DE OFICIO REPETIDO
   No basta con decir «ya está registrado»: hay que enseñar cuál es y de
   dónde, porque en la lista puede estar escrito de otra forma.
   ===================================================================== */
.repetido{border:1px solid var(--crit);border-radius:var(--r);background:var(--card);
  margin:0 0 14px;overflow:hidden;max-width:760px}
.rp-cab{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;background:var(--crit-soft,#FBE9EC);
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.rp-ico{flex:none;width:20px;height:20px;border-radius:99px;background:var(--crit);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.rp-ficha{padding:12px 14px;border-top:1px solid var(--line-2)}
.rp-folio{font-size:16px;font-weight:600;color:var(--accent-ink);margin-bottom:8px;word-break:break-word}
.rp-pie{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line-2)}
@media(max-width:520px){.rp-pie .btn{width:100%;text-align:center}}

/* Sugerencias de nombres y puestos ya capturados */
.con-sug{position:relative}
.sug-lista{position:absolute;z-index:40;left:0;right:0;top:100%;margin-top:4px;max-height:260px;
  overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(20,12,14,.14)}
.sug-lista[hidden]{display:none}
.sug-op{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:none;border:0;
  border-bottom:1px solid var(--line-2);text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.sug-op:last-child{border-bottom:0}
.sug-op:hover,.sug-op.sel{background:var(--accent-soft)}
.sug-n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-c{font-size:11.5px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-v{font-size:10.5px;color:var(--accent-ink);background:var(--accent-soft);padding:1px 7px;
  border-radius:99px;flex:none}

/* =====================================================================
   NIVELES QUE ATIENDE UN CENTRO
   ===================================================================== */
.niveles{display:flex;flex-wrap:wrap;gap:6px}
.niv{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.niveles.chicos{margin-top:5px;gap:4px}
.niveles.chicos .niv{font-size:10.5px;padding:1px 7px;font-weight:500}
.niveles-elige{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.nivx{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;font-size:13px;background:var(--card)}
.nivx:hover{border-color:var(--accent)}
.nivx input{width:auto;flex:none;margin:0}
.nivx:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:600}


/* ---------- comentarios de un oficio recibido ---------- */
.sr-solo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.coments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.coments li{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:8px;
  padding:9px 12px;background:var(--card)}
.coments li.mio{border-left-color:var(--accent);background:var(--accent-soft)}
.coments .cm-q{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;margin-bottom:3px}
.coments .cm-q span{color:var(--muted);font-size:11.5px}
.coments .cm-t{font-size:13px;line-height:1.5;word-break:break-word}

/* ---------- remitentes sueltos, en la pantalla de dependencias ---------- */
.sueltos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sueltos li{border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.sueltos .su-t{font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.sueltos .su-f{display:flex;gap:7px;align-items:center}
.sueltos .su-f input{flex:0 1 110px;min-width:0;padding:6px 9px;font-size:12.5px;
  border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}

/* ---------- la liga para compartir un evento ---------- */
.liga-caja{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.liga-caja input{flex:1 1 260px;min-width:0;padding:9px 11px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--ink)}
.liga-caja .btn{flex:none}
/* el cuadrito de lugares por zona */
input.lug{width:78px;padding:5px 8px;font-size:13px;text-align:right;
  border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}

/* Las 26 zonas no caben de corrido: la tabla del reparto se desplaza sola
   y el encabezado se queda fijo arriba. */
.caja-zonas{max-height:430px;overflow-y:auto}
.caja-zonas thead th{position:sticky;top:0;z-index:1}

/* ---------- la página pública de un evento ---------- */
.cartel{display:block;margin-top:26px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--card);line-height:0}
.cartel img{width:100%;height:auto;display:block}
.dias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.dias li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 11px;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;font-size:13px}
.dias .d-f{font-weight:600}
.dias .d-h{color:var(--accent-ink);font-size:12.5px}
.dias .d-n{color:var(--muted);font-size:12.5px}
.anexos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.anexos li{display:flex;gap:10px;align-items:center;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px}
.anexos .ax-ic{flex:none;width:38px;height:30px;border-radius:6px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.anexos .ax-t{flex:1;min-width:0;font-size:13px;word-break:break-word}
.anexos .ax-p{display:block;color:var(--muted);font-size:11.5px}

/* ---------- pestañas de la matriz de necesidades ----------
   Son ocho matrices: en computadora caben en dos renglones y en celular se
   recorren de lado, sin empujar el ancho de la página. */
.pest{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding-bottom:2px}
.pest a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font-size:13px;text-decoration:none;white-space:nowrap;
  transition:background .14s,color .14s,border-color .14s}
.pest a:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.pest a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pest a .ic{font-size:13px;line-height:1}
.pest a .n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.pest a.on .n{background:rgba(255,255,255,.25);color:#fff}
@media(max-width:560px){
  .pest{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-left:-2px;padding:0 2px 8px}
  .pest::-webkit-scrollbar{display:none}
}

/* ---------- canasta de conceptos al capturar una necesidad ---------- */
.conceptos{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.conceptos .cr{display:grid;grid-template-columns:minmax(0,1fr) 86px minmax(0,1.1fr);
  gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.conceptos .cr:last-child{border-bottom:0}
.conceptos .cr:nth-child(odd){background:var(--card-2)}
.conceptos .cr .nom{font-size:13.5px;min-width:0}
.conceptos .cr .nom small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
.conceptos .cr input{width:100%;min-width:0}
.conceptos .cr input[type=number]{text-align:center;font-variant-numeric:tabular-nums}
.conceptos .cab{display:grid;grid-template-columns:minmax(0,1fr) 86px minmax(0,1.1fr);
  gap:10px;padding:8px 12px;background:var(--card-2);border-bottom:1px solid var(--line);
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.conceptos .cab span:nth-child(2){text-align:center}
@media(max-width:620px){
  .conceptos .cab{display:none}
  .conceptos .cr{grid-template-columns:minmax(0,1fr) 76px;gap:8px}
  .conceptos .cr input[name$="[especificacion]"]{grid-column:1/-1}
  /* En el celular la lista se haría larguísima con un renglón de
     especificación por cada concepto. Se muestra nada más en los que ya
     llevan cantidad. Si el navegador es viejo y no entiende :has(), no pasa
     nada: se ven todos, como antes. */
  .conceptos .cr:has(input[type=number]:placeholder-shown) input[name$="[especificacion]"]{display:none}
}

/* ---------- portada de la matriz: los cuatro submódulos ---------- */
.submods{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin-top:14px}
.submods>*{min-width:0}
.submod{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .14s,box-shadow .14s,transform .14s}
.submod:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.submod .ic{font-size:22px;line-height:1;color:var(--accent-ink);margin-bottom:8px}
.submod h3{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin:0}
.submod h3 .n{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;
  border-radius:99px;background:var(--crit-soft);color:var(--crit);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.submod p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.submod .mats{list-style:none;margin:11px 0 12px;padding:11px 0 0;border-top:1px solid var(--line-2);
  display:grid;gap:5px}
.submod .mats li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.submod .mats li .mi{color:var(--muted);font-size:12px;width:14px;flex:none;text-align:center}
.submod .mats li b{margin-left:auto;color:var(--crit);font-variant-numeric:tabular-nums;font-size:12px}
.submod .ver{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2);
  font-size:12.5px;font-weight:600;color:var(--accent-ink)}

/* Un submódulo o una matriz apagados, en la pantalla de estructura */
.card.apagado{opacity:.62;border-style:dashed}
/* Los botoncitos de la pantalla de estructura: en celular se acomodan en
   varios renglones en vez de estirar la tabla. */
.acc-btns{display:flex;flex-wrap:nowrap;gap:4px;justify-content:flex-end}
.acc-btns form{display:inline-flex}
/* La celda de los botones se queda con lo mínimo y el nombre se lleva el
   resto del ancho; en celular los botones sí se parten en varios renglones. */
.acc-celda{width:1px;white-space:nowrap}
@media(max-width:620px){.acc-btns{flex-wrap:wrap}.acc-celda{width:auto}}
.grid2.ancha{grid-template-columns:2.1fr 1fr}
@media(max-width:980px){.grid2.ancha{grid-template-columns:1fr}}

/* ---------- texto largo dentro de una celda ----------
   Lo que escriben los directivos en un reporte puede ser un párrafo entero.
   Si se pinta completo, la celda se vuelve un muro y empuja a las demás. Se
   muestran tres renglones y quien quiera lee el resto con un clic. Sin
   JavaScript: es un <details>. */
.masq{font-size:13px}
.masq > summary{cursor:pointer;list-style:none;display:block}
.masq > summary::-webkit-details-marker{display:none}
.masq .corto{display:-webkit-box;-webkit-line-clamp:3;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.masq[open] .corto{display:none}
.masq .todo{display:none;margin-top:2px;overflow-wrap:anywhere}
.masq[open] .todo{display:block}
.masq .ver{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:600;
  color:var(--accent-ink)}
.masq .ver::after{content:"Ver todo ▾"}
.masq[open] .ver::after{content:"Ver menos ▴"}
.masq > summary:hover .ver{text-decoration:underline}
/* Que una palabra larguísima o una liga pegada no estiren la columna */
.texto-celda{overflow-wrap:anywhere}
table.tabla-reportes{min-width:820px}
table.tabla-reportes td:first-child{min-width:190px}
/* En celular esta tabla no cabe de ancho y lo importante —lo que reportó el
   centro— quedaba fuera de la pantalla. Ahí se acomoda como tarjetas, una
   debajo de otra, en vez de obligar a arrastrar de lado. */
@media(max-width:700px){
  table.tabla-reportes{min-width:0}
  table.tabla-reportes thead{display:none}
  table.tabla-reportes,
  table.tabla-reportes tbody,
  table.tabla-reportes tr,
  table.tabla-reportes td{display:block;width:auto}
  table.tabla-reportes tr{border-bottom:1px solid var(--line);padding:10px 0 12px}
  table.tabla-reportes tr:last-child{border-bottom:0}
  table.tabla-reportes td{border-bottom:0;padding:4px 12px;
    max-width:none !important;min-width:0 !important;text-align:left !important}
  table.tabla-reportes td:empty{display:none}
}
/* ---------- casillas de «para quiénes es» (eventos) ---------- */
.tipos-ct{display:flex;gap:8px;flex-wrap:wrap}
.tipos-ct label{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--line);border-radius:99px;background:var(--card);
  color:var(--ink-2);font-size:13px;cursor:pointer;user-select:none;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s}
.tipos-ct label:hover{border-color:var(--accent);color:var(--accent-ink)}
.tipos-ct label:has(input:checked){background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:600}
.tipos-ct input{margin:0;accent-color:#fff}

/* ---------- escuelas que atiende una USAER ---------- */
table.tabla-escuelas{min-width:720px}
.aviso-compartida{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;
  font-size:11.5px;color:var(--warn)}
.aviso-compartida .chip{font-size:10.5px}
.aviso-compartida a{color:var(--accent-ink);font-weight:600}
/* Mismo plantel, otro turno: es un dato, no una alarma, así que va en gris
   y sin chip —el color de aviso se reserva para la escuela compartida de veras. */
.nota-turno{margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.45}
.nota-turno a{color:var(--accent-ink);font-weight:600}
@media(max-width:700px){
  table.tabla-escuelas{min-width:0}
  table.tabla-escuelas thead{display:none}
  table.tabla-escuelas,
  table.tabla-escuelas tbody,
  table.tabla-escuelas tr,
  table.tabla-escuelas td{display:block;width:auto}
  table.tabla-escuelas tr{border-bottom:1px solid var(--line);padding:10px 0 12px}
  table.tabla-escuelas tr:last-child{border-bottom:0}
  table.tabla-escuelas td{border-bottom:0;padding:3px 12px;
    max-width:none !important;text-align:left !important}
}
/* la bitácora de escuelas atendidas usa una lista */
ul.bitacora{list-style:none;margin:0;padding:0;max-height:430px;overflow-y:auto}
ul.bitacora li{border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;
  background:var(--card);font-size:13px}
ul.bitacora li .chip{margin-right:4px;font-size:10.5px;text-transform:capitalize}

/* ---------- botón de × para quitar (escuelas atendidas) ----------
   En vez de la palabra «Quitar», un botoncito redondo. Al abrirlo, el
   cuadro con el motivo sale flotando: si se quedara dentro de la celda,
   estiraría la columna y descuadraría toda la tabla. */
details.quitar-x{position:relative;display:inline-block}
details.quitar-x>summary{cursor:pointer;list-style:none;display:inline-grid;place-items:center;
  width:26px;height:26px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:15px;line-height:1;
  transition:background .14s,border-color .14s,color .14s}
details.quitar-x>summary::-webkit-details-marker{display:none}
details.quitar-x>summary:hover{border-color:var(--crit);color:var(--crit);background:var(--crit-soft)}
details.quitar-x[open]>summary{border-color:var(--crit);color:#fff;background:var(--crit)}
details.quitar-x>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details.quitar-x .qcuerpo{position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  width:300px;text-align:left;background:var(--card);
  /* la celda va en nowrap para que el botón no se parta; aquí hay que
     devolverle el salto de línea al texto o sale cortado */
  white-space:normal;box-shadow:0 8px 24px rgba(0,0,0,.14)}
@media(max-width:700px){
  details.quitar-x{display:block}
  details.quitar-x .qcuerpo{position:static;width:auto;box-shadow:none}
}

/* ---------- buscador de escuelas atendidas ---------- */
table.tabla-busca-escuelas{min-width:900px}
.usaer-liga{padding:3px 0}
.usaer-liga + .usaer-liga{border-top:1px dashed var(--line-2);margin-top:4px;padding-top:6px}
.usaer-liga a{font-weight:600;color:var(--accent-ink)}
@media(max-width:820px){
  table.tabla-busca-escuelas{min-width:0}
  table.tabla-busca-escuelas thead{display:none}
  table.tabla-busca-escuelas,
  table.tabla-busca-escuelas tbody,
  table.tabla-busca-escuelas tr,
  table.tabla-busca-escuelas td{display:block;width:auto}
  table.tabla-busca-escuelas tr{border-bottom:1px solid var(--line);padding:10px 0 12px}
  table.tabla-busca-escuelas tr:last-child{border-bottom:0}
  table.tabla-busca-escuelas td{border-bottom:0;padding:3px 12px;
    max-width:none !important;text-align:left !important}
}