/* ══ v243 (Lucas, 02/11 · T1 «Base y marco») — LA IMAGEN NUEVA DE LA OFICINA ══════════════════════════════════════════════════════════════════════
   Boceto aprobado: boceto-v243/PLAN-T1.md (header A · Salvia · avisos oscuros con raya · el marco de las ventanas con «Se cierra con ✕ o con Esc»).
   Decisiones de Lucas del 02/11: las filas de la Bandeja COMO HOY (las filas suaves NO entran) · el LOGIN COMO HOY (fondo verde, logo grande, tarjeta) ·
   sube para todos, con el interruptor «Imagen nueva: sí / no» (⚙ Configuración → Sistema, solo el administrador) para volver atrás sin deploy.
   LA REGLA DE ESTE ARCHIVO (la vigila scripts/chequear-contencion-v131.mjs): TODA regla cuelga de `html.t1`. Con el interruptor apagado el front no pone
   la clase y este archivo no pinta NADA: la oficina queda byte a byte como antes (lo mide tests/test-v243-base.mjs). Se carga ANTES de estilos.css, así que
   sus reglas ganan por especificidad (html.t1 …) y nunca por orden. Ningún selector de hoy se renombra; ningún botón cambia de lugar.
   El login no lo toca: la pantalla de ingreso saca la clase (vistaLogin / vistaCambioObligado) y ninguna regla de acá nombra .login-*. ══ */

/* ═══ 1 · BASE COMÚN — los tonos del sistema v2 y los PUENTES (las variables de hoy apuntan a las nuevas: ningún selector cambia, solo valores) ═══ */
html.t1{
  --t1:#191b17; --t2:#5a5e57; --t3:#6c7069;                          /* tinta · secundaria · terciaria (AA medido: 16,0 · 6,1 · 4,7 sobre el fondo) */
  --fondo-p:#f6f6f4; --ln:#e7e6e1; --ln2:#efeee9; --p2:#fafaf8;
  --mk:#3e6b39; --mk-h:#34592f; --mk-t:#2f5a2b; --mk-s:#eaf3e7; --mk-b:#cfe0ca;
  --at:#8a5300; --at-bg:#fdf3e3; --at-b:#efd8ad;
  --ur:#b42318; --ur-bg:#fdeceb; --ur-b:#f3c3be;
  --bi:#1f7a45; --bi-bg:#e8f3ec; --bi-b:#cfe5d7;
  /* un solo foco, afuera Y adentro del control: se ve aunque el botón viva en una caja que recorta (segmentados, pestañas) */
  --foco:0 0 0 2px #fff,0 0 0 4px #3e6b39,inset 0 0 0 2px #3e6b39,inset 0 0 0 3.5px #fff;
  /* los 17 PUENTES */
  --verde:var(--mk); --verde2:var(--mk-h); --verde-suave:var(--mk-s);
  --fondo:var(--fondo-p); --linea:var(--ln); --texto:var(--t1); --suave:var(--t2);
  --rojo:#b42318; --rojo-bg:var(--ur-bg); --ok:var(--bi);
  --aviso-texto:var(--at); --aviso-fondo:var(--at-bg); --aviso-borde:var(--at-b);
  --error-texto:var(--ur); --error-fondo:var(--ur-bg); --error-borde:var(--ur-b);
  --neutro-texto:var(--t2); --fs-min:11.5px;
}
/* el foco: uno solo para toda la oficina (hoy hay 46 reglas de foco distintas) */
html.t1 :focus{outline:none}
html.t1 :focus-visible,html.t1 input:focus,html.t1 select:focus,html.t1 textarea:focus{outline:none;box-shadow:var(--foco)!important}
/* apagado legible (sin opacidad, que baja el contraste sin que se note): gris sólido */
html.t1 button:disabled,html.t1 button[aria-disabled=true]{opacity:1;background:#f1f1ee;border-color:#e3e2dc;color:var(--t3);cursor:not-allowed}
html.t1 svg.t1i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* letra mínima 11,5 — lo escrito a mano en el HTML (style="font-size:9…10.5px", 159 lugares en el JS) */
html.t1 [style*="font-size:9px"],html.t1 [style*="font-size:9.5px"],html.t1 [style*="font-size:10px"],html.t1 [style*="font-size:10.5px"],html.t1 [style*="font-size:11px"],
html.t1 [style*="font-size: 9px"],html.t1 [style*="font-size: 10px"],html.t1 [style*="font-size: 10.5px"],html.t1 [style*="font-size: 11px"]{font-size:11.5px!important}

/* contraste que hoy no llega y vive en la base (medido en el Calendario real): los días de otro mes sin opacidad (1,7 → 4,7 con borde punteado),
   los chips de color del calendario con un velo que oscurece CUALQUIER color de dato hasta AA con letra blanca, el ámbar escrito a mano */
html.t1 .cal-dia.otro-mes{opacity:1;background:var(--p2);border-style:dashed}
html.t1 .cal-dia.otro-mes .num{color:var(--t3)}
/* v243 (Lucas, 02/11 · calendario): el Calendario pinta sus chips en tinte con letra oscura (estilos.css, bloque «v243 · calendario»): el velo queda
   solo para la semana de Manito (.cal-semana-mini), que sigue con su color lleno */
html.t1 .cal-semana-mini .chip{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28))!important;opacity:1!important}
html.t1 .chip .h{opacity:1}
html.t1 [style*="color:#a06508"]{color:var(--at)!important}
html.t1 .est.Planificado{color:var(--at)}

/* ═══ 2 · HEADER — claro con tono verde (A · Salvia, el elegido): mismos botones, mismo lugar ═══ */
/* ✎ v243 (fusión, 02/11 · test-v218-2 §B.3): el header mide LO MISMO que hoy (54 px a 1366): la línea de abajo es una sombra interior (no suma alto, un borde sí)
   y el botón del usuario con el avatar no pasa de 34 px (el ☰ de hoy) — la primera pieza del tablero no se corre ni un píxel */
html.t1 header.top{--h-btn-b:#cddbc8;background:#ebf2e8;color:var(--t1);border-bottom:0;box-shadow:inset 0 -1px 0 #cfdcc9}
html.t1 header.top .marca{display:flex;align-items:center;color:var(--t1);font-weight:650}
html.t1 header.top .marca::before{content:'S';display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:8px;background:var(--mk);color:#fff;font-size:15px;font-weight:700}
html.t1 header.top .marca span{opacity:1;color:var(--t2);font-weight:400;margin-left:4px}
html.t1 header.top .marca .ver-tag{background:#fff;color:var(--mk-t);border:1px solid var(--h-btn-b);font-weight:600;font-size:11.5px;margin-left:8px;padding:1px 7px}
html.t1 header.top .nav-toggle{background:transparent;color:var(--mk-t);opacity:1;display:inline-grid;place-items:center}
html.t1 header.top .nav-toggle:hover{background:rgba(62,107,57,.10)}
html.t1 header.top .chip-h{display:inline-flex;align-items:center;gap:6px;border-radius:9px;font-size:13px;font-weight:600;border:1px solid var(--h-btn-b);background:#fff;color:var(--t1)}
html.t1 header.top .chip-h svg.t1i{width:16px;height:16px}
html.t1 header.top .chip-h.pend{background:var(--at-bg);border-color:var(--at-b);color:var(--at)}
html.t1 header.top .chip-h.pend.ok{background:var(--bi-bg);border-color:var(--bi-b);color:var(--bi)}
html.t1 header.top .chip-h.caja-ok{background:var(--bi-bg);border-color:var(--bi-b);color:var(--bi)}
html.t1 header.top .chip-h.caja-vieja{background:var(--ur-bg);border-color:var(--ur-b);color:var(--ur)}
html.t1 header.top .chip-h.caja-cerrada{background:#c0392b;border-color:#c0392b;color:#fff;font-weight:700}   /* rojo, como hoy (R9.3) */
html.t1 header.top button.user-menu-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--h-btn-b);color:var(--t1);border-radius:9px;padding:3px 10px 3px 3px}
html.t1 header.top button.user-menu-btn:hover{border-color:var(--mk)}
html.t1 header.top .t1-av{width:26px;height:26px;border-radius:50%;background:var(--mk-s);color:var(--mk-t);display:inline-grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}
html.t1 nav.lateral a.activo{border-left-color:var(--mk);background:var(--mk-s);color:var(--mk-t);font-weight:600}
html.t1 nav.lateral .grupo{font-size:11.5px}

/* ═══ 3 · AVISOS — la franja del sistema (avisosSistemaHtml) y los carteles de abajo (toast: el componente de las 1.487 llamadas) ═══ */
html.t1 .toast-it{--tr:#9fd6a9;background:#2c312a;color:#fff;border-radius:12px;padding:10px 10px 10px 16px;box-shadow:inset 4px 0 0 var(--tr),0 10px 28px rgba(25,27,23,.22),0 1px 3px rgba(25,27,23,.12);align-items:center;gap:10px}
html.t1 .toast-it.toast-aviso{background:#2c312a;--tr:#f3c46b}
html.t1 .toast-it.toast-fijo{background:#2c312a;--tr:#ff8f80}
html.t1 .toast-it button{border-radius:8px;font-weight:600}
html.t1 .toast-it button.toast-x{border:0;color:#d9dcd5}
html.t1 .toast-it button.toast-x:hover{background:rgba(255,255,255,.10);color:#fff}
html.t1 .toast-it button.toast-ver{background:#fff;color:#191b17;border:0}
html.t1 .aviso-sis.t1-av-sis{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 18px;font-size:13.5px;color:var(--t1);border-left:4px solid}
html.t1 .aviso-sis.t1-at{background:var(--at-bg);border-bottom:1px solid var(--at-b);border-left-color:#c98a1b}
html.t1 .aviso-sis.t1-ur{background:var(--ur-bg);border-bottom:1px solid var(--ur-b);border-left-color:var(--ur)}
html.t1 .aviso-sis .t1-ai{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fff;flex:none}
html.t1 .aviso-sis.t1-at .t1-ai{color:var(--at);border:1px solid var(--at-b)}
html.t1 .aviso-sis.t1-ur .t1-ai{color:var(--ur);border:1px solid var(--ur-b)}
html.t1 .aviso-sis .t1-at-tx{flex:1;min-width:220px}
html.t1 .aviso-sis button.chico{border-radius:9px;background:#fff;border:1px solid var(--ln);font-weight:600;color:var(--t1)}
html.t1 .aviso-sis .t1-nota{color:var(--t2);font-size:12.5px}

/* ═══ 4 · VENTANAS (el marco de abrirModal: .modal.t1m) — la ficha de la salida y Reparto conservan el suyo aprobado ═══
   LA REGLA de v243 (no se cierran tocando afuera, ESC cierra la de arriba, el fondo no scrollea) vive en app.js y no se toca: acá solo el marco
   y el aviso «Se cierra con ✕ o con Esc» que aparece al tocar afuera (app.js · t1AvisoAfuera, colgado de MODAL_CAPAS). */
html.t1 .modal-bg{background:rgba(25,27,23,.52)}
html.t1 .modal.t1m:not(.fs-modal):not(.rp){border-radius:16px;box-shadow:0 24px 64px rgba(25,27,23,.28)}
html.t1 .modal.t1m:not(.fs-modal):not(.rp) > .modal-cab{padding-bottom:12px;border-bottom:1px solid var(--ln);gap:12px}
html.t1 .modal.t1m:not(.fs-modal):not(.rp) > .modal-cab h2{font-size:18px;font-weight:650;color:var(--t1);letter-spacing:-.1px;min-width:0}
html.t1 .modal.t1m:not(.fs-modal):not(.rp) > .modal-cab > button.chico{width:36px;height:36px;min-width:36px;padding:0;display:inline-grid;place-items:center;border-radius:9px;border:1px solid var(--ln);background:#fff;color:var(--t2);font-size:15px}
html.t1 .modal.t1m:not(.fs-modal):not(.rp) > .modal-cab > button.chico:hover{border-color:var(--t3);color:var(--t1)}
html.t1 .modal.t1m .modal-pie{border-top:1px solid var(--ln);padding-top:12px}
html.t1 .modal.t1m .modal-pie button{border-radius:9px;font-weight:600}
html.t1 .modal.t1m .modal-cuerpo label{color:var(--t2)}
/* el aviso de afuera: una pastilla oscura arriba, 2,4 s, sin tomar el toque */
html.t1 .t1-afuera{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:260;background:#2c312a;color:#fff;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(25,27,23,.28);pointer-events:none;white-space:nowrap;animation:t1Afuera .18s ease-out}
@keyframes t1Afuera{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){html.t1 .t1-afuera{animation:none}}

/* ═══ celular (solo lo de este archivo: el resto del teléfono sigue igual) ═══ */
@media (max-width:700px){
  html.t1 header.top{flex-wrap:nowrap;gap:6px}   /* un solo renglón: la marca queda en su «S» y el usuario en su avatar (hoy se parte en dos) */
  html.t1 header.top .chip-h{padding-left:9px;padding-right:9px;margin-right:0}
  html.t1 header.top .marca{font-size:0}
  html.t1 header.top .marca::before{margin-right:0}
  html.t1 header.top button.user-menu-btn{font-size:0;padding:0 6px;gap:2px}
  html.t1 header.top .user-menu-btn .t1-av{font-size:11.5px}
  html.t1 .modal.t1m:not(.fs-modal):not(.rp){border-radius:16px 16px 0 0}
  html.t1 .modal.t1m:not(.fs-modal):not(.rp) > .modal-cab > button.chico{width:44px;height:44px;min-width:44px}
}

/* ═══ 5 · LETRA MÍNIMA 11,5 Y CONTRASTE EN LAS PANTALLAS PRINCIPALES (medido en la demo: lo que hoy queda debajo) ═══
   Calendario · Manito · Tareas · Bandeja. Solo el tamaño de la letra (y el color donde no llega a AA): nada cambia de lugar. Las filas de la Bandeja,
   COMO HOY (Lucas, 02/11): acá solo sube medio punto el título de las columnas y las pastillas chicas. */
html.t1 .cal-dia .chip,html.t1 .cal-col-body .chip,html.t1 .cal-semana-mini .chip,html.t1 .cal-dow,html.t1 .cal-tareas,html.t1 .cal-t-top span,
html.t1 .cal-t-quien,html.t1 .hoy-fecha span,html.t1 .cam-mini .mas,html.t1 .cal-t-n{font-size:11.5px}
html.t1 .cal-t-quien,html.t1 .cal-t-vacia{color:var(--t2)}   /* «Martín Sosa» 4,3 y el vacío de Tareas pendientes 3,1 → 6,1 */
html.t1 .chip .chip-veh,html.t1 .chip .chip-desc,html.t1 .mn-tags .pill{font-size:11.5px}
html.t1 .mn-h2 .mn-sep{color:var(--t3)}
html.t1 .chk-hist .f,html.t1 .chk-hist .n{font-size:11.5px}
html.t1 .ct-bj table.pl2 th,html.t1 .ct-bj table.pl2 th .thacc,html.t1 .ct-bj .qrcarga,html.t1 .ct-bj .cu small,html.t1 .ct-bj .cu em.avi,html.t1 .ct-bj .cu b > i,
html.t1 .ct-badge,html.t1 .ct-torta-n small{font-size:11.5px}
html.t1 .ct-conx > span,html.t1 .ct-kh > b{color:var(--bi)}
html.t1 .ct-bj .paso-op.va .i{background:#a45f00}   /* el paso en curso: blanco sobre ámbar 2,4 → 5,0 */
html.t1 .ct-bj .plw .qrcarga.qrm,html.t1 .ct-bj .plw .cuadro .cu small,html.t1 #ct_bj_vivo.cmp .cuadro .cu small,html.t1 .ct-bj .plw .cuadro .cu b i,html.t1 #ct_bj_vivo.cmp .estado-op .paso-op .i,html.t1 .ct-head .ct-kh b i,html.t1 .ct-kh span,html.t1 .ct-head .ct-kh span,html.t1 .ct-bj .vivo2 .cuadro .cu.tot b i{font-size:11.5px}
html.t1 .ct-avc-ch .de{color:var(--t3)}

/* ✎ v243 (fusión, 02/11 · test-v223-bandeja §M.c): en el teléfono, con la letra mínima 11,5 (decisión de Lucas, T1) los cuatro rótulos del cuadro de la Bandeja
   («PAX APROX · FALTAN CARGAR · QR A RESOLVER · CONFIRMADOS») ya no entran en cuatro columnas de ~66 px: el cuadro pasa a 2 × 2 y cada rótulo se lee entero, sin bajar
   la letra (hoy se achicaba a 9,5). Los mismos casilleros, en el mismo orden; nada se toca, solo se acomodan en dos renglones. */
@media (max-width:560px){
  html.t1 .ct-bj .plw .cuadro:not(.dgq){flex-wrap:wrap}
  html.t1 .ct-bj .plw .cuadro:not(.dgq) > .cu-totw,html.t1 .ct-bj .plw .cuadro:not(.dgq) > .cu{flex:1 1 50%;min-width:50%;max-width:50%}
  html.t1 .ct-bj .plw .cuadro:not(.dgq) > .cu.qr{border-left:0}
  html.t1 .ct-bj .plw .cuadro:not(.dgq) > .cu.qr,html.t1 .ct-bj .plw .cuadro:not(.dgq) > .cu.ok{border-top:1px solid #e3e9e5}
  html.t1 .ct-bj .plw .cuadro:not(.dgq) .cu small{white-space:nowrap}
}

/* ✎ v243 (fusión, 02/11 · test-v227-bandeja §D3.a): «👪 Revisar grupos» dentro de la Bandeja usa LOS MISMOS títulos de columna que la planilla (decisión v227 D3):
   con la letra mínima 11,5 los dos suben juntos (hoy la revisión quedaba en 11 y la de afuera en 10). El portal de la aerolínea no se toca: tiene su piso propio. */
html.t1 .ct-rev table.ct-rev-6a th,html.t1 .ct-bj .ct-rev.ct-rev-inline table.ct-rev-6a th{font-size:11.5px}

/* ✎ v243 (fusión, 02/11 · test-v226-segunda §U.F9a): con la letra mínima 11,5 la palabra más larga de los títulos de la planilla («TRANSPORTE», 85 px) no entraba en
   su columna de 82 (la de «Transporte OUT», a 1280/1366): el título va sin el espaciado de .3 px entre letras y con 3 px de aire a cada lado (en vez de 6) — la
   columna (su ancho vive en el HTML: no se toca, así la imagen apagada queda igual), la letra y las filas quedan como están. «Revisar grupos» lleva el mismo
   espaciado (test-v227-bandeja §D3.a: los dos títulos IGUALES). */
html.t1 .ct-bj .plw table.pl2 th{padding-left:3px;padding-right:3px;letter-spacing:0}
html.t1 .ct-rev table.ct-rev-6a th,html.t1 .ct-bj .ct-rev.ct-rev-inline table.ct-rev-6a th{letter-spacing:0}

/* ✎ v243 (fusión, 02/11 · test-v219-4 §M.6 · RU-22): el cartel oscuro de T1 ENTRA sin bajar de su lugar. La entrada de siempre (toastEntra) lo traía desde
   12 px más abajo: en «Revisar grupos» la pila está parada justo encima del pie (8 px de aire, ctRevToastSobrePie) y durante la entrada el cartel tapaba los
   botones del pie («Pasó a…» medido 4 px sobre ellos). Ahora aparece en su lugar (opacidad y una escala mínima): nunca más abajo que donde termina, sea cual sea
   su alto. Quieto con «reducir movimiento». */
html.t1 .toast-it{animation-name:t1ToastEntra}
@keyframes t1ToastEntra{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.t1 .toast-it{animation:none}}


/* ✎ v243 (Lucas, 02/11: «dentro de los items del header todavía se ven los emojis viejos») — los íconos de línea de lo que CUELGA del header: la lista de la campana,
   el menú del usuario, la bitácora de choferes, la franja de «Ver como» y el ⚠ de la caja vieja. Mismo trazo y tamaño que el header; en línea con su texto. */
html.t1 #chip_pend_drop a > span,html.t1 .user-menu-drop > a,html.t1 .chip-drop-ok{display:inline-flex;align-items:center;gap:8px}
html.t1 .user-menu-drop > a{display:flex}
html.t1 #chip_pend_drop svg.t1i,html.t1 .user-menu-drop svg.t1i,html.t1 .chip-drop-ok svg.t1i{width:17px;height:17px;color:var(--t2)}
html.t1 .chip-drop-ok svg.t1i{color:var(--bi)}
html.t1 #chip_bitacora svg.t1i,html.t1 header.top .chip-h span svg.t1i{width:15px;height:15px;vertical-align:-3px}
html.t1 .usf-franja svg.t1i,html.t1 .t1-vercomo svg.t1i{width:17px;height:17px;vertical-align:-3px;margin-right:4px}