/* Automatizaciones · CIMELEC — el diseño es el de asistencia (11-REGISTRO DE HORARIOS PERSONAL - OK, frontend/css/
   app.css y el <style> de admin.html), copiado el 08-oct-2026 a pedido del usuario. Los valores de los tokens son
   los de allá: si allá cambian, se cambian aquí. El color vive SOLO en variables; un tema = un bloque de valores. */
:root{
  --bg:#EEF0F3; --card:#FFFFFF; --ink:#0F2340; --ink-soft:#5B6472; --line:#E4E7EE;
  --green:#5f8b1f; --green-press:#4a6a17; --green-ink:#3f5a1e; --green-soft:#eef5df;
  --blue:#2e78b7; --blue-soft:#E7F0F8; --gold:#C98A12; --gold-soft:#faf0d6; --gold-ink:#7a5600; --gold-tinta:#3a2c00;
  --link:#2e78b7; --danger:#B42318; --foco:#2E78B7; --ph:#6B7484; --navy:#0f2340; --red-soft:#FDE9E9;
  --sobre-color:#FFFFFF; --rej-cebra:#EAEEF5; --tab-on:#e4efcc; --secs-fondo:#e7eaf0; --secs-on:#FFFFFF;
  --modal-x:#eef1f6; --velo:rgba(10,34,71,.42); --campo:#FFFFFF; --fila-on:#E7F0F8;
  --st-borrador:#E5EAF3; --sti-borrador:#0F2340;
  --st-enviado:#F6E8D2;  --sti-enviado:#8A5A00;
  --st-aprobado:#DFEEE2; --sti-aprobado:#3f5a1e;
  --st-recibido:#DDECF8; --sti-recibido:#1C5D9B;
  --st-devuelto:#FAE4E2; --sti-devuelto:#B42318;
  --nav:#FFFFFF; --nav-hdr:#FFFFFF; --nav-linea:#E4E7EE; --nav-ink:#0F2340; --nav-ink-soft:#5B6472;
  --nav-hover:rgba(15,35,64,.055); --nav-on-bg:#e4efcc; --nav-on-ink:#3F5A1E; --nav-on-bar:#5F8B1F;
  --hdr-ink:#0F2340; --hdr-ink-soft:#5B6472; --hdr-btn:#F1F3F6; --hdr-btn-bd:#E4E7EE; --hdr-btn-hover:#E4E9F0;
  --nav-sombra:0 1px 3px rgba(15,35,64,.07);
  --shadow:0 1px 2px rgba(15,35,64,.05),0 4px 14px rgba(15,35,64,.07);
  --shadow-lg:0 8px 26px rgba(15,35,64,.13);
  /* botones: el verde de asistencia (#5f8b1f) con texto blanco mide 4.04 (AA pide 4.5): fondo un tono más oscuro.
     Medido el 08-oct-2026: claro 6.24 (#4a6a17) y 6.57 (#B42318); oscuro 5.09 (#4E7A1C) y 5.39 (#C2382C). */
  --btn:#4a6a17; --btn-press:#3f5a1e; --btn-peligro:#B42318;
  --radius:14px; --field-h:52px;
  --f-xs:11px; --f-sm:12px; --f-md:13px; --f-base:14px; --f-lg:16px; --f-xl:20px; --f-2xl:26px;
  --tap:44px; --tabbar-h:58px; --side:248px;
}
html[data-tema="oscuro"]{
  --bg:#0B1420; --card:#152A3D; --ink:#EAF1F8; --ink-soft:#9FB3C8; --line:#24435E;
  --green:#6D9E27; --green-press:#5B8420; --green-ink:#A9D46B; --green-soft:#1B3320;
  --blue:#4E9BDE; --blue-soft:#152F45; --gold:#D89A1E; --gold-soft:#33270D; --gold-ink:#FAC775; --gold-tinta:#2B1F00;
  --link:#7FBCEF; --danger:#E86A62; --foco:#7FBCEF; --ph:#7F95AD; --navy:#122334; --red-soft:#3A1A1A;
  --sobre-color:#FFFFFF; --rej-cebra:#10202F; --tab-on:#22432c; --secs-fondo:#0F2233; --secs-on:#24435E;
  --modal-x:#24435E; --velo:rgba(0,0,0,.55); --campo:#0F2233; --fila-on:#1B3A52;
  --st-borrador:#24435E; --sti-borrador:#EAF1F8;
  --st-enviado:#4B3A14;  --sti-enviado:#FAC775;
  --st-aprobado:#294328; --sti-aprobado:#A9D46B;
  --st-recibido:#224058; --sti-recibido:#8FC6F5;
  --st-devuelto:#593231; --sti-devuelto:#F2A9A3;
  --nav:#152A3D; --nav-hdr:#152A3D; --nav-linea:#24435E; --nav-ink:#EAF1F8; --nav-ink-soft:#9FB3C8;
  --nav-hover:rgba(255,255,255,.07); --nav-on-bg:#22432c; --nav-on-ink:#A9D46B; --nav-on-bar:#97C459;
  --hdr-ink:#EAF1F8; --hdr-ink-soft:#9FB3C8; --hdr-btn:#0F2233; --hdr-btn-bd:#24435E; --hdr-btn-hover:#1B3A52;
  --nav-sombra:0 1px 3px rgba(0,0,0,.35);
  --btn:#4E7A1C; --btn-press:#3F6516; --btn-peligro:#C2382C;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.30);
  --shadow-lg:0 8px 26px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--f-base);line-height:1.45;-webkit-font-smoothing:antialiased}
html.cambiando-tema *{transition:none!important}
a{color:var(--link)}
.ico{display:inline-block;vertical-align:-.18em;flex:none}
.muted{color:var(--ink-soft);font-size:13px}
.oculto{display:none!important}
.num{text-align:right;font-variant-numeric:tabular-nums}
.wrap{max-width:1400px;margin:0 auto;padding:12px 14px 40px}

/* ---------------------------------------------------------------- armazón: encabezado */
.hdr{position:sticky;top:0;z-index:10;background:var(--nav-hdr);color:var(--hdr-ink);display:flex;align-items:center;gap:8px;
  padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--nav-linea);box-shadow:var(--nav-sombra)}
.hdr .htitle{flex:1 1 auto;min-width:10ch;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.hdr h1{font-size:16px;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .sub{font-size:11px;color:var(--hdr-ink-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:999px;background:var(--hdr-btn);
  border:1px solid var(--hdr-btn-bd);color:var(--hdr-ink);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  white-space:nowrap;line-height:1;flex:none;transition:background .15s;font-family:inherit;position:relative}
.hbtn::after{content:"";position:absolute;inset:-3px}      /* 38 px + 2×3 = 44 px tocables */
.hbtn:hover{background:var(--hdr-btn-hover)}
.hbtn-danger:hover{background:var(--red-soft);border-color:var(--danger);color:var(--danger)}
.hbtn:focus-visible,.hamb:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.hamb{display:inline-flex;background:var(--hdr-btn);border:1px solid var(--hdr-btn-bd);color:var(--hdr-ink);width:40px;height:40px;
  border-radius:10px;cursor:pointer;align-items:center;justify-content:center;flex:none;position:relative}
.hamb::after{content:"";position:absolute;inset:-2px}

/* ---------------------------------------------------------------- armazón: menú lateral y barra inferior */
.appside{position:fixed;top:0;left:0;bottom:0;width:var(--side);background:var(--nav);color:var(--nav-ink);z-index:40;display:flex;
  flex-direction:column;overflow-y:auto;transition:transform .22s ease;border-right:1px solid var(--nav-linea);box-shadow:var(--nav-sombra)}
.as-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--nav-linea)}
.as-brand .as-logo{display:flex;align-items:center;color:var(--nav-on-bar)}
.as-brand b{font-size:15px;display:block;line-height:1.1;color:var(--nav-ink)}
.as-brand small{display:block;font-size:11px;margin-top:1px;color:var(--nav-ink-soft)}
.as-nav{padding:8px 10px 24px;flex:1}
.as-grp{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nav-ink-soft);margin:15px 8px 6px}
.as-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:var(--nav-ink);text-decoration:none;
  font-size:14px;font-weight:600;margin-bottom:2px;cursor:pointer;min-height:var(--tap);border:none;background:none;width:100%;
  font-family:inherit;text-align:left}
.as-link .as-ic{display:flex;align-items:center;width:20px}
.as-link:hover{background:var(--nav-hover);color:var(--nav-ink)}
.as-link.on{background:var(--nav-on-bg);color:var(--nav-on-ink);box-shadow:inset 3px 0 0 var(--nav-on-bar)}
.as-link.peligro{color:var(--danger)}
.as-link:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.as-foot{padding:10px 16px;border-top:1px solid var(--nav-linea);font-size:11px;color:var(--nav-ink-soft)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px rgba(15,35,64,.10)}
.tabbar a,.tabbar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabbar-h);padding:6px 2px 5px;color:var(--ink-soft);text-decoration:none;font-size:var(--f-xs);font-weight:600;
  position:relative;border:none;background:none;font-family:inherit;cursor:pointer}
.tabbar .on{color:var(--green-ink);background:var(--tab-on);box-shadow:inset 0 3px 0 var(--green)}
@media(min-width:900px){
  body.app-shell{padding-left:var(--side);transition:padding-left .2s ease}
  body.app-shell.nav-colapsado{padding-left:0}
  body.nav-colapsado .appside{transform:translateX(-100%)}
  .hdr .hbtn-danger{display:none}
  body.nav-colapsado .hdr .hbtn-danger{display:inline-flex}
}
@media(max-width:899.98px){
  .appside,.hamb{display:none}
  .tabbar{display:flex}
  body.app-shell{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .hdr .hbtn-danger{display:none}
  .toast{bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom))}
}
@media(max-width:599.98px){ .hdr .hbtn .ht{display:none} }

/* ---------------------------------------------------------------- pestañas de sección (admin de asistencia) */
.secs{display:flex;gap:4px;background:var(--secs-fondo);border-radius:12px;padding:3px;margin:0 0 10px;overflow-x:auto;scrollbar-width:none}
.secs::-webkit-scrollbar{display:none}
.secs button{flex:1 0 auto;border:none;background:none;border-radius:9px;min-height:var(--tap);padding:0 10px;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.secs button[aria-selected="true"]{background:var(--secs-on);color:var(--ink);box-shadow:var(--shadow)}
.secs button:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.secs .n{font-size:11px;font-weight:800;background:var(--gold);color:var(--gold-tinta);border-radius:999px;padding:1px 6px}
@media(max-width:899.98px){ .secs button .ico{display:none} }
@media(min-width:900px){
  .secs{width:max-content;max-width:100%;gap:2px;border-radius:10px;margin:0 0 10px}
  .secs button{flex:0 0 auto;min-height:32px;padding:0 14px;font-size:13px;border-radius:8px}
}

/* ---------------------------------------------------------------- cajas, tarjetas, bloques */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:15px;color:var(--green-ink)}
.caja{border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden;min-width:0;margin:0 0 10px}
.caja > .tit{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-height:38px;padding:4px 12px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:700}
.caja > .tit .m{font-weight:500;color:var(--ink-soft);font-size:12px}
.caja > .tit .ac{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.caja > .cuerpo{padding:12px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.tile .et{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.tile .v{font-size:var(--f-2xl);font-weight:800;line-height:1.15;margin:4px 0 2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .v.chico{font-size:var(--f-xl)}
.tile .d{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:899.98px){ .tiles{grid-template-columns:minmax(0,1fr)} }
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 12px;font-size:13px;align-items:baseline}
.kv > span{color:var(--ink-soft);font-size:12px}
.kv > div{min-width:0;overflow-wrap:anywhere}
@media(max-width:599.98px){ .kv{grid-template-columns:minmax(0,1fr)} }
.acbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}

/* ---------------------------------------------------------------- formularios */
label{display:block;font-size:12.5px;font-weight:600;margin:10px 0 4px;color:var(--ink)}
input,select,textarea{width:100%;min-height:var(--tap);background:var(--campo);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-size:16px;color:var(--ink);outline:none;font-family:inherit}
textarea{min-height:76px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(46,120,183,.18)}
input::placeholder,textarea::placeholder{color:var(--ph)}
@media(min-width:900px){ input,select,textarea{min-height:36px;font-size:13.5px;padding:6px 10px;border-radius:8px} }
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
@media(max-width:599.98px){ .grid2{grid-template-columns:minmax(0,1fr)} }
.ayuda{font-size:12px;color:var(--ink-soft);margin:3px 0 0}
.opcl{display:flex;flex-direction:column;gap:6px;margin:6px 0 0}
.opcl.fila{flex-direction:row;flex-wrap:wrap}
.opcl.fila .opc{flex:1 1 220px}
.opc{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:11px;padding:9px 11px;font:inherit;cursor:pointer;width:100%;min-height:var(--tap);margin:0;font-weight:400}
.opc input{margin-top:2px;width:18px;height:18px;min-height:0;flex:none;accent-color:var(--green);padding:0}
.opc b{display:block;font-size:13.5px}
.opc small{display:block;font-size:12px;color:var(--ink-soft);line-height:1.4}
.opc.on{border-color:var(--green);background:var(--green-soft)}
.chk{display:flex;gap:10px;align-items:center;min-height:var(--tap);margin:0;font-weight:400;font-size:13.5px;cursor:pointer}
.chk input{width:18px;height:18px;min-height:0;flex:none;accent-color:var(--green);padding:0;margin:0}
.chk .n{margin-left:auto;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.campos{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}

/* ---------------------------------------------------------------- botones */
.btn{height:var(--tap);border:none;border-radius:10px;background:var(--btn);color:var(--sobre-color);font-size:14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;padding:0 16px;transition:background .15s,transform .04s;
  font-family:inherit;text-decoration:none;white-space:nowrap}
.btn:active{background:var(--btn-press);transform:translateY(1px)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--btn-peligro);color:var(--sobre-color)}
.btn.ghost.danger{background:var(--card);color:var(--danger);border:1px solid var(--danger)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
@media(min-width:900px){ .btn{height:36px;font-size:13.5px;border-radius:8px} }
.lnk{border:none;background:none;color:var(--link);font:inherit;font-weight:700;cursor:pointer;padding:0;position:relative;width:auto;min-height:0;text-decoration:none}
.lnk::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:var(--tap);transform:translateY(-50%)}
.pchip2{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:6px 12px;font-size:var(--f-sm);font-weight:600;white-space:nowrap;cursor:pointer;min-height:36px;font-family:inherit;position:relative}
.pchip2::after{content:"";position:absolute;inset:-4px 0}
.pchip2.on{background:var(--navy);color:var(--sobre-color);border-color:var(--navy)}
html[data-tema="oscuro"] .pchip2.on{background:var(--secs-on);border-color:var(--ink-soft)}
.pchip2 b{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- barra de búsqueda y filtros */
.barra{position:sticky;top:59px;z-index:8;background:var(--bg);padding:6px 0;margin:0 0 6px}
.barfila{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.barbusca{flex:1 1 220px;min-width:140px;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;height:40px;padding:0 12px;color:var(--ink-soft)}
.barbusca input{flex:1;min-width:0;border:none;background:none;height:38px;min-height:0;padding:0;font-size:14px;color:var(--ink)}
.barbusca input:focus{outline:none;box-shadow:none;border:none}
.barbusca:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(46,120,183,.18)}
.barfila select{height:40px;min-height:0;border-radius:999px;font-size:13px;padding:0 12px;width:auto;max-width:260px;flex:0 1 auto}
/* en el teléfono buscador y selector llegan al token táctil (medido: 38 y 40 px antes de esto) */
@media(max-width:899.98px){
  .barbusca{height:var(--tap)} .barbusca input{height:calc(var(--tap) - 2px)} .barfila select{height:var(--tap)}
}
.barmini{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin-top:6px;font-size:var(--f-sm);color:var(--ink-soft)}
.barmini b{color:var(--ink);font-size:var(--f-md)}

/* ---------------------------------------------------------------- tablas */
.tabla-wrap{overflow-x:auto}
.tl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12.5px}
.tl th{position:sticky;top:0;z-index:2;background:var(--rej-cebra);color:var(--ink-soft);font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;text-align:left;padding:0 8px;height:30px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl th.num{text-align:right}
.tl td{height:34px;padding:0 8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.tl tr.fila{cursor:pointer}
.tl tr.fila:hover td{background:var(--bg)}
.tl tr.fila:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.tl .sub{color:var(--ink-soft);font-size:11.5px}
/* sin menú lateral (teléfono, tableta) la tabla puede seguir en modo tabla: las filas llegan al token táctil
   (medido a 899 px: filas de 34 px en Empresas) */
@media(max-width:899.98px){ .tl td{height:var(--tap)} .tl th{height:32px} }
.tl.envuelve td{white-space:normal;overflow-wrap:anywhere;height:auto;padding:6px 8px}
.tl .vacio td{text-align:center;color:var(--ink-soft);height:60px;white-space:normal}
/* Cuando la tabla no cabe, cada fila pasa a ser una tarjeta: nada se corta. Se mide el ANCHO DISPONIBLE (container
   query), no la ventana: con el menú lateral abierto a 900 px quedan 652 px y la tabla del historial se desbordaba
   188 px (medido el 08-oct-2026). Corte de 860 px para las tablas de página; 700 px para la del detalle (modal). */
.tabla-wrap{container-type:inline-size}
@container (max-width:859.98px){
  .tl.tarj:not(.envuelve) thead{display:none}
  .tl.tarj:not(.envuelve),.tl.tarj:not(.envuelve) tbody,.tl.tarj:not(.envuelve) tr,.tl.tarj:not(.envuelve) td{display:block;width:100%}
  .tl.tarj:not(.envuelve) tr{border-bottom:1px solid var(--line);padding:8px 10px;min-height:var(--tap)}
  .tl.tarj:not(.envuelve) td{height:auto;min-height:0;border:none;padding:1px 0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-align:left}
  .tl.tarj:not(.envuelve) td[data-l]::before{content:attr(data-l) ": ";color:var(--ink-soft);font-size:11.5px}
}
@container (max-width:699.98px){
  .tl.tarj.envuelve thead{display:none}
  .tl.tarj.envuelve,.tl.tarj.envuelve tbody,.tl.tarj.envuelve tr,.tl.tarj.envuelve td{display:block;width:100%}
  .tl.tarj.envuelve tr{border-bottom:1px solid var(--line);padding:8px 10px}
  .tl.tarj.envuelve td{height:auto;border:none;padding:1px 0;text-align:left}
  .tl.tarj.envuelve td[data-l]::before{content:attr(data-l) ": ";color:var(--ink-soft);font-size:11.5px}
}

/* ---------------------------------------------------------------- Destinatarios: correos en la misma fila */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tl.dest td{height:auto;padding:6px 8px;white-space:normal;overflow:visible}
.tl.dest td:first-child b{overflow-wrap:anywhere}
.tl.dest input[type=text]{width:100%}
.tl.dest .chk{min-height:var(--tap);margin:0}
.dacc{display:flex;gap:6px;flex-wrap:wrap}
.btn.chico{height:var(--tap);font-size:12.5px;padding:0 12px}
.derr{color:var(--danger);font-size:12px;margin:3px 0 0;overflow-wrap:anywhere}
@media(min-width:900px){ .tl.dest input[type=text]{min-height:34px;font-size:13px;padding:5px 9px} .btn.chico{height:34px} }
/* La fila no cabe en la tabla por debajo de 1300 px de ANCHO DISPONIBLE (con el menú abierto, ventanas de menos de
   ~1576 px): cada sucursal pasa a ser una tarjeta con sus campos rotulados, a dos columnas y a una por debajo de 600.
   Medido el 08-oct-2026: con el corte en 1100, a 1440 px el campo «Para» quedaba de 165 px, corto para un correo. */
@container (max-width:1299.98px){
  .tl.dest thead{display:none}
  .tl.dest,.tl.dest tbody{display:block;width:100%}
  .tl.dest tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px;padding:12px;border-bottom:1px solid var(--line)}
  .tl.dest td{display:block;border:none;padding:0}
  .tl.dest td[data-l]::before{content:attr(data-l);display:block;color:var(--ink-soft);font-size:10.5px;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;margin:0 0 3px}
  .tl.dest td.d-full{grid-column:1 / -1}
}
@container (max-width:599.98px){ .tl.dest tr{grid-template-columns:minmax(0,1fr)} }

/* la barra de guardar: pegada abajo mientras haya cambios sin guardar, en cualquier sección */
.guardabar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:8px 12px;margin:12px 0 0;
  box-shadow:var(--shadow-lg);font-size:13.5px}
.guardabar[hidden]{display:none}
.guardabar > span{margin-right:auto}
@media(max-width:899.98px){ .guardabar{bottom:calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom))} }

/* ---------------------------------------------------------------- pastillas */
.pill{display:inline-block;font-size:10.5px;font-weight:700;border-radius:10px;padding:2px 8px;white-space:nowrap}
.pill.ok{background:var(--st-aprobado);color:var(--sti-aprobado)}
.pill.neutro{background:var(--st-borrador);color:var(--sti-borrador)}
.pill.pend{background:var(--st-enviado);color:var(--sti-enviado)}
.pill.info{background:var(--st-recibido);color:var(--sti-recibido)}
.pill.mal{background:var(--st-devuelto);color:var(--sti-devuelto)}
.pill.prueba{background:var(--gold-soft);color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-ink)}

/* ---------------------------------------------------------------- avisos */
.ifreno{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-radius:11px;padding:8px 12px;margin:0 0 10px;background:var(--st-devuelto);
  color:var(--sti-devuelto);font-size:13px;line-height:1.4}
.ifreno .btn{margin-left:auto;flex:none}
.avisoj{border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.45;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin:0 0 10px}
.avisoj.mal{background:var(--gold-soft);color:var(--gold-ink)}
.avisoj.bien{background:var(--green-soft);color:var(--green-ink)}
.avisoj.azul{background:var(--st-recibido);color:var(--sti-recibido)}
.avisoj .btn{margin-left:auto}
.errbox{text-align:center;color:var(--danger);padding:22px 16px}
.cargando{padding:28px 16px;text-align:center;color:var(--ink-soft)}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;
  font-size:14px;font-weight:600;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .2s;max-width:90%;pointer-events:none}
.toast.show{opacity:1}
.toast.ok{background:var(--btn);color:var(--sobre-color)}
.toast.err{background:var(--btn-peligro);color:var(--sobre-color)}
.toast.warn{background:var(--gold);color:var(--gold-tinta)}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:var(--velo);display:none;align-items:flex-end;z-index:90}
.modal.show{display:flex}
.modal .box{position:relative;background:var(--card);color:var(--ink);width:100%;max-width:560px;margin:0 auto;border-radius:20px 20px 0 0;
  padding:18px 16px 16px;max-height:90vh;overflow:auto;box-shadow:0 -10px 40px rgba(10,34,71,.22)}
.modal .box.ancha{max-width:860px}
.modal .box h3{margin:0 0 10px;padding-right:44px;font-size:17px;color:var(--green-ink)}
.modal .box .sub2{margin:-6px 0 10px;font-size:12.5px;color:var(--ink-soft)}
.modal-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:none;border-radius:50%;background:var(--modal-x);color:var(--ink-soft);
  font-size:15px;cursor:pointer;line-height:1;z-index:2;display:flex;align-items:center;justify-content:center}
.modal-x:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.hpie{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.hpie .izq{margin-right:auto}
.herr{color:var(--danger);margin:8px 0 0;font-size:13px;min-height:0}
@media(min-width:600px){ .modal{align-items:center} .modal .box{border-radius:18px} }

/* ---------------------------------------------------------------- entrar */
.entrar{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.entrar .card{max-width:400px;width:100%;padding:26px 22px;text-align:center}
.entrar .logo{color:var(--nav-on-bar);display:flex;justify-content:center;margin:0 0 8px}
.entrar h1{font-size:var(--f-xl);margin:0 0 4px}
.entrar p{margin:0 0 18px}
.entrar .btn{width:100%}
.entrar .err{background:var(--st-devuelto);color:var(--sti-devuelto);border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 14px;text-align:left}

/* ---------------------------------------------------------------- vista del correo */
.correo-vista{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--campo);font-size:13.5px}
.correo-vista .as{font-weight:700;margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.correo-vista p{margin:0 0 10px}