:root{
  /* ═══════════════════════════════════════════════════════════════════
     Identidad CACECHI, R.L.
     Colores tomados del Manual de Estilo Gráfico del Departamento de
     Tecnología. Los códigos oficiales no se alteran; solo se añaden
     tonos derivados para estados de interfaz que el manual no cubre
     (bordes, superficies, filas alternas).
     ═══════════════════════════════════════════════════════════════════ */

  /* — Colores oficiales, sin modificar — */
  --verde-principal:#0A5B29;
  --verde-secundario:#4EA418;
  --verde-alternativo:#158239;
  --lima:#BFED64;
  --lima-oscuro:#AAD84E;
  --verde-tenue:#DCF3D6;
  --gris-oscuro:#252525;
  --magenta:#B14690;
  --azul-marca:#31437F;
  --ambar-marca:#A46A18;

  /* ── Tema claro (predeterminado) ─────────────────────────────────── */
  --bg:#F6F8F7; --s1:#FFFFFF; --s2:#F9FBFA; --s3:#EEF2EF; --s4:#E1E8E3;
  --b1:#E2E8E4; --b2:#D2DAD5; --b3:#B6C2BA;

  /* El manual fija #070707 para títulos y #6E7A84 para cuerpo. Ese gris
     da 4.39:1 sobre blanco, por debajo del 4.5:1 que el propio manual
     exige para texto normal, así que aquí se usa un tono un punto más
     oscuro del mismo matiz. Ver README, sección de marca. */
  --t1:#070707; --t2:#5C6771; --t3:#68737D; --t4:#C3CCC6;

  --p:var(--verde-principal); --p2:var(--verde-secundario);
  --pa:var(--verde-tenue); --pglow:rgba(10,91,41,.28);
  --sobre-p:#FFFFFF;

  --green:var(--verde-alternativo); --green-lt:#EFF8F2;
  /* El ámbar oficial #A46A18 da 4.51:1 sobre blanco y solo 3.90:1 sobre su
     propio chip. Para ese uso concreto se emplea un tono derivado más
     oscuro; el oficial se conserva en --ambar-marca para todo lo demás. */
  --yellow:#945E14;                 --yellow-lt:#F7EDDF; --alerta-graf:#C08428;
  --red:#B3261E;                    --red-lt:#FAE7E5;
  --blue:var(--azul-marca);         --blue-lt:#E6E9F2;
  --violet:var(--magenta);          --violet-lt:#FAF3F7;
  --naranja:var(--ambar-marca);

  --barra:rgba(246,248,247,.9);
  --sh:0 1px 2px rgba(7,7,7,.04), 0 4px 14px rgba(7,7,7,.05);
  --trama:repeating-linear-gradient(45deg,#C3CCC6,#C3CCC6 3px,#EEF2EF 3px,#EEF2EF 6px);

  /* El manual pide 15 px de radio en regiones y botones tipo píldora. */
  --r:15px; --r2:10px; --r3:18px; --pastilla:999px;

  /* Montserrat, según el manual de marca. */
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --nav:64px;

  /* El rail usa el verde principal: es color de fondo autorizado por el
     manual y ancla la navegación frente al área de trabajo. */
  --rail-bg:#0A5B29; --rail-b:rgba(255,255,255,.14); --rail-hover:rgba(255,255,255,.11);
  --rail-t1:#FFFFFF; --rail-t2:#CFE6D6; --rail-t3:#9BC4A9;
  --rail-p:var(--lima); --rail-activo:rgba(191,237,100,.17);
}

/* ── Tema oscuro ──────────────────────────────────────────────────────
   Construido sobre el gris oscuro #252525 del manual, con lima acento
   como color de realce, que es el uso que el manual le da sobre fondos
   oscuros.                                                              */
html[data-tema="oscuro"]{
  --bg:#151615; --s1:#1D1F1D; --s2:#232522; --s3:#2C2F2B; --s4:#383C36;
  --b1:rgba(255,255,255,.07); --b2:rgba(255,255,255,.11); --b3:rgba(255,255,255,.18);
  --t1:#F1F4F1; --t2:#A8B3AB; --t3:#7E8B82; --t4:#3D443E;

  --p:var(--lima); --p2:var(--lima-oscuro);
  --pa:rgba(191,237,100,.13); --pglow:rgba(191,237,100,.3);
  --sobre-p:#0A2210;

  --green:#5FCB6E; --green-lt:rgba(95,203,110,.13);
  --yellow:#E0A542; --yellow-lt:rgba(224,165,66,.13); --alerta-graf:#E0A542;
  --red:#F0837A;   --red-lt:rgba(240,131,122,.13);
  --blue:#8CA0DC;  --blue-lt:rgba(140,160,220,.13);
  --violet:#D986C0;--violet-lt:rgba(217,134,192,.13);
  --naranja:#E0A542;

  --barra:rgba(21,22,21,.88);
  --sh:0 4px 20px rgba(0,0,0,.55);
  --trama:repeating-linear-gradient(45deg,#3D443E,#3D443E 3px,#2C2F2B 3px,#2C2F2B 6px);

  /* En claro el rail va en verde de marca. En oscuro no: un verde oscuro
     junto a un fondo casi negro se lee como una mancha turbia, sin el
     salto que separa el menú del contenido. Aquí el rail es una superficie
     neutra MÁS oscura que la página —lee como el armazón detrás de lo que
     se trabaja— y la identidad la lleva el acento lima, que es lo que se
     mira. Blanco sobre #0F100F da 18.4:1 y el lima 13.6:1. */
  --rail-bg:#0F100F; --rail-b:rgba(255,255,255,.09); --rail-hover:rgba(255,255,255,.07);
  --rail-t1:#F1F4F1; --rail-t2:#A8B3AB; --rail-t3:#7E8B82;
  --rail-p:var(--lima); --rail-activo:rgba(191,237,100,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{width:1em;height:1em;display:block}
:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.flex1{flex:1}
.silencio{color:var(--t2)}
.peq{font-size:12.5px}
.mini{font-size:11.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── estructura ───────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.rail{width:var(--nav);flex-shrink:0;background:var(--rail-bg);border-right:1px solid var(--rail-b);display:flex;flex-direction:column;min-height:0;
      position:fixed;top:0;left:0;height:100vh;z-index:200;transition:width .2s cubic-bezier(.4,0,.2,1);padding:8px 0}
/* dvh descuenta las barras del navegador; 100vh las ignora y en portátiles
   de pantalla corta deja el pie fuera de la vista. */
@supports (height:100dvh){ .rail{height:100dvh} }
.rail.abierto{width:224px}
/* Sin cookie el ancho lo decide la pantalla: sin JavaScript en la ruta
   crítica no hay salto al cargar. Las reglas se derivan de .rail.abierto
   para que no haya dos definiciones que mantener sincronizadas. */
@media(min-width:1281px){
  .rail.rail-auto{width:224px}
  .rail.rail-auto .marca{display:block}
  .rail.rail-auto .rail-nav{padding:0 8px}
  .rail.rail-auto .rail-pie{padding:8px 8px 0}
  .rail.rail-auto .rail-grupo{display:block}
  .rail.rail-auto .nav-i{width:100%;justify-content:flex-start;padding:0 10px;gap:11px}
  .rail.rail-auto .nav-i.activo::before{left:-8px}
  .rail.rail-auto .nav-t{display:block}
  .rail.rail-auto .nav-n{display:block}
  .rail.rail-auto+.cuerpo{margin-left:224px}
  .rail.rail-auto .rail-iso{display:none}
  .rail.rail-auto .rail-menu{display:grid}
  .rail.rail-auto ~ * .masiva{left:calc(232px + 22px)}
}
.rail-top{display:flex;align-items:center;gap:9px;padding:2px 12px 10px;border-bottom:1px solid var(--rail-b);margin-bottom:6px;min-height:42px}
.rail-toggle{width:42px;height:38px;display:grid;place-items:center;color:var(--rail-t2);border-radius:9px;flex-shrink:0;font-size:17px}
.rail-toggle:hover{background:var(--rail-hover);color:var(--rail-t1)}
/* El logotipo no tenía ninguna regla propia: se pintaba al ancho que le
   diera la gana, desbordaba su caja y quedaba pegado al borde izquierdo.
   Se limita al espacio disponible y se separa del borde. */
.marca{display:none;min-width:0;flex:1;overflow:hidden}
.marca-logo{display:block;width:auto;height:26px;max-width:100%;object-fit:contain;
            object-position:left center;margin-bottom:3px}
.rail.abierto .marca{display:block}
.marca-n{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:var(--rail-t1)}
.marca-s{font-size:10.5px;color:var(--rail-p);letter-spacing:.07em;text-transform:uppercase;font-weight:600}
/* Con trece entradas y un portátil de 13 pulgadas el menú no cabe. Se
   permite desplazarlo, pero sin barra: una barra gris dentro del panel
   verde se lee como un error de maquetación, no como una función. */
.rail-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 11px;
          scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.rail-nav::-webkit-scrollbar{width:0;height:0}
.rail.abierto .rail-nav{padding:0 8px}
.rail-pie{padding:7px 11px 0;border-top:1px solid var(--rail-b);flex-shrink:0}
.rail.abierto .rail-pie{padding:8px 8px 0}
.rail-grupo{display:none;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--rail-t3);font-weight:600;padding:11px 10px 4px}
.rail.abierto .rail-grupo{display:block}
.nav-i{position:relative;height:35px;width:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;
       color:var(--rail-t2);transition:background .12s,color .12s;margin-bottom:2px;font-size:16px}
.rail.abierto .nav-i{width:100%;justify-content:flex-start;padding:0 10px;gap:11px}
.nav-i:hover{background:var(--rail-hover);color:var(--rail-t1)}
.nav-i.activo{background:var(--rail-activo);color:var(--rail-p)}
.nav-i.activo::before{content:'';position:absolute;left:-11px;top:20%;height:60%;width:2.5px;background:var(--rail-p);border-radius:0 2px 2px 0;box-shadow:0 0 9px var(--pglow)}
.rail.abierto .nav-i.activo::before{left:-8px}
.nav-ico{flex-shrink:0;display:grid;place-items:center}
.nav-t{display:none;font-size:12.8px;font-weight:500;white-space:nowrap;overflow:hidden}
.rail.abierto .nav-t{display:block}
.nav-n{display:none;margin-left:auto;background:var(--rail-hover);color:var(--rail-t2);font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:9px}
.rail.abierto .nav-n{display:block}
.nav-i.activo .nav-n{background:var(--rail-activo);color:var(--rail-p)}
.nav-tip{position:absolute;left:calc(100% + 10px);background:#111A1D;color:#EDF1F3;font-size:12px;padding:5px 9px;border-radius:6px;
         white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:var(--sh);z-index:300}
.rail:not(.abierto) .nav-i:hover .nav-tip{opacity:1}

.cuerpo{flex:1;min-width:0;margin-left:var(--nav);display:flex;flex-direction:column;transition:margin-left .2s}
.rail.abierto+.cuerpo{margin-left:224px}
.topbar{height:56px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--b1);
        background:var(--barra);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}
.tb-t{font-size:14px;font-weight:700;letter-spacing:-.01em}
.yo{display:flex;align-items:center;gap:10px}
.yo-txt{text-align:right}
.yo-n{font-size:12.5px;font-weight:500;line-height:1.3}
.yo-c{font-size:11px;color:var(--t3);line-height:1.3}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--p2),var(--p));color:var(--sobre-p);
    display:grid;place-items:center;font-size:11.5px;font-weight:700;flex-shrink:0}
.vista{padding:22px;max-width:1500px;width:100%}

/* ── piezas ───────────────────────────────────────────── */
.tarj{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r)}
.tarj-cab{padding:13px 17px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:12px}
.tarj-cab h3{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.tarj-b{padding:17px}
.etq{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);font-weight:600}
.cab-pag{margin-bottom:18px}
.cab-pag h1{font-size:20px;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.cab-pag p{color:var(--t2);font-size:12.8px}
.filaflex{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rejilla2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.migas{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t3);margin-bottom:14px}
.migas a{color:var(--p)}
.migas a:hover{text-decoration:underline}

.btn{background:var(--p);color:var(--sobre-p);padding:9px 18px;border-radius:var(--pastilla);font-size:13.5px;font-weight:600;
     display:inline-flex;align-items:center;gap:7px;transition:background .14s,color .14s;box-shadow:none}
/* El manual fija el verde secundario como color al pasar el cursor. */
.btn:hover{background:var(--p2);color:#FFFFFF}
.btn-g{background:var(--s1);color:var(--t1);border:1px solid var(--b2);font-weight:600}
.btn-g:hover{background:var(--s1);border-color:var(--p);color:var(--p)}
.btn-p{padding:6px 14px;font-size:12.5px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:10.8px;font-weight:600;padding:3px 10px;border-radius:var(--pastilla);white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.e-nuevo{background:var(--blue-lt);color:var(--blue)}
.e-progreso{background:var(--green-lt);color:var(--green)}
.e-espera{background:var(--yellow-lt);color:var(--yellow)}
.e-aprob{background:var(--violet-lt);color:var(--violet)}
.e-resuelto{background:var(--s3);color:var(--t2)}
.e-cerrado{background:var(--s3);color:var(--t3)}
.pill-aud{background:var(--yellow-lt);color:var(--yellow)}

.prio{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;white-space:nowrap}
.prio i{width:3px;height:12px;border-radius:2px;background:currentColor}
.p-critica{color:var(--red)}
.p-alta{color:var(--naranja)}
.p-media{color:var(--t2)}
.p-baja{color:var(--t3)}

/* ── MEDIDOR DE SERVICIO ──────────────────────────────── */
.med{max-width:200px}
.med-p{position:relative;height:5px;background:var(--s4);border-radius:3px}
.med-b{height:100%;border-radius:3px}
.med-m{position:absolute;top:-3px;left:75%;width:1px;height:11px;background:var(--t3)}
.med-t{font-size:11px;margin-top:5px;font-family:var(--mono);color:var(--t2);line-height:1.45}
.m-ok .med-b{background:var(--green)}
.m-riesgo .med-b{background:var(--alerta-graf)} .m-riesgo .med-t{color:var(--yellow)}
.m-vencido .med-b{background:var(--red)}   .m-vencido .med-t{color:var(--red)}
.m-pausa .med-b{background:var(--trama)}
.m-pausa .med-t{color:var(--t3)}
.m-listo .med-b{background:var(--green);opacity:.35}      .m-listo .med-t{color:var(--t3)}
.m-incumplido .med-b{background:var(--red);opacity:.45}   .m-incumplido .med-t{color:var(--t3)}

.linea-serv{display:flex;height:16px;border-radius:5px;overflow:hidden;border:1px solid var(--b2);background:var(--s2)}
.linea-serv span{display:block;height:100%}
.ls-act{background:var(--p)}
.ls-exc{background:var(--red)}
.ls-pau{background:var(--trama)}
.leyenda{display:flex;gap:16px;font-size:11.5px;color:var(--t2);margin-top:9px;flex-wrap:wrap}
.leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* ── tablas ───────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:600;
         padding:9px 12px;border-bottom:1px solid var(--b1);background:var(--s2)}
tbody td{padding:10px 12px;border-bottom:1px solid var(--b1);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clic{cursor:pointer;transition:background .1s}
tbody tr.clic:hover{background:var(--s2)}
.num{font-family:var(--mono);font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.asunto{font-weight:600;display:block;margin-bottom:2px;font-size:12.8px;line-height:1.4}
.meta{font-size:11px;color:var(--t3);line-height:1.45}
.sinasig{color:var(--t3);font-style:italic;font-size:12.5px}
.avt{width:25px;height:25px;border-radius:50%;background:var(--s4);color:var(--t1);display:grid;place-items:center;
     font-size:9.5px;font-weight:700;flex-shrink:0}
.agente{display:flex;align-items:center;gap:8px;font-size:11.8px;line-height:1.35}
.vacio{padding:44px 20px;text-align:center;color:var(--t3)}

.vistas .n{font-family:var(--mono);font-size:10.5px;background:var(--s3);padding:1px 6px;border-radius:9px;color:var(--t3)}

/* ── catálogo del portal ──────────────────────────────── */
.rej{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(222px,1fr))}
.serv{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:15px;display:block;transition:border-color .14s,transform .14s}
.serv:hover{border-color:var(--p);transform:translateY(-1px)}
.serv-i{font-size:19px;margin-bottom:9px;display:block}
.serv-t{font-weight:500;font-size:13.5px;margin-bottom:3px}
.serv-d{font-size:12px;color:var(--t2);line-height:1.45}
.serv-s{font-size:11px;color:var(--t3);margin-top:9px;font-family:var(--mono)}

/* ── formularios ──────────────────────────────────────── */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12.5px;font-weight:500;margin-bottom:6px}
.req{color:var(--red)}
.ayuda{font-size:11.5px;color:var(--t3);margin-top:5px}
.campo input[type=text],.campo input[type=email],.campo input[type=password],.campo select,.campo textarea{
  width:100%;padding:9px 12px;border:1px solid var(--b2);border-radius:var(--r2);background:var(--s2);font-size:13.5px}
.campo textarea{min-height:110px;resize:vertical;font-family:inherit;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--pa)}
.ops{display:flex;gap:8px;flex-wrap:wrap}
.op{border:1px solid var(--b2);background:var(--s1);padding:8px 16px;border-radius:var(--pastilla);font-size:13px;color:var(--t2)}
.op:hover{border-color:var(--b3)}
.op.on{border-color:var(--p);background:var(--pa);color:var(--p);font-weight:500}
.aviso-datos{background:var(--yellow-lt);border-left:3px solid var(--yellow);padding:11px 14px;border-radius:0 var(--r2) var(--r2) 0;
             font-size:12.5px;color:var(--yellow);margin-bottom:16px}

/* ── conversación ─────────────────────────────────────── */
.hilo{display:flex;flex-direction:column;gap:15px}
.msg{display:flex;gap:11px}
.msg-c{flex:1;min-width:0}
.msg-h{display:flex;align-items:baseline;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.msg-q{font-weight:600;font-size:13px}
.msg-w{font-size:11px;color:var(--t3);font-family:var(--mono)}
.burb{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);padding:12px 14px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.msg-int .burb{background:var(--yellow-lt);border-color:var(--yellow);border-left:3px solid var(--yellow)}
.marca-int{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--yellow);
           background:var(--yellow-lt);padding:2px 7px;border-radius:4px}
.msg-sis{padding-left:47px;font-size:11.5px;color:var(--t3);display:flex;align-items:baseline;gap:10px}
.msg-sis::before{content:'';flex:0 0 18px;height:1px;background:var(--b2);position:relative;top:-4px}

.editor{border:1px solid var(--b2);border-radius:var(--r);background:var(--s1);overflow:hidden}
.ed-tabs{display:flex;border-bottom:1px solid var(--b1);background:var(--s2)}
.ed-tabs button{padding:10px 16px;font-size:13px;color:var(--t2);border-bottom:2px solid transparent}
.ed-tabs button.on{background:var(--s1);color:var(--t1);font-weight:500;border-bottom-color:var(--p)}
.ed-tabs button.on[data-t="1"]{border-bottom-color:var(--yellow);background:var(--yellow-lt)}
.editor textarea{width:100%;border:0;padding:14px;min-height:105px;resize:vertical;font-size:13.5px;font-family:inherit;background:transparent;line-height:1.6}
.editor textarea:focus{outline:none}
.ed-pie{padding:10px 13px;border-top:1px solid var(--b1);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--s2)}
.ed-pie select{padding:6px 9px;border:1px solid var(--b2);border-radius:6px;font-size:12.5px;background:var(--s3)}
.macro{border:1px solid var(--b2);background:var(--s1);padding:5px 13px;border-radius:var(--pastilla);font-size:12px;color:var(--t2)}
.macro:hover{border-color:var(--p);color:var(--p)}

/* ── detalle ──────────────────────────────────────────── */
.tres{display:grid;grid-template-columns:246px minmax(0,1fr) 252px;gap:15px;align-items:start}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:15px;align-items:start}
.prop{padding:11px 0;border-bottom:1px solid var(--b1)}
.prop:last-child{border-bottom:0}
.prop-e{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:600;margin-bottom:6px}
.prop-v{font-size:13px}
.prop select{width:100%;padding:6px 9px;border:1px solid var(--b2);border-radius:6px;font-size:12.5px;background:var(--s2)}
.hist{font-size:11.5px;color:var(--t2);padding:8px 0;border-bottom:1px solid var(--b1);display:flex;gap:9px;line-height:1.45}
.hist:last-child{border-bottom:0}
.hist time{font-family:var(--mono);font-size:10.5px;color:var(--t3);flex-shrink:0;width:60px}
.chip{font-size:11px;background:var(--s3);border:1px solid var(--b1);padding:2px 8px;border-radius:12px;color:var(--t2);font-family:var(--mono)}

/* ── tablero ──────────────────────────────────────────── */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));margin-bottom:16px}
.kpi{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:16px}
.kpi-v{font-size:27px;font-weight:700;line-height:1;letter-spacing:-.02em}
.kpi-e{font-size:11px;color:var(--t2);margin-top:7px;line-height:1.45}
.kpi-t{font-size:10.5px;margin-top:7px;font-family:var(--mono);color:var(--t3)}
.barras{display:flex;flex-direction:column;gap:10px}
.bf{display:grid;grid-template-columns:158px 1fr 44px;align-items:center;gap:11px;font-size:12.5px}
.bf .p{height:16px;border-radius:4px;background:var(--p);min-width:3px}
.bf .v{font-family:var(--mono);font-size:12px;color:var(--t2);text-align:right}
.cols{display:flex;gap:10px;padding-top:6px}
.col{flex:1;display:flex;flex-direction:column}
.col .pista{height:132px;display:flex;flex-direction:column;justify-content:flex-end}
.col .b{width:100%;background:var(--p);border-radius:4px 4px 0 0;flex-shrink:0;display:flex;flex-direction:column;min-height:4px}
.col .b i{display:block;width:100%;background:var(--alerta-graf);border-radius:4px 4px 0 0;flex-shrink:0}
.col .l{font-size:11px;color:var(--t3);font-family:var(--mono);text-align:center;padding-top:8px}

/* ── configuración ────────────────────────────────────── */
.lst{list-style:none}
.lst li{padding:12px 0;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.lst li:last-child{border-bottom:0}
.lst li>div{min-width:0}
.lst .t{font-weight:500;font-size:13px}
.lst .d{font-size:11.5px;color:var(--t3)}
.punto{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── login ────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(ellipse at 50% -10%,rgba(47,182,204,.11),transparent 62%),var(--bg)}
.login{width:100%;max-width:390px}
.login-marca{text-align:center;margin-bottom:26px}
.login-marca .n{font-size:23px;font-weight:600;letter-spacing:-.02em}
.login-marca .s{font-size:11px;color:var(--p);letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:5px}
.login-caja{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r3);padding:26px}
.login .btn{width:100%;justify-content:center;padding:11px}
.err{background:var(--red-lt);border:1px solid currentColor;color:var(--red);padding:10px 13px;
     border-radius:var(--r2);font-size:12.5px;margin-bottom:16px}
.demo-cuentas{margin-top:20px;border-top:1px solid var(--b1);padding-top:16px}
.demo-cuentas .etq{display:block;margin-bottom:9px}
.cuenta{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:var(--r2);
        font-size:12px;color:var(--t2);text-align:left;transition:background .12s}
.cuenta:hover{background:var(--s3);color:var(--t1)}
.cuenta .rr{margin-left:auto;font-size:10.5px;color:var(--t3);font-family:var(--mono)}

.flash{margin:0 22px;margin-top:16px;padding:11px 15px;border-radius:var(--r2);font-size:13px}
.flash-ok{background:var(--green-lt);color:var(--green);border:1px solid currentColor}
.flash-err{background:var(--red-lt);color:var(--red);border:1px solid currentColor}

/* ── responsivo ───────────────────────────────────────── */
@media(max-width:1150px){.tres{grid-template-columns:1fr}.dos-col{grid-template-columns:1fr}}
@media(max-width:860px){
  .rail{transform:translateX(-100%);width:224px}
  .rail.abierto+.cuerpo{margin-left:0}
  .rail.abierto{transform:none}
  .cuerpo{margin-left:0}
  .rail .marca,.rail .rail-grupo,.rail .nav-t,.rail .nav-n{display:block}
  .rail .nav-i{width:100%;justify-content:flex-start;padding:0 10px;gap:11px}
  .vista{padding:15px}
  .rejilla2{grid-template-columns:1fr}
  .yo-txt{display:none}
  .topbar{padding:0 14px}
  table thead{display:none}
  table,tbody,tbody tr,tbody td{display:block;width:100%}
  tbody tr{padding:13px 15px;border-bottom:1px solid var(--b1)}
  tbody td{padding:0 0 8px;border:0}
  tbody td:last-child{padding-bottom:0}
  .med{max-width:none}
  .movil-menu{display:grid!important}
}
.movil-menu{display:none;width:38px;height:38px;place-items:center;border-radius:9px;color:var(--t2);font-size:17px;margin-right:-4px}
.movil-menu:hover{background:var(--s3)}


/* ── Conmutador de tema ─────────────────────────────────────────────── */
.tema{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--t2);
      border:1px solid var(--b1);background:var(--s1);transition:background .12s,color .12s}
.tema:hover{background:var(--s3);color:var(--t1)}
.tema svg{width:16px;height:16px}
.tema .luna{display:none}
html[data-tema="oscuro"] .tema .sol{display:none}
html[data-tema="oscuro"] .tema .luna{display:block}

/* ── Marca en el rail ────────────────────────────────────────────────
   Contraído, el botón de menú muestra el isotipo; al pasar el cursor
   revela el icono de menú, de modo que sigue siendo evidente que abre.
   Expandido, aparece el logotipo en blanco sobre el verde principal,
   que es un uso autorizado por el manual de marca.                    */
.rail-iso{width:28px;height:28px;object-fit:contain;display:block}
.rail-menu{display:none;place-items:center}
.rail.abierto .rail-iso{display:none}
.rail.abierto .rail-menu{display:grid}
.rail:not(.abierto) .rail-toggle:hover .rail-iso{display:none}
.rail:not(.abierto) .rail-toggle:hover .rail-menu{display:grid}
.marca-logo{width:100%;max-width:148px;height:auto;display:block;margin-bottom:6px}
.rail .marca-s{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
               color:var(--rail-t2);font-weight:600}

/* ── Editor de texto enriquecido ─────────────────────────────────────
   contenteditable con una barra mínima. Lo que se escribe aquí pasa por
   el sanitizador del servidor antes de guardarse: la barra es comodidad,
   no un control de seguridad.                                          */
.rico{border:1px solid var(--b2);border-radius:var(--r2);background:var(--s1);overflow:hidden}
.rico:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--pa)}
.rico-barra{display:flex;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--b1);
            background:var(--s2);flex-wrap:wrap}
.rico-b{width:30px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--t2);font-size:13px}
.rico-b:hover{background:var(--s3);color:var(--t1)}
.rico-b[aria-pressed="true"]{background:var(--pa);color:var(--p)}
.rico-b svg{width:15px;height:15px}
.rico-sep{width:1px;height:18px;background:var(--b2);margin:0 4px}
.rico-color{display:flex;gap:3px;align-items:center}
.rico-color button{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--b2);padding:0}
.rico-color button:hover{transform:scale(1.15)}
.rico-area{min-height:130px;max-height:420px;overflow-y:auto;padding:13px 14px;font-size:13.5px;line-height:1.6;outline:none}
.rico-area:empty::before{content:attr(data-vacio);color:var(--t3)}
.rico-area p{margin:0 0 9px} .rico-area p:last-child{margin-bottom:0}
.rico-area ul,.rico-area ol{margin:0 0 9px 20px}
.rico-area a{color:var(--p);text-decoration:underline}
.rico-area blockquote{margin:0 0 9px;padding-left:12px;border-left:3px solid var(--b2);color:var(--t2)}
.rico-area code{font-family:var(--mono);background:var(--s3);padding:1px 5px;border-radius:4px;font-size:12.5px}
.rico-ayuda{font-size:11px;color:var(--t3);padding:6px 10px;border-top:1px solid var(--b1);background:var(--s2)}

/* Contenido con formato ya publicado, dentro del hilo */
.burb-html{white-space:normal}
.burb-html p{margin:0 0 9px} .burb-html p:last-child{margin-bottom:0}
.burb-html ul,.burb-html ol{margin:0 0 9px 20px}
.burb-html a{color:var(--p);text-decoration:underline}
.burb-html blockquote{margin:0 0 9px;padding-left:12px;border-left:3px solid var(--b2);color:var(--t2)}
.burb-html code{font-family:var(--mono);background:var(--s3);padding:1px 5px;border-radius:4px;font-size:12.5px}
.burb-html h3{font-size:15px;margin:0 0 8px} .burb-html h4{font-size:13.5px;margin:0 0 7px}

/* ── Colaboradores ───────────────────────────────────────────────────*/
.colab{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--b1)}
.colab:last-child{border-bottom:0}
.colab-txt{flex:1;min-width:0}
.colab-n{font-size:12.5px;font-weight:500;line-height:1.3}
.colab-c{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colab-x{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--t3);font-size:15px;flex-shrink:0}
.colab-x:hover{background:var(--red-lt);color:var(--red)}
.colab-vacio{font-size:12px;color:var(--t3);padding:8px 0}
.destino{display:flex;gap:6px;margin-top:10px}
.destino label{flex:1;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--b2);
               border-radius:var(--r2);font-size:12px;cursor:pointer;background:var(--s1)}
.destino label:has(input:checked){border-color:var(--p);background:var(--pa);color:var(--p);font-weight:600}
.destino input{margin:0;accent-color:var(--p)}

/* ── Tareas del ticket ───────────────────────────────────────────────
   Internas: solo las ve el equipo que atiende. Se muestran como una lista
   de verificación, no como tickets en miniatura: son pasos del trabajo.  */
.tarea{display:flex;align-items:flex-start;gap:11px;padding:12px 17px;border-bottom:1px solid var(--b1)}
.tarea:last-of-type{border-bottom:0}
.tarea-cerrada{opacity:.55}
.tarea-cerrada .tarea-t{text-decoration:line-through}

.tarea-check{width:20px;height:20px;flex-shrink:0;margin-top:2px;border:1.6px solid var(--b3);
             border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700;
             color:transparent;background:var(--s1);transition:border-color .12s,background .12s}
.tarea-check:hover{border-color:var(--p)}
.tarea-cerrada .tarea-check{background:var(--p);border-color:var(--p);color:var(--sobre-p)}

.tarea-txt{flex:1;min-width:0}
.tarea-t{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:3px}
.tarea-d{font-size:12px;color:var(--t2);margin:4px 0 6px}
.tarea-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--t3)}
.tarea-vencida{color:var(--red);font-weight:600}

.tarea-acc{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tarea-acc select{padding:4px 7px;border:1px solid var(--b2);border-radius:6px;font-size:11.5px;background:var(--s1)}

.tarea-nueva{border-top:1px solid var(--b1);background:var(--s2)}
.tarea-nueva summary{padding:11px 17px;font-size:12.5px;font-weight:600;color:var(--p);cursor:pointer;list-style:none}
.tarea-nueva summary::-webkit-details-marker{display:none}
.tarea-nueva summary::before{content:'+';display:inline-block;width:16px;font-weight:700}
.tarea-nueva[open] summary::before{content:'−'}
.tarea-nueva summary:hover{background:var(--s3)}
.tarea-nueva form{padding:2px 17px 16px}
.tarea-nueva input[type=text],.tarea-nueva input[type=date],.tarea-nueva select{
  width:100%;padding:8px 11px;border:1px solid var(--b2);border-radius:var(--r2);
  background:var(--s1);font-size:13px}

@media(max-width:860px){
  .tarea{flex-wrap:wrap}
  .tarea-acc{width:100%;justify-content:flex-end;margin-top:6px}
}

/* ═══════════════════════════════════════════════════════════════════
   Detalle del ticket
   Tres columnas de igual peso no tienen punto de entrada: el ojo no sabe
   dónde empezar. Aquí hay una jerarquía explícita —encabezado para
   orientarse, conversación como protagonista, gestión al lado y lo
   secundario plegado— para que leer siga un orden natural.
   ═══════════════════════════════════════════════════════════════════ */

.tk-cab{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
        padding:13px 18px 12px;margin-bottom:14px}
.tk-linea1{display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.tk-pt{color:var(--t4)}
.tk-titulo{font-size:17.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin-bottom:10px}

/* Una sola línea de datos separados por puntos, en vez de cuatro bloques de
   dos renglones cada uno. Ocupa un tercio del alto y se lee de corrido. */
.tk-meta{display:flex;align-items:center;gap:7px 18px;flex-wrap:wrap;
         padding-top:9px;border-top:1px solid var(--b1);font-size:12.5px}
.tk-m{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.tk-m strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.tk-e{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:600;flex-shrink:0}
.tk-sla{margin-left:auto;gap:9px}
.tk-sla-barra{width:96px;height:6px;flex-shrink:0;border-radius:4px}
.tk-sla-txt{font-size:11.5px;white-space:nowrap}
.tk-sla-txt.m-vencido{color:var(--red);font-weight:600}
.tk-sla-txt.m-riesgo{color:var(--yellow);font-weight:600}
.tk-sla-txt.m-pausa,.tk-sla-txt.m-listo,.tk-sla-txt.m-incumplido{color:var(--t3)}
.tk-sla-txt.m-ok{color:var(--t2)}

.tk-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:15px;align-items:start}
.tk-principal{min-width:0}
.tk-lado{display:flex;flex-direction:column;gap:13px;position:sticky;top:70px}

/* Secciones plegables: lo secundario existe pero no compite por atención */
.plegable{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);margin-top:14px;overflow:hidden}
.plegable.lado{margin-top:0}
.plegable>summary{display:flex;align-items:center;gap:10px;padding:12px 17px;cursor:pointer;
                  list-style:none;font-size:13px;transition:background .12s}
.plegable>summary::-webkit-details-marker{display:none}
.plegable>summary:hover{background:var(--s2)}
.plegable>summary::before{content:'▸';color:var(--t3);font-size:11px;transition:transform .15s;display:inline-block}
.plegable[open]>summary::before{transform:rotate(90deg)}
.plegable[open]>summary{border-bottom:1px solid var(--b1)}
.plg-t{font-weight:700;letter-spacing:-.01em}
.plg-cuerpo{padding:13px 17px}

/* Sub-desplegable dentro de una tarjeta lateral */
.sub{margin-top:10px;padding-top:10px;border-top:1px solid var(--b1)}
.sub>summary{font-size:12px;font-weight:600;color:var(--p);cursor:pointer;list-style:none;padding:2px 0}
.sub>summary::-webkit-details-marker{display:none}
.sub>summary::before{content:'+ ';font-weight:700}
.sub[open]>summary::before{content:'− '}
.sub-i{width:100%;padding:7px 10px;border:1px solid var(--b2);border-radius:var(--r2);
       font-size:12.5px;background:var(--s1);margin-top:7px}
.colab-avisos{margin-top:11px;padding-top:11px;border-top:1px solid var(--b1)}

/* Tickets anteriores del solicitante */
.prev{display:flex;flex-direction:column;gap:1px;padding:7px 0;border-bottom:1px solid var(--b1)}
.prev:last-child{border-bottom:0}
.prev-a{font-size:12px;line-height:1.35}

/* Marca de respuesta dirigida solo al solicitante */
.marca-dest{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
            color:var(--t2);background:var(--s3);padding:2px 7px;border-radius:4px}

@media(max-width:1150px){
  .tk-cuerpo{grid-template-columns:1fr}
  .tk-lado{position:static}
}
@media(max-width:860px){
  .tk-cab{padding:12px 14px 11px}
  .tk-titulo{font-size:16px;margin-bottom:9px}
  .tk-meta{gap:6px 14px;font-size:12px}
  .tk-m strong{max-width:150px}
  /* En pantalla estrecha el medidor pasa a su propia línea, a todo el ancho */
  .tk-sla{margin-left:0;width:100%;padding-top:7px;border-top:1px solid var(--b1)}
  .tk-sla-barra{flex:1;width:auto}
}

/* ── Adjuntos ─────────────────────────────────────────────────────── */
.adj-lista{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.adj{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--s2);
     border:1px solid var(--b1);border-radius:var(--r2);font-size:12px}
.adj-i{font-size:14px;flex-shrink:0;line-height:1}
.adj-n{flex:1;min-width:0;color:var(--p);font-weight:500;overflow:hidden;
       text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.adj-n:hover{text-decoration:underline}
.adj-t{color:var(--t3);font-family:var(--mono);font-size:10.5px;flex-shrink:0}
.adj-sueltos{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--b1)}

.adj-subir{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;
           padding-top:11px;border-top:1px solid var(--b1)}
.adj-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.adj-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--pastilla);
         border:1px solid var(--b2);background:var(--s1);font-size:12.5px;font-weight:600;
         color:var(--t2);cursor:pointer;transition:border-color .12s,color .12s}
.adj-btn:hover{border-color:var(--p);color:var(--p)}
.adj-btn svg{width:14px;height:14px}
.adj-input:focus-visible + .adj-ayuda,.adj-input:focus-visible ~ .adj-ayuda{outline:none}
.adj-input:focus-visible{position:static;width:auto;height:auto;opacity:1}
.adj-ayuda{font-size:10.5px;color:var(--t3);line-height:1.45;flex:1;min-width:150px}
.adj-elegidos{font-size:11.5px;color:var(--p);font-weight:600;width:100%}

/* ── Administración del catálogo ─────────────────────────────────── */
.adm-cols{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start}
.adm-cols-2{grid-template-columns:1.15fr 1fr}
.adm-fila{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;border-bottom:1px solid var(--b1)}
.adm-fila:hover{background:var(--s2)}
.adm-off{opacity:.5}
.adm-ico{font-size:17px;line-height:1.2;flex-shrink:0}
.adm-txt{flex:1;min-width:0}
.adm-n{font-size:13px;font-weight:600;line-height:1.35;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.adm-d{font-size:11.5px;color:var(--t2);line-height:1.4;margin-top:1px}
.adm-m{font-size:10.5px;color:var(--t3);font-family:var(--mono);margin-top:3px}
.adm-acc{display:flex;align-items:center;gap:6px;flex-shrink:0}
.adm-acc .btn-p{padding:4px 11px;font-size:11.5px}
.adm-sel{padding:4px 8px;border:1px solid var(--b2);border-radius:6px;font-size:11.5px;background:var(--s1)}
.adm-grupo{padding:9px 16px 5px;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
           color:var(--t3);font-weight:700;background:var(--s2);border-bottom:1px solid var(--b1)}
.adm-scroll{max-height:440px;overflow-y:auto}
.adm-form{padding:16px;background:var(--s2);border-top:1px solid var(--b1)}
.adm-form .campo{margin-bottom:11px}
.adm-check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.adm-check input{width:auto;margin:0;accent-color:var(--p)}

@media(max-width:1080px){ .adm-cols,.adm-cols-2{grid-template-columns:1fr} }
@media(max-width:640px){
  .adm-fila{flex-wrap:wrap}
  .adm-acc{width:100%;justify-content:flex-end;margin-top:6px}
}

/* ── Ventanas modales ────────────────────────────────────────────────
   <dialog> nativo: trae fondo, cierre con Escape y captura del foco sin
   añadir librerías. Editar donde se está mirando, en vez de rellenar un
   formulario al final de la página.                                    */
dialog.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;
             width:100%;height:100%;overflow:auto}
dialog.modal::backdrop{background:rgba(7,7,7,.45);backdrop-filter:blur(2px)}
.modal-caja{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
            width:min(560px,calc(100% - 32px));margin:6vh auto 40px;box-shadow:0 16px 48px rgba(7,7,7,.22);
            animation:modal-entra .16s cubic-bezier(.2,0,.2,1)}
@keyframes modal-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal-caja{animation:none}}

.modal-cab{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--b1)}
.modal-cab h3{font-size:15px;font-weight:700;letter-spacing:-.01em;flex:1}
.modal-x{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
         color:var(--t3);font-size:19px;line-height:1;flex-shrink:0}
.modal-x:hover{background:var(--s3);color:var(--t1)}
.modal-b{padding:18px 20px}
.modal-b .campo{margin-bottom:13px}
.modal-b .campo:last-child{margin-bottom:0}
.modal-pie{display:flex;align-items:center;gap:9px;padding:14px 20px;
           border-top:1px solid var(--b1);background:var(--s2);border-radius:0 0 var(--r) var(--r)}
.modal-pie .flex1{flex:1}
.modal-nota{font-size:11.5px;color:var(--t3);line-height:1.5}

@media(max-width:560px){
  .modal-caja{margin:0 auto;width:100%;min-height:100%;border-radius:0;border:0}
  .modal-pie{position:sticky;bottom:0}
}

/* ── Matriz de roles y permisos ──────────────────────────────────── */
.rol-tabla{width:100%;border-collapse:collapse;min-width:640px}
.rol-tabla th,.rol-tabla td{border-bottom:1px solid var(--b1)}
.rol-th-p{text-align:left;padding:11px 16px;font-size:10px;text-transform:uppercase;
          letter-spacing:.09em;color:var(--t3);font-weight:700;background:var(--s2);width:44%}
.rol-th{padding:11px 10px;font-size:11.5px;font-weight:700;background:var(--s2);
        text-align:center;line-height:1.3;vertical-align:bottom}
.rol-lec{display:block;font-size:9px;font-weight:600;text-transform:uppercase;
         letter-spacing:.06em;color:var(--yellow);margin-top:2px}
.rol-grupo td{padding:8px 16px;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
              color:var(--t3);font-weight:700;background:var(--s3)}
.rol-td-p{padding:10px 16px}
.rol-n{font-size:12.8px;font-weight:600;line-height:1.35}
.rol-d{font-size:11px;color:var(--t3);line-height:1.45;margin-top:2px}
.rol-c{text-align:center;padding:10px 8px}
.rol-si{color:var(--p);font-weight:700;font-size:15px}
.rol-no{color:var(--t4);font-size:17px;line-height:1}
html[data-tema="oscuro"] .rol-si{color:var(--p)}

/* ── Selector de vista de la bandeja ─────────────────────────────────
   Una sola fila, siempre. Los grupos se separan con una línea fina en
   vez de apilarse en dos niveles: conserva la lectura por intención y
   ocupa un tercio del alto. Cuando no cabe, se desplaza en horizontal
   —con un degradado que avisa de que hay más— en lugar de crecer hacia
   abajo y empujar la tabla fuera de la pantalla.                       */
.vistas-barra{position:relative;background:var(--s1);border:1px solid var(--b1);
              border-radius:var(--pastilla);padding:5px;margin-bottom:11px;overflow:hidden}
.vb-pista{display:flex;align-items:center;gap:3px;overflow-x:auto;scrollbar-width:none;
          -ms-overflow-style:none;scroll-behavior:smooth}
.vb-pista::-webkit-scrollbar{display:none}

/* Los degradados avisan de que hay más contenido hacia ese lado, y solo
   aparecen cuando de verdad lo hay: un velo permanente sobre el último
   contador lo haría parecer deshabilitado. Las clases las pone app.js
   midiendo el desbordamiento. */
.vistas-barra::before,.vistas-barra::after{content:'';position:absolute;top:4px;bottom:4px;width:38px;
    pointer-events:none;opacity:0;transition:opacity .18s}
.vistas-barra::before{left:4px;background:linear-gradient(90deg,var(--s1) 30%,transparent);
                      border-radius:var(--pastilla) 0 0 var(--pastilla)}
.vistas-barra::after{right:4px;background:linear-gradient(270deg,var(--s1) 30%,transparent);
                     border-radius:0 var(--pastilla) var(--pastilla) 0}
.vistas-barra.mas-izq::before{opacity:1}
.vistas-barra.mas-der::after{opacity:1}

.vb-sep{flex:0 0 1px;align-self:stretch;background:var(--b1);margin:5px 7px}

.vb{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--pastilla);
    font-size:12.5px;font-weight:600;color:var(--t2);text-decoration:none;white-space:nowrap;
    transition:background .13s,color .13s;flex-shrink:0}
.vb:hover{background:var(--s3);color:var(--t1)}
.vb-on{background:var(--p);color:var(--sobre-p);box-shadow:0 1px 3px rgba(10,91,41,.28)}
.vb-on:hover{background:var(--p);color:var(--sobre-p)}
.vb-cero{color:var(--t3)}
.vb-cero .vb-n{opacity:.6}

.vb-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:700;
      min-width:19px;text-align:center;padding:1.5px 6px;border-radius:var(--pastilla);
      background:var(--s3);color:var(--t2);transition:background .13s,color .13s}
.vb:hover .vb-n{background:var(--s4)}
.vb-on .vb-n{background:rgba(255,255,255,.22);color:var(--sobre-p)}
/* Lo que exige acción se distingue del recuento neutro */
.vb-n-vencidos{background:var(--red-lt);color:var(--red)}
.vb-n-hoy{background:var(--yellow-lt);color:var(--yellow)}
.vb-n-sinasig{background:var(--blue-lt);color:var(--blue)}
.vb-on .vb-n-vencidos,.vb-on .vb-n-hoy,.vb-on .vb-n-sinasig{background:rgba(255,255,255,.22);color:var(--sobre-p)}

/* ── Filtros secundarios ─────────────────────────────────────────────*/
.filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:13px}
.filtros select{padding:8px 11px;border:1px solid var(--b2);border-radius:var(--r2);
                background:var(--s1);font-size:12.5px;color:var(--t2);max-width:190px}
.filtros select:hover{border-color:var(--b3)}
.f-buscar{position:relative;flex:1;min-width:220px}
.f-buscar svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
              width:15px;height:15px;color:var(--t3);pointer-events:none}
.f-buscar input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--b2);
                border-radius:var(--r2);background:var(--s1);font-size:13px}

/* ── Columna de cierre ───────────────────────────────────────────────*/
.cierre-f{display:block;font-size:11.5px;color:var(--t2)}
.cierre-d{display:block;font-size:10.5px;color:var(--t3);margin-top:2px}

@media(max-width:860px){
  .filtros select{flex:1;min-width:132px;max-width:none}
  .f-buscar{width:100%;flex:none}
}

/* ── Selección múltiple en la bandeja ────────────────────────────── */
.col-sel{width:38px;padding-left:14px!important;padding-right:0!important}
.col-sel input{width:15px;height:15px;margin:0;accent-color:var(--p);cursor:pointer;display:block}
tbody tr:has(.sel-t:checked){background:var(--pa)}
tbody tr:has(.sel-t:checked):hover{background:var(--pa)}

/* La barra flota sobre el contenido para que no haya que bajar hasta el
   final de una lista de 200 filas para aplicar la acción. */
.masiva{position:fixed;left:calc(var(--nav) + 22px);right:22px;bottom:18px;z-index:300;
        animation:masiva-entra .18s cubic-bezier(.2,0,.2,1)}
@keyframes masiva-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.masiva{animation:none}}
.rail.abierto ~ * .masiva{left:calc(232px + 22px)}
body.con-masiva .tarj:last-of-type{margin-bottom:74px}

.masiva-caja{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
             background:var(--s1);border:1px solid var(--b2);border-radius:var(--pastilla);
             padding:9px 10px 9px 18px;box-shadow:0 8px 28px rgba(7,7,7,.16)}
html[data-tema="oscuro"] .masiva-caja{box-shadow:0 8px 28px rgba(0,0,0,.5)}
.masiva-n{font-size:13px;color:var(--t2);white-space:nowrap}
.masiva-n strong{font-family:var(--mono);font-variant-numeric:tabular-nums;
                 font-size:14px;color:var(--p);font-weight:700}
.masiva-x{font-size:11.5px;color:var(--t3);text-decoration:underline;white-space:nowrap}
.masiva-x:hover{color:var(--t1)}
.masiva-sep{width:1px;height:22px;background:var(--b1)}
.masiva-s{padding:7px 11px;border:1px solid var(--b2);border-radius:var(--r2);
          background:var(--s1);font-size:12.5px;color:var(--t2);max-width:180px}
.masiva-s:hover{border-color:var(--b3)}
.masiva .btn:disabled{opacity:.45;pointer-events:none}

@media(max-width:860px){
  .masiva{left:12px;right:12px;bottom:12px}
  .masiva-caja{border-radius:var(--r);padding:11px 12px}
  .masiva-s{flex:1;min-width:128px;max-width:none}
  .masiva .btn{width:100%;justify-content:center}
}

/* ── Acuerdos, calendarios y días no laborables ──────────────────── */
.dupla{display:grid;grid-template-columns:1fr 130px;gap:9px}
.dupla input,.dupla select{width:100%;padding:9px 12px;border:1px solid var(--b2);
                           border-radius:var(--r2);background:var(--s1);font-size:13.5px}

/* Cuatro campos de hora más la etiqueta no caben en un modal de 560 px:
   el modal del calendario se ensancha y las columnas se estrechan. */
#mCal .modal-caja{width:min(680px,calc(100% - 32px))}
.hor-cab,.hor-fila{display:grid;grid-template-columns:78px repeat(4,minmax(0,1fr));gap:5px;align-items:center}
.hor-cab{margin-bottom:5px}
.hor-cab span{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
              color:var(--t3);font-weight:600;text-align:center}
.hor-fila{margin-bottom:5px}
.hor-d{font-size:12.5px;color:var(--t2);font-weight:500}
.hor-fila input{width:100%;min-width:0;padding:6px 4px;border:1px solid var(--b2);border-radius:7px;
                background:var(--s1);font-size:12px;font-family:var(--mono);text-align:center}
.hor-fila input:not(:placeholder-shown),.hor-fila input[value]{border-color:var(--b2)}

.fer-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.fer{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--b1)}
.fer-pasado{opacity:.5}
.fer-txt{flex:1;min-width:0}
.fer-d{font-size:12.8px;font-weight:600;line-height:1.35}
.fer-f{font-size:10.5px;color:var(--t3);margin-top:2px}

@media(max-width:560px){
  /* La fila de un día no laborable se apila: nombre y fecha arriba, tipo y
     acciones debajo. Con todo en línea, los botones se salían de la pantalla. */
  .fer{flex-wrap:wrap;gap:7px}
  .fer-txt{flex:1 1 100%}
  .fer .adm-acc{margin-left:auto}
  .hor-cab,.hor-fila{grid-template-columns:70px repeat(2,1fr)}
  .hor-cab span:nth-child(4),.hor-cab span:nth-child(5){display:none}
  .hor-fila input:nth-child(4),.hor-fila input:nth-child(5){grid-column:2 / -1}
}

/* ── Elección de departamento en el portal ───────────────────────── */
.deptos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px}
.depto{display:flex;align-items:center;gap:14px;padding:17px 19px;background:var(--s1);
       border:1px solid var(--b1);border-radius:var(--r);text-decoration:none;color:inherit;
       transition:border-color .13s,box-shadow .13s,transform .13s}
.depto:hover{border-color:var(--p);box-shadow:var(--sh);transform:translateY(-1px)}
.depto-p{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;
         background:var(--pa);color:var(--p);font-family:var(--mono);font-weight:700;font-size:14px;
         letter-spacing:.02em}
.depto:hover .depto-p{background:var(--p);color:var(--sobre-p)}
.depto-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.depto-n{font-size:15px;font-weight:700;letter-spacing:-.01em}
.depto-d{font-size:12.5px;color:var(--t2);line-height:1.45}
.depto-m{font-size:11px;color:var(--t3);margin-top:2px}
.depto-fl{font-size:22px;color:var(--t4);flex-shrink:0}
.depto:hover .depto-fl{color:var(--p)}

.ruta-paso{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px;
           font-size:12.5px;color:var(--t2)}
.ruta-paso a{color:var(--p)}
.ruta-paso strong{font-weight:700;color:var(--t1)}

/* ── Selector de departamento en administración ──────────────────── */
.ctx-mesa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--s1);
          border:1px solid var(--b1);border-radius:var(--pastilla);padding:8px 9px 8px 18px;margin-bottom:13px}
.ctx-e{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);font-weight:700}
.ctx-mesa select{padding:7px 12px;border:1px solid var(--b2);border-radius:var(--pastilla);
                 background:var(--s1);font-size:13px;font-weight:600;color:var(--t1);max-width:260px}
.mesa-p{width:46px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;
        background:var(--pa);color:var(--p);font-family:var(--mono);font-weight:700;font-size:11.5px}

@media(max-width:640px){
  .ctx-mesa{border-radius:var(--r);padding:10px 12px}
  .ctx-mesa select{flex:1;max-width:none}
  .depto{padding:14px}
}

/* ═══════════════════════════════════════════════════════════════════
   Nueva solicitud
   Antes mostraba de golpe doce decisiones y el formulario completo.
   Ahora es un recorrido de tres pasos: área → caso concreto → contarlo.
   En cada momento hay una sola cosa que decidir, y lo secundario existe
   pero llega plegado.
   ═══════════════════════════════════════════════════════════════════ */

.ns-ruta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;font-size:12.5px}
.ns-ruta a{color:var(--t2);text-decoration:none;padding:4px 10px;border-radius:var(--pastilla);
           border:1px solid var(--b1);background:var(--s1);transition:border-color .12s,color .12s}
.ns-ruta a:hover{border-color:var(--p);color:var(--p)}
.ns-fijo{padding:4px 10px;border-radius:var(--pastilla);background:var(--pa);color:var(--p);font-weight:600}
.ns-sep{color:var(--t4)}
.ns-cambiar{margin-left:2px;border:0!important;background:none!important;color:var(--p)!important;
            text-decoration:underline!important;padding:0 4px!important;font-size:11.5px}

.ns-cab{margin-bottom:20px;max-width:62ch}
.ns-cab h1{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px}
.ns-cab p{font-size:13.5px;color:var(--t2);line-height:1.6}

/* ── Paso 1: áreas ── */
.ns-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));gap:12px}
.ns-tarj{display:flex;flex-direction:column;gap:5px;padding:18px;background:var(--s1);
         border:1px solid var(--b1);border-radius:var(--r);text-decoration:none;color:inherit;
         transition:border-color .13s,box-shadow .13s,transform .13s}
.ns-tarj:hover{border-color:var(--p);box-shadow:var(--sh);transform:translateY(-2px)}
.ns-ico{font-size:24px;line-height:1;margin-bottom:5px}
.ns-t{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.ns-d{font-size:12px;color:var(--t2);line-height:1.5}

/* ── Paso 2: casos concretos ── */
.ns-lista{display:flex;flex-direction:column;gap:8px;max-width:800px}
.ns-op{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--s1);
       border:1px solid var(--b1);border-radius:var(--r);text-decoration:none;color:inherit;
       transition:border-color .13s,background .13s}
.ns-op:hover{border-color:var(--p);background:var(--pa)}
.ns-op-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ns-op-n{font-size:13.5px;font-weight:600;line-height:1.4}
.ns-op-d{font-size:12px;color:var(--t2);line-height:1.5}
.ns-op-m{font-family:var(--mono);font-size:11px;color:var(--t3);white-space:nowrap;flex-shrink:0}
.ns-op-fl{font-size:19px;color:var(--t4);flex-shrink:0}
.ns-op:hover .ns-op-fl{color:var(--p)}

/* ── Paso 3: el formulario ── */
.ns-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:16px;align-items:start}
.ns-form{min-width:0;display:flex;flex-direction:column;gap:12px}
.ns-lado{display:flex;flex-direction:column;gap:12px;position:sticky;top:70px}
.ns-extra{margin-top:0}
.ns-multi{width:100%;padding:9px 12px;border:1px solid var(--b2);border-radius:var(--r2);
          background:var(--s1);font-size:13px}
.ns-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.ns-envio{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 2px}
.ns-envio .mini{max-width:38ch;line-height:1.45}

.ns-sla{display:flex;flex-direction:column;gap:10px}
.ns-sla div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px}
.ns-sla span{color:var(--t2)}
.ns-sla strong{font-family:var(--mono);font-weight:600;font-size:12px}
.ns-aprob{margin-top:12px;padding:9px 11px;border-radius:var(--r2);
          background:var(--violet-lt);color:var(--violet);line-height:1.5}

.ns-tips{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0}
.ns-tips li{position:relative;padding-left:17px;font-size:12.5px;color:var(--t2);line-height:1.5}
.ns-tips li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
                    border-radius:50%;background:var(--p)}
.ns-tips strong{color:var(--t1);font-weight:600}

/* La base de conocimiento aún no existe: se anuncia, no se simula.
   Mostrar artículos de ejemplo como si fueran reales invita a hacer clic
   en algo que no lleva a ninguna parte. */
.ns-kb{margin-top:15px;padding-top:13px;border-top:1px dashed var(--b2)}
.ns-kb-cab{display:flex;align-items:center;gap:9px;margin-bottom:7px}

@media(max-width:1080px){
  .ns-cuerpo{grid-template-columns:1fr}
  .ns-lado{position:static}
}
@media(max-width:640px){
  .ns-cab h1{font-size:20px}
  .ns-dos{grid-template-columns:1fr}
  .ns-op{padding:13px 14px;flex-wrap:wrap}
  .ns-op-m{order:3}
}

/* ── Selector de solicitud: departamento, área y caso en una pantalla ──
   Los tres bloques conviven. El resuelto se pliega a una línea con lo
   elegido y un enlace para cambiarlo; el activo se despliega; el que aún
   no toca queda atenuado. Elegir el caso lleva al formulario, así que el
   recorrido completo son dos pantallas.                                */
.elegir{display:flex;flex-direction:column;gap:11px;max-width:940px}
.el-bloque{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;
           transition:border-color .15s,opacity .15s}
.el-bloque:not(.el-activo):not(.el-listo){opacity:.55}
.el-activo{border-color:var(--b3)}

.el-cab{display:flex;align-items:center;gap:11px;padding:14px 18px;flex-wrap:wrap}
.el-activo .el-cab{border-bottom:1px solid var(--b1)}
.el-n{width:24px;height:24px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
      background:var(--s3);color:var(--t3);font-size:11.5px;font-weight:700;
      font-family:var(--mono);transition:background .15s,color .15s}
.el-activo .el-n{background:var(--p);color:var(--sobre-p)}
.el-listo .el-n{background:var(--pa);color:var(--p);font-size:13px}
.el-t{font-size:13.5px;font-weight:600;color:var(--t2)}
.el-activo .el-t{color:var(--t1);font-weight:700}
.el-val{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:13px;
        font-weight:600;color:var(--t1)}
.el-chip{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 7px;
         border-radius:var(--pastilla);background:var(--pa);color:var(--p)}
.el-cambiar{font-size:11.5px;color:var(--p);text-decoration:underline;flex-shrink:0}
.el-cuerpo{padding:15px 18px 18px}
.el-pendiente{padding:0 18px 14px;font-size:12px;color:var(--t3)}

/* Dentro del selector las tarjetas van más contenidas que a pantalla completa */
.el-cuerpo .ns-rejilla{grid-template-columns:repeat(auto-fill,minmax(min(206px,100%),1fr));gap:9px}
.el-cuerpo .ns-tarj{padding:14px}
.el-cuerpo .ns-ico{font-size:20px;margin-bottom:3px}
.el-cuerpo .ns-t{font-size:13px}
.el-cuerpo .ns-lista{max-width:none;gap:7px}
.el-cuerpo .ns-op{padding:13px 15px}
.el-cuerpo .deptos{gap:9px}
.el-cuerpo .depto{padding:14px 16px}

@media(max-width:640px){
  .el-cab{padding:12px 14px;gap:9px}
  .el-val{margin-left:0;width:100%;padding-left:35px}
  .el-cuerpo{padding:12px 14px 15px}
}

/* ═══════════════════════════════════════════════════════════════════
   Redactar una solicitud
   El acto principal de esta pantalla es ESCRIBIR. Todo lo demás es
   apoyo. Por eso el título y el cuerpo van sin marcos ni etiquetas,
   como una hoja: quien llega sabe qué hacer sin leer instrucciones.
   ═══════════════════════════════════════════════════════════════════ */
.redactar{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:22px;align-items:start;
          max-width:1120px}
.rd-form{min-width:0;display:flex;flex-direction:column;gap:11px}

.rd-hoja{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
         padding:26px 28px 22px;transition:border-color .15s}
.rd-hoja:focus-within{border-color:var(--b3)}

.rd-titulo{width:100%;border:0;background:none;padding:0 0 10px;
           font-family:var(--sans);font-size:23px;font-weight:700;letter-spacing:-.02em;
           line-height:1.3;color:var(--t1)}
.rd-titulo::placeholder{color:var(--t4);font-weight:600}
.rd-titulo:focus{outline:none;box-shadow:none}
.rd-titulo:focus::placeholder{color:var(--t3)}

/* El editor pierde el marco: es la continuación de la hoja. La barra baja
   al pie y solo aparece cuando se está escribiendo. */
.rico-min{border:0;background:none;margin-top:4px}
.rico-min .rico-area{border:0;background:none;padding:2px 2px 4px;min-height:190px;
                     font-size:14.5px;line-height:1.75;color:var(--t1)}
.rico-min .rico-area:empty::before{color:var(--t3);font-size:14.5px;line-height:1.75}
.rico-min .rico-area:focus{outline:none;box-shadow:none}
.rico-barra-pie{display:flex;align-items:center;gap:2px;padding:8px 0 0;margin-top:10px;
                border-top:1px solid var(--b1);border-bottom:0;opacity:.45;transition:opacity .18s}
.rico-min:focus-within .rico-barra-pie{opacity:1}
.rico-nota{font-size:10.5px;color:var(--t3)}

.rd-campos{margin-top:18px;padding-top:16px;border-top:1px solid var(--b1);
           display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:13px}
.rd-campos .campo{margin:0}

/* Zona de arrastre: un gesto, no una lista de diecisiete extensiones */
.adj-zona{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;
          padding:18px;border:1.5px dashed var(--b2);border-radius:var(--r2);
          background:var(--s2);cursor:pointer;text-align:center;
          transition:border-color .14s,background .14s}
.adj-zona:hover{border-color:var(--p);background:var(--pa)}
.adj-zona.sobre{border-color:var(--p);background:var(--pa);border-style:solid}
.adj-z-i{width:20px;height:20px;color:var(--t3)}
.adj-zona:hover .adj-z-i,.adj-zona.sobre .adj-z-i{color:var(--p)}
.adj-z-t{font-size:13px;font-weight:600;color:var(--t2)}
.adj-zona:hover .adj-z-t{color:var(--p)}
.adj-z-d{font-size:11px;color:var(--t3);line-height:1.5;max-width:44ch}

.rd-extra{margin-top:0}
.rd-envio{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 2px 2px}
.rd-volver{font-size:12.5px;color:var(--t2);text-decoration:none}
.rd-volver:hover{color:var(--p)}
.rd-aviso{font-size:11px;color:var(--t3);text-align:right;max-width:30ch;line-height:1.4}

/* Columna de apoyo: sin marcos de tarjeta, para que no compita con la hoja */
.rd-lado{display:flex;flex-direction:column;gap:20px;position:sticky;top:70px}
.rd-ctx{display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid var(--b1)}
.rd-ctx-p{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;
          background:var(--pa);color:var(--p);font-family:var(--mono);font-weight:700;font-size:11px}
.rd-ctx-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.rd-ctx-n{font-size:13px;font-weight:700;letter-spacing:-.01em}
.rd-ctx-c{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rd-panel{display:flex;flex-direction:column}
.rd-p-t{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);
        font-weight:700;margin-bottom:11px}
.rd-p-n{font-size:11px;color:var(--t3);line-height:1.55;margin-top:11px}

@media(max-width:1080px){
  .redactar{grid-template-columns:1fr;gap:16px}
  .rd-lado{position:static;order:-1;gap:16px}
  .rd-ctx{padding-bottom:0;border-bottom:0}
  .rd-lado .rd-panel{display:none}   /* en estrecho, el apoyo estorba más que ayuda */
  .rd-lado .rd-panel:first-of-type{display:flex}
}
@media(max-width:640px){
  .rd-hoja{padding:18px 16px 16px}
  .rd-titulo{font-size:19px}
  .rd-envio{gap:9px}
  .rd-aviso{order:3;max-width:none;text-align:left}
  .rd-envio .btn{width:100%;justify-content:center}
}

/* ── Buscador de personas con etiquetas ──────────────────────────────
   Sustituye al <select multiple>: escribir parte del nombre, elegir, y la
   persona queda como etiqueta retirable. Con doscientos empleados, una
   lista con Ctrl pulsado no es una opción real.                        */
.bp{position:relative}
.bp-caja{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:42px;
         padding:7px 10px;border:1px solid var(--b2);border-radius:var(--r2);
         background:var(--s1);cursor:text;transition:border-color .13s,box-shadow .13s}
.bp-caja:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--pa)}
.bp-etiquetas{display:contents}
.bp-etq{display:inline-flex;align-items:center;gap:5px;padding:3px 5px 3px 10px;
        border-radius:var(--pastilla);background:var(--pa);color:var(--p);
        font-size:12.5px;font-weight:600;max-width:100%}
.bp-etq-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-x{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;
      color:var(--p);font-size:14px;line-height:1;opacity:.65;flex-shrink:0}
.bp-x:hover{opacity:1;background:rgba(10,91,41,.14)}
.bp-input{flex:1;min-width:130px;border:0;background:none;padding:4px 0;font-size:13.5px}
.bp-input:focus{outline:none;box-shadow:none}

.bp-lista{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:60;max-height:264px;
          overflow-y:auto;background:var(--s1);border:1px solid var(--b2);
          border-radius:var(--r2);box-shadow:0 10px 30px rgba(7,7,7,.14)}
html[data-tema="oscuro"] .bp-lista{box-shadow:0 10px 30px rgba(0,0,0,.5)}
.bp-op{display:flex;flex-direction:column;gap:1px;width:100%;padding:9px 13px;text-align:left;
       border-bottom:1px solid var(--b1)}
.bp-op:last-child{border-bottom:0}
.bp-op:hover,.bp-op-on{background:var(--pa)}
.bp-op-n{font-size:13px;font-weight:600;color:var(--t1)}
.bp-op-d{font-size:11.5px;color:var(--t3)}
.bp-vacio{padding:13px;font-size:12.5px;color:var(--t3);text-align:center}

/* ── Jerarquía: la hoja manda, el apoyo acompaña ─────────────────────
   Dos columnas con el mismo peso tipográfico se leen como dos columnas
   igual de importantes. La hoja gana contraste, aire y sombra; la
   columna de apoyo se estrecha, se aclara y baja de tamaño.           */
.redactar{grid-template-columns:minmax(0,1fr) 236px;gap:28px}
.rd-hoja{padding:32px 34px 26px;box-shadow:0 1px 2px rgba(7,7,7,.04),0 8px 24px rgba(7,7,7,.05)}
html[data-tema="oscuro"] .rd-hoja{box-shadow:0 8px 24px rgba(0,0,0,.28)}
.rd-hoja:focus-within{border-color:var(--p);box-shadow:0 1px 2px rgba(7,7,7,.04),0 10px 30px rgba(10,91,41,.10)}
.rd-titulo{font-size:26px;padding-bottom:14px}
.rico-min .rico-area{min-height:230px;font-size:15px}
.rico-min .rico-area:empty::before{font-size:15px}

.rd-lado{gap:22px;padding-top:6px}
.rd-lado .rd-p-t{font-size:9px;color:var(--t4)}
.rd-ctx{gap:9px;padding-bottom:14px}
.rd-ctx-p{width:32px;height:32px;border-radius:9px;font-size:10px;background:var(--s3);color:var(--t3)}
.rd-ctx-n{font-size:12px;color:var(--t2)}
.rd-ctx-c{font-size:11px;color:var(--t4)}
.rd-lado .ns-sla div{font-size:11.5px}
.rd-lado .ns-sla span{color:var(--t3)}
.rd-lado .ns-sla strong{font-size:11.5px;color:var(--t2)}
.rd-lado .ns-tips li{font-size:11.5px;color:var(--t3)}
.rd-lado .ns-tips li::before{background:var(--b3);width:4px;height:4px;top:6px}
.rd-lado .ns-tips strong{color:var(--t2);font-weight:600}
.rd-lado .rd-p-n{font-size:10.5px;color:var(--t4)}
.rd-lado .pill{font-size:10px}

@media(max-width:1080px){ .redactar{grid-template-columns:1fr;gap:16px} }

/* Mientras llega el contenido nuevo, el actual se atenúa. Sin señal, un
   filtro sobre una lista larga parece no haber hecho nada. */
main.vista.cargando{opacity:.45;pointer-events:none;transition:opacity .12s}

/* ── Matriz de permisos editable ─────────────────────────────────── */
.rol-chk{display:grid;place-items:center;cursor:pointer;padding:4px}
.rol-chk input{width:16px;height:16px;margin:0;accent-color:var(--p);cursor:pointer}
.rol-na{color:var(--t4);font-size:13px}
.rol-pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;
         border-top:1px solid var(--b1);background:var(--s2);border-radius:0 0 var(--r) var(--r)}
.rol-pie .mini{max-width:56ch;line-height:1.5}

/* ── Permisos por usuario, dentro del modal ──────────────────────── */
.up{margin-top:13px;padding-top:13px;border-top:1px solid var(--b1)}
.up-cab{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.up-n{font-size:11px;color:var(--t3);line-height:1.5;margin-bottom:10px}
.up-grupo{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--t4);
          font-weight:700;margin:11px 0 5px}
.up-l{display:flex;align-items:flex-start;gap:9px;padding:5px 0;cursor:pointer}
.up-l input{width:15px;height:15px;margin:2px 0 0;accent-color:var(--p);flex-shrink:0}
.up-t{font-size:12.5px;line-height:1.4}
.up-d{font-size:10.5px;color:var(--t3);line-height:1.4}
.up-dif{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
        padding:1px 6px;border-radius:var(--pastilla);background:var(--yellow-lt);color:var(--yellow)}
.up-l.es-dif .up-t{font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   La conversación como conversación
   Era una pila de cajas grises idénticas. Ahora quien habla se distingue
   de un vistazo: color propio de avatar, fondo distinto para la mesa y
   para quien pide, y una espina vertical que ata el hilo. El color se usa
   para significar —quién, en qué estado, cuánto queda—, nunca de adorno.
   ═══════════════════════════════════════════════════════════════════ */

/* Paleta institucional para los avatares: seis tonos estables, derivados
   del nombre. Nada de colores al azar, que dan contrastes impredecibles. */
.av-0{background:#0A5B29;color:#fff}
.av-1{background:#31437F;color:#fff}
.av-2{background:#7A4E17;color:#fff}
.av-3{background:#155E63;color:#fff}
.av-4{background:#5B3A7A;color:#fff}
.av-5{background:#8C3B33;color:#fff}
html[data-tema="oscuro"] .av-0{background:#1B7A3E} html[data-tema="oscuro"] .av-1{background:#4358A0}
html[data-tema="oscuro"] .av-2{background:#9A6520} html[data-tema="oscuro"] .av-3{background:#1E7A80}
html[data-tema="oscuro"] .av-4{background:#75509B} html[data-tema="oscuro"] .av-5{background:#B04E44}

.hilo{display:flex;flex-direction:column;gap:2px;position:relative}
/* La espina: une los avatares y hace legible el orden del diálogo */
.hilo::before{content:'';position:absolute;left:12px;top:14px;bottom:14px;width:2px;
              background:var(--b1);border-radius:2px}
.msg{display:flex;gap:12px;position:relative;padding:9px 0}
.msg .avt{position:relative;z-index:1;width:26px;height:26px;font-size:10px;font-weight:700;
          box-shadow:0 0 0 3px var(--s1)}
.msg-c{flex:1;min-width:0}
.msg-h{display:flex;align-items:baseline;gap:9px;margin-bottom:5px;flex-wrap:wrap}

.burb{border-radius:4px 12px 12px 12px;padding:12px 15px;font-size:13.5px;line-height:1.65;
      white-space:pre-wrap;word-wrap:break-word;border:1px solid var(--b1);background:var(--s2)}

/* Quien pide: fondo neutro. La mesa: tinte de marca. La distinción es
   funcional, no decorativa: dice de qué lado viene cada mensaje. */
.msg-sol .burb{background:var(--s2);border-color:var(--b1)}
.msg-ag  .burb{background:var(--pa);border-color:var(--p-b, var(--b1))}
html[data-tema="oscuro"] .msg-ag .burb{background:rgba(27,122,62,.13)}
.marca-ag{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
          color:var(--p);background:var(--pa);padding:2px 7px;border-radius:4px}

.msg-int .burb{background:var(--yellow-lt);border-color:var(--yellow);border-left:3px solid var(--yellow);
               border-radius:4px 12px 12px 4px}

.msg-sis{padding-left:50px;font-size:11.5px;color:var(--t3);display:flex;align-items:center;
         gap:10px;position:relative}
.msg-sis::before{content:'';position:absolute;left:11px;width:4px;height:4px;border-radius:50%;
                 background:var(--b3);box-shadow:0 0 0 3px var(--s1)}

/* ── El medidor de servicio, con peso propio ─────────────────────── */
.tk-sla-barra{height:7px;border-radius:5px;background:var(--s3);overflow:hidden}
.tk-sla-txt{font-weight:600}
.tk-dato-sla,.tk-sla{padding:7px 12px;border-radius:var(--pastilla);background:var(--s2)}
.tk-sla.m-vencido,.tk-sla:has(.m-vencido){background:var(--red-lt)}
.tk-sla:has(.m-riesgo){background:var(--yellow-lt)}

/* ── El encabezado deja de ser una caja blanca más ───────────────── */
.tk-cab{position:relative;overflow:hidden}
.tk-cab::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--p)}
.tk-cab.p-1::before{background:var(--red)}
.tk-cab.p-2::before{background:var(--yellow)}
.tk-cab.p-3::before{background:var(--blue)}
.tk-cab.p-4::before{background:var(--b3)}
.tk-cab{padding-left:20px}

/* ── El editor deja de flotar aparte ─────────────────────────────── */
.editor{border:1px solid var(--b1);border-radius:var(--r);background:var(--s1);overflow:hidden}
.editor:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--pa)}
.ed-tabs button.on{color:var(--p);border-bottom-color:var(--p);font-weight:700}

/* ── Panel de gestión: el estado se ve, no solo se lee ───────────── */
.prop-e{display:flex;align-items:center;gap:7px}
.prop select{transition:border-color .13s}
.prop select:hover{border-color:var(--b3)}

/* ── Gestión: el estado se ve, no solo se lee ────────────────────── */
.pt-punto{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--b3)}
.pt-punto.e-nuevo{background:var(--violet)}
.pt-punto.e-progreso{background:var(--p)}
.pt-punto.e-espera{background:var(--yellow)}
.pt-punto.e-resuelto{background:var(--green)}
.pt-punto.e-cerrado{background:var(--t3)}
.pt-punto.e-sinasig{background:var(--blue)}

/* Una franja del color del estado al borde del selector: en un panel de
   siete controles idénticos, es lo que permite ver en qué punto está el
   ticket sin leer ninguna etiqueta. */
.sel-estado{border-left-width:3px}
.sel-estado.e-nuevo{border-left-color:var(--violet)}
.sel-estado.e-progreso{border-left-color:var(--p)}
.sel-estado.e-espera{border-left-color:var(--yellow)}
.sel-estado.e-resuelto{border-left-color:var(--green)}
.sel-estado.e-cerrado{border-left-color:var(--t3)}

.avt-mini{width:19px;height:19px;font-size:8px;font-weight:700;flex-shrink:0}
.tk-persona{gap:7px}
.tk-persona .tk-e{margin-left:1px}

/* Separadores tenues entre los grupos de gestión */
.tk-lado .prop + .prop{margin-top:13px;padding-top:13px;border-top:1px solid var(--b1)}

/* ── El editor: dos modos que no se confunden ────────────────────── */
.ed-tabs{align-items:center;padding-right:14px;gap:2px}
.ed-tabs button{padding:11px 15px;border-bottom:2px solid transparent;font-weight:500;
                border-radius:0;transition:color .13s,background .13s}
.ed-tabs button:hover{color:var(--t1);background:var(--s3)}
.ed-quien{font-size:11px;color:var(--t3);line-height:1.4;text-align:right;max-width:34ch}

/* Modo nota interna: el editor entero cambia de color. La pestaña sola no
   se ve mientras se escribe, y confundirlo es un error caro. */
.editor.modo-interna{border-color:var(--yellow);box-shadow:0 0 0 3px var(--yellow-lt)}
.editor.modo-interna .rico-area,
.editor.modo-interna .rico-barra,
.editor.modo-interna .ed-pie{background:var(--yellow-lt)}
.editor.modo-interna .ed-quien{color:var(--yellow);font-weight:600}
.editor.modo-interna .btn-p,.editor.modo-interna #btnEnviar{background:var(--yellow);border-color:var(--yellow);color:#2A1F05}
html[data-tema="oscuro"] .editor.modo-interna #btnEnviar{color:#1A1305}

/* ── Respuestas rápidas: fichas, no botones sueltos ──────────────── */
.macro-etq{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);
           font-weight:700;align-self:center}
.macro{border:1px dashed var(--b2);background:transparent;padding:5px 12px;
       transition:border-color .13s,color .13s,background .13s}
.macro:hover{border-style:solid;border-color:var(--p);color:var(--p);background:var(--pa)}

/* ── Estados vacíos con algo que mirar ───────────────────────────── */
.vacio{padding:38px 20px;text-align:center;color:var(--t3);font-size:13px;line-height:1.6}
.colab-vacio{font-size:12.5px;color:var(--t3);line-height:1.55;padding:2px 0 6px}

/* ═══════════════════════════════════════════════════════════════════
   Columna de propiedades
   Eran cajas con borde y etiqueta en mayúsculas, con el mismo peso que
   la conversación. Un agente cambia el estado una vez por ticket y la
   sección casi nunca: no merecen el mismo protagonismo que leer y
   responder. Ahora se leen como una ficha y se editan con un clic.
   ═══════════════════════════════════════════════════════════════════ */
.ficha{display:flex;flex-direction:column}
.ficha + .ficha{margin-top:20px;padding-top:16px;border-top:1px solid var(--b1)}
.ficha-t{display:flex;align-items:center;gap:8px;font-size:9.5px;text-transform:uppercase;
         letter-spacing:.1em;color:var(--t3);font-weight:700;margin-bottom:9px;padding:0 2px}
.ficha-n{font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 6px;
         border-radius:var(--pastilla);background:var(--s3);color:var(--t2)}
.ficha-vacio{font-size:12.5px;color:var(--t3);line-height:1.55;padding:3px 2px 7px}

/* Cada propiedad es una fila: etiqueta a la izquierda, valor a la derecha.
   El <select> se pinta como texto y solo se comporta como control al
   pasar por encima: se lee como información, se edita con un clic. */
.pf{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:4px 10px}
.pf-e{font-size:12px;color:var(--t3);padding:6px 0}
.pf-v{display:flex;align-items:center;gap:7px;min-width:0;border-radius:7px;
      padding:0 6px;margin-left:-6px;transition:background .12s}
.pf-v:hover{background:var(--s2)}
.pf-v select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
             padding:6px 18px 6px 0;font-size:12.8px;font-weight:600;color:var(--t1);
             font-family:inherit;cursor:pointer;width:100%;min-width:0;
             text-overflow:ellipsis;
             background-image:linear-gradient(45deg,transparent 50%,var(--t4) 50%),
                              linear-gradient(135deg,var(--t4) 50%,transparent 50%);
             background-position:right 7px center,right 3px center;
             background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.pf-v select:hover{color:var(--p)}
.pf-v select:focus{outline:none;color:var(--p)}
.pf-v select:disabled{cursor:default;color:var(--t2);background-image:none;opacity:.75}
.pf-v:has(select:disabled):hover{background:transparent}
.pf-calc{padding:5px 6px}

.pf-accion{margin:2px 0 6px}
.pf-accion button{width:100%;padding:7px 12px;border-radius:var(--pastilla);
                  border:1px dashed var(--b2);font-size:12px;font-weight:600;color:var(--t2);
                  transition:border-color .13s,color .13s,background .13s}
.pf-accion button:hover{border-style:solid;border-color:var(--p);color:var(--p);background:var(--pa)}
.pf-avisos{margin-top:10px;padding-top:10px;border-top:1px solid var(--b1)}

/* La columna pierde el marco de tarjeta para no competir con la hoja */
.tk-lado > .ficha{background:transparent;border:0;padding:0}
.tk-lado .plegable.lado{background:transparent;border:0}
.tk-lado .plegable.lado > summary{padding:11px 2px;border-bottom:0}
.tk-lado .plegable.lado[open] > summary{border-bottom:1px solid var(--b1)}
.tk-lado .plg-cuerpo{padding:11px 2px}
.tk-lado{gap:0;padding:16px 16px 18px;background:var(--s1);
         border:1px solid var(--b1);border-radius:var(--r)}

/* ── La ficha del solicitante ─────────────────────────────────────── */
.ficha-nota{margin-top:16px;padding-top:13px;border-top:1px solid var(--b1);
            font-size:11.5px;color:var(--t3);line-height:1.6}
/* Los valores de solo lectura se ajustan en varias líneas: cortar «La
   impresora de recibos no imprime» a mitad no ahorra nada útil. */
.pf-calc strong{font-weight:600;font-size:12.8px;line-height:1.45;white-space:normal;
                word-break:break-word}
.pf-calc{align-items:flex-start;padding-top:5px;padding-bottom:5px}
.pf{align-items:start}
.pf-e{padding-top:7px;line-height:1.4}
.pf-calc em{font-size:12.5px}

/* ── Calificación: una escala, no cinco botones de estrellas ─────────
   Cinco filas de asteriscos obligan a contar. Con una palabra debajo se
   elige lo que se piensa, no lo que se cuenta. */
.csat{margin-top:14px;padding:20px 22px;background:var(--pa);border:1px solid var(--b1);
      border-radius:var(--r)}
.csat-t{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.csat-d{font-size:12.5px;color:var(--t2);line-height:1.55;margin-bottom:15px}
.csat-e{display:flex;gap:8px;flex-wrap:wrap}
.csat-e button{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;
               padding:12px 8px;border:1px solid var(--b2);border-radius:var(--r2);
               background:var(--s1);transition:border-color .13s,background .13s,transform .13s}
.csat-e button span{font-size:19px;color:var(--b3);line-height:1;transition:color .13s}
.csat-e button small{font-size:11px;color:var(--t3);font-weight:600}
.csat-e button:hover{border-color:var(--yellow);background:var(--yellow-lt);transform:translateY(-2px)}
.csat-e button:hover span{color:var(--yellow)}
.csat-e button:hover small{color:var(--t1)}

@media(max-width:640px){
  .csat{padding:16px}
  .csat-e button{min-width:0;flex:1 1 30%;padding:10px 4px}
  .csat-e button small{font-size:10px}
}

/* La salida cuando ningún caso encaja: se distingue de los tipos reales
   con línea discontinua, para que no parezca uno más del catálogo. */
.ns-op-otro{border-style:dashed}
.ns-op-otro .ns-op-n{color:var(--t2)}
.ns-op-otro:hover{border-style:solid}
.ns-op-otro:hover .ns-op-n{color:var(--p)}

/* La cabecera de cada rol es su punto de edición */
.rol-editar{font:inherit;color:inherit;text-decoration:underline;text-decoration-style:dotted;
            text-underline-offset:3px}
.rol-editar:hover{color:var(--p)}

/* ── Inicio de quien atiende ─────────────────────────────────────── */
.ini-atajos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
            gap:11px;margin-bottom:16px}
.ini-t{display:flex;flex-direction:column;gap:2px;padding:16px 18px;background:var(--s1);
       border:1px solid var(--b1);border-radius:var(--r);text-decoration:none;color:inherit;
       border-left:3px solid var(--b3);transition:border-color .13s,box-shadow .13s,transform .13s}
.ini-t:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.ini-t-blue{border-left-color:var(--blue)}
.ini-t-red{border-left-color:var(--red)}
.ini-t-yellow{border-left-color:var(--yellow)}
.ini-t-cero{opacity:.55}
.ini-n{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
       font-variant-numeric:tabular-nums}
.ini-t-red .ini-n{color:var(--red)}
.ini-t-yellow .ini-n{color:var(--yellow)}
.ini-t-cero .ini-n{color:var(--t3)}
.ini-e{font-size:13px;font-weight:600}
.ini-d{font-size:11px;color:var(--t3)}

/* minmax(0,...) en las columnas Y min-width:0 en las tarjetas: sin lo
   segundo, el contenido interno impone su ancho y la rejilla se desborda. */
.ini-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
.ini-cols > .tarj{min-width:0;overflow:hidden}

.ini-barras{display:flex;align-items:flex-end;gap:9px;height:150px;padding-top:6px}
.ini-b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}
.ini-b-col{width:100%;max-width:46px;background:var(--p);border-radius:5px 5px 0 0;
           display:flex;flex-direction:column;justify-content:flex-start;min-height:3px;
           transition:filter .13s}
.ini-b:hover .ini-b-col{filter:brightness(1.12)}
.ini-b-fuera{width:100%;background:var(--yellow);border-radius:5px 5px 0 0}
.ini-b-e{font-size:10.5px;color:var(--t3)}
.ini-leyenda{display:flex;gap:15px;margin-top:12px;font-size:11px;color:var(--t3)}
.ini-leyenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.lg-ok{background:var(--p)} .lg-mal{background:var(--yellow)}

.ini-r{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--b1);
       text-decoration:none;color:inherit}
.ini-r:last-child{border-bottom:0}
.ini-r:hover{background:var(--s2)}
.ini-r-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ini-r-a{font-size:12.8px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-r-m{font-size:10.5px;color:var(--t3)}

@media(max-width:1000px){ .ini-cols{grid-template-columns:1fr} }

@media(max-width:640px){
  /* Seis barras con separación fija no caben en 390 px: se estrechan y el
     gráfico baja de altura, que en móvil es lo que sobra. */
  .ini-barras{gap:5px;height:112px}
  .ini-b{min-width:0}
  .ini-b-col{max-width:none}
  .ini-b-e{font-size:9.5px}
  .ini-atajos{grid-template-columns:1fr 1fr;gap:8px}
  .ini-t{padding:12px 13px}
  .ini-n{font-size:22px}
  .ini-r{padding:10px 13px}
}

/* ── Horario semanal: que quepa de verdad ────────────────────────────
   Un <input type="time"> tiene ancho intrínseco propio —el reloj nativo—
   y no encoge por sí solo: sin min-width:0 empuja la rejilla y se sale
   del modal. En móvil, cuatro en fila no caben de ninguna manera, así
   que los dos tramos se apilan.                                       */
#mCal .modal-caja{width:min(700px,calc(100% - 24px))}
.hor-cab,.hor-fila{grid-template-columns:76px repeat(4,minmax(0,1fr));gap:5px}
.hor-fila input[type=time]{min-width:0;width:100%;box-sizing:border-box;
                           padding:6px 2px;font-size:11.5px}
.hor-cab span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:9px}

@media(max-width:720px){
  .hor-cab{display:none}
  .hor-fila{grid-template-columns:1fr 1fr;gap:5px 6px;
            padding:9px 0;border-bottom:1px solid var(--b1)}
  .hor-dia{grid-column:1 / -1;font-weight:700;font-size:12px;margin-bottom:1px}
  .hor-fila input[type=time]{font-size:13px;padding:8px 4px}
}

/* ── Menú de la persona ──────────────────────────────────────────── */
.yo-menu{position:relative}
.yo{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 11px;border-radius:var(--pastilla);
    background:none;border:1px solid transparent;transition:background .13s,border-color .13s}
.yo:hover,.yo[aria-expanded="true"]{background:var(--s2);border-color:var(--b1)}
.yo-fl{font-size:9px;color:var(--t3);margin-left:-2px}
.yo-caja{position:absolute;top:calc(100% + 7px);right:0;z-index:300;min-width:266px;
         background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);
         box-shadow:0 14px 42px rgba(7,7,7,.16);padding:6px;overflow:hidden}
html[data-tema="oscuro"] .yo-caja{box-shadow:0 14px 42px rgba(0,0,0,.55)}
.yo-cab{display:flex;align-items:center;gap:11px;padding:11px 11px 13px;margin-bottom:5px;
        border-bottom:1px solid var(--b1)}
.av-g{width:38px;height:38px;font-size:13px;flex-shrink:0}
.yo-cn{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.yo-cc{font-size:11px;color:var(--t3);font-family:var(--mono);word-break:break-all}
.yo-cr{font-size:10.5px;color:var(--p);font-weight:600;margin-top:3px}
.yo-op{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--r2);
       font-size:13px;color:var(--t1);text-decoration:none;text-align:left;background:none;border:0}
.yo-op:hover{background:var(--s2)}
.yo-op svg{width:16px;height:16px;color:var(--t3);flex-shrink:0}
.yo-op:hover svg{color:var(--p)}
.yo-sep{height:1px;background:var(--b1);margin:5px 0}
.yo-salir{color:var(--red)}
.yo-salir:hover{background:var(--red-lt)}
.yo-salir svg{color:var(--red)}
.yo-op .luna{display:none}
html[data-tema="oscuro"] .yo-op .sol{display:none}
html[data-tema="oscuro"] .yo-op .luna{display:inline-flex}

@media(max-width:640px){
  .yo-txt{display:none}
  .yo-caja{right:-4px;min-width:min(280px,calc(100vw - 24px))}
}

/* ── Perfil ──────────────────────────────────────────────────────── */
.perf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start;
      max-width:940px}
.perf > .ficha{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:18px}
.perf-cab{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:12px;
          border-bottom:1px solid var(--b1)}
.perf-cab .avt{width:42px;height:42px;font-size:14px}
.perf-n{font-size:15px;font-weight:700;letter-spacing:-.01em}
.perf-c{font-size:12px;color:var(--t3)}
.perf-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.perf-cifras{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:820px){ .perf{grid-template-columns:1fr} }

/* ── Visor de adjuntos ───────────────────────────────────────────── */
.visor{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
       width:100%;height:100%}
.visor::backdrop{background:rgba(7,10,8,.82);backdrop-filter:blur(3px)}
.visor-caja{display:flex;flex-direction:column;width:min(1100px,calc(100vw - 40px));
            height:min(88vh,calc(100vh - 48px));margin:auto;background:var(--s1);
            border-radius:var(--r);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.visor-cab{display:flex;align-items:center;gap:11px;padding:11px 14px;
           border-bottom:1px solid var(--b1);flex-shrink:0}
.visor-n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-b{flex:1;min-height:0;display:grid;place-items:center;background:var(--s2);overflow:auto}
.visor-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.visor-pdf{width:100%;height:100%;border:0;background:#fff}
.adj-ver{background:none;border:0;font:inherit;color:var(--p);text-align:left;cursor:pointer;
         text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .13s}
.adj-ver:hover{text-decoration-color:currentColor}

@media(max-width:640px){
  .visor-caja{width:calc(100vw - 16px);height:calc(100vh - 24px)}
}

/* En el perfil las etiquetas son más largas —«Departamento», «Extensión»—
   y la columna de 74 px del ticket las parte. Aquí tienen su espacio. */
.perf .pf{grid-template-columns:112px minmax(0,1fr)}
.perf .pf-e{font-size:11.5px}
@media(max-width:520px){
  .perf .pf{grid-template-columns:1fr}
  .perf .pf-e{padding-bottom:0;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
  .perf .pf-v{margin-left:0;padding-left:0}
}

/* ═══════════════════════════════════════════════════════════════════
   Reportes
   Densidad alta pero legible: quien mira esto compara cifras, no lee.
   Cada número que se puede rastrear es un enlace, y cada bloque tiene
   su exportación al lado, no escondida en un menú.
   ═══════════════════════════════════════════════════════════════════ */
.rp-ctrl{display:flex;flex-direction:column;gap:10px;padding:14px 16px;margin-bottom:18px;
         background:var(--s1);border:1px solid var(--b1);border-radius:var(--r)}
.rp-grupo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rp-e{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);
      font-weight:700;min-width:96px}
.rp-ops{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.rp-op{padding:5px 12px;border-radius:var(--pastilla);font-size:12.5px;color:var(--t2);
       text-decoration:none;border:1px solid transparent;transition:background .12s,color .12s}
.rp-op:hover{background:var(--s2);color:var(--t1)}
.rp-op.on{background:var(--p);color:var(--sobre-p);font-weight:600}
.rp-ops-min .rp-op{padding:4px 10px;font-size:11.5px}
.rp-fechas{display:flex;align-items:center;gap:6px;margin-left:6px;padding-left:12px;
           border-left:1px solid var(--b1)}
.rp-fechas input[type=date]{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--pastilla);
                            background:var(--s1);font-size:12px;font-family:var(--mono)}
.rp-a{font-size:11.5px;color:var(--t3)}

.rp-sec{margin-bottom:22px}
.rp-cab{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:10px}
.rp-cab h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.rp-sub{font-size:11.5px;color:var(--t3)}
.rp-csv{font-size:11.5px;color:var(--p);text-decoration:none;padding:3px 10px;
        border:1px dashed var(--b2);border-radius:var(--pastilla)}
.rp-csv:hover{border-style:solid;border-color:var(--p);background:var(--pa)}

/* ── Indicadores ── */
.rp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr));gap:10px}
.rp-kpi{display:flex;flex-direction:column;gap:2px;padding:15px 17px;background:var(--s1);
        border:1px solid var(--b1);border-radius:var(--r);text-decoration:none;color:inherit;
        transition:border-color .13s,box-shadow .13s}
a.rp-kpi:hover{border-color:var(--p);box-shadow:var(--sh)}
.rp-kpi-ojo{border-left:3px solid var(--yellow)}
.rp-kv{font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.15;
       font-variant-numeric:tabular-nums}
.rp-ke{font-size:12px;font-weight:600;line-height:1.3}
.rp-kd{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.rp-kd.sube{color:var(--green)} .rp-kd.baja{color:var(--red)}
.rp-kn{font-size:10.5px;color:var(--t3);line-height:1.4;margin-top:2px}

/* ── Serie temporal ── */
.rp-serie{display:flex;align-items:flex-end;gap:4px;height:168px;padding-top:6px}
.rp-s{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
      height:100%;gap:6px;align-items:center}
.rp-s-cols{display:flex;align-items:flex-end;gap:2px;width:100%;height:100%;justify-content:center}
.rp-s-col{width:44%;min-height:2px;border-radius:4px 4px 0 0}
.rp-s-rec{background:var(--b3)}
.rp-s-res{background:var(--p);position:relative;display:flex;flex-direction:column;justify-content:flex-start}
.rp-s-fuera{width:100%;background:var(--yellow);border-radius:4px 4px 0 0}
.rp-s-e{font-size:9.5px;color:var(--t3);white-space:nowrap}
.rp-leyenda{display:flex;gap:15px;margin-top:13px;font-size:11px;color:var(--t3);flex-wrap:wrap}
.rp-leyenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.lg-rec{background:var(--b3)} .lg-res{background:var(--p)}

/* ── Tablas ── */
.rp-tabla{width:100%;border-collapse:collapse;font-size:12.5px}
.rp-tabla th{text-align:left;padding:9px 14px;font-size:9.5px;text-transform:uppercase;
             letter-spacing:.07em;color:var(--t3);font-weight:700;
             border-bottom:1px solid var(--b1);white-space:nowrap}
.rp-tabla td{padding:10px 14px;border-bottom:1px solid var(--b1);vertical-align:middle}
.rp-tabla tr:last-child td{border-bottom:0}
.rp-tabla tbody tr:hover{background:var(--s2)}
.rp-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-tabla th.num{text-align:right}
.rp-tabla .mal{color:var(--red);font-weight:600}
.rp-tabla a{color:var(--p)}
.rp-ag{display:flex;align-items:center;gap:8px}

.rp-pct{display:flex;align-items:center;gap:10px;min-width:172px}
.rp-pct-n{font-variant-numeric:tabular-nums;font-weight:600;min-width:52px;text-align:right}
.rp-barra{flex:1;height:7px;min-width:56px;border-radius:5px;background:var(--s3);overflow:hidden}
.rp-barra i{display:block;height:100%;border-radius:5px;background:var(--p)}
.rp-barra i.ok{background:var(--green)}
.rp-barra i.medio{background:var(--yellow)}
.rp-barra i.mal{background:var(--red)}

/* ── Listas con barra ── */
.rp-lista{display:flex;flex-direction:column;gap:8px}
.rp-l{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(70px,1.4fr) auto;
      align-items:center;gap:11px;font-size:12.5px}
.rp-l-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.rp-l-n{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;min-width:56px}
.rp-l-n.mal{color:var(--red)}

.rp-nota{padding:11px 14px;font-size:11px;color:var(--t3);line-height:1.55;
         border-top:1px solid var(--b1);background:var(--s2)}
.rp-nota strong{color:var(--t2)}

.rp-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

@media(max-width:900px){
  .rp-dos{grid-template-columns:1fr}
  .rp-e{min-width:0}
  .rp-fechas{margin-left:0;padding-left:0;border-left:0;width:100%}
  .tarj-b:has(.rp-tabla),.tarj-b > .rp-tabla{overflow-x:auto}
}

/* Impresión: la pantalla sirve para revisar, el papel para la junta */
@media print{
  .rail,.topbar,.rp-ctrl,.rp-csv,.rp-ops,.cab-pag .btn{display:none!important}
  .cuerpo{margin-left:0!important}
  .rp-sec{break-inside:avoid;margin-bottom:16px}
  .tarj{box-shadow:none;border:1px solid #ccc}
  .rp-kpis{grid-template-columns:repeat(4,1fr)}
  a{text-decoration:none;color:inherit}
}

@media(max-width:640px){
  /* Los <input type=date> traen ancho propio del control nativo y no
     encogen solos; en 390 px los dos más el botón no caben en una fila. */
  .rp-fechas{flex-wrap:wrap;gap:5px}
  .rp-fechas input[type=date]{flex:1;min-width:0}
  .rp-fechas .btn{width:100%;justify-content:center;margin-top:3px}
  .rp-a{flex-shrink:0}
  .rp-ctrl{padding:12px}
  .rp-kv{font-size:21px}
  .rp-serie{height:130px;gap:2px}
  .rp-s-e{font-size:8.5px}
  .rp-l{grid-template-columns:minmax(0,1fr) minmax(48px,1fr) auto;gap:8px;font-size:11.5px}
  .rp-cab h2{font-size:14px}
  .tarj-b:has(> .rp-tabla){overflow-x:auto}
}

/* ── Biblioteca de reportes ──────────────────────────────────────── */
.rp-ctx-nota{font-size:11px;color:var(--t3);padding-top:9px;border-top:1px solid var(--b1);line-height:1.5}
.rp-grupo-sec{margin-bottom:24px}
.rp-g-cab{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:10px}
.rp-g-cab h2{font-size:14px;font-weight:700;letter-spacing:-.01em}
.rp-g-n{font-size:11.5px;color:var(--t3)}
.rp-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(292px,100%),1fr));gap:11px}
.rp-t{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 40px 16px 18px;
      background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
      text-decoration:none;color:inherit;
      transition:border-color .13s,box-shadow .13s,transform .13s}
.rp-t:hover{border-color:var(--p);box-shadow:var(--sh);transform:translateY(-2px)}
.rp-t-e{font-size:14px;font-weight:700;letter-spacing:-.01em}
.rp-t-p{font-size:12.5px;color:var(--t2);line-height:1.5}
.rp-t-d{font-size:11px;color:var(--t3);line-height:1.5;margin-top:2px}
.rp-t-fl{position:absolute;right:16px;top:16px;font-size:19px;color:var(--t4)}
.rp-t:hover .rp-t-fl{color:var(--p)}

/* ── Un reporte ──────────────────────────────────────────────────── */
.rp-acc{display:flex;align-items:center;gap:9px}
.rp-ctx-barra{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
              padding:9px 14px;background:var(--s2);border:1px solid var(--b1);
              border-radius:var(--pastilla);font-size:12.5px}
.rp-ctx-d{font-weight:700}
.rp-ctx-s{color:var(--t4)}
.rp-ctx-p{color:var(--t2);font-variant-numeric:tabular-nums}
.rp-dims{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.rp-nota-suelta{border:1px solid var(--b1);border-radius:var(--r);margin-top:12px}
.rp-csat-cab{font-size:13px;color:var(--t2);margin-bottom:14px;padding-bottom:12px;
             border-bottom:1px solid var(--b1)}
.rp-csat-cab strong{font-size:16px;color:var(--t1)}

@media(max-width:640px){
  .rp-ctx-barra{border-radius:var(--r)}
  .rp-t{padding:14px 34px 14px 15px}
}
@media print{
  .migas,.rp-volver,.rp-ctx-barra .rp-ops,.rp-dims,.rp-acc{display:none!important}
  .rp-ctx-barra{border:0;background:none;padding:0 0 10px}
}

/* Volver a la biblioteca: la acción más repetida al consultar reportes */
.rp-volver{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
           padding:7px 15px 7px 12px;border-radius:var(--pastilla);
           background:var(--s1);border:1px solid var(--b1);
           font-size:12.5px;font-weight:600;color:var(--t2);text-decoration:none;
           transition:border-color .13s,color .13s,background .13s}
.rp-volver:hover{border-color:var(--p);color:var(--p);background:var(--pa)}
.rp-volver-g{padding-left:9px;margin-left:2px;border-left:1px solid var(--b1);
             font-weight:400;color:var(--t3);font-size:11.5px}
.rp-volver:hover .rp-volver-g{border-color:var(--p)}
@media print{ .rp-volver{display:none!important} }

/* ── Reporte maestro: bloques encadenados, cada uno con su título ─── */
.rp-m-sec{margin-bottom:24px}
.rp-m-cab{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;
          padding-bottom:7px;border-bottom:2px solid var(--b1)}
.rp-m-cab h2{font-size:14px;font-weight:700;letter-spacing:-.01em}
@media print{ .rp-m-sec{break-inside:avoid} }

/* ── Variables de plantilla ──────────────────────────────────────── */
.plv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:7px}
.plv-i{display:flex;align-items:baseline;gap:9px;font-size:11.5px;color:var(--t3);line-height:1.45}
.plv-i code{font-family:var(--mono);font-size:11px;color:var(--p);background:var(--pa);
            padding:2px 7px;border-radius:5px;white-space:nowrap}
.modal-ancha{width:min(760px,calc(100% - 32px))}

/* ── Plantillas de correo ────────────────────────────────────────── */
.pl-ico{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
        border-radius:50%;font-size:16px;line-height:1}

.modal-previa{width:min(1080px,calc(100% - 32px))}
.pl-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.pl-edit{min-width:0}
.pl-tres{display:grid;grid-template-columns:78px 78px minmax(0,1fr);gap:10px;margin-bottom:13px}
.pl-emoji{text-align:center;font-size:18px!important;padding:6px!important}
.pl-color{width:100%;height:38px;padding:3px;border:1px solid var(--b2);
          border-radius:var(--r2);background:var(--s1);cursor:pointer}

/* La previa, presentada como llegaría a la bandeja de entrada */
.pl-previa{min-width:0;position:sticky;top:0}
.pl-p-cab{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pl-bandeja{display:flex;flex-direction:column;gap:2px;padding:10px 13px;
            background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2) var(--r2) 0 0;
            border-bottom:0}
.pl-de{font-size:11px;color:var(--t3);font-weight:600}
.pl-asunto{font-size:12.5px;font-weight:700;color:var(--t1);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El correo mide 600 px fijos. En vez de recortarlo, se reduce a escala:
   así se ve completo y se juzga la composición real, que es para lo que
   sirve una previa. */
.pl-marco{border:1px solid var(--b1);border-top:0;border-radius:0 0 var(--r2) var(--r2);
          background:#F3F5F4;overflow:hidden;height:470px}
#plFrame{width:640px;height:670px;border:0;background:#F3F5F4;display:block;
         transform:scale(.72);transform-origin:0 0}

@media(max-width:900px){
  .pl-cols{grid-template-columns:1fr}
  .pl-previa{position:static}
  #plFrame{height:340px}
}

/* ── Secciones con sus integrantes ───────────────────────────────── */
.sec{border-bottom:1px solid var(--b1)}
.sec:last-child{border-bottom:0}
.sec-cab{cursor:pointer;list-style:none;border-bottom:0}
.sec-cab::-webkit-details-marker{display:none}
.sec-cab:hover{background:var(--s2)}
.sec-fl{display:inline-block;color:var(--t3);font-size:15px;transition:transform .15s;
        transform-origin:center;margin-right:2px}
.sec[open] .sec-fl{transform:rotate(90deg);color:var(--p)}
.sec-ojo{color:var(--yellow);font-weight:600}

.sec-cuerpo{padding:4px 18px 18px 40px;background:var(--s2);border-top:1px solid var(--b1)}
.sec-vacio{font-size:12px;color:var(--t3);line-height:1.55;padding:12px 0}
.sec-lista{display:flex;flex-direction:column;gap:1px;margin:10px 0 12px}
.sec-p{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s1);
       border:1px solid var(--b1);border-radius:var(--r2)}
.sec-p-off{opacity:.55}
.sec-p-t{flex:1;min-width:0}
.sec-p-n{font-size:12.8px;font-weight:600}
.sec-p-c{font-size:10.5px;color:var(--t3)}
.sec-p-av{display:flex}

/* El estado de los avisos se lee de un vistazo: encendido lleva color, */
/* apagado queda en gris con borde discontinuo.                        */
.sec-av{font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:var(--pastilla);
        border:1px solid var(--b2);background:none;color:var(--t3);
        border-style:dashed;transition:all .13s;white-space:nowrap}
.sec-av:hover{border-color:var(--t3);color:var(--t2)}
.sec-av.on{background:var(--pa);border-color:var(--p);border-style:solid;color:var(--p)}
.sec-av.on:hover{background:var(--p);color:var(--sobre-p)}

/* El buscador ocupa su línea y el botón queda debajo: en una fila, la caja
   de etiquetas crece al elegir y descoloca el botón. */
.sec-add{display:block}
.sec-add-e{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
           color:var(--t3);font-weight:700;margin-bottom:7px}
.sec-add .bp{margin-bottom:9px}
.sec-add .bp-caja{min-height:38px}
.sec-add .btn{width:100%;justify-content:center}
@media(max-width:640px){
  .sec-cuerpo{padding:4px 12px 14px 16px}
  .sec-add{flex-direction:column;align-items:stretch}
}

/* ── Secciones: la elegida gobierna el panel derecho ─────────────── */
.sec-fila{padding:0}
.sec-link{flex:1;min-width:0;display:block;padding:13px 16px;text-decoration:none;color:inherit}
.sec-fila:hover{background:var(--s2)}
.sec-on{background:var(--pa)}
.sec-on:hover{background:var(--pa)}
.sec-on .sec-link .adm-n{color:var(--p)}
.sec-on{box-shadow:inset 3px 0 0 var(--p)}
.sec-volver{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
            background:var(--s2);color:var(--t2);text-decoration:none;font-size:14px;flex-shrink:0}
.sec-volver:hover{background:var(--p);color:var(--sobre-p)}

/* Las secciones de cada agente, en el listado general */
.ag-secs{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ag-sec{font-size:10px;padding:2px 8px;border-radius:var(--pastilla);text-decoration:none;
        background:var(--pa);color:var(--p);font-weight:600;border:1px solid transparent}
.ag-sec:hover{border-color:var(--p)}
.ag-sec-mudo{background:var(--s3);color:var(--t3);border-style:dashed;border-color:var(--b2)}
.ag-sec-no{font-size:10px;color:var(--yellow);font-weight:600}