/* =====================================================================
   Panel v4 · hoja base (la única de la primera carga, con tokens.css).
   Copia el diseño de docs/diseno/v4/estilos.css (aprobado el 2026-10-10),
   no su código: el marco, el menú, la cabecera, las piezas que usan todas
   las pantallas, las capas (paleta, globo, cajón, aviso) y el teléfono.
   Lo de cada área llega con su pantalla (panel/base/hojas.mjs).
   Espacio 4/8/12/16/24/32/48 · Letra 12/13/15/18/22/26 · Radios 8/12/16.
   Sin estilos en línea en el HTML (CSP): lo variable va por clases.
   ===================================================================== */
@font-face { font-family: "Inter"; src: url("/fuentes/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("/fuentes/quicksand.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--pagina); color: var(--texto); font: 400 15px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: var(--azul); }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); color: var(--titulo); letter-spacing: -.01em; line-height: 1.25; }
[hidden] { display: none !important; }
/* Las hojas de antes (encendidas con una pantalla de antes) ponen márgenes a
   p y h1–h4: el marco y las piezas v4 los fijan. */
.lateral :is(p, h1, h2, h3, h4, ul), .topm :is(p, h1), .cab :is(p, h1, h2), .navm :is(ul, p), .aviso-senal { margin-top: 0; margin-bottom: 0; }
.cab-txt > p { margin-top: 4px; }
.legado { margin-top: 8px; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.s { width: 16px; height: 16px; } svg.i.l { width: 24px; height: 24px; } svg.i.xl { width: 32px; height: 32px; }
/* El foco se marca con un contorno sólido del azul del tema (3:1 o más en los
   dos temas; revisión del panel guiado E1, I4): en todo control. */
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Lo que recibe el foco por código (el título de un cajón o de la pantalla) no es un control: sin anillo. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.num, .m { font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-2); } .tenue { color: var(--texto-3); }
.nw { white-space: nowrap; }
.sr, .solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ok-t { color: var(--ok); } .pe-t { color: var(--peligro); } .av-t { color: var(--aviso); }
kbd { font: 600 11px var(--fuente); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto-2); }

/* ---------- Entrar y sin señal ---------- */
.entrada { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; background: var(--pagina); }
.entrada-caja { width: 100%; max-width: 400px; display: grid; gap: 16px; padding: 32px 28px; border-radius: var(--r-l); background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--sombra-2); }
.entrada-logo { width: 180px; height: auto; margin: 0 auto 4px; display: block; }
:root[data-theme="oscuro"] .entrada-logo { filter: brightness(0) invert(1); }
.entrada-caja > h1 { font-size: 22px; text-align: center; }
.entrada-caja > p { color: var(--texto-2); text-align: center; }
.entrada .adm-field { display: grid; gap: 6px; }
.entrada .adm-field label { font-weight: 650; font-size: 14px; }
.entrada .adm-input { min-height: 52px; padding: 0 14px; border: 2px solid var(--borde-control); border-radius: var(--r); background: var(--tarjeta); font-size: 17px; }
.entrada .adm-input:focus { border-color: var(--azul); }
.entrada .adm-error { min-height: 1.5em; color: var(--peligro); font-size: 14px; }
.entrada .adm-error:empty { min-height: 0; }
.entrada .adm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: var(--r); background: var(--amarillo); color: var(--sobre-amarillo); font-weight: 700; font-size: 16px; }
.entrada .adm-btn:hover { background: var(--amarillo-hover); }
.entrada .adm-btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Marco: menú a la izquierda, lienzo a la derecha ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; position: relative; overflow: hidden; background: var(--pagina); }
.lateral { background: linear-gradient(180deg, var(--lat-bg), var(--lat-bg-2)); color: var(--lat-texto); display: flex; flex-direction: column; min-height: 0; }
/* El logo en blanco: la máscara del logo con el color del texto del menú.
   Panel v4 (S1): la máscara solo usa la transparencia, que es la misma en el
   logo de color (el de la entrada, que ya llegó) y en el negro: con el de
   color, la primera carga no pide otra imagen. */
.marca { height: 24px; margin: 12px 20px 8px; background: #FFFFFF; -webkit-mask: url("/marca/logo-color.png") left center / contain no-repeat; mask: url("/marca/logo-color.png") left center / contain no-repeat; flex: none; }
.buscar-tarea { margin: 0 12px 4px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .09); color: var(--lat-suave); font-size: 13px; border: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; flex: none; }
.buscar-tarea:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.buscar-tarea span { flex: 1; text-align: left; }
.buscar-tarea kbd { padding: 2px 6px; border: 0; background: rgba(255, 255, 255, .14); color: var(--lat-texto); }
.buscar-tarea:focus-visible, .nav a:focus-visible, .usuario-boton:focus-visible { outline-color: #FFFFFF; }
.nav { flex: 1; overflow-y: auto; padding: 0 12px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.nav-grupo { margin-top: 6px; }
.nav-grupo-titulo { display: flex; align-items: center; gap: 6px; font: 700 10px/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--gm); padding: 4px 10px 3px; opacity: .95; }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 26px; padding: 0 10px; border-radius: 8px; color: var(--lat-texto); text-decoration: none; font-size: 13.5px; font-weight: 500; position: relative; }
.nav a svg.i { width: 18px; height: 18px; color: var(--gm, var(--lat-suave)); opacity: .95; }
.nav a:hover { background: var(--lat-hover); }
.nav a[aria-current="page"] { background: var(--lat-activo); color: #FFFFFF; font-weight: 650; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 5px; bottom: 5px; width: 4px; border-radius: 0 3px 3px 0; background: var(--amarillo); }
.nav-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta { margin-left: auto; font: 700 11.5px/20px var(--fuente); min-width: 22px; text-align: center; border-radius: 10px; background: #DCEBF3; color: #004B6E; padding: 0 6px; }
.cuenta.roja { background: #F6C9C3; color: #7A1610; }
.gm-hoy { --gm: #FFD872; } .gm-serv { --gm: #9CC8F5; } .gm-cli { --gm: #7FDCCF; } .gm-din { --gm: #9BE0B4; } .gm-tie { --gm: #F5B79A; } .gm-inf { --gm: #C9B6F5; } .gm-pie { --gm: #C9D9E2; }
.nav-pie { border-top: 1px solid var(--lat-borde); padding: 4px 0 0; flex: none; }
.nav-pie .nav { flex: none; overflow: visible; padding-bottom: 0; }
.usuario { display: flex; align-items: center; gap: 4px; padding: 4px 12px 8px; }
.usuario .avatar { margin-right: 4px; }
.usuario > div { flex: 1; min-width: 0; line-height: 1.25; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario small { display: block; color: var(--lat-suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.usuario-boton { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--lat-suave); flex: none; }
.usuario-boton svg.i { width: 18px; height: 18px; }
.usuario-boton:hover, .usuario-boton[aria-current="page"] { background: var(--lat-activo); color: #FFFFFF; }
/* Pantallas bajas (1366 × 768): el menú del dueño cabe entero sin desplazarse. */
@media (min-width: 1024px) and (max-height: 820px) {
  .marca { height: 22px; margin: 10px 20px 6px; }
  .buscar-tarea { min-height: 36px; }
  .nav-grupo { margin-top: 5px; }
  .nav-grupo-titulo { padding: 3px 10px 2px; }
  .nav a { min-height: 24px; }
  .usuario { padding: 2px 12px 6px; }
}

.main { overflow-y: auto; min-width: 0; min-height: 0; position: relative; }
.lienzo { max-width: 1200px; margin: 0 auto; padding: 0 32px 64px; }
.lienzo:focus { outline: none; }
#capa { display: contents; }
.lienzo.lleno { max-width: none; height: 100%; display: flex; flex-direction: column; padding-bottom: 16px; }
.aviso-senal { margin: 12px 32px 0; }
.cargando { padding: 32px 0; color: var(--texto-2); }
.lienzo > .aviso--error { margin-top: 24px; }

/* ---------- Avatares e íconos con fondo ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--fuente-titulo); flex: none; background: var(--av-bg, var(--amarillo)); color: var(--av-tx, var(--sobre-amarillo)); letter-spacing: .02em; }
.avatar.s { width: 28px; height: 28px; font-size: 11px; } .avatar.l { width: 48px; height: 48px; font-size: 17px; } .avatar.xl { width: 64px; height: 64px; font-size: 22px; }
.av0 { --av-bg: #DCEBF7; --av-tx: #1F5FA8; } .av1 { --av-bg: #DCF1EE; --av-tx: #0E6F68; } .av2 { --av-bg: #FAE7DE; --av-tx: #A2461F; } .av3 { --av-bg: #ECE6F8; --av-tx: #6243A8; } .av4 { --av-bg: #E0F2E7; --av-tx: #1D6E40; } .av5 { --av-bg: #FCEFC7; --av-tx: #6E4D00; }
:root[data-theme="oscuro"] .av0 { --av-bg: #1A2D42; --av-tx: #8DB9EE; } :root[data-theme="oscuro"] .av1 { --av-bg: #12312F; --av-tx: #6FD1C4; } :root[data-theme="oscuro"] .av2 { --av-bg: #3A2219; --av-tx: #F0A585; } :root[data-theme="oscuro"] .av3 { --av-bg: #282041; --av-tx: #BBA6F2; } :root[data-theme="oscuro"] .av4 { --av-bg: #15301F; --av-tx: #7FD19F; } :root[data-theme="oscuro"] .av5 { --av-bg: #33280F; --av-tx: #F0CB66; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--g-t, var(--azul-tinte)); color: var(--g, var(--azul)); }
.ico.s { width: 32px; height: 32px; border-radius: 9px; } .ico.s svg.i { width: 18px; height: 18px; }
.ico.l { width: 48px; height: 48px; border-radius: 14px; } .ico.l svg.i { width: 24px; height: 24px; }
.g-hoy { --g: var(--hoy); --g-t: var(--hoy-t); } .g-serv { --g: var(--serv); --g-t: var(--serv-t); } .g-cli { --g: var(--cli); --g-t: var(--cli-t); }
.g-din { --g: var(--din); --g-t: var(--din-t); } .g-tie { --g: var(--tie); --g-t: var(--tie-t); } .g-inf { --g: var(--inf); --g-t: var(--inf-t); } .g-ajx { --g: var(--ajx); --g-t: var(--ajx-t); }
.g-sale { --g: var(--sale); --g-t: var(--sale-t); }
.g-ok { --g: var(--ok); --g-t: var(--ok-bg); } .g-pe { --g: var(--peligro); --g-t: var(--peligro-bg); } .g-av { --g: var(--aviso); --g-t: var(--aviso-bg); } .g-gris { --g: var(--gris); --g-t: var(--gris-bg); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 14.5px; white-space: nowrap; text-decoration: none; transition: background-color .15s, transform .12s, box-shadow .15s; }
.btn:active { transform: scale(.98); }
.btn-1 { background: var(--amarillo); color: var(--sobre-amarillo); box-shadow: 0 1px 0 rgba(0, 0, 0, .10); }
.btn-1:hover { background: var(--amarillo-hover); }
.btn-az { background: var(--azul); color: var(--sobre-azul); } .btn-az:hover { background: var(--azul-hover); }
.btn-2 { border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--titulo); } .btn-2:hover { background: var(--hover); }
.btn-3 { color: var(--azul); padding: 0 12px; } .btn-3:hover { background: var(--azul-tinte); }
.btn-pe { border: 1px solid var(--peligro); color: var(--peligro); background: transparent; }
.btn-ic { width: 44px; padding: 0; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--texto-2); }
.btn-ic:hover { background: var(--hover); color: var(--texto); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.btn-xl { min-height: 56px; font-size: 17px; padding: 0 24px; border-radius: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.enlace { color: var(--azul); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* ---------- Cabecera única de pantalla ---------- */
.cab { display: flex; align-items: center; gap: 16px; padding: 24px 0 16px; }
.cab .ico { width: 52px; height: 52px; border-radius: 16px; } .cab .ico svg.i { width: 26px; height: 26px; }
.cab-txt { flex: 1; min-width: 0; }
.cab-grupo { font: 700 11px/1 var(--fuente); letter-spacing: .07em; text-transform: uppercase; color: var(--g); margin-bottom: 6px; display: block; }
.cab h1 { font-size: 26px; font-weight: 700; line-height: 1.15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cab-txt > p { margin-top: 4px; color: var(--texto-2); font-size: 15px; max-width: 92ch; }
.cab-acc { display: flex; gap: 8px; align-items: center; flex: none; }
.que-es { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 18px; background: var(--azul-tinte); color: var(--azul); font: 600 12.5px var(--fuente); letter-spacing: 0; vertical-align: middle; }
.que-es:hover { background: var(--azul-tinte-2); }
.que-es svg.i { width: 16px; height: 16px; }
.termino { background: none; border: 0; border-bottom: 1.5px dotted var(--azul); padding: 0; font: inherit; color: var(--azul); cursor: help; display: inline; }

/* ---------- Lo que puedes hacer aquí ---------- */
.tareas { margin-bottom: 24px; }
.tareas-tit { font: 700 12px var(--fuente); color: var(--texto-2); letter-spacing: .02em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tareas-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tareas-fila.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tareas-fila.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarea { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: var(--r); background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--sombra-1); text-align: left; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tarea:hover { border-color: var(--g, var(--azul)); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.tarea .ico { width: 40px; height: 40px; }
.tarea-txt { flex: 1; min-width: 0; }
.tarea b { display: block; font-size: 14.5px; font-weight: 650; color: var(--texto); line-height: 1.3; }
.tarea small { display: block; font-size: 12.5px; color: var(--texto-2); line-height: 1.3; }
.tarea > svg.i { color: var(--texto-3); }
.tarea.prim { background: var(--amarillo); border-color: var(--amarillo); }
.tarea.prim:hover { background: var(--amarillo-hover); border-color: var(--amarillo-hover); }
.tarea.prim b, .tarea.prim small, .tarea.prim > svg.i { color: var(--sobre-amarillo); }
.tarea.prim .ico { background: rgba(255, 255, 255, .55); color: var(--sobre-amarillo); }

/* ---------- Pestañas y conmutadores ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.pestanas > a, .pestanas > button { min-height: 44px; padding: 0 14px; font-weight: 550; color: var(--texto-2); border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 8px 8px 0 0; text-decoration: none; }
.pestanas svg.i { width: 18px; height: 18px; }
.pestanas > a:hover, .pestanas > button:hover { color: var(--texto); background: var(--hover); }
.pestanas [aria-selected="true"] { color: var(--titulo); border-bottom-color: var(--azul); font-weight: 650; }
.n { font: 650 12px/20px var(--fuente); padding: 0 7px; border-radius: 10px; background: var(--gris-bg); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.n.roja { background: var(--peligro-bg); color: var(--peligro); } .n.ambar { background: var(--aviso-bg); color: var(--aviso); } .n.azul { background: var(--azul); color: var(--sobre-azul); }
.segm { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--hundido); border: 1px solid var(--borde); gap: 2px; }
.segm button { min-height: 36px; min-width: 44px; justify-content: center; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.segm button[aria-pressed="true"] { background: var(--tarjeta); color: var(--titulo); box-shadow: var(--sombra-1); }
.segm button svg.i { width: 17px; height: 17px; }

/* ---------- Franja de cifras (máx. 4) ---------- */
.franja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.franja.n-1 { grid-template-columns: minmax(0, 1fr); } .franja.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .franja.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifra { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra-1); min-width: 0; min-height: 76px; color: inherit; text-decoration: none; }
button.cifra:hover, a.cifra:hover { border-color: var(--borde-fuerte); background: var(--hover); }
button.cifra[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul), var(--sombra-1); background: var(--sel); }
.cifra .ico { width: 40px; height: 40px; }
.cifra > div { flex: 1; min-width: 0; }
.cifra .et { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-2); line-height: 1.25; }
.cifra .val { display: block; font: 700 21px/1.2 var(--fuente); color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra .ctx { display: block; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cifra .mini-g { flex: none; width: 76px; height: 32px; }
.cifra.t-pe { border-color: var(--peligro-borde); } .cifra.t-pe .val { color: var(--peligro); }
.cifra.t-ok .val { color: var(--ok); } .cifra.t-gris .val { color: var(--texto-3); }
.ctx .sube { color: var(--ok); font-weight: 650; } .ctx .baja { color: var(--peligro); font-weight: 650; }

/* ---------- Barra de filtro: siempre una fila ---------- */
.barra { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-width: 0; }
.campo-buscar { display: block; flex: 1 1 220px; min-width: 160px; max-width: 360px; position: relative; }
.campo-buscar svg.i { position: absolute; left: 12px; top: 13px; color: var(--texto-3); width: 18px; height: 18px; pointer-events: none; }
.campo-buscar input { width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--borde-control); background: var(--tarjeta); padding: 0 12px 0 38px; font-size: 14.5px; }
.campo-buscar input:focus { border-color: var(--azul); }
.chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chip { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); font-size: 13.5px; font-weight: 550; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; color: var(--texto); text-decoration: none; }
.chip:hover { background: var(--hover); }
.chip .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--texto-3)); }
.chip[aria-pressed="true"] { background: var(--titulo); border-color: var(--titulo); color: var(--tarjeta); }
:root[data-theme="oscuro"] .chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.chip .n { background: transparent; padding: 0; opacity: .8; color: inherit; }
.mas-f svg.i { width: 18px; height: 18px; }
.empuja { margin-left: auto; }
.activos { display: flex; gap: 6px; align-items: center; margin: -4px 0 12px; flex-wrap: wrap; }
.etq { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 4px 0 10px; border-radius: 15px; background: var(--azul-tinte); color: var(--titulo); font-size: 13px; font-weight: 550; }
.etq button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--texto-2); }

/* ---------- Estados (color + ícono + palabra) ---------- */
.est { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 13px; font-size: 12.5px; font-weight: 650; white-space: nowrap; background: var(--gris-bg); color: var(--gris); flex: none; justify-self: start; }
.est svg.i { width: 14px; height: 14px; stroke-width: 2.2; }
.est.ok { background: var(--ok-bg); color: var(--ok); } .est.av { background: var(--aviso-bg); color: var(--aviso); } .est.pe { background: var(--peligro-bg); color: var(--peligro); }
.est.az { background: var(--info-bg); color: var(--info); } .est.vi { background: var(--inf-t); color: var(--inf); } .est.te { background: var(--cli-t); color: var(--cli); } .est.na { background: var(--tie-t); color: var(--tie); }

/* ---------- Maestro-detalle ---------- */
.md { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 16px; }
.md-lista, .md-detalle { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-l); box-shadow: var(--sombra-1); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.md-lista .barra { padding: 12px 12px 0; margin-bottom: 8px; flex-wrap: wrap; }
.md-lista .campo-buscar { max-width: none; flex-basis: 100%; }
.md-lista .chips { flex: 1; }
.md-cuenta { padding: 0 16px 8px; font-size: 12.5px; color: var(--texto-3); display: flex; justify-content: space-between; align-items: center; }
.md-items { flex: 1; overflow-y: auto; border-top: 1px solid var(--borde); scrollbar-width: thin; }
.it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; min-height: 68px; border-bottom: 1px solid var(--borde); text-align: left; position: relative; color: inherit; text-decoration: none; }
.it:hover { background: var(--hover); }
.it[aria-current="true"], .it[aria-current="page"] { background: var(--sel); }
.it[aria-current="true"]::before, .it[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--azul); }
.it-p { flex: 1; min-width: 0; }
.it-p b { display: block; font-size: 14.5px; font-weight: 650; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-p small { display: block; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-d { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.it-d .m { font-weight: 650; font-size: 14.5px; }
.it-d .f { font-size: 12.5px; color: var(--texto-3); }
.pag { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--texto-2); background: var(--tarjeta-2); }
.pag > div { display: flex; gap: 4px; }
.pag .btn-ic { width: 44px; min-height: 44px; }
.md-detalle .det-cuerpo { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
.det-cab { padding: 20px 24px 16px; border-bottom: 1px solid var(--borde); display: flex; gap: 16px; align-items: flex-start; }
.det-cab h2 { font-size: 21px; font-weight: 700; line-height: 1.2; }
.det-cab .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13.5px; color: var(--texto-2); }
.det-cab .det-acc { margin-left: auto; display: flex; gap: 8px; flex: none; }
.det-atras { display: none; }
.det-tit { flex: 1; min-width: 0; }
.filtro-grupo { border: 0; padding: 0; margin: 0 0 20px; }
.filtro-grupo legend { font: 700 13px var(--fuente); color: var(--texto-2); margin-bottom: 8px; }
.chips--envuelven { flex-wrap: wrap; overflow: visible; }
.det-seccion { margin-top: 24px; }
.det-seccion > h3 { font: 700 15px var(--fuente); color: var(--titulo); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.md-vacio { flex: 1; display: grid; place-items: center; text-align: center; padding: 32px; color: var(--texto-2); }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.dato { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dato > svg.i { color: var(--texto-3); margin-top: 2px; width: 18px; height: 18px; }
.dato span { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.dato b { display: block; font-size: 14.5px; font-weight: 550; color: var(--texto); overflow-wrap: anywhere; }
.dato.ancho { grid-column: 1 / -1; }
.siguiente { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--amarillo-tinte); border: 1px solid var(--amarillo); margin-top: 16px; }
.siguiente .ico { background: var(--amarillo); color: var(--sobre-amarillo); }
.siguiente > div { flex: 1; } .siguiente b { display: block; font-size: 14.5px; } .siguiente small { color: var(--texto-2); font-size: 13px; }

/* ---------- Tablero por estado ---------- */
.kanban { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.col { background: var(--hundido); border: 1px solid var(--borde); border-radius: var(--r-l); display: flex; flex-direction: column; min-height: 0; }
.col-cab { padding: 12px 14px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--c, var(--borde)); }
.col-cab b { font-size: 14px; font-weight: 700; color: var(--titulo); }
.col-cab .n { margin-left: auto; }
.col-cab svg.i { color: var(--c); }
.col-ayuda { font-size: 12px; color: var(--texto-2); padding: 8px 14px 0; }
.col-items { flex: 1; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 8px; align-content: start; scrollbar-width: thin; }
.kt { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 4px solid var(--c, var(--borde)); border-radius: var(--r); padding: 12px; text-align: left; box-shadow: var(--sombra-1); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; min-width: 0; color: inherit; text-decoration: none; }
.kt:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); border-left-color: var(--c); }
.kt-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kt-top b { font-size: 14px; font-weight: 650; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt small { font-size: 12.5px; color: var(--texto-2); display: flex; gap: 6px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.kt small svg.i { width: 14px; height: 14px; margin-top: 2px; }
.kt-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--texto-3); }
.kt-pie .m { color: var(--texto); font-size: 13.5px; }
.kt .edad { font-weight: 650; }
.col-mas { text-align: center; font-size: 12.5px; color: var(--texto-2); padding: 6px; }
.c-pe { --c: var(--peligro-fuerte); } .c-av { --c: var(--aviso-fuerte); } .c-ok { --c: var(--ok-fuerte); } .c-az { --c: var(--azul); } .c-vi { --c: var(--inf); } .c-te { --c: var(--cli); } .c-gris { --c: var(--texto-3); }

/* ---------- Tabla clásica ---------- */
.tabla { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-l); box-shadow: var(--sombra-1); overflow: hidden; }
.der { text-align: right; justify-self: end; }
.m { font-weight: 600; text-align: right; white-space: nowrap; }

/* ---------- Tarjetas, secciones, notas ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-l); box-shadow: var(--sombra-1); padding: 20px; min-width: 0; }
.tarjeta > h3 { font: 700 15.5px/1.35 var(--fuente); color: var(--titulo); }
.seccion { margin-top: 32px; }
.seccion-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.seccion-cab h2 { font-size: 18px; font-weight: 700; }
.seccion-cab p { font-size: 13.5px; color: var(--texto-2); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rejilla.c-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pila { display: grid; gap: 12px; }
.fila-flex { display: flex; gap: 12px; align-items: center; }
.nota { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.45; background: var(--info-bg); color: var(--info); }
.nota svg.i { margin-top: 1px; }
.nota.av { background: var(--aviso-bg); color: var(--aviso); } .nota.pe { background: var(--peligro-bg); color: var(--peligro); } .nota.ok { background: var(--ok-bg); color: var(--ok); } .nota.gris { background: var(--gris-bg); color: var(--texto-2); }
.nota b { font-weight: 700; } .nota .btn { margin-left: auto; }
.nota > div { flex: 1; }
.aviso--error { padding: 12px 14px; border-radius: var(--r); background: var(--peligro-bg); color: var(--peligro); }
.prog { display: block; height: 8px; border-radius: 4px; background: var(--pista); overflow: hidden; position: relative; }
.prog.l { height: 12px; border-radius: 6px; }
.prog svg { display: block; width: 100%; height: 100%; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--texto-2); margin-top: 8px; }

/* ---------- La tarjeta de una gráfica (lo demás, en graficas.css) ---------- */
.graf { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-l); box-shadow: var(--sombra-1); padding: 18px 20px 14px; min-width: 0; display: flex; flex-direction: column; }
.graf h3 { font: 700 15.5px/1.35 var(--fuente); color: var(--titulo); margin: 0; }
.graf .sub { font-size: 12.5px; color: var(--texto-2); margin: 2px 0 0; }
.graf .pie-g { font-size: 12.5px; color: var(--texto-3); margin: 8px 0 0; line-height: 1.5; }
.graf .pie-g svg.i { vertical-align: -3px; margin-right: 4px; }

/* ---------- Línea de vida ---------- */
.vida { display: flex; align-items: flex-start; margin: 4px 0 8px; list-style: none; }
.vida-p { flex: 1; display: grid; justify-items: center; text-align: center; gap: 6px; position: relative; min-width: 0; }
.vida-p::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 3px; background: var(--pista); z-index: 0; }
.vida-p:first-child::before { display: none; }
.vida-p.hecho::before, .vida-p.ahora::before { background: var(--ok-fuerte); }
.vida-p .bola { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tarjeta); border: 2px solid var(--pista); color: var(--texto-3); position: relative; z-index: 1; }
.vida-p .bola svg.i { width: 18px; height: 18px; }
.vida-p.hecho .bola { background: var(--ok-fuerte); border-color: var(--ok-fuerte); color: #FFFFFF; }
.vida-p.ahora .bola { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); box-shadow: 0 0 0 5px var(--azul-tinte); }
.vida-p.alerta .bola { background: var(--peligro-fuerte); border-color: var(--peligro-fuerte); color: #FFFFFF; }
.vida-p b { font-size: 12.5px; font-weight: 650; color: var(--texto); }
.vida-p small { font-size: 11.5px; color: var(--texto-3); margin-top: -4px; }

/* ---------- Fotos de artículo y existencias ---------- */
.foto { aspect-ratio: 5 / 3.4; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #FFFFFF 0, var(--f1, #E7EEF3) 62%, var(--f2, #D2DEE6) 100%); color: var(--fc, #4E6D80); overflow: hidden; }
:root[data-theme="oscuro"] .foto { background: radial-gradient(circle at 50% 38%, #2A3B47 0, #1C2A33 65%, #15202A 100%); color: #9FC1D6; }
.foto svg.i { width: 46%; height: 46%; stroke-width: 1.1; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.foto-sin { position: absolute; bottom: 6px; left: 6px; font-size: 11.5px; font-weight: 600; color: var(--texto-2); background: var(--tarjeta); border-radius: 8px; padding: 0 6px; }
.f-calentador { --f1: #F8EADF; --f2: #EDD3C0; --fc: #94512A; } .f-estufa { --f1: #F1EBE2; --f2: #E1D5C3; --fc: #7A5A30; } .f-bomba { --f1: #E6ECF6; --f2: #CCD7EA; }
.f-campana { --f1: #EEEAF6; --f2: #DAD2EC; --fc: #5D4A92; } .f-repuesto { --f1: #ECEFF1; --f2: #D5DCE1; --fc: #4F5E67; } .f-cilindro { --f1: #F5EFD9; --f2: #E9DDB1; --fc: #7A6110; }
.f-horno { --f1: #F3E7E4; --f2: #E4CDC7; --fc: #8A3F33; } .f-chimenea { --f1: #ECEFF1; --f2: #D5DCE1; --fc: #4F5E67; }
.mini-foto { width: 44px; height: 44px; border-radius: 10px; aspect-ratio: auto; flex: none; }
.mini-foto svg.i { width: 26px; height: 26px; stroke-width: 1.4; }
.exist { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; }
.exist i { display: inline-flex; gap: 2px; } .exist i b { width: 5px; height: 12px; border-radius: 2px; background: var(--pista); display: block; }
.exist.t-ok { color: var(--ok); } .exist.t-av { color: var(--aviso); } .exist.t-pe { color: var(--peligro); }
.exist.t-ok i b.on { background: var(--ok-fuerte); } .exist.t-av i b.on { background: var(--aviso-fuerte); } .exist.t-pe i b.on { background: var(--peligro-fuerte); }

/* ---------- Vacío ilustrado ---------- */
.vacio { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 24px; color: var(--texto-2); }
.vacio svg.ilus { width: 168px; height: 120px; margin-bottom: 8px; }
.vacio > b { color: var(--titulo); font: 700 18px var(--fuente-titulo); }
.vacio > p { max-width: 46ch; font-size: 14.5px; }
.vacio .btn { margin-top: 8px; }
.ilus .f { fill: var(--azul-tinte); } .ilus .f2 { fill: var(--tarjeta); stroke: var(--borde-fuerte); stroke-width: 2; }
.ilus .l { fill: none; stroke: var(--azul); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ilus .a { fill: var(--amarillo); } .ilus .s { fill: var(--pista); } .ilus .k { fill: none; stroke: var(--sobre-amarillo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- «Todo el panel» (lista agrupada) ---------- */
.aj-grupo { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-l); box-shadow: var(--sombra-1); overflow: hidden; }
.aj-fila { display: flex; gap: 14px; align-items: center; width: 100%; min-height: 56px; padding: 8px 20px; border-top: 1px solid var(--borde); text-align: left; color: inherit; text-decoration: none; }
.aj-fila:first-child { border-top: 0; }
a.aj-fila:hover, button.aj-fila:hover { background: var(--hover); }
.aj-fila > span:nth-child(2) { flex: 1; min-width: 0; } .aj-fila b { display: block; font-size: 15px; font-weight: 600; } .aj-fila small { display: block; font-size: 13px; color: var(--texto-2); }
.aj-fila > svg.i { color: var(--texto-3); }
.aj-partes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px 66px; }
.mas-seccion { margin-top: 16px; } .mas-seccion .seccion-cab h2 { font-size: 15px; }

/* ---------- Capas: velo, cajón, globo, aviso ---------- */
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 40; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; background: var(--tarjeta); box-shadow: var(--sombra-3); z-index: 41; display: flex; flex-direction: column; animation: deslizar .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes deslizar { from { transform: translateX(40px); opacity: 0; } }
.cajon:focus { outline: none; }
.cajon-cab { padding: 20px 24px 16px; display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--borde); }
.cajon-cab > div { flex: 1; min-width: 0; }
.cajon-cab h2 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.cajon-cab p { font-size: 13.5px; color: var(--texto-2); margin-top: 2px; }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cajon-pie { padding: 14px 24px; border-top: 1px solid var(--borde); display: flex; gap: 8px; justify-content: flex-end; }
.cerrar { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--texto-2); flex: none; }
.cerrar:hover { background: var(--hover); color: var(--texto); }
.globo { position: fixed; z-index: 43; width: 340px; max-width: calc(100% - 24px); background: var(--titulo); color: #FFFFFF; border-radius: var(--r-l); padding: 16px 48px 16px 18px; box-shadow: var(--sombra-3); font-size: 14px; line-height: 1.5; }
:root[data-theme="oscuro"] .globo { background: #EAF2F6; color: #0B2534; }
.globo h2 { display: flex; align-items: center; gap: 8px; font: 700 16px var(--fuente-titulo); color: inherit; margin-bottom: 6px; }
.globo p + p { margin-top: 8px; }
.globo .ej { background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 8px 10px; margin-top: 10px; font-size: 13px; }
:root[data-theme="oscuro"] .globo .ej { background: rgba(0, 0, 0, .08); }
.globo .cerrar { position: absolute; top: 6px; right: 6px; color: inherit; }
.globo .cerrar:focus-visible { outline-color: currentColor; }
.toast { position: fixed; left: 50%; top: 16px; transform: translate(-50%, -16px); z-index: 2100; min-width: 320px; max-width: calc(100% - 32px); background: #14222A; color: #F2F6F8; border-radius: 14px; padding: 12px 12px 12px 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--sombra-3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; font-size: 14.5px; }
:root[data-theme="oscuro"] .toast { background: #E4ECF0; color: #101D24; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .ok-c { width: 28px; height: 28px; border-radius: 50%; background: #2E8B57; color: #FFFFFF; display: grid; place-items: center; flex: none; }
.toast .ok-c svg.i { width: 16px; height: 16px; stroke-width: 3; }
.toast > div { flex: 1; } .toast small { display: block; opacity: .8; font-size: 13px; }
.toast button, .toast a { color: var(--amarillo); font-weight: 700; min-height: 44px; padding: 0 10px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
:root[data-theme="oscuro"] .toast button, :root[data-theme="oscuro"] .toast a { color: #00608B; }

/* ---------- Paleta «¿Qué quieres hacer?» (Ctrl K) ---------- */
#paleta { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 0; background: var(--velo); }
#paleta .paleta-caja { width: 600px; max-width: 100%; overflow: hidden; border-radius: var(--r-l); background: var(--tarjeta); box-shadow: var(--sombra-3); animation: paletaEntra .18s ease-out; }
@keyframes paletaEntra { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
#paleta .paleta-buscar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px 0 18px; border-bottom: 1px solid var(--borde); }
#paleta .paleta-buscar svg.i { width: 22px; height: 22px; color: var(--texto-3); }
#paleta .paleta-campo { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 17px; outline: none; }
#paleta .paleta-campo::placeholder { color: var(--texto-2); }
#paleta .paleta-lista { max-height: 420px; margin: 0; padding: 8px; overflow: auto; list-style: none; }
#paleta .paleta-grupo { padding: 10px 12px 4px; font: 700 11.5px var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
#paleta .paleta-opcion { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
#paleta .paleta-opcion:hover, #paleta .paleta-opcion[aria-selected="true"] { background: var(--sel); }
#paleta .paleta-circ { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--g-t, var(--azul-tinte)); color: var(--g, var(--azul)); }
#paleta .paleta-circ svg.i { width: 18px; height: 18px; }
#paleta .paleta-txt { flex: 1; min-width: 0; }
#paleta .paleta-txt b { display: block; font-size: 14.5px; font-weight: 600; }
#paleta .paleta-txt small { display: block; overflow: hidden; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; text-overflow: ellipsis; }
#paleta .paleta-vacia { padding: 14px; color: var(--texto-2); }
#paleta .paleta-pie { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--borde); background: var(--tarjeta-2); font-size: 12.5px; color: var(--texto-2); }
#paleta .paleta-pie span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Teléfono y tableta (< 1024 px): barra de arriba y cinco abajo ---------- */
.topm, .navm { display: none; }
@media (max-width: 1023.98px) {
  .etq button { width: 44px; height: 44px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .lateral { display: none; }
  .topm { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 8px 6px 4px; padding-top: calc(6px + env(safe-area-inset-top)); background: var(--lat-bg); color: #FFFFFF; }
  .topm-titulo { flex: 1; min-width: 0; font: 700 18px/1.2 var(--fuente-titulo); color: #FFFFFF; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topm-boton { color: #FFFFFF; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
  .topm-boton:hover { background: rgba(255, 255, 255, .12); }
  .topm-boton:focus-visible { outline-color: #FFFFFF; }
  .navm { display: block; background: var(--tarjeta); border-top: 1px solid var(--borde); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
  .navm-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; }
  .navm a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--texto-2); min-height: 52px; justify-content: center; border-radius: 12px; position: relative; text-decoration: none; }
  .navm .pil { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
  .navm a[aria-current="page"] { color: var(--titulo); }
  .navm a[aria-current="page"] .pil { background: var(--azul-tinte-2); }
  .navm .cuenta { position: absolute; top: 0; right: 8px; margin: 0; background: var(--insignia); color: var(--sobre-insignia); font-size: 11px; line-height: 18px; min-width: 18px; padding: 0 5px; }
  .lienzo { padding: 0 16px 32px; }
  .lienzo.lleno { height: auto; display: block; padding-bottom: 12px; }
  .aviso-senal { margin: 12px 16px 0; }
  .cab { padding: 16px 0 12px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .cab .ico, .cab-grupo { display: none; }
  .cab h1 .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cab h1 { font-size: 15px; }
  .cab-txt { flex: 1 1 100%; display: flex; flex-direction: column-reverse; gap: 6px; align-items: flex-start; }
  .cab-txt > p { font-size: 14.5px; margin-top: 0; }
  .cab-acc { width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .cab-acc .ocm { display: none; }
  .tareas { margin-bottom: 16px; }
  .tareas-fila, .tareas-fila.n-2, .tareas-fila.n-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tarea { min-height: 60px; padding: 8px 10px; gap: 8px; }
  .tarea .ico { width: 34px; height: 34px; border-radius: 10px; } .tarea .ico svg.i { width: 18px; height: 18px; }
  .tarea b { font-size: 13.5px; } .tarea small, .tarea > svg.i { display: none; }
  .tarea.prim { grid-column: 1 / -1; } .tarea.prim small { display: block; }
  .franja, .franja.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .franja.n-1 { grid-template-columns: minmax(0, 1fr); }
  .cifra { padding: 10px 12px; min-height: 64px; gap: 10px; }
  .cifra .ico, .cifra .mini-g { display: none; }
  .cifra .val { font-size: 18px; }
  .barra { flex-wrap: wrap; }
  .campo-buscar { max-width: none; flex-basis: 100%; }
  .barra .chips { flex: 1 1 100%; order: 3; }
  .barra .ocm { display: none; }
  .que-es, .btn-sm, .chip, .segm button { min-height: 44px; }
  .md { grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; }
  .md > *, .md-lista > *, .barra > * { min-width: 0; }
  .md, .md-lista, .md-detalle { min-height: 0; overflow: visible; }
  .md .md-detalle { display: none; }
  .md.con-det .md-lista { display: none; }
  .md.con-det .md-detalle { display: flex; border-radius: 0; margin: 0 -16px -12px; border-left: 0; border-right: 0; }
  /* Con una ficha abierta, el teléfono la muestra sola (con «Volver»). */
  .lienzo:has(.md.con-det) > .cab, .lienzo:has(.md.con-det) > .tareas, .lienzo:has(.md.con-det) > .pestanas { display: none; }
  .md-items, .md-detalle .det-cuerpo { overflow: visible; }
  .det-atras { display: inline-flex; }
  .det-cab { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .det-cab .det-acc { margin-left: 0; width: 100%; }
  .det-cab .det-acc .btn { flex: 1; } .det-cab .det-acc .btn-ic { flex: none; width: 44px; }
  .md-detalle .det-cuerpo { padding: 0 16px 24px; }
  .datos { grid-template-columns: 1fr; }
  .kanban { grid-auto-columns: 82%; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; height: 62vh; }
  .col { scroll-snap-align: start; }
  .rejilla, .rejilla.c-3 { grid-template-columns: minmax(0, 1fr); }
  .seccion { margin-top: 24px; }
  .graf { padding: 14px 14px 12px; }
  .cajon { width: 100%; }
  .globo { left: 12px !important; right: 12px; bottom: 96px; top: auto !important; width: auto; max-width: none; }
  .toast { top: auto; bottom: 84px; min-width: 0; width: calc(100% - 24px); transform: translate(-50%, 16px); }
  .toast.ver { transform: translate(-50%, 0); }
  #paleta { padding: 0; align-items: flex-end; }
  #paleta .paleta-caja { width: 100%; max-height: 88vh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; animation: paletaSube .22s ease-out; }
  #paleta .paleta-lista { max-height: none; flex: 1; }
  #paleta .paleta-pie { display: none; }
  @keyframes paletaSube { from { transform: translateY(24px); opacity: 0; } }
  .solo-compu { display: none !important; }
}
@media (min-width: 1024px) { .solo-movil { display: none !important; } }

/* Hojas de antes prestadas (data-prestado, panel/base/hojas.mjs): sus .tarea, .chip
   y .datos llevan los mismos nombres; dentro de #contenido vuelven a su medida v4
   (el panel lateral, con lo de antes, va fuera de #contenido). Solo la disposición. */
[data-prestado] #contenido .tareas { display: block; margin: 0 0 24px; }
[data-prestado] #contenido .tarea { display: flex; align-items: center; gap: 12px; padding: 10px 14px; grid-template-columns: none; }
[data-prestado] #contenido .chips { flex-wrap: nowrap; gap: 6px; }
[data-prestado] #contenido .chips--envuelven { flex-wrap: wrap; }
[data-prestado] #contenido .chip { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13.5px; font-weight: 550; }
[data-prestado] #contenido .chip[aria-pressed="true"] { background: var(--titulo); border-color: var(--titulo); color: var(--tarjeta); }
:root[data-theme="oscuro"][data-prestado] #contenido .chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
[data-prestado] #contenido .datos { grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0; }
@media (max-width: 1023.98px) {
  [data-prestado] #contenido .tareas { margin-bottom: 16px; }
  [data-prestado] #contenido .tarea { gap: 8px; padding: 8px 10px; }
  [data-prestado] #contenido .chip { min-height: 44px; }
  [data-prestado] #contenido .datos { grid-template-columns: 1fr; }
}

/* Movimiento reducido: nada se desliza ni crece. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Revisión S3: la barra de confirmar del panel lateral (confirmarEnPanel)
   con los botones y el campo de v4, también sin las hojas de antes. */
.pl .pl-acc { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pl .pl-acc .adm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; background: var(--azul); color: var(--sobre-azul); font: 700 14.5px/1.2 var(--fuente); cursor: pointer; }
.pl .pl-acc .adm-btn:hover { filter: brightness(1.08); }
.pl .pl-acc .adm-btn-ghost { background: transparent; color: var(--texto); border-color: var(--borde-control); }
.pl .pl-acc .pl-btn-peligro { background: var(--peligro-fuerte); color: #fff; }
.pl .pl-acc .adm-btn[disabled] { opacity: .6; cursor: progress; }
.pl .pl-confirmar-campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pl .pl-confirmar-campo .adm-input { width: 100%; min-height: 48px; border: 1px solid var(--borde-control); border-radius: var(--r); padding: 10px 12px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 15px; }

/* =====================================================================
   SM Oficina como app de Android (plan 2026-10-11). Lo del celular:
   splash, la fila del grupo, «Hacer algo», tirar para actualizar, la
   pregunta de salir, la paleta como hoja con asa, toques de 48 px,
   márgenes seguros, el teclado y las transiciones (solo transform y
   opacity; el bloque de movimiento reducido de arriba las apaga).
   ===================================================================== */
.splash, .fab, .grupom, .tiron, .hoja-asa { display: none; }
.salir-app { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: end center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--velo); }
.salir-app-caja { width: 100%; max-width: 420px; padding: 24px 20px 16px; border-radius: 24px; background: var(--tarjeta); box-shadow: var(--sombra-3); animation: hojaSube .22s cubic-bezier(.2, .8, .2, 1); }
.salir-app-caja h2 { font-size: 19px; }
.salir-app-caja p { margin: 8px 0 20px; color: var(--texto-2); font-size: 14.5px; }
.salir-app-fila { display: flex; gap: 8px; justify-content: flex-end; }
.salir-app-fila .btn { flex: 1; min-height: 48px; }
@keyframes hojaSube { from { transform: translateY(32px); opacity: 0; } }
.sin-senal-pantalla { margin-top: 24px; }
.sin-senal-pantalla .ico { margin-bottom: 4px; }
.este-celular { display: none; }
.fila-instalar { display: none !important; }
.instalable:not(.app-movil) .fila-instalar { display: flex !important; }

@media (max-width: 1023.98px) {
  html { -webkit-tap-highlight-color: transparent; }
  /* Sin zoom de doble toque ni rebote de la página: el tirón es el de la app. */
  html, body { touch-action: manipulation; overscroll-behavior-y: none; }
  .main { overscroll-behavior-y: contain; }
  .tactil * { scrollbar-width: none; }
  .tactil ::-webkit-scrollbar { display: none; }
  .topm, .navm, .grupom, .fab, .splash { -webkit-user-select: none; user-select: none; }

  /* Splash: el ícono de SM Oficina sobre el color de la app hasta que hay algo que ver. */
  .splash { display: grid; place-content: center; justify-items: center; gap: 14px; position: fixed; inset: 0; z-index: 3000; background: var(--lat-bg); color: #FFFFFF; transition: opacity .3s ease; }
  .splash.fuera { opacity: 0; pointer-events: none; }
  .splash-icono { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
  .splash-nombre { font: 700 20px var(--fuente-titulo); letter-spacing: .01em; }
  .splash-carga { width: 28px; height: 28px; margin-top: 12px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--amarillo); animation: girar .9s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }

  /* La barra de arriba de una app: márgenes seguros, toques de 48 px; sin
     flecha (raíz) el título empieza en 16 px. */
  .topm { padding-left: calc(4px + env(safe-area-inset-left)); padding-right: calc(4px + env(safe-area-inset-right)); }
  .topm-boton { width: 48px; height: 48px; }
  .topm-boton[hidden] + .topm-titulo { padding-left: 12px; }
  .navm { padding-left: calc(4px + env(safe-area-inset-left)); padding-right: calc(4px + env(safe-area-inset-right)); }
  .navm a { min-height: 56px; }
  .navm .cuenta.roja { background: var(--peligro-fuerte); color: #FFFFFF; }

  /* La fila del grupo: pestañas desplazables pegadas a la barra azul (Material). */
  .grupom { display: flex; position: sticky; top: 0; z-index: 6; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 8px; background: var(--lat-bg); box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
  .grupom[hidden] { display: none; }
  .grupom-p { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; color: var(--lat-suave); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .grupom-p[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--amarillo); }
  .grupom-p .cuenta { margin-left: 0; background: var(--insignia); color: var(--sobre-insignia); min-width: 20px; }
  .grupom-p:focus-visible { outline-color: #FFFFFF; outline-offset: -4px; }

  /* «Hacer algo»: el botón flotante amarillo sobre la barra de abajo. */
  .fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 30; right: calc(16px + env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); min-height: 56px; padding: 0 20px 0 16px; border-radius: 16px; background: var(--azul); color: var(--sobre-azul); font-weight: 700; font-size: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 6px 16px rgba(0, 0, 0, .18); transition: transform .2s, opacity .2s; }
  .fab[hidden] { display: none; }
  .fab:active { transform: scale(.96); }
  .fab.corto { width: 56px; padding: 0; justify-content: center; }
  .fab.corto span { display: none; }
  .fab svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
  .lienzo { padding-bottom: 104px; }
  /* Una ficha abierta ocupa la pantalla; con el teclado, el botón principal queda encima de él. */
  .app.con-ficha .fab, .app.con-ficha .navm, .teclado-abierto .fab, .teclado-abierto .navm { display: none; }
  .app.con-ficha .lienzo { padding-bottom: 24px; }
  .md .det-atras { display: none; }
  .siguiente { flex-wrap: wrap; }
  .siguiente > div { flex: 1 1 calc(100% - 56px); }
  .siguiente > .btn { flex: 1 1 100%; }

  /* Tirar para actualizar: un círculo que baja con el dedo y gira. */
  .tiron { display: grid; place-items: center; position: absolute; left: 50%; top: 0; z-index: 7; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--tarjeta); color: var(--azul); box-shadow: var(--sombra-2); transform: translateY(calc(var(--tiron-y, 0px) - 44px)); opacity: var(--tiron-opacidad, 0); pointer-events: none; }
  .tiron[hidden] { display: none; }
  .tiron svg.i { transform: rotate(var(--tiron-giro, 0deg)); }
  .tiron.listo { color: var(--ok); }
  .tiron.girando svg.i { animation: girar .8s linear infinite; }

  /* La paleta como hoja: asa arriba; se arrastra hacia abajo para cerrarla. */
  .hoja-asa { display: block; width: 100%; height: 22px; flex: none; position: relative; touch-action: none; cursor: grab; }
  .hoja-asa::before { content: ""; position: absolute; left: 50%; top: 9px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--borde-fuerte); }
  #paleta .paleta-caja { padding-bottom: env(safe-area-inset-bottom); transform: translateY(var(--arrastre, 0px)); transition: transform .2s; }
  #paleta .paleta-caja.arrastrando { transition: none; }
  #paleta .paleta-caja:focus { outline: none; }
  #paleta .paleta-buscar { height: 56px; }
  #paleta .paleta-opcion { min-height: 56px; }
  #paleta .paleta-lista { padding-bottom: 16px; }

  /* El aviso de sin señal: una franja con ícono pegada arriba, como la del técnico. */
  .aviso-senal { position: sticky; top: 0; z-index: 6; display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; border-radius: 0; padding: 10px 16px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); }
  .aviso-senal[hidden] { display: none; }
  .aviso-senal svg.i { flex: none; margin-top: 1px; }
  .grupom:not([hidden]) ~ .aviso-senal { top: 48px; }

  /* Toques de 48 px (la vara de la app del técnico). */
  .btn { min-height: 48px; }
  .btn-ic { width: 48px; }
  /* Nada se sale de lado: un botón de texto largo baja de línea (Metas, A7). */
  .lienzo .btn { max-width: 100%; }
  .inf-acciones .btn { white-space: normal; text-align: left; padding-top: 10px; padding-bottom: 10px; }
  .que-es, .btn-sm, .chip, .segm button, .pestanas > a, .pestanas > button, .enlace, .cerrar, .kanban-estados button { min-height: 48px; }
  .cerrar { width: 48px; }
  .etq button { width: 48px; height: 48px; }
  .pag .btn-ic { width: 48px; min-height: 48px; }

  /* Tableros: el selector de estado sobre las columnas. */
  .kanban-estados { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px; }
  .kanban-estados button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 24px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); font-size: 13.5px; font-weight: 600; color: var(--texto); }
  .kanban-estados button .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--texto-3)); }
  .kanban-estados button[aria-pressed="true"] { background: var(--titulo); border-color: var(--titulo); color: var(--tarjeta); }
  :root[data-theme="oscuro"] .kanban-estados button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
  .kanban { grid-auto-columns: calc(100% - 32px); overscroll-behavior-x: contain; }

  /* Más → «Este celular». */
  .este-celular { display: block; }

  /* Las transiciones entre pantallas. */
  .entra-adelante { animation: entraAdelante .22s cubic-bezier(.2, .8, .2, 1); }
  .entra-atras { animation: entraAtras .22s cubic-bezier(.2, .8, .2, 1); }
  .entra-fundido { animation: entraFundido .18s ease-out; }
  @keyframes entraAdelante { from { transform: translateX(24px); opacity: 0; } }
  @keyframes entraAtras { from { transform: translateX(-24px); opacity: 0; } }
  @keyframes entraFundido { from { opacity: 0; } }
}
.solo-app { display: none; }
.app-movil .solo-app { display: revert; }
.app-movil .solo-navegador { display: none !important; }