/* ERP Kratfel — hoja base.
   Shell: menú lateral izquierdo + submenú contextual (patrón videotutoriales).
   OJO: enlazar SIEMPRE con css_url() (filemtime) — SiteGround cachea agresivo. */

/* La paleta (colores del sistema) vive en css/paleta.css, que se carga antes de esta hoja. */


* { margin: 0; box-sizing: border-box; }
/* hidden SIEMPRE oculta (11-sep, v0.444.2): un display:flex/grid de una clase le ganaba al atributo y el panel de detalle no cerraba con la X.
   No quitar: toda la app abre y cierra paneles con el atributo hidden. Prueba: scripts/qa_paneles.js */
[hidden] { display: none !important; }
/* Negritas al mínimo (Pablo 12-sep, /kratfel-formato). OJO: en este ERP la mayoría de los <b> NO son
   negritas, son ganchos de estructura — 51 reglas del CSS los reestilan (.kpi b, .t3-v > b, .hist-quien b…),
   casi siempre a display:block + tamaño + color, donde el peso ya no aporta nada. Bajar el default de 700
   a 600 quita el exceso de una vez en toda la app sin mover un solo layout; lo que de verdad necesita
   peso lo pide con su propia regla. Para destacar en prosa: .clave (más grande, sin peso). */
b, strong { font-weight: 600; }
/* En PROSA explicativa (notas al pie, saludos, leyendas, la Guía) la negrita no destaca: mancha el
   párrafo. Ahí el <b> se queda solo con el color de título, sin peso — un realce que se lee y no grita.
   Son contenedores de texto, nunca de datos: los números de los KPI y las celdas conservan su peso. */
.nota b, .nota strong, .nota-inline b, .saludo b, .tab-pie b,
.gleyenda b, .av-g-leyenda b, .tab-leyenda b, .ayuda-lista b, .vacio b {
  font-weight: inherit; color: var(--pf-titulo);
}
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--pf-fondo);
  color: var(--pf-texto);
  min-height: 100vh;
}
/* formato §18 (22-oct-2026, reglas estrictas): la prosa se lee a 1.5 de interlineado y en renglones de hasta ~80 caracteres (WCAG 1.4.8,
   Material «Typography», Apple HIG «Typography»). Solo párrafos y notas sin controles dentro: una fila de botones o filtros no se toca. */
main :is(p, li, dd, .nota):not(:has(.boton, button, input, select, textarea, .chip)) { line-height: 1.5; }
main :is(p, li, dd, small, em, .nota, .nota-inline, .hist-que, pre) { overflow-wrap: anywhere; }   /* §18 reflow: un nombre de archivo o una liga larga sin espacios no saca la página a lo ancho (Seguridad, Historial, Formatos a 320 px) */
main :is(p, .nota, li):not(:has(.boton, button, input, select, textarea)):not(.filtros):not(.miga):not(nav li):not(.pestanas li) { max-width: 80ch; }

/* ================= Shell: sidebar + submenú + contenido ================= */
.app { display: flex; min-height: 100vh; }

.lateral {
  flex: 0 0 232px;
  background: var(--pf-caja);
  border-right: 1px solid var(--pf-borde);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;   /* overflow-x: en Windows la barra vertical ocupa ancho y salía otra horizontal (28-sep) */
  scrollbar-width: thin; scrollbar-color: var(--pf-borde-fuerte) transparent;
}
/* Cabecera del menú (como iUto): [panel] [logo] | ERP */
.marca-fila {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--pf-borde-suave); padding: 12px 10px 10px 12px;
}
.marca { display: flex; align-items: center; flex: 1; text-decoration: none; min-width: 0; min-height: 36px; }   /* ronda 21-oct-2026: con el logo de Estela (24 px) la liga quedaba de 24 px */
.marca .marca-sello { display: none; }   /* sello de la app: solo con el menú minimizado (v0.477) */
/* 21-oct-2026: Estela. Logotipo SVG en currentColor (ondas + palabra en IBM Plex Mono), navy de la marca. */
:root { --estela: #0e3a5b; }
/* 21-oct-2026 noche (Rafael vía Pablo): el logo de Kratfel regresa como antes; a la derecha de la raya, donde decía «ERP»,
   dice «Estela» en IBM Plex Mono (trazada en img/estela/palabra.svg, en el navy del logo de Kratfel). Las ondas se quedan solo
   en el ícono de la app. Medidas para que quepa en los 232 px del menú junto al botón de minimizar. */
.marca .marca-logo { width: 92px; height: auto; display: block; flex: 0 0 auto; }
.marca .marca-palabra { height: 11px; width: auto; display: block; color: #252e5d; flex: 0 0 auto; }
/* raya con poco margen a los lados y el aire va DESPUÉS de la P */
.marca-raya { width: 1px; height: 18px; background: var(--pf-borde); margin: 0 9px; flex: 0 0 auto; }
.nav-esconde {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; cursor: pointer; border-radius: 9px; flex: 0 0 auto;   /* ronda 19-oct: toque 36 px */
  background: none; border: none; color: var(--pf-texto-3);
}
.nav-esconde:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
/* RAIL (patrón iUto): el menú minimizado a solo iconos — cada sección con el
   suyo — y el resto del ancho para el contenido. */
@media (min-width: 861px) {
  html.nav-rail .lateral { flex-basis: 64px; }
  html.nav-rail .marca-fila { justify-content: center; padding: 12px 6px 10px; flex-direction: column; gap: 8px; }
  /* v0.477 (Pablo, 18-sep): con el menú minimizado el logo seguía siendo la forma de volver al Tablero: queda chico, abajo del botón */
  html.nav-rail .marca { display: flex; flex: 0 0 auto; justify-content: center; }
  html.nav-rail .marca { min-width: 40px; min-height: 40px; align-items: center; border-radius: 9px; }
  html.nav-rail .marca:hover { background: var(--pf-caja-hover); }
  html.nav-rail .marca .marca-sello { display: block; width: 30px; height: 30px; border-radius: 7px; }
  html.nav-rail .marca-logo, html.nav-rail .marca-raya, html.nav-rail .marca-palabra { display: none; }
  html.nav-rail .lateral-grupo { visibility: hidden; height: 10px; margin: 4px 0 0; padding: 0; }
  html.nav-rail .lateral-item { justify-content: center; padding: 12px 0; }
  html.nav-rail .lateral-item > span { display: none; }
  html.nav-rail .lateral-ico { width: 21px; height: 21px; }
  html.nav-rail .lateral-usuario { padding: 10px 6px; }
  html.nav-rail .usuario-btn { justify-content: center; padding: 6px 0; }
  html.nav-rail .usuario-nom, html.nav-rail .version-lateral { display: none; }
  html.nav-rail .usuario-menu { left: 8px; right: auto; width: 216px; }
}
/* En móvil el cajón manda: el rail no aplica ahí. */
@media (max-width: 860px) {
  .nav-esconde { display: none; }
  html.nav-rail .lateral-item > span, html.nav-rail .marca { display: flex; }
}
.lateral-nav { flex: 1; padding: 14px 0 10px; }
.lateral-grupo {
  color: var(--pf-texto-3); font-size: max(12px, 11px); letter-spacing: .09em;
  text-transform: uppercase; padding: 0 20px; margin: 16px 0 6px;
}
.lateral-grupo:first-child { margin-top: 0; }
.lateral-item {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  color: var(--pf-texto-2); font-size: 14.5px;
  padding: 10px 17px; border-left: 3px solid transparent;
  transition: color .15s, background .15s;
}
.lateral-ico { flex: 0 0 auto; color: var(--pf-texto-3); }
.lateral-item.activo .lateral-ico, .lateral-item:hover .lateral-ico { color: inherit; }
.lateral-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-item:hover { color: var(--pf-titulo); background: var(--pf-caja-hover); }
.lateral-item.activo {
  color: var(--pf-azul-fuerte); background: var(--pf-azul-fondo);
  border-left-color: var(--pf-azul); font-weight: 600;
}
.lateral-item.proximamente { color: var(--pf-vacio); cursor: default; }
.lateral-item.proximamente i {
  font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--pf-borde); border-radius: 999px; padding: 1px 7px; margin-left: 7px;
  color: var(--pf-texto-3);
}
.lateral-usuario {
  border-top: 1px solid var(--pf-borde-suave);
  padding: 10px 12px; font-size: 13px; position: relative;
}
/* Botón del usuario (patrón avatar-menu de iUto): abre el menú de arriba */
.usuario-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; border-radius: 10px;
  padding: 8px; font-family: inherit; text-align: left;
}
.usuario-btn:hover { background: var(--pf-caja-hover); }
.usuario-ava {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pf-azul-fondo); color: var(--pf-azul-fuerte);
  font-weight: 600; font-size: 12.5px; border: 1px solid var(--pf-azul-borde);
}
.usuario-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.usuario-ava-emoji { font-size: 17px; }
.usuario-nom { font-weight: 600; color: var(--pf-titulo); font-size: 13.5px; }

/* Perfil: selector de avatar (patrón iUto) */
.av-tipos { display: flex; gap: 8px; margin-bottom: 12px; }
.av-tipo {
  cursor: pointer; font-size: .9rem; color: var(--pf-texto-2);
  border: 1.5px solid var(--pf-borde); border-radius: 10px; padding: 9px 18px;
}
.av-tipo input { display: none; }
.av-tipo.on, .av-tipo:has(input:checked) {
  background: var(--pf-azul-fuerte); border-color: var(--pf-azul-fuerte);
  color: #fff; font-weight: 600;
}
.av-campos { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.av-campo { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--pf-texto-2); }
.av-campo input[type=file] { min-height: 36px; min-width: 0; max-width: 100%; }  /* ronda 20-oct-2026: Foto del perfil a 36 px de toque */
.av-campo { max-width: 100%; flex-wrap: wrap; }  /* ronda 0.559: a 320 px el campo de la foto se salía (361 px) */
.av-campo input[type=text] {
  padding: 8px 10px; border: 1px solid var(--pf-borde); border-radius: 8px; background: var(--pf-caja-suave);
}
.av-label { font-size: .85rem; color: var(--pf-texto-2); margin-bottom: 8px; }
.av-colores { display: flex; gap: 9px; flex-wrap: wrap; }
.av-color {
  width: 44px; height: 36px; border-radius: 10px; cursor: pointer;
  background: var(--ac); border: 2px solid transparent;
}
.av-color:has(input:checked) { border-color: var(--pf-titulo); box-shadow: 0 0 0 2px var(--pf-caja), 0 0 0 4px var(--pf-titulo); }
.av-color input { display: none; }

/* Usuarios (admin) */
.usuario-card .uc-cab { display: flex; align-items: center; gap: 12px; }
.usuario-card .uc-nombre { flex: 1; min-width: 0; }
.usuario-card .uc-nombre b { display: block; color: var(--pf-titulo); }
.usuario-card .uc-nombre span { display: block; font-size: .78rem; color: var(--pf-texto-3); }
.usuario-inactivo { opacity: .6; }
.areas-menu { max-height: 300px; overflow-y: auto; min-width: 300px; }
.areas-menu .areas-guardar { margin-top: 8px; position: sticky; bottom: 0; }   /* «Guardar áreas»: siempre a la vista al bajar la lista (16-oct-2026) */
.usuario-menu[hidden] { display: none; }
.usuario-menu {
  position: absolute; bottom: calc(100% + 6px); left: 10px; right: 10px; z-index: 90;
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 13px;
  box-shadow: 0 12px 32px rgba(28, 28, 30, .16); padding: 8px; min-width: 208px;
}
.um-cab { padding: 8px 10px 10px; border-bottom: 1px solid var(--pf-borde-suave); margin-bottom: 6px; }
.um-cab b { display: block; color: var(--pf-titulo); font-size: 13.5px; }
.um-cab span { display: block; color: var(--pf-texto-3); font-size: 12px; margin-top: 2px; }
.um-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--pf-texto); font-size: 13.5px; padding: 10px; border-radius: 9px; min-height: 40px;
}
.um-item:hover { background: var(--pf-caja-hover); }
.um-item .ico { color: var(--pf-texto-3); }
.um-peligro, .um-peligro .ico { color: var(--pf-rojo-texto); }
.um-peligro:hover { background: var(--pf-rojo-fondo); }
.um-version { text-align: center; color: var(--pf-texto-3); font-size: max(12px, 11px); padding: 8px 0 4px; }   /* §18: 4.5:1 */
.salir {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--pf-azul);
  border: 1px solid var(--pf-azul-borde); border-radius: 8px;
  padding: 6px 14px; font-size: 13px;
}
.salir:hover { background: var(--pf-azul-fondo); }
.lateral-pie { display: flex; align-items: center; gap: 8px; }
.liga-perfil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--pf-borde); border-radius: 8px;
  color: var(--pf-texto-2); text-decoration: none;
}
.liga-perfil:hover { color: var(--pf-azul); border-color: var(--pf-azul-borde); background: var(--pf-azul-fondo); }
.version-lateral { margin-left: auto; font-size: max(12px, 11px); color: var(--pf-texto-3); }   /* §18: 4.5:1 */
.form-perfil label { display: block; font-size: .82rem; font-weight: 600; margin: 12px 0 5px; color: var(--pf-titulo); }
.form-perfil input {
  width: 100%; padding: 10px 12px; font-size: 1rem;
  border: 1px solid var(--pf-borde); border-radius: 9px; background: var(--pf-caja-suave);
}
.form-perfil input:focus { outline: 2px solid var(--pf-azul); border-color: var(--pf-azul); }
/* Preferencias de "Cómo veo el sistema" (Mi perfil): casilla + explicación, target táctil ≥36 px */
.form-perfil .pref-check { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0 0; font-weight: 400; cursor: pointer; }
/* v0.462: el radio de "Mis avisos" va del mismo tamaño que la casilla — mismo target táctil y misma línea base */
.form-perfil .pref-check input[type=checkbox],
.form-perfil .pref-check input[type=radio] { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; margin: 9px 0 0; accent-color: var(--pf-azul); cursor: pointer; }
.pref-check > span { display: block; min-height: 36px; }
.pref-check b { display: block; font-size: .9rem; color: var(--pf-titulo); }
.pref-check i { display: block; margin-top: 3px; font-style: normal; font-size: .82rem; line-height: 1.45; color: var(--pf-texto-2); }

/* Submenú contextual: segundo panel a la derecha del menú */
.submenu {
  flex: 0 0 208px;
  background: var(--pf-caja-suave);
  border-right: 1px solid var(--pf-borde);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--pf-borde-fuerte) transparent;
  padding: 18px 0;
}
.submenu-cab { display: flex; align-items: center; padding: 0 10px 0 0; }
.submenu-titulo {
  color: var(--pf-texto-3); font-size: max(12px, 11px); letter-spacing: .09em;
  text-transform: uppercase; padding: 0 18px; margin-bottom: 8px; flex: 1;
}
.sub-esconde, .sub-muestra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; cursor: pointer; border-radius: 7px;
  background: none; border: none; color: var(--pf-texto-3); margin-bottom: 8px;
}
.sub-esconde:hover, .sub-muestra:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
.sub-muestra { display: none; }
@media (min-width: 861px) {
  /* colapso a riel delgado: el título queda de canto y todo el riel expande */
  html.sub-oculto .submenu { flex-basis: 34px; padding: 10px 0; cursor: pointer; }
  html.sub-oculto .submenu nav, html.sub-oculto .submenu .submenu-cab { display: none; }
  html.sub-oculto .sub-muestra {
    display: flex; flex-direction: column; gap: 8px; width: 100%; height: auto;
    padding: 6px 0;
  }
  html.sub-oculto .sub-muestra i {
    font-style: normal; font-size: max(12px, 10.5px); letter-spacing: .08em; text-transform: uppercase;
    writing-mode: vertical-rl; transform: rotate(180deg);
  }
}
@media (max-width: 860px) {
  .sub-esconde, .sub-muestra { display: none !important; }
}
.submenu-item {
  display: block; text-decoration: none;
  color: var(--pf-texto-2); font-size: 13.5px;
  padding: 8px 15px; border-left: 3px solid transparent;
}
.submenu-item i { display: block; font-style: normal; font-size: max(12px, 11.5px); color: var(--pf-texto-3); }
.submenu-item:hover { color: var(--pf-titulo); background: var(--pf-caja-hover); }
.submenu-item.sub { padding-left: 30px; font-size: 12.5px; padding-top: 5px; padding-bottom: 5px; }
/* 12-oct-2026: un conteo («9», «18») va a la derecha en el mismo renglón, no debajo del nombre */
.submenu-item.con-n { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.submenu-item.con-n i { display: inline; font-variant-numeric: tabular-nums; }
.pr-anexo { scroll-margin-top: 70px; }
.submenu-item.activo {
  color: var(--pf-azul-fuerte); background: var(--pf-azul-fondo);
  border-left-color: var(--pf-azul); font-weight: 600;
}

.contenido {
  flex: 1 1 auto; min-width: 0;
  padding: 26px 30px 10px;
  display: flex; flex-direction: column;
}
.contenido > *:not(.pie) { flex-shrink: 0; }

.titulo { font-size: 1.45rem; color: var(--pf-titulo); margin-bottom: 4px; }
.sub-titulo { font-size: .95rem; color: var(--pf-texto-3); font-weight: 400; }
.saludo { color: var(--pf-texto-3); margin-bottom: 20px; }
/* Destacar SIN negritas (Pablo 12-sep: "bold lo menos posible; prefiero subir el tamaño de letra").
   Un punto más de tamaño y el color de título pesan lo mismo que un bold y no manchan el párrafo. */
.clave { font-size: 1.06em; color: var(--pf-titulo); }
.miga { font-size: .8rem; color: var(--pf-texto-3); margin-bottom: 8px; }
.miga a { color: var(--pf-azul); text-decoration: none; }

/* ================= Componentes ================= */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.kpi {
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px;
  padding: 16px 18px;
}
.kpi b { display: block; font-size: 1.6rem; color: var(--pf-azul); }
.kpi span { font-size: .8rem; color: var(--pf-texto-3); }
.kpi-anillo { display: flex; align-items: center; gap: 12px; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
/* sin esto, la tabla interior fija un min-content y la tarjeta DESBORDA en
   móvil (min-width:auto de los hijos de grid — cazado con la sonda a 390) */
.dos-columnas > * { min-width: 0; }
@media (max-width: 980px) { .dos-columnas { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 14px;
}
.tarjeta h2 { font-size: 1.02rem; color: var(--pf-titulo); margin-bottom: 12px; }
.nota { font-size: .8rem; color: var(--pf-texto-3); margin-bottom: 12px; }
.vacio { color: var(--pf-texto-3); font-size: .9rem; }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th {
  text-align: left; color: var(--pf-texto-3); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 8px 10px; border-bottom: 2px solid var(--pf-borde);
}
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--pf-borde-suave); color: var(--pf-texto); }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* formato §6 y §18: cifras del mismo ancho en toda columna de números */
.tabla a { color: var(--pf-azul); text-decoration: none; }
.tabla a:hover { text-decoration: underline; }
/* Botones dentro de tablas: `.tabla a` pinta el texto azul y le gana a `.ciclo-primaria`/`.boton-lleno` (misma clase + etiqueta):
   el botón "Servicio hecho" de Máquinas salió con letra azul sobre fondo azul marino (contraste 2.1, Pablo 10-sep-2026). */
.tabla a.boton { text-decoration: none; }
.tabla a.ciclo-primaria, .tabla a.boton-lleno, a.ciclo-primaria, a.boton-lleno { color: #fff; }
.tabla-datos th { width: 42%; text-transform: none; font-size: .82rem; letter-spacing: 0; vertical-align: top; }
.nota-inline { display: block; font-size: max(12px, .72rem); color: var(--pf-texto-3); }   /* v0.501 ronda: nunca menos de 12 px */

.barra {
  display: inline-block; vertical-align: middle; width: 70px; height: 8px;
  background: var(--pf-rejilla); border-radius: 4px; margin-right: 8px; overflow: hidden;
}
.barra i { display: block; height: 100%; background: var(--pf-azul); border-radius: 4px; }

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .76rem; font-weight: 600;
}
.chip-gris  { background: var(--pf-rejilla);      color: var(--pf-texto-2); }
.chip-azul  { background: var(--pf-azul-fondo);   color: var(--pf-azul); }
.chip-verde { background: var(--pf-verde-fondo);  color: var(--pf-verde-texto); border: 1px solid var(--pf-verde-borde); }
.chip-ambar { background: var(--pf-ambar-fondo);  color: var(--pf-ambar-texto); border: 1px solid var(--pf-ambar-borde); }
.chip-rojo  { background: var(--pf-rojo-fondo);   color: var(--pf-rojo-texto); border: 1px solid var(--pf-rojo-borde); }
/* ronda 30-sep noche: un chip que es liga (filtros rápidos: Hoy, Esta semana…) medía 21 px de alto en el teléfono */
@media (max-width: 760px), (pointer: coarse) { a.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; margin: 2px 0; } }

/* v0.460: el número del anillo crece con el aro (--anillo-n lo calcula anillo_avance); piso 12 px. */
.anillo-num { font-size: var(--anillo-n, 13px); font-weight: 600; fill: var(--pf-titulo); }
.rejilla-cascos, .rejilla-flota {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px;
}
.casco {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--pf-borde); border-radius: 10px; padding: 10px 12px;
  background: var(--pf-caja-suave);
}
.casco-datos b { display: block; font-size: .95rem; color: var(--pf-titulo); }
.casco-datos span { display: block; font-size: max(12px, .74rem); color: var(--pf-texto-3); }
.casco-datos .chip { margin-top: 4px; }
.casco-liga { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.casco-liga:hover { border-color: var(--pf-azul); box-shadow: 0 4px 14px rgba(28, 28, 30,.08); }

.boton {
  /* 12-oct-2026: inline-flex y centrado — con inline-block + min-height el texto se quedaba arriba y una fila de botones se veía
     desalineada (Competencias y SGI, «← 2025 · 2026 · 2027 →»). Regla: todo botón centra su contenido; una fila, un alto. */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; line-height: 1.25; box-sizing: border-box;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--pf-azul-borde); color: var(--pf-azul); background: var(--pf-caja);
  padding: 9px 16px; border-radius: 9px; font-size: .9rem;
}
.boton:hover { background: var(--pf-azul-fondo); }
.boton-lleno { background: var(--pf-azul-fuerte); color: #fff; border: none; width: 100%; font-weight: 600; min-height: 44px; }
.boton-lleno:hover { background: var(--pf-azul-fuerte-hover); }
.aviso-err {
  background: var(--pf-rojo-fondo); border: 1px solid var(--pf-rojo-borde); color: var(--pf-rojo-texto);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: .9rem;
}
.aviso-ok {
  background: var(--pf-verde-fondo); border: 1px solid var(--pf-verde-borde); color: var(--pf-verde-texto);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: .9rem;
}
/* v0.471: aviso que no bloquea (un dato que no cuadra y lo revisa otra área) */
.aviso-ambar {
  background: var(--pf-ambar-fondo); border: 1px solid var(--pf-ambar-borde); color: var(--pf-ambar-texto);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: .9rem;
}

.filtros {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
/* ronda 30-sep noche: las fechas de los filtros salían sin estilo (22 px de alto en el teléfono) */
.filtros select, .filtros input[type=search], .filtros input[type=text], .filtros input[type=date], .filtros input[type=number] {
  padding: 9px 10px; border: 1px solid var(--pf-borde); border-radius: 8px;
  background: var(--pf-caja); color: var(--pf-texto); font-size: .88rem; min-height: 40px;
}
.filtros input[type=search] { flex: 1; min-width: 160px; }
.filtros select:focus, .filtros input:focus { outline: none; border-color: var(--pf-azul); }
.filtros .boton { min-height: 40px; padding: 7px 14px; }

.paginacion { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: .85rem; color: var(--pf-texto-3); }

.pie {
  text-align: center; color: var(--pf-texto-3); font-size: .75rem;
  padding: 22px 0 16px; margin-top: auto;
}
.pie .version { color: var(--pf-texto-2); }   /* formato §18: 4.5:1 (con --pf-vacio daba 1.9:1) */

/* ================= Ayuda: pestañas y flowcharts ================= */
.pestanas { display: flex; gap: 6px; border-bottom: 1px solid var(--pf-borde); margin-bottom: 18px; }
.pestanas-scroll { overflow-x: auto; overflow-y: hidden; white-space: nowrap; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: var(--pf-borde-fuerte) transparent; }  /* overflow-y: sin él Windows pinta una barra vertical ▲▼ (28-sep) */  /* submenús de Compras/Almacén/Contabilidad (08-sep) */
.pestana {
  text-decoration: none; color: var(--pf-texto-2); font-size: .95rem;
  padding: 10px 18px; border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.pestana:hover { color: var(--pf-titulo); background: var(--pf-caja-hover); }
.pestana.activa {
  color: var(--pf-azul-fuerte); background: var(--pf-caja);
  border-color: var(--pf-borde); font-weight: 600; margin-bottom: -1px; padding-bottom: 11px;
}

/* Flowchart vertical: pasos, decisiones y ramas */
.flujo { display: flex; flex-direction: column; align-items: center; padding: 10px 0 4px; }
.flujo-nodo {
  max-width: 420px; width: 100%; text-align: center;
  border-radius: 10px; padding: 11px 16px; font-size: .88rem; position: relative;
}
.flujo-nodo b { display: block; color: inherit; }
.flujo-nodo small { display: block; font-size: .76rem; opacity: .85; margin-top: 2px; }
.flujo-inicio, .flujo-fin {
  background: var(--pf-verde-fondo); border: 1.5px solid var(--pf-verde-borde);
  color: var(--pf-verde-texto); border-radius: 999px; font-weight: 600; max-width: 220px;
}
.flujo-paso { background: var(--pf-azul-fondo); border: 1.5px solid var(--pf-azul-borde); color: var(--pf-titulo); }
.flujo-decision {
  background: var(--pf-rojo-fondo); border: 1.5px solid var(--pf-rojo-borde); color: var(--pf-rojo-texto);
  border-radius: 14px; font-weight: 600; max-width: 340px;
}
.flujo-decision::before { content: "?"; display: inline-block; margin-right: 6px;
  background: var(--pf-rojo); color: #fff; border-radius: 50%; width: 18px; height: 18px;
  font-size: 12px; line-height: 18px; }
.flujo-modulo { background: var(--pf-ambar-fondo); border: 1.5px dashed var(--pf-ambar-borde); color: var(--pf-ambar-texto); max-width: 340px; }
.flujo-flecha { width: 2px; height: 22px; background: var(--pf-borde-fuerte); position: relative; }
.flujo-flecha::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--pf-borde-fuerte);
}
.flujo-flecha.etiquetada { margin: 2px 0; }
.flujo-etiqueta {
  font-size: max(12px, .72rem); color: var(--pf-texto-3); background: var(--pf-fondo);
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--pf-borde);
  margin: 4px 0;
}
.flujo-ramas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.flujo-rama {
  flex: 1 1 200px; max-width: 260px; text-align: center;
  border: 1px dashed var(--pf-borde-fuerte); border-radius: 10px; padding: 10px 12px;
  font-size: .8rem; color: var(--pf-texto-2); background: var(--pf-caja-suave);
}
.flujo-rama b, .flujo-rama > .clave { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pf-texto-3); margin-bottom: 4px; }
.flujo-nota { font-size: .78rem; color: var(--pf-texto-3); text-align: center; max-width: 460px; margin: 6px auto 0; }
/* Guía: "cómo se hace hoy en el ERP" (lista con aire, 08-sep-2026) */
.ayuda-lista { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; line-height: 1.55; }
.ayuda-lista li { margin: 0 0 8px; }

/* Mapa Nivel 0: módulos alrededor del núcleo */
.mapa-nucleo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px;
}
.mapa-caja {
  border-radius: 12px; padding: 14px 16px; border: 1.5px solid var(--pf-borde);
  background: var(--pf-caja-suave); font-size: .85rem; color: var(--pf-texto-2);
}
.mapa-caja b { display: block; color: var(--pf-titulo); margin-bottom: 4px; }
.mapa-caja.nucleo { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); grid-column: 1 / -1; }
.mapa-caja.nucleo b { color: var(--pf-azul-fuerte); }
.mapa-caja.futuro { border-style: dashed; color: var(--pf-texto-3); }

/* ================= Gantt (patrón iUto + TeamGantt/ClickUp) ================
   Columna izquierda y cabecera de meses STICKY; línea de Hoy; barras con
   relleno de avance; hitos como rombos; grupos plegables. */
.tarjeta-gantt { --gcol: 152px; }
.gtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }   /* 15-oct-2026: a 390 px «Hoy» se salía 100 px de la pantalla */
.gzooms { display: flex; gap: 4px; }
.gzoom {
  text-decoration: none; font-size: .8rem; color: var(--pf-texto-2);
  border: 1px solid var(--pf-borde); border-radius: 999px; padding: 6px 14px;
}
.gzoom.on { background: var(--pf-azul-fondo); border-color: var(--pf-azul); color: var(--pf-azul-fuerte); font-weight: 600; }

/* menú de columnas y "Ver por" (como los PM serios) */
.gver, .gcols-menu select {
  padding: 7px 10px; border: 1px solid var(--pf-borde); border-radius: 999px;
  background: var(--pf-caja); color: var(--pf-texto-2); font-size: .8rem;
}
.gcols { position: relative; }
.gcols > summary {
  list-style: none; cursor: pointer; font-size: .8rem; color: var(--pf-texto-2);
  border: 1px solid var(--pf-borde); border-radius: 999px; padding: 7px 14px;
  display: inline-block; user-select: none;
}
.gcols > summary::-webkit-details-marker { display: none; }
.gcols[open] > summary { border-color: var(--pf-azul); color: var(--pf-azul-fuerte); }
.gcols-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(28, 28, 30, .14); padding: 10px 14px; min-width: 190px;
}
.gcols-menu label {
  display: flex; align-items: center; gap: 8px; font-size: .85rem;
  color: var(--pf-texto); padding: 5px 0; cursor: pointer; white-space: nowrap;
  min-height: 36px; box-sizing: border-box;  /* ronda 20-oct-2026: casilla de Columnas a 36 px de toque */
}
.gficha-t {
  display: block; font-size: max(12px, .74rem); color: var(--pf-texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gwrap {
  overflow: auto; max-height: 74vh;
  border: 1px solid var(--pf-borde); border-radius: 10px; background: var(--pf-caja);
  overscroll-behavior-x: contain;
}
.ginner { position: relative; width: max-content; min-width: 100%; }

.gcab { position: sticky; top: 0; z-index: 6; display: flex; background: var(--pf-caja); }
.gcab-esq {
  position: sticky; left: 0; z-index: 7; flex: 0 0 var(--gcol);
  background: var(--pf-caja); border-bottom: 1px solid var(--pf-borde);
  border-right: 1px solid var(--pf-borde-suave);
}
.gcab-meses { position: relative; height: 30px; border-bottom: 1px solid var(--pf-borde); flex: 0 0 auto; }
.gmes {
  /* overflow: clip (no hidden): con hidden el segmento se vuelve contenedor de scroll y el sticky de la etiqueta la empujaba
     var(--gcol) px a la derecha, al FINAL del trimestre/mes ("T3 '26" caía junto a Hoy = 11 sep; Lili lo leyó como inicio de T3) */
  position: absolute; top: 0; bottom: 0; overflow: hidden; overflow: clip;
  border-left: 1px solid var(--pf-borde-suave);
  display: flex; align-items: center;
}
.gmes span {
  position: sticky; left: calc(var(--gcol) + 6px);
  font-size: 12px; color: var(--pf-texto-3); font-weight: 600; white-space: nowrap; padding: 0 6px;
}

.gcuerpo { position: relative; }
.grejilla { position: absolute; top: 0; bottom: 0; left: var(--gcol); z-index: 0; }
.glinea { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pf-borde-suave); }
.glinea.fuerte { background: var(--pf-borde); }
.ghoy { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pf-rojo); z-index: 2; }
.ghoy i {
  position: absolute; top: 3px; left: 4px; font-style: normal;
  font-size: 12px; font-weight: 600; color: var(--pf-rojo-texto);
  background: var(--pf-rojo-fondo); border: 1px solid var(--pf-rojo-borde);
  border-radius: 4px; padding: 0 5px;
}

.ggrupo-cab {
  position: sticky; left: 0; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px 7px; cursor: pointer; user-select: none; max-width: 100%; min-height: 36px; box-sizing: border-box;   /* ronda 19-oct: medía 32 px */
  background: var(--pf-caja);
}
.ggrupo-cab b { font-size: .82rem; color: var(--pf-titulo); }
.ggrupo-cab i { font-style: normal; font-size: max(12px, .72rem); color: var(--pf-texto-3); }
.gpunto { width: 10px; height: 10px; border-radius: 3px; }
.gflechita { color: var(--pf-texto-3); transition: transform .15s; }
.ggrupo.cerrado .gflechita { transform: rotate(-90deg); }
.ggrupo.cerrado .ggrupo-filas { display: none; }

.gfila { display: flex; align-items: stretch; position: relative; z-index: 1; }
.gficha {
  flex: 0 0 var(--gcol); position: sticky; left: 0; z-index: 3;
  background: var(--pf-caja); border-right: 1px solid var(--pf-borde-suave);
  border-bottom: 1px solid var(--pf-borde-suave);
  padding: 6px 10px; text-decoration: none; min-width: 0;
}
a.gficha:hover .gficha-l { color: var(--pf-azul); }
.gficha-l { display: block; font-weight: 600; font-size: .82rem; color: var(--pf-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gficha-s { display: block; font-size: .75rem; color: var(--pf-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpista { position: relative; height: 36px; flex: 0 0 auto; border-bottom: 1px solid var(--pf-borde-suave); }
.gbar {
  position: absolute; top: 8px; height: 20px; border-radius: 6px; overflow: hidden;
  border: 1.5px solid var(--gc, var(--pf-azul));
  background: color-mix(in srgb, var(--gc, var(--pf-azul)) 14%, #fff);
  /* v0.454.1 (Pablo 12-sep: "el 77% está muy bajo") — centrado con flex, NO con margin.
     La etiqueta era un inline-block y se apoyaba en la LÍNEA BASE de la caja de línea heredada
     (line-height del body), que es más alta que la barra: el hueco de los descendentes la empujaba
     hacia abajo y ningún margin-top lo arregla de verdad. Con flex el centro es el centro. */
  display: flex; align-items: center;
}
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  .gbar { background: var(--pf-azul-fondo); }
}
.gfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gc, var(--pf-azul)); opacity: .85; }
.gbar span { position: relative; z-index: 1; flex: 0 0 auto; margin-left: 4px; padding: 1px 5px; font-size: 12px; font-weight: 600; color: var(--pf-titulo); line-height: 12px; background: rgba(255,255,255,.9); border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* v0.453: raya "plan a hoy" (negra, más alta que la barra) — distinta de la línea roja de Hoy */
.gplan { position: absolute; top: 3px; height: 30px; width: 3px; margin-left: -1.5px; background: var(--pf-titulo); border-radius: 2px; box-shadow: 0 0 0 1.5px #fff; z-index: 3; }
.gleyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -2px 0 10px; font-size: .78rem; color: var(--pf-texto-2); }
.gleyenda span { display: inline-flex; align-items: center; gap: 6px; }
.gleyenda i { display: inline-block; flex: 0 0 auto; }
.gl-real { width: 22px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--pf-azul) 60%, var(--pf-azul-fondo) 60%); border: 1px solid var(--pf-azul); }
.gl-plan { width: 3px; height: 16px; background: var(--pf-titulo); border-radius: 2px; }
.gl-hito { width: 9px; height: 9px; background: var(--pf-rojo); transform: rotate(45deg); border-radius: 2px; margin: 0 2px; }
.gl-hoy { width: 2px; height: 16px; background: var(--pf-rojo); }
.ghito {
  position: absolute; top: 12px; width: 11px; height: 11px; z-index: 2;
  transform: translateX(-5px) rotate(45deg);
  background: var(--pf-rojo); border-radius: 2px; border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--pf-rojo);
}

/* Botón de la esquina: encoge la columna de nombres a solo códigos */
.gcab-esq { display: flex; align-items: flex-end; justify-content: flex-end; padding: 3px; }
.gcol-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; cursor: pointer; border-radius: 7px;
  background: none; border: 1px solid var(--pf-borde); color: var(--pf-texto-3);
}
.gcol-toggle:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
/* El dibujo sigue de 24 px pero el área de toque mide 36 px en todo dispositivo (0.484 B solo en táctil; 16-oct-2026 en todos,
   regla única de tamaños de toque) */
.gcol-toggle { position: relative; } .gcol-toggle::after { content: ""; position: absolute; inset: -6px; }
.gwrap.gcol-mini { --gcol: 56px !important; }
.gcol-mini .gficha-t, .gcol-mini .gficha-s { display: none; }
.gcol-mini .gficha { padding: 6px 6px; }
.gcol-mini .gficha-l { font-size: max(12px, .72rem); }
.gcol-mini .gcol-toggle .ico { transform: rotate(180deg); }
.gcol-mini .ggrupo-cab b { font-size: max(12px, .7rem); }

@media (max-width: 860px) {
  /* el estilo inline (--gcol de "Título") NO manda en el teléfono: la
     columna se fuerza angosta o se come toda la pantalla (Pablo, 28-ago) */
  .tarjeta-gantt .gwrap { --gcol: 96px !important; }
  .gficha-s, .gficha-t { display: none; }
  .gwrap { max-height: 66vh; }
}

/* Sticky titles en tablas largas — la trampa: un contenedor con overflow-x
   crea su propio contexto de scroll y el thead NO se pega al scroll de la
   página. Solución medida por GEOMETRÍA (erp_app.js): cuando la tabla CABE,
   el contenedor recibe .ajusta (overflow visible) y el thead se pega — al
   viewport en desktop y bajo la barra fija (54px) en móvil. Si de verdad
   desborda, conserva su scroll horizontal y ahí no hay sticky posible. */
.tabla-scroll.ajusta { overflow-x: visible; }
/* 26-oct-2026: una tabla de captura (renglones con campos) no pega su encabezado: tapaba el renglón que se está llenando */
.tabla-scroll.ajusta .tabla.tabla-captura thead th, :is(html.con-demo, html.con-vc) .tabla-scroll.ajusta .tabla.tabla-captura thead th { position: static; top: auto; }
.tabla-scroll.ajusta .tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--pf-caja); box-shadow: 0 1px 0 var(--pf-borde);
}
@media (max-width: 860px) {
  .tabla-scroll.ajusta .tabla thead th { top: 54px; }
  /* que las tablas comunes CABAN en 390px: menos aire y barra corta */
  .tabla th, .tabla td { padding: 7px 6px; }
  .tabla { font-size: .82rem; }
  .barra { width: 42px; margin-right: 5px; }
}

/* Historial (atrás/adelante) y deshacer/rehacer — patrón iUto */
.hist-bar { display: flex; align-items: center; gap: 2px; }
.hist-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; cursor: pointer; border-radius: 9px;
  background: none; border: none; color: var(--pf-texto-2);
}
.hist-btn:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
.hist-btn[hidden], .hist-sep[hidden] { display: none; } /* el display: le ganaba al atributo */
.hist-btn:disabled { opacity: .3; cursor: default; }
.hist-btn:disabled:hover { background: none; }
.hist-sep { width: 1px; height: 18px; background: var(--pf-borde); margin: 0 4px; }
/* Arriba a la IZQUIERDA del contenido (donde uno los busca) y sutiles:
   sin tarjeta, iconos apagados que despiertan al pasar. */
.hist-linea { margin: -8px 0 4px -8px; }
.hist-linea .hist-btn { width: 36px; height: 36px; color: var(--pf-texto-3); }   /* §18: 4.5:1 */
.hist-linea .hist-btn:hover { color: var(--pf-titulo); }
.hist-linea .hist-btn:disabled { opacity: .55; color: var(--pf-vacio); }
@media (max-width: 860px) {
  .hist-linea { display: none; } /* en móvil viven en la barra superior */
  .movil-marca { margin-left: 2px; }
  .movil-version { margin-left: auto; }
}

/* El "?" de Ayuda (patrón iUto): arriba a la derecha, con menucito */
.ayuda-wrap { position: relative; }
.ayuda-btn.activo { color: var(--pf-azul-fuerte); background: var(--pf-azul-fondo); }
.ayuda-pop[hidden] { display: none; }
.ayuda-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 95;
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 13px;
  box-shadow: 0 12px 32px rgba(28, 28, 30, .16); padding: 8px; width: 300px;
}
.ayuda-pop .um-item { align-items: flex-start; }
.ayuda-pop .um-item .ico { margin-top: 2px; }
.ayuda-pop .um-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ayuda-pop .um-item b { font-size: 13.5px; color: var(--pf-titulo); }
.ayuda-pop .um-item i { font-style: normal; font-size: 12px; color: var(--pf-texto-3); line-height: 1.35; }
.ayuda-flotante { display: none; }
@media (min-width: 861px) {
  .ayuda-flotante { display: block; position: fixed; top: 12px; right: 14px; z-index: 60; }
  .ayuda-flotante .ayuda-btn {
    background: var(--pf-caja); border: 1px solid var(--pf-borde);
    box-shadow: 0 2px 10px rgba(28, 28, 30, .08); width: 36px; height: 36px;
  }
}
@media (max-width: 860px) {
  .movil-version { margin-left: auto; }
  .movil-top .ayuda-wrap { margin-left: 4px; }
  .movil-top .ayuda-pop { position: fixed; top: 56px; right: 8px; }
}

/* Dependencias (Orden 360°) */
.dep-mini { padding: 3px 10px; font-size: .75rem; min-height: 36px; } /* ronda 21-oct-2026: ningún control bajo 36 px en ningún ancho (antes 23 px en escritorio) */
@media (max-width: 720px) { .dep-mini { min-height: 36px; padding: 6px 12px; font-size: .8rem; } } /* pasada móvil 08-sep: targets ≥36 px */
.dep-form { margin-top: 12px; }
.dep-form select, .dep-form input[type=number], .dep-form input[type=text] {
  padding: 9px 10px; border: 1px solid var(--pf-borde); border-radius: 8px;
  background: var(--pf-caja); color: var(--pf-texto); font-size: .88rem; min-height: 40px;
}

/* ================= Bandas de sistema (versión nueva / offline) ========= */
.erp-banda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 11px 16px; font-size: .88rem; text-align: center;
}
.erp-banda-ver { background: var(--pf-azul-fuerte); color: #fff; }
.erp-banda-ver button {
  margin-left: 10px; cursor: pointer; font-family: inherit; font-weight: 600;
  background: var(--pf-caja); color: var(--pf-azul-fuerte); border: none; border-radius: 8px;
  padding: 6px 14px; font-size: .85rem;
}
.erp-banda-off { background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); border-top: 1px solid var(--pf-ambar-borde); }

/* ================= Buzón de sugerencias (SOTA) ================= */
.sug-lanza {
  display: block; width: 100%; margin: 0 0 10px; cursor: pointer;
  background: var(--pf-azul-fondo); color: var(--pf-azul);
  border: 1px solid var(--pf-azul-borde); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; text-align: left; font-family: inherit;
}
.sug-lanza:hover { background: var(--pf-caja-hover); }

.sug-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10, 20, 35, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sug-modal {
  background: var(--pf-caja); border-radius: 14px; width: min(560px, 96vw);
  max-height: 92vh; overflow-y: auto; box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.sug-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 10px;
}
.sug-hdr h2 { font-size: 1.05rem; color: var(--pf-titulo); }
.sug-x { background: none; border: none; font-size: 26px; line-height: 1; color: var(--pf-texto-3); cursor: pointer; }
.sug-body { padding: 0 20px 20px; }
.sug-tipos { display: flex; gap: 8px; margin-bottom: 12px; }
.sug-tipo {
  flex: 1; cursor: pointer; font-family: inherit; font-size: .88rem;
  background: var(--pf-caja-suave); color: var(--pf-texto-2);
  border: 1.5px solid var(--pf-borde); border-radius: 10px; padding: 10px 8px;
}
.sug-tipo.on { background: var(--pf-azul-fondo); border-color: var(--pf-azul); color: var(--pf-azul-fuerte); font-weight: 600; }
.sug-body textarea {
  width: 100%; padding: 11px 12px; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--pf-borde); border-radius: 9px; background: var(--pf-caja-suave);
  resize: vertical;
}
.sug-body textarea:focus { outline: 2px solid var(--pf-azul); border-color: var(--pf-azul); }
.sug-body textarea.sug-mal { outline: 2px solid var(--pf-rojo); }
.sug-shot { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.sug-cap {
  cursor: pointer; font-family: inherit; font-size: .85rem;
  background: var(--pf-caja); color: var(--pf-azul);
  border: 1px dashed var(--pf-azul-borde); border-radius: 9px; padding: 9px 13px;
}
.sug-cap:hover { background: var(--pf-azul-fondo); }
.sug-prev { width: 100%; }
.sug-prev img {
  max-width: 100%; max-height: 340px; display: block; border-radius: 9px;
  border: 1px solid var(--pf-borde); cursor: zoom-in;
}
.ico { vertical-align: -2px; }
.sug-prevb { display: flex; gap: 8px; margin-top: 6px; }
.sug-prevb button {
  cursor: pointer; font-family: inherit; font-size: .8rem;
  background: var(--pf-caja-suave); color: var(--pf-texto-2);
  border: 1px solid var(--pf-borde); border-radius: 8px; padding: 6px 11px;
}
.sug-ctx { font-size: .78rem; color: var(--pf-texto-3); margin: 8px 0 12px; }
.sug-enviar {
  display: block; width: 100%; cursor: pointer; font-family: inherit;
  background: var(--pf-azul-fuerte); color: #fff; border: none; border-radius: 9px;
  padding: 12px; font-size: .95rem; font-weight: 600; min-height: 44px;
}
.sug-enviar:hover { background: var(--pf-azul-fuerte-hover); }
.sug-enviar:disabled { opacity: .6; cursor: default; }
.sug-b2 {
  display: block; width: 100%; margin-top: 8px; cursor: pointer; font-family: inherit;
  background: none; color: var(--pf-texto-3); border: none; padding: 9px; font-size: .85rem;
}
.sug-b2:hover { color: var(--pf-texto); }

/* Mini-diálogo */
.sug-dlg { margin-bottom: 12px; }
.sug-dlg-q {
  background: var(--pf-azul-fondo); color: var(--pf-titulo); border-radius: 12px 12px 12px 4px;
  padding: 10px 14px; font-size: .9rem; margin-bottom: 8px; max-width: 88%;
}
.sug-dlg-r {
  background: var(--pf-caja-suave); border: 1px solid var(--pf-borde-suave); color: var(--pf-texto);
  border-radius: 12px 12px 4px 12px; padding: 9px 13px; font-size: .88rem;
  margin: 0 0 10px auto; max-width: 88%; width: fit-content;
}
.sug-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.sug-chip {
  cursor: pointer; font-family: inherit; font-size: .9rem; text-align: left;
  background: var(--pf-caja-suave); color: var(--pf-texto);
  border: 1.5px solid var(--pf-borde); border-radius: 10px; padding: 11px 14px;
}
.sug-chip:hover { border-color: var(--pf-azul); background: var(--pf-azul-fondo); }
.sug-gracias { font-size: .95rem; color: var(--pf-texto); margin-bottom: 14px; }
.sug-gracias p { margin-top: 6px; font-size: .88rem; color: var(--pf-texto-2); }
.sug-gracias a { color: var(--pf-azul); }

/* Lavagna de anotación — GRANDE: casi toda la pantalla (sugerencia #3 de
   Pablo: con la ventana chica no se podía dibujar bien). */
.sug-anno {
  background: var(--pf-caja); border-radius: 14px; width: 97vw; height: 96vh;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 60px rgba(0,0,0,.35); padding: 12px 16px;
}
.sug-anno-top { font-size: .9rem; color: var(--pf-titulo); margin-bottom: 8px; }
.sug-anno-stage {
  flex: 1; min-height: 220px; display: flex; align-items: center; justify-content: center;
  background: var(--pf-rejilla); border-radius: 10px; overflow: hidden;
}
.sug-anno-stage canvas { touch-action: none; cursor: crosshair; border-radius: 6px; }
.sug-anno-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sat {
  cursor: pointer; font-family: inherit; font-size: .8rem;
  background: var(--pf-caja-suave); color: var(--pf-texto-2);
  border: 1.5px solid var(--pf-borde); border-radius: 8px; padding: 7px 11px;
}
.sat.on { background: var(--pf-azul-fondo); border-color: var(--pf-azul); color: var(--pf-azul-fuerte); }
.sug-anno-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.sug-anno-cols { display: flex; gap: 6px; }
.sac {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: var(--ac); border: 2px solid var(--pf-borde);
}
.sac.on { border-color: var(--pf-titulo); box-shadow: 0 0 0 2px var(--pf-caja), 0 0 0 4px var(--pf-titulo); }
.sug-anno-undo { display: flex; gap: 6px; }
.sug-anno-undo button {
  cursor: pointer; font-size: 1rem; width: 36px; height: 36px;
  background: var(--pf-caja-suave); border: 1px solid var(--pf-borde); border-radius: 8px;
}
.sug-anno-undo button:disabled { opacity: .4; }
.sug-anno-act { display: flex; justify-content: flex-end; gap: 10px; align-items: center; margin-top: 10px; }
.sug-anno-act .sug-b2 { width: auto; margin: 0; }

/* Sugerencias en Ayuda: tarjetas */
.sug-card {
  border: 1px solid var(--pf-borde); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 12px; background: var(--pf-caja-suave);
}
.sug-card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: .8rem; color: var(--pf-texto-3); }
.sug-card-texto { font-size: .92rem; color: var(--pf-texto); margin-bottom: 8px; }
.sug-card img { max-height: 130px; max-width: 100%; border-radius: 8px; border: 1px solid var(--pf-borde); display: block; margin-bottom: 8px; }
.sug-card details { margin: 6px 0; }
.sug-card summary { cursor: pointer; font-size: .82rem; color: var(--pf-azul); }
.sug-card pre {
  white-space: pre-wrap; font-size: .76rem; background: var(--pf-caja);
  border: 1px solid var(--pf-borde-suave); border-radius: 8px; padding: 10px 12px; margin-top: 6px;
  color: var(--pf-texto-2);
}
.sug-card-resp {
  background: var(--pf-verde-fondo); border: 1px solid var(--pf-verde-borde); color: var(--pf-verde-texto);
  border-radius: 8px; padding: 8px 12px; font-size: .85rem; margin-top: 6px;
}
.sug-card-admin { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sug-card-admin select, .sug-card-admin input {
  font-size: .78rem; padding: 5px 8px; border: 1px solid var(--pf-borde); border-radius: 7px; background: var(--pf-caja);
}
.sug-card-admin input { flex: 1; min-width: 140px; }

/* ================= Login ================= */
.pagina-login {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--pf-fondo);
}
.caja-login {
  background: var(--pf-caja); border-radius: 14px; box-shadow: 0 8px 30px rgba(28, 28, 30,.10);
  padding: 40px 44px; max-width: 400px; width: 92%;
}
.caja-login .login-marca { margin: 0 0 4px; display: flex; justify-content: center; align-items: center; }
/* 21-oct-2026 noche (Rafael): logo de Kratfel | Estela, igual que arriba del menú */
.caja-login .logo-login { width: 170px; height: auto; display: block; flex: 0 0 auto; }
.caja-login .login-marca .marca-raya { height: 26px; margin: 0 10px; }
.caja-login .login-palabra { height: 18px; width: auto; display: block; color: #252e5d; flex: 0 0 auto; }
.caja-login h1 { font-size: 1.15rem; color: var(--pf-titulo); text-align: center; font-weight: 500; }
.caja-login .sub { color: var(--pf-texto-3); margin-bottom: 22px; text-align: center; font-size: .9rem; }
.caja-login label { display: block; font-size: .82rem; font-weight: 600; margin: 14px 0 5px; color: var(--pf-titulo); }
.caja-login input {
  width: 100%; padding: 11px 12px; font-size: 1rem;
  border: 1px solid var(--pf-borde); border-radius: 9px; background: var(--pf-caja-suave);
}
.caja-login input:focus { outline: 2px solid var(--pf-azul); border-color: var(--pf-azul); }
.caja-login .boton { margin-top: 20px; }
.pie-login { margin-top: 18px; text-align: center; font-size: max(12px, .72rem); color: var(--pf-texto-3); }   /* §18: 4.5:1 */

/* ================= Responsive — menú móvil patrón iUto =================
   La hamburguesa (barra superior fija) abre el sidebar como CAJÓN deslizante
   sobre un velo; el submenú contextual se vuelve una fila de chips con
   scroll horizontal. Igual que en iUto: "la barra de pastillas no se leía". */
.movil-top, .velo { display: none; }

@media (max-width: 860px) {
  body { padding-top: 54px; }
  html { scroll-padding-top: 62px; }   /* formato §18 · WCAG 2.4.11: al saltar a un ancla o tabular, el foco no queda debajo de la barra fija */

  /* Barra superior fija: hamburguesa + logo + versión */
  .movil-top {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: 54px; padding: 0 12px;
    background: var(--pf-caja); border-bottom: 1px solid var(--pf-borde);
  }
  .movil-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; cursor: pointer;
    background: none; border: none; color: var(--pf-titulo); border-radius: 10px;
  }
  .movil-menu:active { background: var(--pf-caja-hover); }
  .movil-marca img { width: 104px; display: block; }
  /* v0.477 (Pablo, 18-sep, captura del iPhone): el logo de arriba lleva al Tablero; el área de toque era solo el dibujo (20 px de alto)
     y el dedo caía en la barra. Ahora toda la franja del logo, 44 px de alto, es la liga. */
  .movil-marca { display: flex; align-items: center; align-self: stretch; min-height: 44px; padding: 0 6px; margin: 0 -6px; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
  .movil-marca:active { background: var(--pf-caja-hover); }
  .movil-version { margin-left: auto; font-size: max(12px, 11px); color: var(--pf-texto-3); }   /* §18: 4.5:1 */

  /* El sidebar se vuelve cajón: fijo, fuera de pantalla, entra con la clase */
  .app { flex-direction: column; }
  .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(260px, 72vw); height: 100vh; flex: none;
    border-right: 1px solid var(--pf-borde);
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  }
  body.nav-abierta .lateral { transform: none; }
  body.nav-abierta { overflow: hidden; }

  /* Velo detrás del cajón */
  .velo {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(28, 28, 30, .42);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.nav-abierta .velo { opacity: 1; pointer-events: auto; }

  /* Dentro del cajón: filas grandes para el dedo (iUto: 18px, iconos 25px) */
  .marca { padding: 14px 18px 10px; }
  .marca .marca-logo { width: 112px; }
  .marca .marca-palabra { height: 13px; }
  .lateral-item { font-size: 16.5px; padding: 13px 17px; }
  .lateral-item.proximamente i { font-size: 12px; }
  .lateral-usuario { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* Submenú contextual: fila de chips con scroll horizontal (hmenu de iUto) */
  .submenu {
    position: static; height: auto; flex: none; width: 100%;
    border-right: none; border-bottom: 1px solid var(--pf-borde);
    padding: 8px 10px; background: var(--pf-caja-suave);
  }
  .submenu nav {
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .submenu nav::-webkit-scrollbar { display: none; }
  .submenu-titulo { display: none; }
  .submenu-item {
    flex: 0 0 auto; border-left: none; border: 1px solid var(--pf-borde);
    border-radius: 999px; padding: 8px 14px; min-height: 38px;
    display: inline-flex; align-items: center; background: var(--pf-caja);
  }
  .submenu-item.activo { border-color: var(--pf-azul); }
  .submenu-item i { display: none; }

  .contenido { padding: 18px 14px 8px; }
  .caja-login { padding: 30px 24px; }
  .pagina-login { padding-top: 0; }
}

/* ============================================================
   Piso tipográfico móvil (sug #4, 29/08/2026).
   En el teléfono nada de texto por debajo de ~12px: las micro-etiquetas
   suben un punto sin invertir jerarquía. Este bloque va AL FINAL del
   fichero a propósito: los @media posteriores pisan a los anteriores.
   ============================================================ */
@media (max-width: 860px) {
  .lateral-grupo, .submenu-titulo { font-size: 12px; }
  .lateral-item.proximamente i { font-size: 12px; }
  .um-version, .version-lateral, .movil-version { font-size: 12px; }
  .submenu-item i { font-size: 12.5px; }
  html.sub-oculto .sub-muestra i { font-size: 12px; }
  /* El Gantt scrollea en su propio carril, pero sus rótulos también se leen
     en el teléfono: un punto más y sin negrita extra. */
  .gmes span, .gbar span { font-size: 12px; }
  .gbar span { line-height: 13px; }   /* v0.454.1: con 11px la caja de 12px recortaba los descendentes */
  .ghoy i { font-size: 12px; }
}

/* ---- Seguridad: catálogo de riesgos y checklist por orden (v0.406) ---- */
.seg-h3 { font-size: .9rem; margin: 6px 0 8px; color: var(--pf-titulo); }
.seg-lista { list-style: none; margin: 0; padding: 0; }
.seg-lista li { padding: 8px 0; border-bottom: 1px solid var(--pf-borde); line-height: 1.4; }
.seg-lista li:last-child { border-bottom: none; }
.seg-campo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.seg-campo input[type=text] { flex: 1; min-width: 160px; padding: 6px 8px; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .8rem; }
.seg-check { margin-top: 14px; }
.seg-check > summary { cursor: pointer; color: var(--pf-azul); font-size: .88rem; padding: 6px 0; }
.seg-check[open] > summary { color: var(--pf-azul-fuerte); }
.seg-val-panel { margin-top: 14px; padding: 14px 16px; background: var(--pf-caja-hover); border: 1px solid var(--pf-borde); border-radius: 12px; }
.seg-val-panel[hidden] { display: none; }
.seg-val-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
.seg-val-form .seg-val-titulo { grid-column: 1 / -1; font-size: .85rem; }
.seg-val-form label { display: flex; flex-direction: column; gap: 4px; font-size: max(12px, .74rem); color: var(--pf-texto-2); }
.seg-val-form select, .seg-val-form input[type=text] { width: 100%; box-sizing: border-box; padding: 9px 10px; min-height: 40px; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--pf-caja); }
.seg-val-form .seg-val-acciones { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg-tabla td { vertical-align: top; }
.seg-resaltado > td { background: var(--pf-ambar-fondo); }
@media (max-width: 720px) {
  .seg-val-form { grid-template-columns: 1fr; }
}
.seg-val-acciones .boton-lleno { width: auto; padding: 0 18px; }
.seg-tabla .dep-mini, .seg-campo .dep-mini { min-height: 36px; padding: 6px 12px; font-size: .8rem; }
@media (max-width: 720px) { .seg-campo input[type=text] { flex-basis: 100%; } }

/* ---- Protocolo HAT/SAT + portal del cliente (v0.408) ---- */
.pr-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.pr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--pf-texto-2); margin-left: 6px; }
.pr-toggle input { width: 18px; height: 18px; }
.pr-guardado { margin-left: auto; font-size: .78rem; color: var(--pf-verde-texto); background: var(--pf-verde-fondo); border: 1px solid var(--pf-verde-borde); border-radius: 999px; padding: 4px 12px; }
.pr-guardado.err { color: var(--pf-rojo-texto); background: var(--pf-rojo-fondo); border-color: var(--pf-rojo-borde); }
.pr-rojo { color: var(--pf-rojo-texto); }
.pr-in { width: 100%; box-sizing: border-box; padding: 8px 10px; min-height: 38px; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--pf-caja); }
.pr-in:focus { outline: none; border-color: var(--pf-azul); }
textarea.pr-in { min-height: 60px; resize: vertical; }
.pr-tabla td { vertical-align: top; }
.pr-tabla tr.pr-grupo td { background: var(--pf-caja-hover); }
.pr-tabla tr.pr-fila-nc td { background: var(--pf-rojo-fondo); }
.pr-chips { display: flex; gap: 6px; flex-wrap: nowrap; }
.pr-tabla td.pr-td-chips { min-width: 176px; }
@media (max-width: 480px) { .pr-chips { flex-wrap: wrap; } .pr-tabla td.pr-td-chips { min-width: 0; } }
.pr-chip { cursor: pointer; border: 1px solid transparent; font: inherit; font-size: .78rem; font-weight: 600; min-height: 36px; padding: 6px 12px; }
.pr-chip.chip-gris { opacity: .75; }
.pr-chip.activo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pf-azul); opacity: 1; }
.pr-obs-lab { display: block; margin-top: 14px; font-size: .8rem; color: var(--pf-texto-2); }
.pr-obs-lab textarea, .pr-obs-lab div { margin-top: 6px; color: var(--pf-texto); }
.pr-texto p { margin: 6px 0; line-height: 1.5; }
.pr-cond { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; margin: 12px 0; }
.pr-cond label { display: flex; flex-direction: column; gap: 4px; font-size: max(12px, .74rem); color: var(--pf-texto-2); }
.pr-cond label b { color: var(--pf-texto); font-size: .9rem; }
.pr-grid th:first-child { text-align: left; text-transform: none; font-size: .8rem; letter-spacing: 0; white-space: normal; min-width: 150px; }
.pr-grid td { min-width: 84px; text-align: center; }
.pr-grid .pr-celda { text-align: center; min-height: 36px; padding: 6px; }
.pr-prueba-pie { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-top: 16px; align-items: start; }
.pr-firmas { margin-top: 18px; border-top: 1px solid var(--pf-borde); padding-top: 12px; }
.pr-firmas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pr-firma { border: 1px solid var(--pf-borde); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--pf-caja); }
.pr-firma-img { max-height: 80px; max-width: 100%; align-self: flex-start; }
.pr-firma-mini { max-height: 40px; }
.pr-firma-papel { font-style: italic; color: var(--pf-texto-3); font-size: .85rem; }
.pr-firma-nombre { font-weight: 600; }
.pr-pad { position: relative; border: 1px dashed var(--pf-azul); border-radius: 10px; background: var(--pf-caja-suave); touch-action: none; }
.pr-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.pr-pad-hint { position: absolute; left: 12px; bottom: 8px; font-size: .75rem; color: var(--pf-texto-3); pointer-events: none; }
.pr-pad.con-trazo .pr-pad-hint { display: none; }
.pr-firma-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-firma-acciones .boton-lleno { width: auto; padding: 0 18px; }
.pr-anexo { border: 1px solid var(--pf-borde); border-radius: 12px; padding: 14px; margin: 12px 0; background: var(--pf-caja); }
.pr-anexo .seg-h3 { margin-top: 0; }
.pr-anexo-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.pr-anexo-meta label { display: flex; flex-direction: column; gap: 4px; font-size: max(12px, .74rem); color: var(--pf-texto-2); }
.pr-anexo-meta label b, .pr-anexo-meta label div { color: var(--pf-texto); font-size: .88rem; }
.pr-anexo-meta .pr-anexo-resumen { grid-column: 1 / -1; }
.pr-archivos { list-style: none; margin: 8px 0; padding: 0; }
.pr-archivos li { padding: 6px 0; border-bottom: 1px solid var(--pf-borde); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0; }
.pr-galeria figure { margin: 0; }
.pr-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--pf-borde); background: var(--pf-rejilla); }
.pr-galeria figcaption { font-size: .76rem; color: var(--pf-texto-2); margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.pr-galeria figcaption .pr-in { min-height: 32px; padding: 5px 8px; font-size: .78rem; }
.pr-subir { cursor: pointer; display: inline-block; }
.pr-comentarios .pr-com-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.pr-com-lista li { padding: 10px 12px; border: 1px solid var(--pf-borde); border-radius: 12px; margin-bottom: 8px; background: var(--pf-caja); }
.pr-com-lista li.atendido { opacity: .6; }
.pr-com-lista li p { margin: 6px 0; white-space: pre-wrap; }
.pr-com-form { display: flex; flex-direction: column; gap: 8px; }
.pr-com-form .boton { align-self: flex-start; }
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pt-avance { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pt-avance .kpi { margin: 0; }
.pt-datos { font-size: .88rem; line-height: 1.6; }
.pt-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pt-acciones .boton-lleno { width: auto; padding: 0 18px; }
@media (max-width: 820px) {
  .pr-firmas-grid, .pr-prueba-pie, .pt-grid { grid-template-columns: 1fr; }
  .pr-guardado { margin-left: 0; }
}

/* ===== Evidencia fotográfica (protocolo HAT/SAT) ===== */
.pr-ambar { color: var(--pf-ambar-texto); }
.kpis-mini .kpi { padding: 10px 12px; } .kpis-mini .kpi b { font-size: 1.3rem; }
.ev-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.ev-filtros .pr-in { width: auto; min-width: 150px; flex: 1 1 150px; }
.ev-filtros input[type=search] { flex: 2 1 220px; }
.ev-filtros .ev-subir { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ev-grupo { margin: 14px 0 6px; }
.ev-grupo .seg-h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 8px 0; }
.ev-grid-mini { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ev-card { margin: 0; background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.ev-card:hover, .ev-card:focus-visible { box-shadow: 0 4px 16px rgba(0, 0, 0, .14); transform: translateY(-1px); outline: none; }
.ev-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--pf-rejilla); }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-ref { position: absolute; left: 6px; top: 6px; background: rgba(28, 28, 30, .85); color: #fff; font-size: .75rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; letter-spacing: .02em; }
.ev-ref small { font-weight: 500; opacity: .85; }
.ev-mark { position: absolute; right: 6px; top: 6px; background: var(--pf-caja); color: var(--pf-rojo-texto); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ev-com { position: absolute; right: 6px; bottom: 6px; background: var(--pf-ambar); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
.ev-flag { position: absolute; left: 6px; bottom: 6px; font-size: .75rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; color: #fff; }
.ev-flag-hall { background: var(--pf-rojo); } .ev-flag-corr { background: var(--pf-verde); }
.ev-card figcaption { padding: 8px 10px 10px; display: grid; gap: 4px; }
.ev-pie { font-size: .82rem; line-height: 1.3; color: var(--pf-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-meta { font-size: max(12px, .72rem); color: var(--pf-texto-2); }
.ev-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ev-chips .chip { font-size: max(12px, .68rem); padding: 2px 7px; min-height: 0; }
.ev-tipo-hallazgo { background: var(--pf-rojo-fondo); color: var(--pf-rojo-texto); } .ev-tipo-correccion { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); } .ev-tipo-medicion { background: var(--pf-azul-fondo); color: var(--pf-azul); }
.ev-th { width: 44px; text-align: center; } .ev-td { text-align: center; vertical-align: middle; }
.ev-rubro-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; min-width: 40px; padding: 4px 8px; border-radius: 10px; border: 1px dashed var(--pf-borde); background: var(--pf-caja); color: var(--pf-texto-2); cursor: pointer; font: inherit; }
.ev-rubro-btn.con-fotos { border-style: solid; border-color: var(--pf-azul); color: var(--pf-azul); background: var(--pf-azul-fondo); }
.ev-rubro-btn.con-hallazgo { border-color: var(--pf-rojo); color: var(--pf-rojo-texto); background: var(--pf-rojo-fondo); }
.ev-rubro-btn b { font-size: .8rem; }
body.ev-abierto { overflow: hidden; }
.ev-visor { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 16, 26, .92); display: flex; align-items: stretch; justify-content: center; padding: 0; }
.ev-visor-caja { display: grid; grid-template-columns: 1fr 380px; width: 100%; height: 100%; }
.ev-visor-img { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 12px 56px; }
.ev-lienzo { position: relative; max-width: 100%; max-height: 100%; display: inline-block; line-height: 0; }
.ev-lienzo img { max-width: calc(100vw - 380px - 112px); max-height: calc(100vh - 24px); width: auto; height: auto; display: block; border-radius: 6px; background: #000; }
.ev-lienzo canvas { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
.ev-lienzo canvas.activa { pointer-events: auto; cursor: crosshair; }
.ev-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; cursor: pointer; }
.ev-nav:hover { background: rgba(255,255,255,.25); } .ev-prev { left: 8px; } .ev-next { right: 8px; }
.ev-herr { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--pf-caja); border-radius: 12px; padding: 6px 8px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: calc(100% - 24px); }
.ev-herr button { font: inherit; border: 1px solid var(--pf-borde); background: var(--pf-caja); border-radius: 8px; padding: 6px 9px; cursor: pointer; min-height: 36px; }
.ev-herr button.activo { border-color: var(--pf-azul); background: var(--pf-azul-fondo); color: var(--pf-azul); font-weight: 600; }
.ev-herr button.boton-lleno { background: var(--pf-azul); color: #fff; border-color: var(--pf-azul); }
.ev-compara { position: absolute; left: 60px; top: 14px; width: 150px; background: var(--pf-caja); border-radius: 10px; padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: .75rem; text-align: center; color: #333; }
.ev-compara img { width: 100%; border-radius: 6px; display: block; }
.ev-panel { background: var(--pf-caja); display: flex; flex-direction: column; min-height: 0; }
.ev-panel header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--pf-borde); font-size: 1rem; }
.ev-panel header b { font-size: 1.05rem; }
.ev-cerrar { margin-left: auto; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--pf-texto-2); min-width: 40px; min-height: 40px; }
.ev-panel-cuerpo { padding: 12px 14px 20px; overflow: auto; flex: 1; font-size: .86rem; }
.ev-lab { display: block; font-size: max(12px, .74rem); color: var(--pf-texto-2); margin: 8px 0; }
.ev-lab .pr-in { margin-top: 3px; font-size: .84rem; min-height: 36px; }
.ev-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ev-pie-g { font-size: .95rem; font-weight: 600; margin: 4px 0 10px; line-height: 1.35; }
.ev-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 6px 0; font-size: .8rem; }
.ev-dl dt { color: var(--pf-texto-2); } .ev-dl dd { margin: 0; overflow-wrap: anywhere; }
.ev-meta-det { margin: 8px 0; border: 1px solid var(--pf-borde); border-radius: 10px; padding: 6px 10px; }
.ev-meta-det summary { cursor: pointer; font-weight: 600; font-size: .8rem; color: var(--pf-texto-2); }
.ev-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--pf-borde); }
.ev-acciones .boton { min-height: 36px; } .ev-peligro { color: var(--pf-rojo-texto); margin-left: auto; }
.ev-subir-mas { cursor: pointer; }
.ev-coms h4 { margin: 12px 0 6px; font-size: .9rem; }
.ev-com-lista { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.ev-com-lista li { background: var(--pf-caja-hover); border-radius: 10px; padding: 8px 10px; }
.ev-com-lista li.atendido { opacity: .7; } .ev-com-lista li p { margin: 4px 0; }
.ev-com-form { display: grid; gap: 6px; }
.ev-selector { border: 2px solid var(--pf-azul); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: var(--pf-caja-suave); }
.pt-ev { display: grid; gap: 10px; margin-top: 6px; }
.pt-ev-sec b { font-size: .82rem; }
.pt-ev-tira { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 8px; -webkit-overflow-scrolling: touch; }
.pt-ev-foto { position: relative; flex: 0 0 132px; border-radius: 10px; overflow: hidden; border: 1px solid var(--pf-borde); }
.pt-ev-foto img { width: 132px; height: 99px; object-fit: cover; display: block; }
.pt-ev-foto span { position: absolute; left: 5px; top: 5px; background: rgba(28, 28, 30, .85); color: #fff; font-size: .75rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; }
.pt-ev-mas { flex: 0 0 72px; display: grid; place-items: center; border-radius: 10px; background: var(--pf-caja-hover); font-weight: 600; color: var(--pf-azul); text-decoration: none; }
@media (max-width: 900px) {
  .ev-visor-caja { grid-template-columns: 1fr; grid-template-rows: minmax(40vh, 52vh) 1fr; }
  .ev-visor-img { padding: 8px 44px; }
  .ev-lienzo img { max-width: calc(100vw - 88px); max-height: calc(52vh - 16px); }
  .ev-nav { width: 36px; height: 56px; font-size: 1.6rem; }
  .ev-compara { left: 44px; width: 96px; }
  .ev-panel { border-radius: 16px 16px 0 0; }
  .ev-dos { grid-template-columns: 1fr; }
}
.ev-visor[hidden], .ev-herr[hidden], .ev-compara[hidden], .ev-card[hidden], .ev-grupo[hidden] { display: none !important; }

.pt-pares { margin-top: 10px; } .pt-pares summary { cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--pf-azul); padding: 6px 0; }
.pt-pares .tabla { font-size: .8rem; } .pt-pares .chip { font-size: max(12px, .68rem); padding: 2px 7px; min-height: 0; }
/* las tiras de fotos del portal no deben empujar el ancho de la página (min-width:auto de grid/flex) */
.pt-emb, .pt-grid, .pt-col, .pt-ev, .pt-ev-sec { min-width: 0; max-width: 100%; }
.pt-ev-tira { max-width: 100%; }

.av-curva-wrap { margin: 8px 0 4px; overflow-x: auto; }
.av-curva { display: block; max-width: 100%; }
.av-bitacora { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .84rem; }
.av-aprobar { display: grid; gap: 4px; min-width: 200px; } .av-aprobar .boton { min-height: 36px; }
.av-notas { max-width: 320px; font-size: .78rem; }

/* ---- Gantt de seguimiento contra baseline (portal, baseline, embarcación) ---- */
.av-gantt-wrap{overflow-x:auto;margin:10px 0 4px;min-width:0}
.av-gantt{min-width:760px;display:block;font-family:inherit}
.av-gantt .av-g-eje text{fill:var(--pf-texto-3)}
.av-gantt .av-g-mes{stroke:var(--pf-rejilla)}
.av-gantt .av-g-anio{stroke:var(--pf-borde)}
.av-gantt .av-g-banda{fill:var(--pf-caja-suave)}
.av-gantt .av-g-fila:hover .av-g-banda{fill:var(--pf-caja-hover)}
.av-gantt .av-g-lab{font-size:12px;fill:var(--pf-titulo)}
.av-gantt .av-g-sub .av-g-lab{font-size:12px;fill:var(--pf-texto-3)}
.av-gantt a .av-g-lab{fill:var(--pf-azul-claro);text-decoration:underline;cursor:pointer}
.av-gantt .av-g-plan{fill:var(--pf-borde-suave);stroke:var(--pf-borde-fuerte);stroke-width:.8}
.av-gantt .av-g-real{fill:var(--pf-verde)}
.av-gantt .av-g-real.av-g-alerta{fill:var(--pf-ambar)}
.av-gantt .av-g-real.av-g-mal{fill:var(--pf-rojo)}
.av-gantt .av-g-prog{stroke:var(--pf-azul-claro);stroke-width:2}
.av-gantt .av-g-blo{fill:var(--pf-rojo)}
.av-gantt .av-g-val{font-size:12px;fill:var(--pf-titulo)}
.av-gantt .av-g-dim{fill:var(--gr-plan)}
.av-gantt .av-g-svt{font-size:12px;font-weight:600;fill:var(--pf-verde-texto)}
.av-gantt .av-g-svt.av-g-alerta{fill:var(--pf-ambar-texto)}
.av-gantt .av-g-svt.av-g-mal{fill:var(--pf-rojo-texto)}
.av-gantt .av-g-svt.av-g-nada{fill:var(--gr-plan);font-weight:400}
.av-gantt .av-g-hoy{stroke:var(--pf-ambar);stroke-width:1.5;stroke-dasharray:3 3}
.av-gantt .av-g-hoy-lab{font-size:12px;fill:var(--pf-ambar-texto)}
.av-gantt .av-g-linea{fill:none;stroke:var(--pf-rojo);stroke-width:1.6;opacity:.85}
.av-gantt .av-g-linea-pt{fill:#fff;stroke:var(--pf-rojo);stroke-width:1.4}
.av-g-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem;color:var(--pf-texto-3);margin-top:6px}
.av-g-leyenda span{display:inline-flex;align-items:center;gap:5px}
.av-g-leyenda i{display:inline-block;width:18px;height:9px;border-radius:2px}
.av-g-leyenda .av-g-l-plan{background:var(--pf-borde-suave);border:1px solid var(--pf-borde-fuerte)}
.av-g-leyenda .av-g-l-real{background:var(--pf-verde)}
.av-g-leyenda .av-g-l-prog{width:2px;height:12px;background:var(--pf-azul-claro)}
.av-g-leyenda .av-g-l-hoy{width:0;height:13px;border-radius:0;border-left:2px dashed var(--pf-ambar)}
.av-g-leyenda .av-g-l-linea{width:18px;height:0;border-top:2px solid var(--pf-rojo)}
.av-g-leyenda .av-g-l-ok{background:var(--pf-verde);width:12px}
.av-g-leyenda .av-g-l-alerta{background:var(--pf-ambar);width:12px}
.av-g-leyenda .av-g-l-mal{background:var(--pf-rojo);width:12px}
.av-g-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.av-g-cab .boton{padding:5px 12px;font-size:.8rem}

/* ================= Ciclo de vida de la orden (v0.412) ================= */
.ciclo-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ciclo-primaria { background: var(--pf-azul-fuerte); color: #fff; border-color: var(--pf-azul-fuerte); font-weight: 600; }
.ciclo-primaria:hover { background: var(--pf-azul-fuerte-hover); }
.ciclo-form { margin-top: 10px; padding: 14px 16px; background: var(--pf-caja-hover); border: 1px solid var(--pf-borde); border-radius: 12px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 14px; align-items: end; }
.ciclo-form[hidden] { display: none !important; }
.ciclo-form .ciclo-titulo, .ciclo-form .nota, .ciclo-form .ciclo-acciones, .ciclo-form .ciclo-check { grid-column: 1 / -1; }
.ciclo-form label { display: flex; flex-direction: column; gap: 4px; font-size: max(12px, .74rem); color: var(--pf-texto-2); }
.ciclo-form label.ciclo-check { flex-direction: row; align-items: center; gap: 8px; font-size: .82rem; }
.ciclo-form input[type=text], .ciclo-form input[type=search], .ciclo-form input[type=number], .ciclo-form select, .ciclo-form input[type=date] {   /* v0.505: el buscador de quién recibe (type=search) quedaba sin estilo y con 22 px de alto */
  width: 100%; box-sizing: border-box; padding: 9px 10px; min-height: 40px; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--pf-caja); }
.ciclo-form .ciclo-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-check, #lib-todas, .cand-check { display: inline-block; width: 24px; height: 24px; vertical-align: middle; }
.lib-btn { min-height: 36px; padding: 6px 14px; font-size: .82rem; }
.lib-fila-ok td { background: var(--pf-verde-fondo); }
.plan-item-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-item-form input[type=number] { width: 70px; padding: 6px 8px; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .8rem; }
.plan-item-form input[type=text] { flex: 1; min-width: 120px; padding: 6px 8px; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .8rem; }
.plan-cab { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.permiso-check td label { display: inline-flex; gap: 4px; align-items: center; margin-right: 10px; font-size: .8rem; white-space: nowrap; }

/* Evidencias por orden */
.ev-orden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ev-orden { display: block; text-decoration: none; color: var(--pf-texto-2); background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 10px; overflow: hidden; }
.ev-orden img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ev-orden-pdf { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; background: var(--pf-caja-hover); font-weight: 600; color: var(--pf-azul); }
.ev-orden-pie { display: block; padding: 6px 8px; font-size: max(12px, .72rem); line-height: 1.3; }

/* Mi producción (09-sep-2026): tarjetas de piso del supervisor, acciones ≥36 px para dedo */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.mp-card { border: 1px solid var(--pf-borde); border-left: 4px solid var(--pf-borde); border-radius: 12px; padding: 12px 14px; background: var(--pf-caja); min-width: 0; }
.mp-card.mp-en_ejecucion { border-left-color: var(--pf-verde); }
.mp-card.mp-pausada { border-left-color: var(--pf-ambar); }
.mp-card.mp-bloqueada, .mp-card.mp-reproceso { border-left-color: var(--pf-rojo); }
.mp-card.mp-asignada, .mp-card.mp-liberada { border-left-color: var(--pf-azul); }
.mp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.mp-act { font-weight: 600; font-size: .92rem; line-height: 1.3; margin-bottom: 6px; }
.mp-meta { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--pf-texto-2); margin-bottom: 6px; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mp-chips a.chip { text-decoration: none; }
.mp-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-acc .boton { min-height: 36px; padding: 6px 12px; font-size: .8rem; }
.mp-card .ciclo-form { margin-top: 8px; }

/* ================= Cabecera v0.430 (09-sep-2026): lupa · campana · "?" (patrón iUto) ================= */
.cab-acciones { display: flex; align-items: center; gap: 4px; }
.cab-btn { position: relative; }
.cab-btn.con-nuevos { color: var(--pf-titulo); }
.cab-btn.tin { animation: cab-tin .8s ease; }
@keyframes cab-tin { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.notif-badge {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--pf-rojo-texto); color: #fff; font-size: 12px; font-weight: 600;
  line-height: 17px; text-align: center; border: 2px solid var(--pf-caja); box-sizing: content-box;
}
.notif-badge[hidden] { display: none; }
.ayuda-btn.con-punto { position: relative; }
.cab-punto { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-azul-fuerte); border: 2px solid var(--pf-caja); }
.chip-nuevo { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  background: var(--pf-azul-fondo); color: var(--pf-azul-fuerte); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 861px) {
  .ayuda-flotante .cab-acciones { background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px; padding: 3px; box-shadow: 0 2px 10px rgba(28, 28, 30, .08); }
  .ayuda-flotante .ayuda-btn, .ayuda-flotante .cab-btn { background: none; border: none; box-shadow: none; width: 36px; height: 36px; }   /* ronda 19-oct: toque 36 px */
  .ayuda-flotante .hist-btn:hover { background: var(--pf-caja-hover); }
}
@media (max-width: 860px) {
  .movil-top .cab-acciones { margin-left: auto; }   /* v0.489.2: sin logo, los botones se van a la derecha */
  .movil-top .cab-btn, .movil-top .ayuda-btn { width: 38px; height: 38px; }
  .movil-version { display: none; } /* la versión vive en el menú y en el pie; en 390 px no cabe con tres botones */
}

/* ── Búsqueda global (paleta Ctrl+K) ── */
.buscar-velo[hidden] { display: none; }
.buscar-velo { position: fixed; inset: 0; z-index: 1100; background: rgba(10, 20, 35, .5); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 12px 12px; }
.buscar-caja { width: min(680px, 100%); max-height: 84vh; display: flex; flex-direction: column; background: var(--pf-caja); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); overflow: hidden; }
.buscar-input-fila { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--pf-borde); color: var(--pf-texto-3); }
.buscar-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 1.05rem; color: var(--pf-titulo); padding: 6px 0; }
.buscar-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscar-cerrar { cursor: pointer; font: inherit; font-size: max(12px, 11px); font-weight: 600; color: var(--pf-texto-3); background: var(--pf-caja-suave); border: 1px solid var(--pf-borde); border-radius: 6px; padding: 3px 7px; }
.buscar-resultados { overflow-y: auto; padding: 6px; min-height: 120px; -webkit-overflow-scrolling: touch; }
.buscar-resultados.cargando { opacity: .55; }
.buscar-grupo { padding: 4px 0 6px; }
.buscar-grupo-t { display: flex; align-items: center; gap: 6px; margin: 6px 8px 4px; font-size: max(12px, 11px); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--pf-texto-3); }
.buscar-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--pf-texto); min-height: 44px; }
.buscar-item.sel, .buscar-item:hover { background: var(--pf-azul-fondo); }
.buscar-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--pf-caja-suave); color: var(--pf-texto-2); }
.buscar-item.sel .buscar-ico { background: var(--pf-caja); color: var(--pf-azul-fuerte); }
.buscar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.buscar-txt b { font-weight: 600; font-size: 14px; color: var(--pf-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscar-txt small { font-size: 12px; color: var(--pf-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscar-txt mark, .buscar-item mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.buscar-chip { flex: none; font-style: normal; font-size: max(12px, 11px); color: var(--pf-texto-2); background: var(--pf-caja-suave); border: 1px solid var(--pf-borde); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.buscar-pista, .buscar-nada { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 12px; color: var(--pf-texto-3); font-size: 13px; }
.buscar-pista { flex-direction: row; justify-content: center; text-align: left; }
.buscar-nada b { color: var(--pf-titulo); font-size: 14px; }
.buscar-nada .buscar-item { margin-top: 8px; width: 100%; box-sizing: border-box; text-align: left; }
.buscar-pie { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--pf-borde); font-size: max(12px, 11.5px); color: var(--pf-texto-3); background: var(--pf-caja-suave); }
.buscar-pie-pistas { margin-left: auto; }
.buscar-pie b { color: var(--pf-texto-2); }
@media (max-width: 720px) {
  .buscar-velo { padding: 0; align-items: stretch; }
  .buscar-caja { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .buscar-input { font-size: 16px; } /* iOS no hace zoom con ≥16px */
  .buscar-pie { display: none; }
  .buscar-txt b, .buscar-txt small { white-space: normal; }
}

/* ── Campana: panel de avisos ── */
.notif-velo[hidden], .notif-panel[hidden] { display: none; }
.notif-velo { position: fixed; inset: 0; z-index: 1040; background: transparent; }
.notif-panel {
  position: fixed; top: 58px; right: 14px; z-index: 1050; width: min(420px, calc(100vw - 20px)); max-height: min(70vh, 640px);
  display: flex; flex-direction: column; background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(28, 28, 30, .2); overflow: hidden;
}
.notif-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--pf-borde); }
.notif-cab > b { font-size: 14.5px; color: var(--pf-titulo); }
.notif-cab-acc { display: flex; align-items: center; gap: 4px; }
.notif-tab { cursor: pointer; font: inherit; font-size: 12.5px; color: var(--pf-texto-2); background: none; border: none; border-radius: 8px; padding: 6px 9px; min-height: 32px; }
.notif-tab.activa { background: var(--pf-azul-fondo); color: var(--pf-azul-fuerte); font-weight: 600; }
.notif-todas { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; color: var(--pf-texto-2); background: none; border: 1px solid var(--pf-borde); border-radius: 8px; padding: 5px 8px; min-height: 32px; }
.notif-todas:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
.notif-cerrar { width: 32px; height: 32px; }
.notif-lista { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.notif-lista.cargando { opacity: .6; }
.notif-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--pf-texto); position: relative; min-height: 48px; }
.notif-item:hover { background: var(--pf-caja-hover); }
.notif-item.leida { opacity: .72; }
.notif-item.noleida b { font-weight: 600; }
.notif-ico { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--pf-caja-suave); color: var(--pf-texto-2); }
.notif-ico.nt-azul { background: var(--pf-azul-fondo); color: var(--pf-azul-fuerte); }
.notif-ico.nt-rojo { background: var(--pf-rojo-fondo); color: var(--pf-rojo-texto); }
.notif-ico.nt-verde { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); }
.notif-ico.nt-ambar { background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); }
.notif-ico.nt-morado { background: #efe9fb; color: #6b46c1; }
.notif-veces { position: absolute; top: -5px; right: -5px; font-style: normal; font-size: 12px; font-weight: 600; background: var(--pf-titulo); color: #fff; border-radius: 8px; padding: 0 4px; line-height: 15px; }
.notif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-txt b { font-size: 13.5px; font-weight: 600; color: var(--pf-titulo); line-height: 1.3; }
.notif-txt small { font-size: 12px; color: var(--pf-texto-2); line-height: 1.35; }
.notif-txt time { font-size: max(12px, 11px); color: var(--pf-texto-3); }
.notif-punto { position: absolute; top: 14px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-azul-fuerte); }
.notif-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 14px; color: var(--pf-texto-3); font-size: 13px; }
.notif-vacio b { color: var(--pf-titulo); }
@media (max-width: 720px) {
  .notif-velo { background: rgba(28, 28, 30, .35); }
  .notif-panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 82vh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .notif-cab { padding-top: 12px; }
}
/* ── Guía: resaltado de la búsqueda y timeline de Novedades ── */
mark.ayuda-mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px #f2dd7a; }
.ayuda-q { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 12px; font-size: 13px; color: var(--pf-texto-2); background: #fffbe6; border: 1px solid #f2dd7a; border-radius: 9px; }
.ayuda-q a { margin-left: auto; color: var(--pf-azul); }
.nov-linea { position: relative; margin: 6px 0 0; padding-left: 26px; }
.nov-linea::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--pf-borde); border-radius: 2px; }
.nov-item { position: relative; padding: 4px 0 22px; }
.nov-item::before { content: ''; position: absolute; left: -23px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--pf-caja); border: 3px solid var(--pf-azul-borde); box-sizing: border-box; }
.nov-item.grande::before { border-color: var(--pf-azul-fuerte); background: var(--pf-azul-fuerte); }
.nov-item.actual::before { box-shadow: 0 0 0 4px var(--pf-azul-fondo); }
.nov-item.resaltada { animation: nov-flash 1.6s ease; }
@keyframes nov-flash { 0% { background: #fff1a8; } 100% { background: transparent; } }
.nov-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.nov-cab h3 { margin: 0; font-size: 1.05rem; color: var(--pf-titulo); }
.nov-ver { font-size: 12px; font-weight: 600; color: var(--pf-azul-fuerte); background: var(--pf-azul-fondo); border-radius: 6px; padding: 2px 7px; }
.nov-fecha { font-size: 12.5px; color: var(--pf-texto-3); }
.nov-item ul { margin: 8px 0 0; padding-left: 18px; }
.nov-item li { margin: 4px 0; line-height: 1.45; }
.nov-liga { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--pf-azul); text-decoration: none; }
.nov-liga:hover { text-decoration: underline; }
.nov-mas { margin: 4px 0 0 26px; }
.nov-item[hidden] { display: none; }

/* ── Glosario (Guía) y definiciones al pasar el mouse (v0.431, 09-sep-2026) ── */
.glos-filtro { width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 4px 0 14px; font: inherit; font-size: .95rem; border: 1px solid var(--pf-borde); border-radius: 9px; background: var(--pf-caja-suave); color: var(--pf-titulo); }
.glosario { margin: 0; }
.glos-item { padding: 10px 0 12px; border-bottom: 1px solid var(--pf-borde-suave); }
.glos-item[hidden] { display: none; }
.glos-item.resaltada { background: #fffbe6; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.glos-item dt { font-weight: 600; color: var(--pf-titulo); font-size: 15px; }
.glos-item dt small { font-weight: 400; font-size: 12px; color: var(--pf-texto-3); margin-left: 6px; }
.glos-item dd { margin: 4px 0 0; color: var(--pf-texto); line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .con-def { text-decoration: underline dotted var(--pf-borde-fuerte); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }
  th.con-def, .lateral-item > span.con-def { text-decoration: none; }
  .con-def.def-menu { cursor: inherit; }            /* menú: sin "?" al entrar; sale a los 5 s con la burbuja */
  .con-def.def-menu.def-listo { cursor: help; }
  th.con-def:hover, .kpi span.con-def:hover, .tarjeta > h2.con-def:hover { color: var(--pf-azul-fuerte); }
}
.def-tip {
  position: fixed; z-index: 1200; width: min(340px, calc(100vw - 16px)); padding: 11px 13px 10px;
  background: var(--pf-titulo); color: #fff; border-radius: 11px; box-shadow: 0 12px 32px rgba(28, 28, 30, .3);
  font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; pointer-events: auto;
}
.def-tip.on { opacity: 1; transform: none; }
.def-tip b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.def-tip span { display: block; color: rgba(255, 255, 255, .88); }
.def-tip a { display: inline-block; margin-top: 7px; color: #9fd0ff; text-decoration: none; font-size: 12px; }
.def-tip a:hover { text-decoration: underline; }

/* ── Historial: quién hizo qué y cuándo (v0.432) ── */
.hist-dia { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 6px; font-size: 1rem; color: var(--pf-titulo); }
.hist-dia:first-child { margin-top: 4px; }
.hist-dia small { font-weight: 400; font-size: 12px; color: var(--pf-texto-3); }
.hist-lista { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--pf-borde); margin-left: 52px; }
.hist-item { position: relative; display: grid; grid-template-columns: 26px 200px 1fr; gap: 6px 12px; align-items: start; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--pf-borde-suave); }
.hist-item:hover { background: var(--pf-caja-hover); }
.hist-hora { position: absolute; left: -54px; top: 10px; width: 40px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--pf-texto-3); }
.hist-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--pf-caja-suave); color: var(--pf-texto-2); }
.hg-ordenes .hist-ico, .hg-planeacion .hist-ico { background: var(--pf-azul-fondo); color: var(--pf-azul-fuerte); }
.hg-seguridad .hist-ico { background: var(--pf-rojo-fondo); color: var(--pf-rojo-texto); }
.hg-compras .hist-ico, .hg-almacen .hist-ico { background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); }
.hg-entrega .hist-ico, .hg-maquinas .hist-ico { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); }
.hist-quien { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hist-quien .usuario-ava { width: 24px; height: 24px; font-size: 12px; flex: none; }
.hist-quien b { font-size: 13.5px; color: var(--pf-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-quien i { font-style: normal; font-size: max(12px, 11px); color: var(--pf-texto-3); white-space: nowrap; }
.hist-que { font-size: 13.5px; line-height: 1.4; color: var(--pf-texto); min-width: 0; }
.hist-que a { color: var(--pf-azul); font-weight: 600; }
.hist-que small { display: block; font-size: 12px; color: var(--pf-texto-3); }
.hist-motivo { display: block; font-style: normal; font-size: 12.5px; color: var(--pf-texto-2); margin-top: 2px; }
@media (max-width: 720px) {
  .hist-lista { margin-left: 44px; }
  .hist-hora { left: -46px; width: 36px; font-size: 12px; }
  .hist-item { grid-template-columns: 26px 1fr; padding-left: 10px; }
  .hist-que { grid-column: 1 / -1; }
  .hist-quien i { display: none; }
}

/* Historial: nombre arriba y rol abajo, para que "Administración del sistema" no se coma el nombre */
.hist-quien { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: center; }
.hist-quien .usuario-ava { grid-row: 1 / span 2; }
.hist-quien b { grid-column: 2; }
.hist-quien i { grid-column: 2; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 721px) { .hist-item { grid-template-columns: 26px 170px 1fr; } }   /* §18 reflow: fuera del @media le ganaba al de ≤720 px y la página se salía a 320 */

/* ===================== Tablero v2 (v0.433, 10-sep-2026): pestañas, KPIs plan-vs-real, curva S, bullets, heatmap, galería ===================== */
.tab-corte { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--pf-rejilla); color: var(--pf-texto-2); font-size: max(12px, .74rem); font-variant-numeric: tabular-nums; }
.tab-pestanas { margin-bottom: 14px; }
.tab-kpis .kpi { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.tab-kpis .kpi > b { font-size: 1.7rem; line-height: 1.1; }
.tab-kpis .kpi small { font-size: max(12px, .74rem); color: var(--pf-texto-3); margin-top: 4px; line-height: 1.35; }
.tab-kpis .kpi small b { display: inline; font-size: inherit; color: var(--pf-texto-2); font-weight: 600; }
.tab-kpis .kpi .chip { align-self: flex-start; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tb-bien { color: var(--pf-verde-texto); font-style: normal; font-weight: 600; }
.tb-alerta { color: var(--pf-ambar-texto); font-style: normal; font-weight: 600; }
.tb-mal { color: var(--pf-rojo-texto); font-style: normal; font-weight: 600; }
.tab-dos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.tab-dos > * { min-width: 0; }
@media (max-width: 980px) { .tab-dos { grid-template-columns: 1fr; } }
.tab-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tab-cab h2 { margin: 0; }
.tab-csv { padding: 4px 12px; min-height: 30px; font-size: max(12px, .74rem); font-weight: 600; width: auto; }
.tab-pie { font-size: max(12px, .74rem); color: var(--pf-texto-3); margin: 10px 0 0; line-height: 1.4; }
/* curva S */
.tab-curva { display: block; width: 100%; height: auto; max-height: 300px; }
.tab-curva text { font-family: inherit; }
/* qué toca */
.tab-h3 { font-size: max(12px, .74rem); text-transform: uppercase; letter-spacing: .05em; color: var(--pf-texto-3); margin: 12px 0 6px; }
.tab-h3:first-of-type { margin-top: 0; }
.tab-lista { list-style: none; margin: 0; padding: 0; }
.tab-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--pf-rejilla); font-size: .84rem; }
.tab-lista li:last-child { border-bottom: none; }
.tab-lista a { color: var(--pf-texto); text-decoration: none; min-width: 0; }
.tab-lista a:hover { color: var(--pf-azul); }
.tab-lista a b { color: var(--pf-azul); margin-right: 4px; }
.tab-lista li > span { color: var(--pf-texto-3); font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* barra apilada de estados */
.tab-apilada { display: block; width: 100%; height: 34px; }
.tab-apilada a rect:hover { opacity: .85; }
.tab-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .78rem; color: var(--pf-texto-2); }
.tab-leyenda a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tab-leyenda a:hover { color: var(--pf-azul); }
.tab-leyenda i, .tab-leyenda span i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.tab-leyenda b { font-variant-numeric: tabular-nums; }
.tab-leyenda-heat span { display: inline-flex; align-items: center; }
.tab-leyenda-heat .lg-tarde { border: 2px dashed var(--pf-rojo-texto); background: var(--pf-caja); box-sizing: border-box; }
.tab-leyenda-heat .lg-pronto { border: 2px dashed var(--pf-azul); background: var(--pf-caja); box-sizing: border-box; }
.tab-leyenda-heat .lg-bloq { background: var(--pf-caja); border: 1px solid var(--pf-borde); position: relative; }
.tab-leyenda-heat .lg-bloq::after { content: ''; position: absolute; right: 1px; top: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--pf-rojo-texto); }
/* bullets por área */
.tab-bullets { display: flex; flex-direction: column; }
.tab-bullet { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 2fr) 96px auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--pf-rejilla); text-decoration: none; color: var(--pf-texto); font-size: .84rem; }
.tab-bullet:last-child { border-bottom: none; }
.tab-bullet:hover { background: var(--pf-caja-hover); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.tb-nombre { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.tb-nombre small { font-weight: 400; color: var(--pf-texto-3); font-size: max(12px, .72rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-barra { position: relative; display: block; height: 14px; }
.tb-barra i { position: absolute; top: 0; bottom: 0; }
.tb-fondo { left: 0; right: 0; background: var(--pf-rejilla); border-radius: 4px; }
.tb-real { left: 0; background: var(--gr-acento); border-radius: 4px 3px 3px 4px; min-width: 0; transition: width .3s; }
.tb-plan { width: 2px; margin-left: -1px; top: -3px !important; bottom: -3px !important; background: var(--pf-titulo); border-radius: 1px; }
.tb-num { text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.2; }
.tb-num b { font-size: .95rem; color: var(--pf-titulo); }
.tb-num small { font-size: max(12px, .7rem); color: var(--pf-texto-3); white-space: nowrap; }
.tb-chip { font-size: max(12px, .68rem); white-space: nowrap; }
@media (max-width: 640px) { .tab-bullet { grid-template-columns: minmax(0, 1fr) 84px; } .tb-barra { grid-column: 1 / -1; } .tb-chip { display: none; } }
/* heatmap par × área */
.tab-heat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-heat { border-collapse: separate; border-spacing: 3px; font-size: max(12px, .74rem); font-variant-numeric: tabular-nums; }
.tab-heat th { font-weight: 600; color: var(--pf-texto-3); text-align: center; padding: 2px; vertical-align: bottom; }
.tab-heat thead th span { display: inline-block; max-width: 74px; white-space: normal; line-height: 1.15; font-size: .75rem; }
.tab-heat .th-par { text-align: left; position: sticky; left: 0; background: var(--pf-caja); z-index: 1; padding-right: 6px; }
.tab-heat tbody .th-par a { color: var(--pf-azul); text-decoration: none; font-weight: 600; }
.tab-heat td { padding: 0; }
.tab-heat td.hc a { display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; border-radius: 5px; background: var(--hc); color: var(--pf-titulo); text-decoration: none; font-weight: 600; box-sizing: border-box; }
.tab-heat td.hc[style*="gr-seq-3"] a, .tab-heat td.hc[style*="gr-seq-4"] a, .tab-heat td.hc[style*="gr-seq-5"] a { color: #fff; }
.tab-heat td.hc a:hover { outline: 2px solid var(--pf-azul); outline-offset: 1px; }
.tab-heat td.hc-tarde a { border: 2px dashed var(--pf-rojo-texto); }
.tab-heat td.hc-pronto a { border: 2px dashed var(--pf-azul); }
.tab-heat td.hc-bloq a { position: relative; }
.tab-heat td.hc-bloq a::after { content: ''; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--pf-rojo-texto); border: 1px solid #fff; }
.tab-heat td.hc-na { width: 34px; height: 28px; }
.tab-heat td.hc-tot { text-align: right; padding-left: 8px; white-space: nowrap; line-height: 1.15; }
.tab-heat td.hc-tot b { display: block; color: var(--pf-titulo); }
.tab-heat td.hc-tot small { color: var(--pf-texto-3); font-size: max(12px, .66rem); }
/* galería */
.gal-filtros { margin-bottom: 14px; }
.gal-filtros select { max-width: 200px; }
.gal-grupo { margin-bottom: 18px; }
.gal-grupo h3 { font-size: .92rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.gal-card { margin: 0; background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 10px; overflow: hidden; cursor: zoom-in; transition: box-shadow .15s, transform .15s; }
.gal-card:hover, .gal-card:focus-visible { box-shadow: 0 6px 18px rgba(28, 28, 30, .12); transform: translateY(-1px); outline: none; }
.gal-thumb { position: relative; background: var(--pf-caja-hover); }
.gal-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 980px) { .tab-bullets { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } .tab-bullet:nth-last-child(2) { border-bottom: none; } }
.tab-heat thead th span { max-width: 96px; }
.gal-ref { position: absolute; left: 6px; top: 6px; background: rgba(28, 28, 30, .78); color: #fff; font-size: .75rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.gal-flag { position: absolute; right: 6px; top: 6px; font-size: .75rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; color: #fff; }
.gal-flag-hall { background: var(--pf-rojo); } .gal-flag-corr { background: var(--pf-verde); }
.gal-card figcaption { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 3px; }
.gal-pie { font-size: .78rem; color: var(--pf-texto); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gal-meta { font-size: max(12px, .68rem); color: var(--pf-texto-3); }
.gal-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.gal-chips .chip { font-size: max(12px, .64rem); padding: 1px 7px; }
.gal-pag { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: .8rem; color: var(--pf-texto-3); }
.gal-pag .boton { width: auto; }
.gal-visor { position: fixed; inset: 0; z-index: 1200; background: rgba(8, 14, 26, .92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.gal-visor[hidden] { display: none; }
.gal-visor figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gal-visor img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 8px; background: #000; }
.gal-visor figcaption { color: #fff; text-align: center; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; max-width: 800px; }
.gal-visor figcaption b { font-size: .8rem; opacity: .85; }
.gal-visor figcaption small { font-size: max(12px, .72rem); opacity: .7; }
.gal-visor figcaption a { color: #9dbbe6; font-size: .76rem; margin-top: 4px; }
.gal-nav, .gal-cerrar { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gal-nav:hover, .gal-cerrar:hover { background: rgba(255, 255, 255, .25); }
.gal-prev { left: 12px; top: 50%; transform: translateY(-50%); } .gal-next { right: 12px; top: 50%; transform: translateY(-50%); }
.gal-cerrar { right: 12px; top: 12px; }
@media (max-width: 640px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gal-nav { width: 36px; height: 36px; bottom: 12px; top: auto; transform: none; } .gal-visor img { max-height: calc(100vh - 180px); } }
.tab-curva-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .tab-curva { min-width: 600px; } }
.tab-bullet { grid-template-columns: minmax(170px, 1.4fr) minmax(0, 2fr) 96px auto; }
.tab-csv { min-height: 36px; }   /* target táctil ≥ 36 px (QA 10-sep) */

/* Banda de la réplica demo (0.436.2, 10-sep-2026). Antes era sticky y empujaba la página ~30 px: el sidebar
   (sticky, 100vh) quedaba con el pie —avatar y versión— debajo de la pantalla. Ahora la banda es FIJA, de una
   sola línea y alto exacto --demo-h; todo lo que se pega arriba (sidebar, submenú, barra móvil, cajón, "?",
   campana, thead pegajoso, login) se recorre ese alto. Sin <html class="con-demo"> --demo-h vale 0 y nada cambia. */
:root { --demo-h: 0px; }
:is(html.con-demo, html.con-vc) { --demo-h: 30px; }
.demo-banda {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--demo-h);
  line-height: var(--demo-h); padding: 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: #e4f0fb; color: #1b4f80; border-bottom: 1px solid #b9d6ef; font-weight: 600; font-size: 12.5px; letter-spacing: 1.6px; text-align: center;   /* Rafa 11-sep: suave, solo "DEMO". Pablo 12-sep: el café claro se veía naranja → azul MUY claro (el azul corporativo es oscuro, así que el contraste de valor sigue distinguiendo la demo de producción) */
}
:is(html.con-demo, html.con-vc) body { padding-top: var(--demo-h); }
:is(html.con-demo, html.con-vc) .app { min-height: calc(100vh - var(--demo-h)); }
:is(html.con-demo, html.con-vc) .notif-panel { top: calc(58px + var(--demo-h)); }
:is(html.con-demo, html.con-vc) .pagina-login { min-height: calc(100vh - var(--demo-h)); }
@media (min-width: 861px) {
  :is(html.con-demo, html.con-vc) .lateral, :is(html.con-demo, html.con-vc) .submenu { top: var(--demo-h); height: calc(100vh - var(--demo-h)); }
  :is(html.con-demo, html.con-vc) .tabla-scroll.ajusta .tabla thead th { top: var(--demo-h); }
  :is(html.con-demo, html.con-vc) .ayuda-flotante { top: calc(12px + var(--demo-h)); }
}
@media (max-width: 860px) {
  :is(html.con-demo, html.con-vc) { --demo-h: 36px; }   /* ronda 21-oct-2026 (Pablo): con 24 px el selector «Ver como» quedaba de 18 px, chico para el dedo */
  html .demo-rol select { height: var(--demo-h); }
  .demo-banda { font-size: max(12px, 11px); letter-spacing: .2px; padding: 0 8px; }
  .demo-banda-extra { display: none; }
  :is(html.con-demo, html.con-vc) body { padding-top: calc(54px + var(--demo-h)); }
  :is(html.con-demo, html.con-vc) .movil-top { top: var(--demo-h); }
  :is(html.con-demo, html.con-vc) .lateral { top: var(--demo-h); bottom: 0; height: auto; }
  :is(html.con-demo, html.con-vc) .tabla-scroll.ajusta .tabla thead th { top: calc(54px + var(--demo-h)); }
  :is(html.con-demo, html.con-vc) .movil-top .ayuda-pop { top: calc(56px + var(--demo-h)); }
}

/* ── Logística y pagos de las OC (v0.437) ── */
.log-tarde { color: var(--pf-rojo-texto) !important; font-weight: 600; }
.log-check { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--pf-texto-2); }
.log-pasos { display: flex; align-items: flex-start; min-width: 290px; }
.log-paso { flex: 1; text-align: center; position: relative; font-size: max(12px, .7rem); color: var(--pf-texto-3); line-height: 1.2; }
.log-paso::before { content: ''; position: absolute; top: 6px; right: 50%; width: 100%; height: 3px; background: var(--pf-borde-suave); z-index: 0; }
.log-paso:first-child::before { display: none; }
.log-paso i { display: block; width: 15px; height: 15px; margin: 0 auto 3px; border-radius: 50%; border: 2px solid var(--pf-borde-fuerte); background: var(--pf-caja); position: relative; z-index: 1; }
.log-paso span, .log-paso small { display: block; }
.log-paso small { font-size: max(12px, .66rem); color: var(--pf-texto-3); margin-top: 1px; }
.log-hecha i, .log-saltada i { background: var(--pf-verde); border-color: var(--pf-verde); }
.log-saltada i { background: var(--pf-vacio); border-color: var(--pf-vacio); }
.log-hecha::before, .log-saltada::before { background: var(--pf-verde); }
.log-paso.actual i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-verde) 22%, transparent); }
.log-paso.actual span { color: var(--pf-titulo); font-weight: 600; }
.log-siguiente i { border-color: var(--pf-azul-claro); }
.log-atrasada i { border-color: var(--pf-rojo); background: var(--pf-rojo-fondo); }
.log-atrasada span { color: var(--pf-rojo-texto); font-weight: 600; }
.log-grande { overflow-x: auto; margin: 10px 0 4px; }
.log-grande .log-pasos { min-width: 520px; }
.log-grande .log-paso { font-size: .8rem; }
.log-grande .log-paso i { width: 20px; height: 20px; }
.log-grande .log-paso::before { top: 9px; }
.log-donde { margin: 8px 0 4px; }
.log-ruta { margin-top: 10px; }
.log-tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--pf-borde-suave); }
.log-tl li { position: relative; padding: 2px 0 14px 14px; }
.log-tl li::before { content: ''; position: absolute; left: -29px; top: 3px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--pf-borde-fuerte); background: var(--pf-caja); }
.log-tl li.log-tl-hecha::before { background: var(--pf-verde); border-color: var(--pf-verde); }
.log-tl li.log-tl-saltada::before { background: var(--pf-vacio); border-color: var(--pf-vacio); }
.log-tl li.log-tl-atrasada::before { border-color: var(--pf-rojo); background: var(--pf-rojo-fondo); }
.log-tl li.log-tl-siguiente::before { border-color: var(--pf-azul-claro); }
.log-tl-dat { font-size: .85rem; margin-top: 3px; color: var(--pf-texto-2); }
.log-tl-notas { font-size: .85rem; margin-top: 3px; padding: 6px 9px; background: var(--pf-caja-suave); border-radius: 6px; }
.log-tl-form { margin-top: 6px; }
.log-tl-form summary { cursor: pointer; color: var(--pf-azul); font-size: .85rem; min-height: 36px; display: flex; align-items: center; }
.log-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.log-cal-g h3 { font-size: .9rem; margin: 0 0 6px; }
.log-cal-g ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.log-cal-g li { padding: 6px 0; border-bottom: 1px solid var(--pf-borde-suave); display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: baseline; }
.log-cal-f { color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }
.log-cal-m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-cal-vencidos h3 { color: var(--pf-rojo-texto); }
a.kpi { text-decoration: none; color: inherit; }
a.kpi.activa { border-color: var(--pf-azul); box-shadow: inset 0 -3px 0 var(--pf-azul); }   /* v0.481: KPI que es filtro, el elegido */
/* v0.481: fotos de referencia de insumos y equipos (Rev04) */
.fc-fila { display: flex; align-items: center; gap: 8px; }
.fc-mini { flex: 0 0 auto; display: flex; }
.fc-mini img, .fc-mini-js { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid var(--pf-borde-suave); background: var(--pf-caja-suave); vertical-align: middle; }
.fc-mini-js { margin-right: 6px; }
/* v0.484: botón de cámara junto al insumo o equipo sin foto (js/fc_cam.js). 36 px: se toca bien con el pulgar en el teléfono. */
.fc-cam { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px dashed var(--pf-borde); border-radius: 8px; background: var(--pf-caja-suave); color: var(--pf-texto-2); cursor: pointer; vertical-align: middle; }
.fc-cam:hover { color: var(--pf-titulo); border-style: solid; }
.fc-cam:disabled, .fc-cam-subiendo { opacity: .5; cursor: progress; }
.fc-cam-msg { margin-left: 4px; }
.fc-cam-mal { color: var(--pf-rojo-texto); }
.fc-titulo { display: inline-flex; vertical-align: middle; }
.fc-titulo img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--pf-borde); }
.fc-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 10px 0; }
.fc-foto { margin: 0; border: 1px solid var(--pf-borde-suave); border-radius: 10px; overflow: hidden; background: var(--pf-caja-suave); }
.fc-foto img { display: block; width: 100%; height: 150px; object-fit: cover; }
.fc-foto figcaption { padding: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; }
.fc-acciones { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.fc-acciones form { margin: 0; }
.fc-subir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }
.fc-subir label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; }
.alm-filtro-fecha { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--pf-texto-3); }

/* Ritmo semanal bajo la curva S (v0.437.1) */
.tab-ritmo-t { font-size: .95rem; color: var(--pf-titulo); margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--pf-borde-suave); }
.tab-ritmo-res { font-size: .85rem; color: var(--pf-texto-2); margin: 0 0 6px; }
.tab-ritmo-res em { font-style: normal; font-weight: 600; }
.tab-ritmo { max-height: 240px; }

/* Inspección en turno y retrabajo (v0.439) */
.fila-sel td { background: var(--pf-azul-fondo); }
/* Formulario de inspección: orden y resultado a lo ancho (resultado en 3 opciones lado a lado), luego qué se encontró y la acción */
.insp-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.insp-form > label:first-of-type, .insp-form .insp-res { grid-column: 1 / -1; }
.insp-res { border: 1px solid var(--pf-borde-suave); border-radius: 8px; padding: 8px 12px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.insp-res legend { font-size: .85rem; color: var(--pf-texto-2); padding: 0 4px; }
.insp-res .ciclo-check { grid-column: auto; min-height: 44px; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; border: 1px solid var(--pf-borde-suave); border-radius: 8px; background: var(--pf-caja); cursor: pointer; }
.insp-res .ciclo-check:has(input:checked) { border-color: var(--pf-azul); box-shadow: 0 0 0 1px var(--pf-azul) inset; }
.insp-res .ciclo-check .nota-inline { flex-basis: 100%; }
@media (max-width: 720px) { .insp-form { grid-template-columns: minmax(0, 1fr) !important; } .insp-res { grid-template-columns: minmax(0, 1fr); } }
.insp-bloq { padding: 10px 0; border-bottom: 1px solid var(--pf-borde-suave); }
.insp-bloq:last-child { border-bottom: 0; }
.insp-bloq p { margin: 0 0 6px; }
.insp-bloq .filtros input[type=text] { flex: 1 1 280px; }
.ret-pasos { display: flex; flex-wrap: wrap; gap: 0; margin: 6px 0 12px; padding: 0; list-style: none; counter-reset: rp; }
.ret-pasos li { position: relative; flex: 1 1 150px; padding: 26px 8px 0 0; font-size: .82rem; color: var(--pf-texto-2); }
.ret-pasos li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pf-borde-fuerte); background: var(--pf-caja); }
.ret-pasos li::after { content: ''; position: absolute; left: 18px; right: 4px; top: 12px; height: 2px; background: var(--pf-borde-suave); }
.ret-pasos li:last-child::after { display: none; }
.ret-pasos li.hecho::before { background: var(--pf-verde); border-color: var(--pf-verde); }
.ret-pasos li.actual::before { border-color: var(--pf-azul-claro); box-shadow: 0 0 0 3px var(--pf-azul-fondo); }
.ret-pasos li b { display: block; color: var(--pf-texto); font-size: .85rem; }
.seg-quien { font-size: .88rem; margin: 4px 0 10px; }
.seg-quien li { margin: 2px 0; }

/* "Ver la demo como" (v0.439): selector dentro de la banda demo */
.demo-banda { display: flex; align-items: center; justify-content: center; gap: 14px; }
.demo-banda-txt { overflow: hidden; text-overflow: ellipsis; }
.demo-banda a { color: #6b4423; text-decoration: none; font-weight: 600; } .demo-banda a:hover { text-decoration: underline; }
.demo-rol { margin: 0; display: inline-flex; align-items: center; }
/* "Ver como" en producción (v0.486): misma banda fija que la demo, en ámbar para que no se confunda con ninguno de los
   dos ambientes; en rojo suave cuando se intentó guardar algo (solo consulta). */
.vc-banda { background: #fdf1d8; color: #7a4d06; border-bottom-color: #efd49b; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
.vc-banda .demo-rol label, .vc-banda .demo-rol select { color: #7a4d06; }
.vc-banda .demo-rol select { border-color: #e2c27d; background: #fffaf0; }
.vc-banda.vc-aviso { background: #fbe3df; color: #8a2a1c; border-bottom-color: #f0bdb4; }
.um-vercomo { gap: 8px; cursor: default; }
.um-vercomo .demo-rol { flex: 1; min-width: 0; }
.um-vercomo .demo-rol label { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; font-size: 13px; }
.um-vercomo .demo-rol select { flex: 1; min-width: 0; height: 36px; font-size: 13px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--pf-borde, #d5dbe3); background: var(--pf-caja, #fff); color: inherit; }

.demo-rol label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; margin: 0; color: #6b4423; letter-spacing: 0; }
.demo-rol select { height: calc(var(--demo-h) - 6px); padding: 0 6px; font-size: 12px; border-radius: 5px; border: 1px solid #d3b98f; background: #fffaf2; color: #6b4423; max-width: 270px; letter-spacing: 0; }
@media (max-width: 860px) { .demo-rol select { max-width: 170px; font-size: max(12px, 11px); } .demo-banda { gap: 6px; } }
/* 12-oct-2026 (Pablo): la demo vuelve a su cinta ROJA arriba, también dentro del programa de escritorio, para que nadie la confunda con
   producción ("Ver como" de producción sigue en ámbar: .vc-banda). */
.demo-banda:not(.vc-banda) { background: #c62828; color: #fff; border-bottom-color: #a31f1f; }
.demo-banda:not(.vc-banda) a, .demo-banda:not(.vc-banda) .demo-rol label { color: #fff; }
.demo-banda:not(.vc-banda) .demo-rol select { border-color: rgba(255, 255, 255, .6); background: var(--pf-caja); color: #7f1d1d; }

/* ===================== Gráficas por apartado (v0.441, 11-sep-2026) — includes/graficas_helpers.php ===================== */
.gr-bloque { margin: 0 0 14px; }
.gr-bloque > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 600; color: var(--pf-titulo); font-size: .9rem; margin-bottom: 8px; }
.gr-bloque > summary::-webkit-details-marker { display: none; }
.gr-bloque > summary .nota-inline { font-weight: 400; }
.gr-bloque:not([open]) > summary { margin-bottom: 0; }
.gr-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.gr-par > .tarjeta { margin: 0; min-width: 0; }
.gr-ancha { grid-column: 1 / -1; }
@media (max-width: 1100px) { .gr-par { grid-template-columns: 1fr; } }
.gr-cab h2 { margin: 0 0 2px; font-size: 1rem; }
.gr-sub { margin: 0 0 10px; font-size: .8rem; color: var(--pf-texto-2); line-height: 1.4; }
.gr-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gr-svg { display: block; width: 100%; height: auto; font-variant-numeric: tabular-nums; }
.gr-svg text { font-family: inherit; }
.gr-svg a:hover circle[fill], .gr-svg a:hover path, .gr-svg a:hover rect[rx] { opacity: .85; }
@media (max-width: 720px) { .gr-svg { min-width: 520px; } }
.gr-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .76rem; color: var(--pf-texto-2); }
.gr-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.gr-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.gr-leyenda i.gr-l-linea { width: 16px; height: 2px; border-radius: 1px; }
.gr-leyenda i.gr-l-raya { width: 14px; height: 3px; border-radius: 2px; }
.gr-leyenda i.gr-l-punto { width: 10px; height: 10px; border-radius: 50%; }
.gr-leyenda i.gr-l-aro { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; background: var(--pf-caja); box-sizing: border-box; }
.gr-leyenda .gr-l-escala { gap: 2px; }
.gr-leyenda .gr-l-escala i { width: 14px; height: 10px; border-radius: 2px; }
.gr-pie { font-size: max(12px, .72rem); color: var(--pf-texto-3); margin: 8px 0 0; line-height: 1.4; }
.gr-datos { margin-top: 8px; font-size: .78rem; }
.gr-datos summary { cursor: pointer; color: var(--pf-azul); min-height: 36px; display: inline-flex; align-items: center; }
.gr-datos table { font-size: .76rem; }
@media print { .gr-bloque { break-inside: avoid; } .gr-datos { display: none; } }

/* Pasada móvil 11-sep-2026 (390 px): un <select> con opciones largas ("EE. UU. · entrega en almacén SEMAR (Brownsville)") empujaba el ancho de la página */
select { max-width: 100%; }
.filtros label { min-width: 0; max-width: 100%; }
@media (max-width: 720px) { .filtros select { min-width: 0; } }


/* ===== Gráficas → detalle al seleccionar (v0.442, js/graficas.js) ===== */
.gr-m { cursor: pointer; outline: none; }
.gr-m > *, .gr-m > a > * { transition: opacity .16s ease; }
.gr-svg:has(.gr-m:hover) .gr-m:not(:hover) > *, .gr-svg:has(.gr-m:hover) .gr-m:not(:hover) > a > * { opacity: .45; }
.gr-svg.gr-con-sel .gr-m:not(.gr-sel) > *, .gr-svg.gr-con-sel .gr-m:not(.gr-sel) > a > * { opacity: .3; }
.gr-svg .gr-m:focus-visible > :first-child, .gr-svg .gr-m:focus-visible > a > :first-child { stroke: var(--pf-azul); stroke-width: 2; stroke-dasharray: 4 3; }
.gr-svg a:hover circle[fill], .gr-svg a:hover path, .gr-svg a:hover rect[rx] { opacity: 1; }
.gr-fila-sel td { background: var(--pf-azul-fondo) !important; box-shadow: inset 0 1px 0 var(--pf-azul-borde), inset 0 -1px 0 var(--pf-azul-borde); }
.gr-fila-sel td:first-child { box-shadow: inset 3px 0 0 var(--pf-azul), inset 0 1px 0 var(--pf-azul-borde), inset 0 -1px 0 var(--pf-azul-borde); }

.gr-tip { position: fixed; z-index: 1200; pointer-events: none; max-width: 300px; padding: 9px 12px 8px 14px; border-radius: 10px;
  background: rgba(28, 28, 30, .96); color: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 20, 50, .28), 0 1px 3px rgba(0, 0, 0, .2);
  font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gr-tip::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gr-tip-c); }
.gr-tip-cab { display: block; font-weight: 600; font-size: 13px; }
.gr-tip ul { margin: 4px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .86); }
.gr-tip li { padding: 1px 0; }
.gr-tip-pista { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); font-size: max(12px, 11.5px); }

html.gr-p-abierto { overflow: hidden; }
.gr-velo { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .16); animation: gr-aparece .18s ease; }   /* sin desenfoque: la marca elegida se sigue viendo resaltada */
.gr-panel { position: fixed; z-index: 1310; top: 12px; right: 12px; max-height: calc(100vh - 24px); width: min(470px, calc(100vw - 24px)); display: flex; flex-direction: column;
  background: var(--pf-caja); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 25, 60, .28), 0 2px 8px rgba(0, 25, 60, .12); overflow: hidden; outline: none; color: var(--pf-texto); }
.gr-panel::before { content: ""; display: block; height: 4px; flex: 0 0 auto; background: var(--gr-p-c, var(--pf-azul)); }
.gr-panel.gr-p-entra { animation: gr-entra .26s cubic-bezier(.2, .8, .2, 1); }
.gr-tip[hidden], .gr-velo[hidden], .gr-panel[hidden] { display: none !important; }   /* el display:flex del panel le ganaba al atributo hidden: no se cerraba (11-sep) */
@keyframes gr-entra { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gr-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes gr-sube { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.gr-p-cab { padding: 12px 18px 14px; border-bottom: 1px solid var(--pf-borde-suave); flex: 0 0 auto; }
.gr-p-asa { display: none; }
.gr-p-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.gr-p-ceja { font-size: 12px; color: var(--pf-texto-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gr-p-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.gr-p-pos { font-size: 12px; color: var(--pf-texto-3); min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.gr-p-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--pf-texto-2); cursor: pointer; }
.gr-p-btn:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
.gr-p-btn:focus-visible, .gr-p-cta:focus-visible, .gr-p-datos:focus-visible, .gr-p-reg:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: 2px; }
.gr-p-x { margin-left: 4px; }
.gr-p-t { margin: 6px 0 0; font-size: 1.22rem; line-height: 1.25; color: var(--pf-titulo); letter-spacing: -.01em; }
.gr-p-sub { margin: 4px 0 0; font-size: .83rem; color: var(--pf-texto-2); line-height: 1.4; }
.gr-p-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 18px; overscroll-behavior: contain; }
.gr-p-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-bottom: 18px; }
.gr-p-kpi { position: relative; padding: 10px 12px 9px; border: 1px solid var(--pf-borde-suave); border-radius: 12px; background: var(--pf-caja-suave); animation: gr-sube .28s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
.gr-p-kpi-e { display: block; font-size: max(12px, 11.5px); color: var(--pf-texto-3); line-height: 1.3; }
.gr-p-kpi-v { display: block; margin-top: 3px; font-size: 1.28rem; font-weight: 600; color: var(--pf-titulo); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.gr-p-kpi.es-ok { background: var(--pf-verde-fondo); border-color: var(--pf-verde-borde); } .gr-p-kpi.es-ok .gr-p-kpi-v { color: var(--pf-verde-texto); }
.gr-p-kpi.es-aviso { background: var(--pf-ambar-fondo); border-color: var(--pf-ambar-borde); } .gr-p-kpi.es-aviso .gr-p-kpi-v { color: var(--pf-ambar-texto); }
.gr-p-kpi.es-mal { background: var(--pf-rojo-fondo); border-color: var(--pf-rojo-borde); } .gr-p-kpi.es-mal .gr-p-kpi-v { color: var(--pf-rojo-texto); }
.gr-p-kpi[class*="es-"]::after { content: ""; position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gr-p-kpi.es-ok::after { color: var(--pf-verde-texto); } .gr-p-kpi.es-aviso::after { color: var(--pf-ambar-texto); } .gr-p-kpi.es-mal::after { color: var(--pf-rojo-texto); }
.gr-p-resumen { margin: 0 0 16px; padding: 0; list-style: none; font-size: .9rem; }
.gr-p-resumen li { padding: 7px 0; border-bottom: 1px solid var(--pf-borde-suave); font-variant-numeric: tabular-nums; }
.gr-p-lista h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--pf-texto-3); }
.gr-p-lista ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--pf-borde-suave); border-radius: 12px; overflow: hidden; }
.gr-p-lista li { animation: gr-sube .28s ease both; animation-delay: calc(80ms + var(--i, 0) * 22ms); }
.gr-p-lista li + li { border-top: 1px solid var(--pf-borde-suave); }
.gr-p-reg { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; min-height: 48px; color: inherit; text-decoration: none; }
.gr-p-reg::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.gr-p-reg.es-ok::before { background: var(--pf-verde); } .gr-p-reg.es-aviso::before { background: var(--pf-ambar); } .gr-p-reg.es-mal::before { background: var(--pf-rojo); }
a.gr-p-reg:hover { background: var(--pf-caja-hover); }
a.gr-p-reg:hover .gr-p-reg-ir { transform: translateX(2px); color: var(--pf-azul); }
.gr-p-reg-txt { flex: 1 1 auto; min-width: 0; }
.gr-p-reg-l1 { display: block; font-size: .86rem; line-height: 1.35; }
.gr-p-reg-k { font-weight: 600; color: var(--pf-titulo); margin-right: 6px; font-variant-numeric: tabular-nums; }
.gr-p-reg-p { color: var(--pf-texto); }
.gr-p-reg-meta { display: block; margin-top: 2px; font-size: .76rem; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }
.gr-p-reg-est { flex: 0 0 auto; max-width: 42%; font-size: max(12px, .74rem); font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--pf-caja-suave); border: 1px solid var(--pf-borde-suave); color: var(--pf-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gr-p-reg.es-ok .gr-p-reg-est { background: var(--pf-verde-fondo); border-color: var(--pf-verde-borde); color: var(--pf-verde-texto); }
.gr-p-reg.es-aviso .gr-p-reg-est { background: var(--pf-ambar-fondo); border-color: var(--pf-ambar-borde); color: var(--pf-ambar-texto); }
.gr-p-reg.es-mal .gr-p-reg-est { background: var(--pf-rojo-fondo); border-color: var(--pf-rojo-borde); color: var(--pf-rojo-texto); }
.gr-p-reg-ir { flex: 0 0 auto; color: var(--pf-texto-3); transition: transform .15s ease; }
.gr-p-mas { margin: 8px 2px 0; font-size: .78rem; color: var(--pf-texto-3); }
.gr-p-pie { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pf-borde-suave); background: var(--pf-caja); }
.gr-p-cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 11px; background: var(--pf-azul-fuerte); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
.gr-p-cta:hover { background: var(--pf-azul-fuerte-hover); }
.gr-p-cta svg { transition: transform .15s ease; } .gr-p-cta:hover svg { transform: translateX(3px); }
.gr-p-datos { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--pf-borde); background: var(--pf-caja); color: var(--pf-texto-2); font: inherit; font-size: .86rem; cursor: pointer; }
.gr-p-datos:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
@media (max-width: 720px) {
  .gr-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 86vh; max-height: 86dvh; border-radius: 18px 18px 0 0; transition: transform .2s ease; }
  .gr-panel::before { display: none; }
  .gr-panel.gr-p-entra { animation-name: gr-entra-hoja; }
  @keyframes gr-entra-hoja { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .gr-p-cab { padding-top: 8px; }
  .gr-p-asa { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--pf-borde-fuerte); margin: 0 auto 6px; }
  .gr-p-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-p-pie { flex-direction: column; } .gr-p-datos { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-panel.gr-p-entra, .gr-velo, .gr-p-kpi, .gr-p-lista li { animation: none; }
  .gr-m > *, .gr-m > a > *, .gr-p-reg-ir, .gr-p-cta svg, .gr-panel { transition: none; }
}
@media print { .gr-tip, .gr-panel, .gr-velo { display: none !important; } }

/* ===== Orden 360° → cabecera con gráficas (v0.443, includes/orden360_helpers.php) ===== */
.o360 { padding: 14px 18px 16px; }
.o360-fila1 { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pf-borde-suave); }
.o360-pasos { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.o360-p { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-top: 18px; min-width: 0; }
.o360-p::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--pf-borde); z-index: 0; }
.o360-p:first-child::before { display: none; }
.o360-p > i { position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--pf-caja); border: 2px solid var(--pf-borde-fuerte); box-sizing: border-box; z-index: 1; }
.o360-p > b { font-size: 12px; font-weight: 600; color: var(--pf-texto-3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.o360-p > span { font-size: max(12px, 11px); color: var(--pf-texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.o360-p.hecho::before, .o360-p.actual::before { background: var(--pf-azul-claro); }
.o360-p.hecho > i { background: var(--pf-azul-claro); border-color: var(--pf-azul-claro); }
.o360-p.hecho > i::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.o360-p.hecho > b { color: var(--pf-texto-2); }
.o360-p.actual > i { width: 18px; height: 18px; margin-left: -9px; top: -2px; border: 5px solid var(--pf-azul); background: var(--pf-caja); box-shadow: 0 0 0 4px var(--pf-azul-fondo); }
.o360-p.actual > b { color: var(--pf-titulo); font-weight: 600; }
.o360-p.actual.es-aviso > i { border-color: var(--pf-ambar); box-shadow: 0 0 0 4px var(--pf-ambar-fondo); } .o360-p.actual.es-aviso > b { color: var(--pf-ambar-texto); }
.o360-p.actual.es-mal > i { border-color: var(--pf-rojo); box-shadow: 0 0 0 4px var(--pf-rojo-fondo); } .o360-p.actual.es-mal > b { color: var(--pf-rojo-texto); }
.o360-p.actual.es-ok > i { border-color: var(--pf-verde); box-shadow: 0 0 0 4px var(--pf-verde-fondo); }
.o360-cancelada { opacity: .5; }
.o360-destraba { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--pf-azul); text-decoration: none; padding: 6px 10px; border: 1px solid var(--pf-azul-borde); border-radius: 999px; background: var(--pf-azul-fondo); white-space: nowrap; }
.o360-destraba:hover { background: var(--pf-caja-hover); }
.o360-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding-top: 12px; }
.o360-celda { min-width: 0; padding: 0 18px; }
.o360-celda:first-child { padding-left: 0; } .o360-celda:last-child { padding-right: 0; }
.o360-celda + .o360-celda { border-left: 1px solid var(--pf-borde-suave); }
.o360-celda h3 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--pf-texto-3); display: flex; align-items: center; gap: 8px; }
.o360-cuenta { font-weight: 600; font-size: max(12px, 11.5px); padding: 1px 7px; border-radius: 999px; background: var(--pf-caja-suave); border: 1px solid var(--pf-borde-suave); color: var(--pf-texto-2); font-variant-numeric: tabular-nums; }
.o360-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 4px; }
.o360-cifra { font-size: 1.55rem; line-height: 1.15; font-weight: 600; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.o360-cifra small { font-size: .8rem; font-weight: 600; color: var(--pf-texto-3); }
.o360-cifra.es-ok { color: var(--pf-verde-texto); } .o360-cifra.es-aviso { color: var(--pf-ambar-texto); } .o360-cifra.es-mal { color: var(--pf-rojo-texto); }
.o360-frase { font-size: .8rem; color: var(--pf-texto-2); font-variant-numeric: tabular-nums; }
.o360-frase.es-aviso { color: var(--pf-ambar-texto); } .o360-frase.es-mal { color: var(--pf-rojo-texto); font-weight: 600; }
.o360-wrap { overflow: visible; }
.gr-svg.o360-svg { min-width: 0; }
.o360-ley { margin-top: 2px; font-size: max(12px, .72rem); gap: 2px 10px; }
.o360-listo { list-style: none; margin: 2px 0 0; padding: 0; }
.o360-listo a { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 27px; padding: 1px 6px; margin: 0 -6px; border-radius: 7px; color: inherit; text-decoration: none; font-size: .82rem; }
.o360-listo a:hover { background: var(--pf-caja-hover); }
.o360-listo i { width: 10px; height: 10px; border-radius: 50%; background: var(--pf-borde-fuerte); justify-self: center; }
.o360-listo .es-ok i { background: var(--pf-verde); } .o360-listo .es-aviso i { background: var(--pf-ambar); } .o360-listo .es-mal i { background: var(--pf-rojo); box-shadow: 0 0 0 3px var(--pf-rojo-fondo); }
.o360-k { color: var(--pf-texto-2); }
.o360-v { text-align: right; color: var(--pf-titulo); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.o360-listo .es-mal .o360-v { color: var(--pf-rojo-texto); } .o360-listo .es-aviso .o360-v { color: var(--pf-ambar-texto); } .o360-listo .es-neutro .o360-v { color: var(--pf-texto-3); font-weight: 500; }
.o360-nota { margin: 4px 0 0; font-size: max(12px, .72rem); color: var(--pf-texto-3); }
@media (max-width: 1000px) {
  .o360-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .o360-celda:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--pf-borde-suave); padding-top: 12px; }
  .o360-celda:nth-child(2) { padding-right: 0; }
}
@media (max-width: 720px) {
  .o360 { padding: 12px 14px 14px; }
  .o360-fila1 { flex-direction: column; align-items: stretch; gap: 10px; }
  .o360-pasos { overflow-x: auto; grid-template-columns: repeat(7, minmax(64px, 1fr)); padding-bottom: 2px; scrollbar-width: none; }
  .o360-p:not(.actual) > span { display: none; }
  .o360-destraba { align-self: flex-start; }
  .o360-grid { grid-template-columns: minmax(0, 1fr); }
  .o360-celda, .o360-celda:first-child, .o360-celda:last-child { padding: 0; }
  .o360-celda + .o360-celda { border-left: 0; border-top: 1px solid var(--pf-borde-suave); padding-top: 12px; }
}
@media print { .o360-destraba { display: none; } }

/* ===== Tablero v3 (v0.444, includes/tablero_v3_helpers.php) ===== */
a.gr-m:focus-visible, .t3-pt:focus-visible { outline: 2px solid var(--pf-azul) !important; outline-offset: 2px; }
.tab-h3 { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; }
.t3-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1180px) { .t3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .t3-kpis { grid-template-columns: minmax(0, 1fr); } }
.t3-kpi { background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px; padding: 12px 14px 12px; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-variant-numeric: tabular-nums; }
.t3-kpi h3 { margin: 0; font-size: .78rem; font-weight: 600; color: var(--pf-texto-3); }
.t3-v { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 34px; }
.t3-v > b { font-size: 1.65rem; line-height: 1.1; font-weight: 600; color: var(--pf-titulo); }
.t3-v > b.es-ok { color: var(--pf-verde-texto); } .t3-v > b.es-aviso { color: var(--pf-ambar-texto); } .t3-v > b.es-mal { color: var(--pf-rojo-texto); }
.t3-v .chip { font-size: max(12px, .72rem); }
.t3-u { font-size: .8rem; color: var(--pf-texto-2); }
.t3-kpi p { margin: 0; font-size: .76rem; color: var(--pf-texto-2); line-height: 1.35; }
.t3-kpi p b { font-weight: 600; color: var(--pf-titulo); }
.t3-kpi .t3-sub { color: var(--pf-texto-3); }
.t3-ok { color: var(--pf-verde-texto); font-style: normal; font-weight: 600; } .t3-aviso { color: var(--pf-ambar-texto); font-style: normal; font-weight: 600; } .t3-mal { color: var(--pf-rojo-texto); font-style: normal; font-weight: 600; }
.t3-bala { position: relative; display: block; height: 12px; margin: 2px 0; }
.t3-bala i { position: absolute; top: 0; bottom: 0; left: 0; }
.t3-bala-f { right: 0; background: var(--pf-rejilla); border-radius: 4px; }
.t3-bala-x { background: var(--pf-borde); border-radius: 4px; }
.t3-bala-r { top: 3px !important; bottom: 3px !important; border-radius: 3px; }
.t3-bala-m { width: 2px; margin-left: -1px; top: -3px !important; bottom: -3px !important; background: var(--pf-titulo); border-radius: 1px; }
.t3-spark-fila { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.t3-spark-fila small { font-size: max(12px, .7rem); color: var(--pf-texto-3); line-height: 1.25; }
.t3-spark { flex: 0 0 auto; }
.t3-puntos { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; overflow: visible; }
.t3-pt { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 3px; border-radius: 5px; font-size: .75rem; font-weight: 600; text-decoration: none; color: #fff; background: var(--pf-texto-3); }
.t3-pt.es-ok { background: var(--pf-verde-texto); } .t3-pt.es-aviso { background: var(--pf-ambar-texto); } .t3-pt.es-mal { background: var(--pf-rojo-texto); }   /* §18: letra blanca a 4.5:1 (con el relleno del sistema daba 2.1–3.6:1) */
.t3-pt:hover { filter: brightness(1.1); transform: translateY(-1px); }
.t3-wip { display: flex; gap: 2px; height: 12px; margin: 3px 0 2px; }
.t3-wip i { display: block; min-width: 3px; border-radius: 3px; }
.t3-ley { display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: max(12px, .7rem); color: var(--pf-texto-2); }
.t3-ley a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.t3-ley a:hover { color: var(--pf-azul); } .t3-ley i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .t3-ley b { font-weight: 600; }
.t3-atencion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; padding: 8px 12px; background: var(--pf-caja); border: 1px solid var(--pf-borde); border-left: 3px solid var(--pf-ambar); border-radius: 10px; }
.t3-atencion-t { font-size: .78rem; font-weight: 600; color: var(--pf-texto-2); margin-right: 4px; }
.t3-atencion .chip { text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.t3-flujo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 26px; }
@media (max-width: 900px) { .t3-flujo { grid-template-columns: minmax(0, 1fr); } }
.t3-grupo h3 { margin: 0 0 6px; font-size: .82rem; font-weight: 600; color: var(--pf-titulo); display: flex; justify-content: space-between; gap: 8px; }
.t3-grupo h3 span { font-weight: 500; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }
.t3-est { display: grid; grid-template-columns: 104px minmax(0, 1fr) 54px; align-items: center; gap: 8px; min-height: 30px; padding: 2px 6px; margin: 0 -6px; border-radius: 7px; color: var(--pf-texto); text-decoration: none; font-size: .8rem; }
.t3-est:hover { background: var(--pf-caja-hover); }
.t3-est-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3-est-b { display: block; height: 12px; background: var(--pf-rejilla); border-radius: 4px; overflow: hidden; }
.t3-est-b i { display: block; height: 100%; border-radius: 4px; }
.t3-est b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pf-titulo); }
.tab-heat tr.hc-sin { display: none; }
.tab-heat.hc-abierta tr.hc-sin { display: table-row; }
.tab-heat tr.hc-grupo td { padding: 4px 0; }
.hc-toggle { width: 100%; text-align: left; border: 1px dashed var(--pf-borde-fuerte); background: var(--pf-caja-suave); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .76rem; color: var(--pf-texto-2); cursor: pointer; min-height: 36px; }
.hc-toggle span { font-weight: 600; color: var(--pf-azul); margin-right: 4px; }
.hc-toggle b { color: var(--pf-azul); }
.hc-toggle:hover { background: var(--pf-caja-hover); }
.tab-heat.hc-abierta tr.hc-grupo { position: sticky; left: 0; }

/* ================= Entrenamiento (v0.445.0, 11-sep-2026) ================= */
/* Lección */
.ent-ceja { font-size: .8rem; color: var(--pf-texto-3); margin: 0 0 6px; }
.ent-ceja a { color: var(--pf-azul); }
.ent-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ent-h1 { margin: 0; font-size: 1.35rem; color: var(--pf-titulo); letter-spacing: -.01em; }
.ent-chip { display: inline-flex; align-items: center; gap: 4px; }
.ent-puedes { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--pf-azul-fondo); border: 1px solid var(--pf-azul-borde); color: var(--pf-titulo); font-size: .95rem; line-height: 1.45; }
.ent-puedes span { display: block; font-size: max(12px, 11px); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--pf-azul); margin-bottom: 3px; }
.ent-bloque h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1rem; color: var(--pf-titulo); }
.ent-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pf-azul-fuerte); color: #fff; font-style: normal; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.ent-caso { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--pf-texto); }
.ent-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.ent-pasos li { counter-increment: paso; position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 12px 0 12px 38px; border-top: 1px solid var(--pf-borde-suave); font-size: .9rem; line-height: 1.45; }
.ent-pasos li:first-child { border-top: 0; }
.ent-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pf-azul); color: var(--pf-azul); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.ent-paso { font-weight: 600; color: var(--pf-titulo); }
.ent-clave span, .ent-porque span { display: block; font-size: max(12px, 10.5px); font-weight: 600; letter-spacing: .35px; text-transform: uppercase; color: var(--pf-texto-3); margin-bottom: 2px; }
.ent-clave { color: var(--pf-texto); } .ent-porque { color: var(--pf-texto-2); }
.ent-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.ent-acciones .boton { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; }
.boton.ent-cta { background: var(--pf-azul-fuerte); color: #fff; border-color: var(--pf-azul-fuerte); font-weight: 600; }
.boton.ent-cta:hover { background: var(--pf-azul-fuerte-hover); }
.ent-nota-demo { margin: 0; }
.ent-quiz fieldset { border: 1px solid var(--pf-borde-suave); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
.ent-quiz legend { padding: 0 4px; font-weight: 600; color: var(--pf-titulo); font-size: .92rem; line-height: 1.4; }
.ent-op { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin: 4px 0; border-radius: 9px; cursor: pointer; font-size: .9rem; min-height: 40px; border: 1px solid transparent; }
.ent-op:hover { background: var(--pf-caja-hover); }
.ent-op input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.ent-op.es-correcta { background: var(--pf-verde-fondo); border-color: var(--pf-verde-borde); }
.ent-op.es-elegida-mal { background: var(--pf-rojo-fondo); border-color: var(--pf-rojo-borde); }
.ent-q.es-ok { border-color: var(--pf-verde-borde); } .ent-q.es-mal { border-color: var(--pf-ambar-borde); }
.ent-por { margin: 8px 2px 0; font-size: .86rem; line-height: 1.45; color: var(--pf-texto-2); }
.ent-resultado { font-size: .9rem; font-weight: 600; }
.ent-resultado.es-ok { color: var(--pf-verde-texto); } .ent-resultado.es-aviso { color: var(--pf-ambar-texto); }
.ent-resultado a { margin-left: 4px; }
.ent-tarjeta { max-width: 460px; padding: 16px 18px; border: 2px dashed var(--pf-borde-fuerte); border-radius: 14px; background: var(--pf-caja-suave); }
.ent-tarjeta b { display: block; font-size: 1rem; color: var(--pf-titulo); margin-bottom: 8px; }
.ent-tarjeta ol { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.5; }
.ent-tarjeta small { display: block; margin-top: 10px; font-size: max(12px, 11px); color: var(--pf-texto-3); }
.ent-grs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ent-gr-link { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--pf-borde-suave); border-radius: 11px; background: var(--pf-caja); cursor: pointer; font: inherit; min-height: 44px; }
.ent-gr-link:hover { background: var(--pf-caja-hover); border-color: var(--pf-azul-borde); }
.ent-gr-link b { color: var(--pf-titulo); font-size: .9rem; } .ent-gr-link span { color: var(--pf-texto-2); font-size: .84rem; }
.ent-mejora textarea { width: 100%; font: inherit; font-size: .9rem; padding: 10px 12px; border: 1px solid var(--pf-borde); border-radius: 10px; resize: vertical; }
.ent-mejora-ok { font-size: .86rem; color: var(--pf-verde-texto); }
.ent-navega { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 24px; }
.ent-navega .boton { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Inicio y rutas */
.ent-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.ent-hero h2 { margin: 0 0 6px; }
.ent-hero p { margin: 0 0 12px; font-size: .92rem; line-height: 1.5; color: var(--pf-texto-2); }
.ent-barra { position: relative; height: 8px; border-radius: 99px; background: var(--pf-rejilla); overflow: hidden; min-width: 90px; }
.ent-barra i { position: absolute; inset: 0 auto 0 0; background: var(--pf-verde); border-radius: 99px; }
.ent-barra-g { height: 10px; margin-bottom: 6px; }
.ent-barra-n { font-size: .82rem; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }
.ent-hero .ent-barra-n { margin: 0; }
.ent-sig { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 14px; background: var(--pf-azul-fuerte); color: #fff; text-decoration: none; min-height: 44px; }
.ent-sig:hover { background: var(--pf-azul-fuerte-hover); }
.ent-sig span { font-size: max(12px, 11px); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; opacity: .8; }
.ent-sig b { font-size: 1.05rem; line-height: 1.3; } .ent-sig i { font-style: normal; font-size: .85rem; opacity: .9; }
.ent-sig-fin { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); border: 1px solid var(--pf-verde-borde); }
.ent-ruta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ent-ruta-cab h2 { margin: 0; }
.ent-lista { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--pf-borde-suave); border-radius: 12px; overflow: hidden; }
.ent-lista li + li { border-top: 1px solid var(--pf-borde-suave); }
.ent-lista a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: inherit; text-decoration: none; min-height: 52px; }
.ent-lista a:hover { background: var(--pf-caja-hover); }
.ent-marca { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pf-borde-fuerte); display: grid; place-items: center; }
.ent-lista .es-vista .ent-marca { border-color: var(--pf-azul); }
.ent-lista .es-hecha .ent-marca { border-color: var(--pf-verde); background: var(--pf-verde); color: #fff; }
.ent-li-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ent-li-txt b { color: var(--pf-titulo); font-size: .92rem; } .ent-li-txt small { color: var(--pf-texto-3); font-size: .8rem; line-height: 1.35; }
.ent-li-min { flex: 0 0 auto; font-size: .78rem; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }
.ent-equipo td { vertical-align: middle; } .ent-equipo .ent-barra { display: inline-block; width: 110px; vertical-align: middle; margin-right: 8px; }
.ent-mejoras { list-style: none; margin: 0; padding: 0; font-size: .88rem; } .ent-mejoras li { padding: 9px 0; border-top: 1px solid var(--pf-borde-suave); line-height: 1.45; }
/* Botón "¿Cómo leo esto?" junto al título de una gráfica (la etiqueta va en ::after para no cambiar el texto del título) */
.ent-como { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px 2px 6px; min-height: 26px; vertical-align: middle; border: 1px solid var(--pf-azul-borde); border-radius: 99px; background: var(--pf-azul-fondo); color: var(--pf-azul); font: 600 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; white-space: nowrap; }
.ent-como::after { content: "¿Cómo leo esto?"; }
.ent-como:hover { background: var(--pf-caja); border-color: var(--pf-azul); }
.ent-como:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: 2px; }
.ent-como.ent-como-chico { padding: 0; width: 22px; min-height: 22px; height: 22px; justify-content: center; margin-left: 6px; }
.ent-como.ent-como-chico::after { content: none; }
/* Caja de toque de 36 px con el dibujo de 26 (22 el chico): el ::before invisible agranda lo que se puede tocar (16-oct-2026) */
.ent-como { position: relative; }
.ent-como::before { content: ""; position: absolute; inset: -6px -2px; }
.ent-como.ent-como-chico::before { inset: -7px; }
/* Guía de la gráfica (usa .gr-panel/.gr-velo) */
.gr-panel.ent-guia.ent-izq { right: auto; left: 12px; }
.ent-g-sec { margin: 0 0 16px; }
.ent-g-sec h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--pf-texto-3); }
.ent-g-sec p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--pf-texto); }
.ent-g-partes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ent-g-parte { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 8px 10px; border: 1px solid var(--pf-borde-suave); border-radius: 10px; background: var(--pf-caja-suave); font: inherit; font-size: .88rem; line-height: 1.4; color: var(--pf-texto); cursor: pointer; min-height: 40px; }
.ent-g-parte:hover { border-color: var(--pf-azul-borde); background: var(--pf-caja-hover); }
.ent-g-n, .ent-num-flota { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pf-ambar); color: #fff; font: 700 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; flex: 0 0 auto; }
.ent-num-flota { position: fixed; z-index: 1305; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
/* v0.446.3: caja punteada sobre lo que señala cada número (la regla de colocación vive en entrenamiento.js · colocaNumeros; la revisa scripts/qa_guias.js) */
.ent-num-caja { position: fixed; z-index: 1304; border: 2px dashed color-mix(in srgb, var(--pf-ambar) 75%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--pf-ambar) 5%, transparent); pointer-events: none; transition: box-shadow .15s ease, border-color .15s ease; }
.ent-num-caja.activa { border-style: solid; border-color: var(--pf-ambar); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-ambar) 22%, transparent); }
.ent-g-hoy { padding: 10px 12px; border-radius: 10px; background: var(--pf-azul-fondo); border: 1px solid var(--pf-azul-borde); }
.ent-g-aviso { padding: 10px 12px; border-radius: 10px; background: var(--pf-ambar-fondo); border: 1px solid var(--pf-ambar-borde); }
.ent-g-error { padding: 10px 12px; border-radius: 10px; background: var(--pf-caja-suave); border: 1px solid var(--pf-borde); }
.ent-g-q { font-weight: 600; color: var(--pf-titulo) !important; margin-bottom: 8px !important; }
.ent-g-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.ent-g-op { padding: 8px 12px; min-height: 40px; border: 1px solid var(--pf-borde); border-radius: 10px; background: var(--pf-caja); font: inherit; font-size: .86rem; cursor: pointer; text-align: left; }
.ent-g-op:hover { background: var(--pf-caja-hover); }
.ent-g-op.es-ok { background: var(--pf-verde-fondo); border-color: var(--pf-verde-borde); color: var(--pf-verde-texto); font-weight: 600; }
.ent-g-op.es-mal { background: var(--pf-rojo-fondo); border-color: var(--pf-rojo-borde); color: var(--pf-rojo-texto); }
.ent-g-fb { margin-top: 8px !important; font-size: .86rem !important; }
.ent-g-fb.es-ok { color: var(--pf-verde-texto) !important; } .ent-g-fb.es-mal { color: var(--pf-ambar-texto) !important; }
.ent-pulso { animation: ent-pulso 1.2s ease 2; }
@keyframes ent-pulso { 0%, 100% { outline: 3px solid transparent; outline-offset: 4px; } 40% { outline: 3px solid var(--pf-ambar); outline-offset: 4px; } }
/* Muéstrame */
.ent-aro { position: fixed; z-index: 1400; border-radius: 10px; box-shadow: 0 0 0 3px var(--pf-ambar), 0 0 0 9999px rgba(0, 0, 0, .28); pointer-events: none; transition: all .2s ease; }
.ent-globo { position: fixed; z-index: 1410; width: min(360px, calc(100vw - 16px)); background: var(--pf-caja); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); padding: 10px 14px 12px; border-top: 4px solid var(--pf-ambar); }
.ent-globo.ent-globo-centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.ent-globo-cab { display: flex; align-items: center; justify-content: space-between; }
.ent-globo-ceja { font-size: max(12px, 11px); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--pf-ambar-texto); }
.ent-globo-tit { margin: 0 0 4px; font-size: .8rem; color: var(--pf-texto-3); }
.ent-globo-txt { margin: 0 0 8px; font-size: .95rem; line-height: 1.45; color: var(--pf-titulo); }
.ent-globo-nota { margin: 0 0 8px; font-size: .8rem; color: var(--pf-ambar-texto); }
.ent-globo-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ent-globo-vol { font-size: .8rem; }
.ent-globo-nav { display: flex; gap: 6px; margin-left: auto; } .ent-globo-nav .boton { min-height: 38px; }
@media (max-width: 720px) {
  .ent-pasos li { grid-template-columns: minmax(0, 1fr); padding-left: 36px; }
  .ent-hero { grid-template-columns: minmax(0, 1fr); }
  .ent-navega .boton { width: 100%; }
  .ent-globo { left: 8px !important; right: 8px; width: auto; }
  .ent-como { min-height: 36px; }   /* 0.484 B: toque de 36 px en teléfono (QA 26-sep) */
  .ent-como.ent-como-chico { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .ent-pulso { animation: none; outline: 3px solid var(--pf-ambar); } .ent-aro { transition: none; } }
/* Imprimir solo la tarjeta de un paso */
/* v0.489.2: antes se ocultaba con visibility y la página conservaba su alto (12 hojas en blanco). Ahora el JS copia la tarjeta a
   #ent-print, hijo directo de body, y todo lo demás sale con display:none → una sola hoja. */
#ent-print { display: none; }
@media print {
  html.ent-imprime body > *:not(#ent-print) { display: none !important; }
  html.ent-imprime, html.ent-imprime body { height: auto !important; min-height: 0 !important; overflow: visible !important; background: var(--pf-caja) !important; }
  html.ent-imprime #ent-print { display: block !important; margin: 0; padding: 0; }
  /* Medidas en vw: la app de escritorio ajusta el ancho de la ventana a la hoja; con px la tarjeta salía diminuta en una esquina. */
  html.ent-imprime #ent-print .ent-tarjeta { width: 62vw; max-width: none; box-sizing: border-box; padding: 2.4vw 2.8vw; border: .3vw solid #000; border-radius: 1.6vw; background: var(--pf-caja); color: #000; break-inside: avoid; page-break-inside: avoid; }
  html.ent-imprime #ent-print .ent-tarjeta b { font-size: 2.6vw; margin-bottom: 1.2vw; color: #000; }
  html.ent-imprime #ent-print .ent-tarjeta ol { font-size: 1.9vw; line-height: 1.5; padding-left: 3vw; }
  html.ent-imprime #ent-print .ent-tarjeta small { font-size: 1.3vw; margin-top: 1.4vw; color: #000; }
}

/* ===== Tomar foto (v0.446.0): accesos en la cabecera, Mi producción y la orden. La página tiene su propia hoja css/foto.css ===== */
.cab-foto { color: inherit; text-decoration: none; }
.mp-head .mp-foto { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 1px solid var(--pf-borde); border-radius: 999px; background: var(--pf-caja); color: var(--pf-azul-fuerte); font-size: .82rem; font-weight: 600; text-decoration: none; }
.mp-head .mp-foto:hover { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); }
.ciclo-botones .ciclo-foto, .ev-tomar .boton { display: inline-flex; align-items: center; gap: 6px; }
.ev-tomar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }

/* ===== Menú de usuario: cambiar producción ⇄ demo (v0.446.2) ===== */
.usuario-menu .um-entorno { align-items: flex-start; }
.usuario-menu .um-entorno .ico { margin-top: 2px; }
.usuario-menu .um-entorno .ico { flex-shrink: 0; }   /* el texto de dos líneas lo encogía a 13 px */
.usuario-menu .um-entorno span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usuario-menu .um-entorno b { font-weight: 500; }
.usuario-menu .um-entorno i { font-style: normal; font-size: 12px; color: var(--pf-texto-3); line-height: 1.35; }

/* v0.449 — Descripción de la orden de trabajo (Orden 360°) */
.o360-desc summary { cursor: pointer; list-style-position: outside; }
.o360-dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 4px 14px; margin: 6px 0 0; font-size: .92rem; }
.o360-dl dt { color: var(--pf-texto-3); font-weight: 600; } .o360-dl dd { margin: 0; }
@media (max-width: 720px) { .o360-dl { grid-template-columns: 1fr; } .o360-dl dt { margin-top: 6px; } }

/* v0.450 (Alexis 11-sep, punto 6): nombre descriptivo como subnombre; el nombre original del catálogo se conserva arriba. */
.act-sub { display: block; font-size: .78rem; line-height: 1.3; color: var(--pf-texto-2); font-style: italic; }
.act-sub-h1 { margin: -4px 0 6px; font-size: 1.02rem; color: var(--pf-texto-2); font-style: italic; }
.o360-nombre-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.o360-nombre-form label { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.paginacion-arriba { margin: 0 0 10px; flex-wrap: wrap; }
.paginacion-arriba span { flex: 1 1 320px; }
/* v0.451: Mi perfil → Mi menú (idea de iUto) */
.menu-prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 0 18px; }
.form-perfil .menu-prefs .pref-check { margin-top: 6px; }

/* ===================== Entrada animada de las gráficas (v0.455) =====================
   Pedido de Pablo (12-sep-2026): "que cuando se abra la pantalla donde está esa gráfica
   vaya a su lugar de forma animada". Una sola gramática de movimiento para TODO lo que
   dibuja datos (SVG y HTML), con estas reglas:

   - La animación es de ENTRADA y corre UNA vez, cuando la gráfica entra en pantalla
     (js/anim.js, IntersectionObserver). No se repite al hacer scroll de regreso.
   - Cada cosa se mueve hacia donde vive el dato: la barra crece desde su base, la barra
     horizontal desde su origen, la línea se dibuja de izquierda a derecha, el punto
     aparece en su coordenada. Nada entra "volando" desde fuera: el ojo tiene que poder
     seguir el valor, no adivinarlo.
   - Orden: fondo y rejilla → áreas → barras → líneas → puntos → etiquetas. El número
     nunca aparece antes que la marca que explica.
   - Duración total ≈ 0.8 s. El escalonado se REPARTE entre las marcas que haya (anim.js
     calcula el paso): una gráfica de 60 barras tarda lo mismo que una de 6.
   - El estado inicial solo existe si el motor está vivo (html.ga): sin JS, con JS viejo,
     con movimiento reducido o al imprimir, la gráfica se ve completa desde el primer paint.
   - Todo es transform/opacity/clip-path (compositor). Nada de animar width, x, height ni
     top: eso relayoutea la página entera en cada cuadro.
   - Las marcas siguen siendo clicables desde el primer momento: se anima la forma que se
     ve, nunca el rectángulo invisible que recibe el clic. */

@keyframes ga-up    { from { transform: scaleY(0); }                    to { transform: scaleY(1); } }
@keyframes ga-right { from { transform: scaleX(0); }                    to { transform: scaleX(1); } }
@keyframes ga-left  { from { transform: scaleX(0); }                    to { transform: scaleX(1); } }
@keyframes ga-pop   { from { transform: scale(.35); opacity: 0; }       to { transform: scale(1); opacity: 1; } }
@keyframes ga-fade  { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes ga-rise  { from { opacity: 0; transform: translateY(4px); }  to { opacity: 1; transform: none; } }
@keyframes ga-draw  { from { stroke-dashoffset: 1; }                    to { stroke-dashoffset: 0; } }
@keyframes ga-wipe  { from { clip-path: inset(0 100% 0 0); }            to { clip-path: inset(0 0 0 0); } }
@keyframes ga-aro   { from { stroke-dashoffset: var(--ga-c, 200); } }

/* El origen del crecimiento: la caja de la propia forma, no el lienzo del SVG. */
html.ga svg[data-ga] .ga-up,
html.ga svg[data-ga] .ga-right,
html.ga svg[data-ga] .ga-left,
html.ga svg[data-ga] .ga-pop,
html.ga svg[data-ga] .ga-rise { transform-box: fill-box; }
html.ga [data-ga] .ga-up    { transform-origin: 50% 100%; }
html.ga [data-ga] .ga-right { transform-origin: 0 50%; }
html.ga [data-ga] .ga-left  { transform-origin: 100% 50%; }
html.ga [data-ga] .ga-pop   { transform-origin: 50% 50%; }

/* Antes de entrar en pantalla */
html.ga [data-ga]:not(.ga-on) .ga-up    { transform: scaleY(0); }
html.ga [data-ga]:not(.ga-on) .ga-right,
html.ga [data-ga]:not(.ga-on) .ga-left  { transform: scaleX(0); }
html.ga [data-ga]:not(.ga-on) .ga-pop   { transform: scale(.35); opacity: 0; }
html.ga [data-ga]:not(.ga-on) .ga-fade,
html.ga [data-ga]:not(.ga-on) .ga-rise  { opacity: 0; }
html.ga [data-ga]:not(.ga-on) .ga-draw  { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.ga [data-ga]:not(.ga-on) .ga-wipe  { clip-path: inset(0 100% 0 0); }
html.ga [data-ga]:not(.ga-on) .ga-aro   { stroke-dashoffset: var(--ga-c, 200); }

/* Al entrar. --ga-d lo pone anim.js: reparte el escalonado entre las marcas que haya. */
html.ga [data-ga].ga-on .ga-up,
html.ga [data-ga].ga-on .ga-right,
html.ga [data-ga].ga-on .ga-left  { animation: ga-up .44s cubic-bezier(.22, .68, .24, 1) var(--ga-d, 0ms) both; }
html.ga [data-ga].ga-on .ga-right { animation-name: ga-right; }
html.ga [data-ga].ga-on .ga-left  { animation-name: ga-left; }
html.ga [data-ga].ga-on .ga-pop   { animation: ga-pop .3s cubic-bezier(.34, 1.28, .64, 1) var(--ga-d, 0ms) both; }
html.ga [data-ga].ga-on .ga-fade  { animation: ga-fade .26s ease-out var(--ga-d, 0ms) both; }
html.ga [data-ga].ga-on .ga-rise  { animation: ga-rise .3s ease-out var(--ga-d, 0ms) both; }
html.ga [data-ga].ga-on .ga-draw  { stroke-dasharray: 1; animation: ga-draw .62s cubic-bezier(.32, .66, .28, 1) var(--ga-d, 0ms) both; }
html.ga [data-ga].ga-on .ga-wipe  { animation: ga-wipe .5s cubic-bezier(.22, .68, .24, 1) var(--ga-d, 0ms) both; }
html.ga [data-ga].ga-on .ga-aro   { animation: ga-aro .7s cubic-bezier(.22, .68, .24, 1) var(--ga-d, 0ms) both; }

/* Movimiento reducido y papel: la gráfica completa, sin una sola animación.
   (Con movimiento reducido layout.php ni siquiera enciende html.ga; esto es el cinturón.) */
@media (prefers-reduced-motion: reduce) {
  html.ga [data-ga] .ga-up, html.ga [data-ga] .ga-right, html.ga [data-ga] .ga-left,
  html.ga [data-ga] .ga-pop, html.ga [data-ga] .ga-fade, html.ga [data-ga] .ga-rise,
  html.ga [data-ga] .ga-draw, html.ga [data-ga] .ga-wipe, html.ga [data-ga] .ga-aro { animation: none; transform: none; opacity: 1; clip-path: none; }
  html.ga [data-ga] .ga-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.ga [data-ga] .ga-aro  { stroke-dashoffset: var(--ga-fin, 0); }
}
@media print {
  html.ga [data-ga] .ga-up, html.ga [data-ga] .ga-right, html.ga [data-ga] .ga-left,
  html.ga [data-ga] .ga-pop, html.ga [data-ga] .ga-fade, html.ga [data-ga] .ga-rise,
  html.ga [data-ga] .ga-draw, html.ga [data-ga] .ga-wipe, html.ga [data-ga] .ga-aro { animation: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
  html.ga [data-ga] .ga-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  html.ga [data-ga] .ga-aro  { stroke-dashoffset: var(--ga-fin, 0) !important; }
}

/* ---- Mi perfil por pestañas y Marcador del entrenamiento (v0.455.0, 12-sep-2026) ----------------------------
   Centrado siempre con flex/grid (nunca margin a ojo) y targets ≥36 px en pantalla chica: /kratfel-formato. */

/* Dos columnas sin estirar: cada tarjeta con su alto (si no, la corta queda con un hueco blanco abajo). */
.dos-columnas.arriba { align-items: start; }

/* Lo tuyo por rol */
.perf-tareas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.perf-tareas li { display: flex; align-items: stretch; }
.perf-tareas a { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--pf-borde-suave); background: var(--pf-caja); color: var(--pf-texto); font-size: .9rem; line-height: 1.4; text-decoration: none; }
.perf-tareas a:hover { background: var(--pf-caja-hover); border-color: var(--pf-azul-borde); color: var(--pf-titulo); }
.perf-tareas-extra a { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); color: var(--pf-titulo); }

/* Alcance por área */
.perf-alcance { margin: 0 0 10px; font-size: .92rem; line-height: 1.5; color: var(--pf-texto); }
.perf-alcance-vacio { padding: 10px 14px; border-radius: 10px; background: var(--pf-ambar-fondo); border: 1px solid var(--pf-ambar-borde); color: var(--pf-ambar-texto); }
.perf-areas { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.perf-areas li { display: flex; align-items: center; padding: 5px 11px; border-radius: 99px; background: var(--pf-rejilla); color: var(--pf-texto-2); font-size: .84rem; }

/* Lo que más abres */
.perf-atajos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.perf-atajos a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--pf-borde-suave); background: var(--pf-caja); color: var(--pf-titulo); font-size: .9rem; text-decoration: none; }
.perf-atajos a:hover { background: var(--pf-caja-hover); border-color: var(--pf-azul-borde); }
.perf-atajos a span { flex: 0 0 auto; font-size: .8rem; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }

/* Últimos avisos */
.perf-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.perf-avisos li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--pf-caja-suave); font-size: .88rem; line-height: 1.4; }
.perf-avisos li.es-nueva { background: var(--pf-azul-fondo); }
.perf-avisos li > span { display: block; min-width: 0; }
.perf-avisos small { display: block; margin-top: 2px; font-size: .78rem; color: var(--pf-texto-3); }

/* Lo que abres con tu rol */
.perf-modulos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px 16px; }
.perf-modulos li { display: grid; gap: 1px; padding: 7px 0; border-top: 1px solid var(--pf-borde-suave); }
.perf-mod-n { font-size: .9rem; color: var(--pf-titulo); }
.perf-mod-q { font-size: .82rem; line-height: 1.4; color: var(--pf-texto-2); }

/* Mi sesión */
.perf-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 0 10px; font-size: .9rem; }
.perf-datos dt { color: var(--pf-texto-3); font-size: .82rem; display: flex; align-items: center; }
.perf-datos dd { margin: 0; color: var(--pf-texto); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Marcador */
.mrc-lugar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; font-size: .95rem; line-height: 1.5; color: var(--pf-texto); }
.mrc-lugar-n { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; color: var(--pf-azul-fuerte); font-variant-numeric: tabular-nums; }
.mrc-podio { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mrc-podio li { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--pf-borde-suave); background: var(--pf-caja-suave); }
.mrc-podio-1 { border-color: #d9bd6a; background: #fdf7e6; }
.mrc-podio-2 { border-color: #c3ccd6; background: #f6f8fb; }
.mrc-podio-3 { border-color: #d6bca6; background: #fbf4ee; }
.mrc-podio li.es-yo { box-shadow: 0 0 0 2px var(--pf-azul-borde); }
.mrc-podio-n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--pf-caja); color: var(--pf-titulo); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mrc-podio-q { display: grid; gap: 1px; min-width: 0; font-size: .92rem; color: var(--pf-titulo); overflow: hidden; text-overflow: ellipsis; }
.mrc-podio-q small { font-size: .76rem; color: var(--pf-texto-3); }
.mrc-podio-p { flex: 0 0 auto; margin-left: auto; font-size: 1.05rem; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.mrc-tabla td .ent-barra { min-width: 120px; }
.mrc-tabla tr.es-yo td { background: var(--pf-azul-fondo); }
.mrc-tabla td:first-child { font-variant-numeric: tabular-nums; }
.mrc-roles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.mrc-roles li { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mrc-rol-n { font-size: .88rem; color: var(--pf-titulo); }
/* Marcador por área (v0.461): cada área es un <details> — se pliega sin JS y sigue funcionando al imprimir. */
.mrc-modo { margin: 4px 0 14px; }
.mrc-grupo { border: 1px solid var(--pf-borde); border-radius: 12px; margin: 0 0 10px; background: var(--pf-caja-suave); }
.mrc-grupo[open] { background: var(--pf-caja); }
.mrc-grupo > summary { display: grid; grid-template-columns: 42px minmax(140px, 1fr) minmax(90px, 1.2fr) 62px; align-items: center;
  gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 12px; min-height: 44px; }
.mrc-grupo > summary::-webkit-details-marker { display: none; }
.mrc-grupo > summary:hover { background: var(--pf-caja-hover); }
.mrc-grupo > summary:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: -2px; }
.mrc-g-lugar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--pf-azul-fondo); color: var(--pf-azul); font-size: .86rem; font-variant-numeric: tabular-nums; }
.mrc-g-nom { font-size: .95rem; color: var(--pf-titulo); }
.mrc-g-barra .ent-barra { display: block; }
.mrc-g-pct { text-align: right; font-size: 1.05rem; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.mrc-g-n { grid-column: 2 / -1; font-size: .78rem; color: var(--pf-texto-3); }
.mrc-grupo > .tabla-scroll { padding: 0 14px 12px; }
@media (max-width: 720px) {
  .mrc-podio { grid-template-columns: 1fr; }
  .mrc-roles li { grid-template-columns: 1fr; gap: 4px; }
  .mrc-grupo > summary { grid-template-columns: 42px minmax(0, 1fr) 62px; }
  .mrc-g-barra { display: none; }
  .perf-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .perf-datos dd { margin-bottom: 8px; }
}

/* ── Hora de México + la hora de quien mira (v0.456) ──
   El <time> trae la hora de México; erp_app.js le añade dentro un <i class="hora-tu"> con la local SOLO si el
   navegador está en otro huso, pone <html class="hora-2"> y rotula las dos columnas una vez por día (.hist-horas-cab).
   Las dos cajas miden lo mismo, así el rótulo cae exactamente encima de su número. Para el equipo en México no
   cambia nada: ni segunda hora, ni rótulos, ni columna más ancha. */
.hora-tu { font-style: normal; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }   /* §18: 4.5:1 */
.hora-n { font-variant-numeric: tabular-nums; }
html.hora-2 .hist-lista { margin-left: 104px; }
html.hora-2 .hist-hora { left: -106px; top: 8px; width: 92px; display: flex; align-items: baseline; justify-content: flex-end; gap: 0; }
html.hora-2 .hist-hora .hora-n,
html.hora-2 .hist-hora .hora-tu { flex: 0 0 46px; text-align: right; }
html.hora-2 .hist-hora .hora-tu { font-size: 12px; }
html.hora-2 .hist-horas-cab { display: flex; align-items: baseline; justify-content: flex-end; width: 92px; margin: 0 0 3px -2px;
                              font-size: 12px; letter-spacing: .03em; color: var(--pf-texto-3); }   /* §18: 4.5:1 */
html.hora-2 .hist-horas-cab .hora-n,
html.hora-2 .hist-horas-cab .hora-tu { flex: 0 0 46px; text-align: right; font-size: 12px; }
.hora-aviso { margin: -4px 0 10px; }
@media (max-width: 720px) {
  html.hora-2 .hist-lista { margin-left: 88px; }
  html.hora-2 .hist-hora { left: -90px; width: 78px; }
  html.hora-2 .hist-hora .hora-n, html.hora-2 .hist-hora .hora-tu,
  html.hora-2 .hist-horas-cab .hora-n, html.hora-2 .hist-horas-cab .hora-tu { flex-basis: 39px; }
  html.hora-2 .hist-hora .hora-tu { font-size: 12px; }
  html.hora-2 .hist-horas-cab { width: 78px; font-size: 12px; }
  html.hora-2 .hist-horas-cab .hora-n, html.hora-2 .hist-horas-cab .hora-tu { font-size: 12px; }
}

/* ================= Bitácora de campo: trabajar sin señal (v0.455) =================
   Chip fijo abajo a la derecha con lo que falta por salir, panel de la cola del dispositivo y
   bandeja de choques (conflictos.php). Todo lo que va dentro de una caja de alto fijo se centra
   con flex, nunca con margin (lección del Gantt, 12-sep). */

.campo-chip {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--pf-azul-borde); border-radius: 22px;
  background: var(--pf-caja); color: var(--pf-azul);
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(28, 28, 30, .16);
}
.campo-chip:hover { background: var(--pf-azul-fondo); }
.campo-chip .ico { flex: 0 0 auto; }
.campo-chip span { flex: 0 0 auto; }
.campo-chip-choque { border-color: var(--pf-ambar-borde); background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); }

.campo-panel {
  position: fixed; right: 14px; bottom: 62px; z-index: 61;
  width: min(420px, calc(100vw - 28px)); max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(28, 28, 30, .22);
}
.campo-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                   padding: 12px 14px; border-bottom: 1px solid var(--pf-borde-suave); }
.campo-panel-cab h2 { margin: 0; font-size: 1rem; }
.campo-x { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
           border: 1px solid var(--pf-borde); border-radius: 8px; background: var(--pf-caja); cursor: pointer; color: var(--pf-texto-2); }
.campo-x:hover { background: var(--pf-caja-hover); }
.campo-lista { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1 1 auto; }
.campo-fila { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--pf-borde-suave); }
.campo-fila:last-child { border-bottom: none; }
.campo-fila-mal { background: var(--pf-ambar-fondo); }
.campo-hora { font-size: .78rem; color: var(--pf-texto-3); font-variant-numeric: tabular-nums; }
.campo-nota { font-size: .8rem; color: var(--pf-ambar-texto); }
.campo-acc { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.campo-acc button { min-height: 36px; padding: 0 12px; border: 1px solid var(--pf-borde); border-radius: 8px;
                    background: var(--pf-caja); font: inherit; font-size: .82rem; cursor: pointer; }
.campo-acc button:hover { background: var(--pf-caja-hover); }
.campo-panel-pie { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--pf-borde-suave); }
.campo-vacio { color: var(--pf-texto-3); padding: 14px; margin: 0; }

/* Confirmación dentro del propio formulario cuando la captura se guardó sin señal */
.campo-guardado {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--pf-azul-borde); border-radius: 9px;
  background: var(--pf-azul-fondo); color: var(--pf-azul); font-size: .88rem;
}
.campo-guardado .ico { flex: 0 0 auto; }

/* Bandeja de choques */
.campo-choque-abierto { border-left: 3px solid var(--pf-ambar); }
.campo-quien { color: var(--pf-texto-3); font-size: .85rem; margin: -2px 0 8px; }
.campo-porque { margin: 0 0 12px; }
.campo-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-lado { background: var(--pf-caja-suave); border: 1px solid var(--pf-borde-suave); border-radius: 10px; padding: 10px 12px; }
.campo-lado h3 { margin: 0 0 6px; font-size: .85rem; color: var(--pf-texto-2); }
.campo-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: .87rem; }
.campo-dl dt { color: var(--pf-texto-3); }
.campo-dl dd { margin: 0; color: var(--pf-texto); }
/* Una sola columna a propósito: .ciclo-form reparte en columnas automáticas y aquí el orden importa
   — primero el porqué, luego la decisión, luego la explicación. */
.campo-resolver { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
.campo-resolver > * { grid-column: 1 / -1; }
.campo-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.campo-botones .boton { min-height: 40px; display: flex; align-items: center; }
.campo-botones .ciclo-primaria { font-weight: 600; }
.campo-ayuda { color: var(--pf-texto-3); font-size: .82rem; margin: 4px 0 0; }

@media (max-width: 720px) {
  .campo-dos { grid-template-columns: 1fr; }
  .campo-chip { right: 10px; bottom: 10px; }
  .campo-panel { right: 8px; left: 8px; width: auto; bottom: 58px; }
}

/* v0.467 — Radar "Qué viene" (Rafa): una señal por renglón, punto de color, qué / cuándo / cuánto y un botón que lleva a corregirlo */
.radar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.radar-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--pf-fondo); border: 1px solid var(--pf-borde-suave); }
.radar-punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--pf-borde-fuerte); }
.radar-rojo .radar-punto { background: var(--pf-rojo); } .radar-ambar .radar-punto { background: var(--pf-ambar); } .radar-azul .radar-punto { background: var(--pf-azul-claro); }
.radar-rojo { border-color: var(--pf-rojo-borde); } .radar-ambar { border-color: var(--pf-ambar-borde); }
.radar-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.radar-tit { font-size: .95rem; color: var(--pf-titulo); }
.radar-det { font-size: .78rem; color: var(--pf-texto-3); }
.radar-lista .boton-chico { flex: 0 0 auto; white-space: nowrap; }
.radar h2 .chip { vertical-align: middle; }
@media (max-width: 720px) { .radar-lista li { flex-wrap: wrap; } .radar-lista .boton-chico { margin-left: 20px; } }
/* v0.477: en teléfonos de 360 px la barra de arriba no cabía (30 px de más): logo un poco más chico */
@media (max-width: 370px) { .movil-marca img { width: 70px; } }

/* ═══ v0.478 · App de escritorio (js/desk.js) ═══
   Lista de atajos (tecla ?) — vale en cualquier navegador. Lo demás solo con html.erp-desk (User-Agent de la app)
   o html.erp-desk-tb (la app ya dibuja su barra nativa: la cabecera web se esconde para no pintarse dos veces). */
.desk-atajos { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .26); display: flex; align-items: center; justify-content: center; padding: 16px; }
.desk-atajos-caja { width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--pf-caja); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); padding: 18px 22px; }
.desk-atajos-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.desk-atajos-cab h2 { font-size: 1.15rem; color: var(--pf-titulo); }
.desk-atajos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.desk-atajos-cols h3 { font-size: .8rem; color: var(--pf-texto-3); font-weight: 500; margin: 6px 0 8px; }
.desk-atajo { display: flex; align-items: center; gap: 12px; min-height: 30px; font-size: .9rem; }
.desk-teclas { flex: 0 0 74px; display: flex; align-items: center; gap: 4px; }
.desk-atajos kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--pf-borde); border-radius: 6px; background: var(--pf-caja-hover); font: inherit; font-size: .8rem; color: var(--pf-titulo); }
.desk-atajos .nota { margin: 12px 0 0; }
@media (max-width: 720px) { .desk-atajos-cols { grid-template-columns: 1fr; } }
.desk-pasos { margin: 0 0 0 18px; display: grid; gap: 8px; font-size: .88rem; }
.tarjeta[data-desk-os] .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; width: auto; }

html.erp-desk body { font-family: -apple-system, system-ui, "Segoe UI", sans-serif; }
html.erp-desk-tb .ayuda-flotante, html.erp-desk-tb .hist-linea [data-hist], html.erp-desk-tb .hist-linea .hist-sep,
html.erp-desk-tb .vc-banda .demo-banda-txt { display: none !important; }   /* la cinta DEMO sí se ve en el programa (Pablo, 12-oct) */
/* v0.541 · programa Mac 1.5 (18-oct-2026): la barra lateral la dibuja la Mac (como Mail o Notas) con lo mismo que este menú
   (erpDesk.nav() en js/desk.js): la página no pinta el suyo ni el panel de la derecha. El contenido toma el ancho solo (.app es flex).
   Con la barra de la Mac plegada (html.erp-desk-sb-plegada), la fila de vistas de la página vuelve a verse. */
html.erp-desk-sb .lateral, html.erp-desk-sb .submenu, html.erp-desk-sb .velo, html.erp-desk-sb .movil-menu { display: none !important; }
html.erp-desk-sb:not(.erp-desk-sb-plegada) .app.con-subnav .pestanas-en-menu { display: none; }
html.erp-desk-sb-plegada .app.con-subnav .pestanas-en-menu { display: flex; }
html.erp-desk-sb.nav-rail .titulo-vista { display: inline; }
html.erp-desk-sb-plegada .titulo-vista { display: none; }
/* v0.478.1 · liga bajo la contraseña que pone la app de escritorio (Passwords.swift): elegir la entrada en la app Contraseñas */
.desk-pick { display: block; margin-top: 8px; font-size: .85rem; }

/* v0.485 — Tipo de entrada (Nancy): fuera de Compra no hay orden de compra ni partidas; el costo solo donde aplica */
[data-alm-entrada]:not([data-tipo-ent="COMPRA"]) [data-ent-paso-oc],
[data-alm-entrada]:not([data-tipo-ent="COMPRA"]) [data-ent-paso-partidas] { display: none !important; }
[data-alm-entrada][data-sin-costo] [data-ent-manual] .alm-lineas th:nth-child(4),
[data-alm-entrada][data-sin-costo] [data-ent-manual] .alm-lineas td:nth-child(4) { display: none; }
[data-ent-solo][hidden] { display: none !important; }

/* v0.487 — Insumo nuevo desde la entrada (Nancy, 28-sep) y Movimientos más legibles */
.alm-nuevo { margin-top: 10px; }
.alm-nuevo-caja { margin-top: 8px; padding: 12px; border: 1px solid var(--pf-borde); border-radius: 10px; }
.alm-nuevo-campos { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(160px, 1fr); gap: 10px; }
@media (max-width: 720px) { .alm-nuevo-campos { grid-template-columns: 1fr; } }
td.alm-fecha, td.sin-partir { white-space: nowrap; }
/* v0.488 — certificados del lote (ficha del insumo, tarjeta Lotes) */
.ald { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ald-doc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ald-doc form, .ald-subir { margin: 0; }
.ald-subir label.boton { cursor: pointer; }
.ald-subiendo { opacity: .6; pointer-events: none; }
/* v0.490 — catálogo a cargo de Compras: datos del insumo, altas por revisar, historial (Hugo, 29-sep) */
.acat-datos { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 6px 16px; margin: 8px 0 12px; }
.acat-datos dt { color: var(--pf-texto-3); }
.acat-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .acat-datos { grid-template-columns: 1fr; gap: 2px; } .acat-datos dd { margin-bottom: 8px; } }
.acat-sub { font-size: 1rem; margin: 14px 0 6px; }
.acat-editar textarea, .acat-mas textarea { font: inherit; }
.acat-sol { border: 1px solid var(--pf-borde); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.acat-sol > summary { cursor: pointer; line-height: 1.5; }
.acat-sol[open] > summary { margin-bottom: 8px; }
.acat-par { margin: 0 0 10px; padding-left: 18px; }
.acat-par li { margin: 3px 0; }
.acat-no { border-top: 1px dashed var(--pf-borde); padding-top: 10px; margin-top: 6px; }
.acat-editar { margin-top: 12px; }
.acat-editar > summary, .acat-mas > summary { cursor: pointer; color: var(--pf-azul); }
.acat-editar[open] > summary { margin-bottom: 8px; }
/* v0.491 — orden de compra hecha en el ERP */
.coc-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 6px; }
.coc-acciones form { margin: 0; }
.coc-cancelar > summary { cursor: pointer; color: var(--pf-azul); }
.coc-reqs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 12px; }
.coc-lineas td[data-coc-imp], .coc-lineas tfoot td { white-space: nowrap; }
.coc-total { font-size: 1.15em; }
.alm-res { position: absolute; z-index: 20; background: var(--pf-caja); border: 1px solid var(--pf-borde); border-radius: 8px; max-height: 240px; overflow: auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); min-width: 280px; max-width: 520px; }
.alm-res button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--pf-borde-suave); background: none; font: inherit; cursor: pointer; min-height: 40px; }
.alm-res button:hover { background: var(--pf-caja-hover); }
.coc-lineas { overflow-x: auto; } .coc-lineas td { position: relative; } .coc-lineas input[type=text].alm-mat { width: 100%; min-width: 240px; }
/* v0.493 — Recursos humanos: expediente, matriz de habilidades, horas por semana */
.rh-cab { display: flex; gap: 16px; align-items: center; }
.rh-avatar { flex: 0 0 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--pf-azul-fondo); color: var(--pf-azul); }
.rh-cab-sub { font-size: 17px; margin: 4px 0 2px; }
.rh-indice { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 14px; font-size: 14px; }
/* Índice de secciones de una ficha larga (12-oct-2026, Pablo: «esto parece HTML puro»). Pestañas de ancla pegadas arriba, con la sección
   donde estás marcada al desplazarte (scrollspy en js/controles.js, nav[data-indice]); en el teléfono se deslizan de lado. Patrón de
   «in-page navigation» de los sistemas de diseño (BlackRock, Queensland): la página sigue siendo una sola, las pestañas solo llevan. */
.indice-secc { position: sticky; top: 0; z-index: 6; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 14px;
  background: var(--pf-fondo); border-bottom: 1px solid var(--pf-borde); }
.indice-secc::-webkit-scrollbar { display: none; }
.indice-secc a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; margin-bottom: -1px; font-size: 14px;
  color: var(--pf-texto-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.indice-secc a:hover { color: var(--pf-titulo); border-bottom-color: var(--pf-borde-fuerte); }
.indice-secc a[aria-current="true"] { color: var(--pf-titulo); border-bottom-color: var(--pf-azul); }
.indice-secc a:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: -2px; border-radius: 4px; }
main.contenido section[id] { scroll-margin-top: 58px; }
@media (max-width: 860px) { .indice-secc { top: 54px; } main.contenido section[id] { scroll-margin-top: 112px; } }
@media (min-width: 861px) { :is(html.con-demo, html.con-vc) .indice-secc { top: var(--demo-h); } }
@media (max-width: 860px) { :is(html.con-demo, html.con-vc) .indice-secc { top: calc(54px + var(--demo-h)); } }
/* Barra de acciones de una vista (12-oct-2026: «botones alrededor del 2026 desalineados»): todo lo de la fila del mismo alto y centrado */
.barra-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-acc .boton { min-height: 40px; padding-top: 0; padding-bottom: 0; }
/* Paso de año: ‹ 2025 · 2026 · 2027 › en un solo control (ui_anio en includes/layout.php) */
.anio-paso { display: inline-flex; align-items: stretch; height: 40px; border: 1px solid var(--pf-azul-borde); border-radius: 9px; background: var(--pf-caja); overflow: hidden; }
.anio-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; color: var(--pf-azul); text-decoration: none; font-size: .9rem; }
.anio-btn:hover { background: var(--pf-azul-fondo); }
.anio-btn:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: -2px; }
.anio-off { color: var(--pf-vacio); }
.anio-lado { font-size: .82rem; color: var(--pf-texto-3); }
.anio-val { display: inline-flex; align-items: center; padding: 0 14px; font-size: 17px; color: var(--pf-titulo); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--pf-borde); border-right: 1px solid var(--pf-borde); }
@media (pointer: coarse) { .anio-paso { height: 44px; } }
.rh-horas { display: flex; gap: 6px; align-items: flex-end; height: 170px; padding-top: 8px; }
.rh-hcol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 18px; }
.rh-hcol span { font-size: max(12px, 11px); color: var(--pf-texto-3); }
.rh-hbar { width: 100%; height: 140px; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.rh-hbar i { display: block; width: 45%; border-radius: 3px 3px 0 0; min-height: 1px; }
.rh-hp { background: var(--pf-azul-borde); } .rh-ho { background: var(--pf-azul); }
.rh-ley { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.rh-barras { display: grid; gap: 6px; }
.rh-barra { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 32px; gap: 10px; align-items: center; font-size: 14px; }
.rh-barra-v { background: var(--pf-rejilla); border-radius: 4px; height: 12px; overflow: hidden; }
.rh-barra-v i { display: block; height: 100%; background: var(--pf-azul); border-radius: 4px; }
.rh-barra-v i.rh-riesgo { background: var(--pf-rojo); } .rh-barra-n { text-align: right; }
@media (max-width: 600px) { .rh-barra { grid-template-columns: 1fr 70px 28px; } .rh-cab { align-items: flex-start; } }
.rh-matriz th { text-transform: none; vertical-align: bottom; letter-spacing: 0; }
.rh-matriz th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 12px; display: inline-block; max-height: 220px; overflow: hidden; text-overflow: ellipsis; }
.rh-barra-n.rh-riesgo { color: var(--pf-rojo-texto); background: none; }
.rh-n { text-align: center; min-width: 28px; }
.rh-n1 { background: var(--pf-rojo-fondo); } .rh-n2 { background: var(--pf-ambar-fondo); } .rh-n3 { background: var(--pf-verde-fondo); } .rh-n4 { background: var(--pf-verde-borde); }
span.rh-n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; }
.rh-vencida { text-decoration: line-through; color: var(--pf-rojo-texto); }
.rh-habs, .rh-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rh-habs li { display: flex; gap: 10px; align-items: flex-start; }
.rh-notas li { border-left: 3px solid var(--pf-borde); padding-left: 10px; } .rh-notas p { margin: 4px 0; }
.rh-anulado, .rh-anulado td { opacity: .55; text-decoration: line-through; }
.rh-anular > summary { cursor: pointer; font-size: 12px; color: var(--pf-texto-3); }
.rh-como > summary { cursor: pointer; color: var(--pf-azul); font-size: 14px; margin-top: 4px; padding: 9px 0; line-height: 18px; }
.acat-hist { margin: 0; padding-left: 18px; }
.acat-hist li { margin: 3px 0; overflow-wrap: anywhere; }

/* ── Mi día (v0.489): la primera pantalla de Almacén y Compras ─────────────────────────────────────────────
   Orden: resumen en una frase → escanear/escribir → acciones de todos los días → Por hacer → Qué viene → lo último.
   Resaltado por TAMAÑO, no por negritas (preferencia de Pablo); centrado vertical siempre con flex. */
.md-titulo { font-size: 28px; margin-bottom: 2px; }
.md-resumen { font-size: 17px; color: var(--pf-texto-2); }
.md-ir { display: flex; align-items: stretch; gap: 8px; margin: 14px 0 12px; max-width: 760px; }
.md-ir-campo { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--pf-caja); border: 1px solid var(--pf-borde-fuerte); border-radius: 10px; }
.md-ir-campo:focus-within { border-color: var(--pf-azul-claro); box-shadow: 0 0 0 3px var(--pf-azul-fondo); }
.md-ir-campo .ico { flex: 0 0 auto; color: var(--pf-texto-3); }
.md-ir-campo input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; padding: 12px 0; }
.md-ir .boton { flex: 0 0 auto; display: flex; align-items: center; padding: 0 22px; font-size: 16px; }
.md-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 22px; }
.md-accion { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 10px; background: var(--pf-caja); border: 1px solid var(--pf-borde); color: var(--pf-titulo); text-decoration: none; font-size: 15px; }
.md-accion:hover { background: var(--pf-caja-hover); border-color: var(--pf-azul-borde); }
.md-accion .ico { flex: 0 0 auto; color: var(--pf-azul); }
.md-accion-prin { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); font-size: 16px; }
.md-bandeja > h2 { font-size: 20px; margin: 0 0 10px; }
.md-tareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 12px; margin-bottom: 22px; }
.md-tarea { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--pf-caja); border: 1px solid var(--pf-borde); border-left: 5px solid var(--pf-azul-claro); border-radius: 10px; }
.md-tarea.md-rojo { border-left-color: var(--pf-rojo); }
.md-tarea.md-ambar { border-left-color: var(--pf-ambar); }
.md-tarea.md-otros { border-left-style: dashed; }
.md-tarea.md-aldia { border-left-color: var(--pf-verde); background: var(--pf-caja-suave); }
.md-num { flex: 0 0 64px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 38px; line-height: 1; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.md-rojo .md-num { color: var(--pf-rojo-texto); }
.md-aldia .md-num { color: var(--pf-verde-texto); }
.md-cuerpo { flex: 1 1 auto; min-width: 0; }
.md-cuerpo h3 { margin: 0 0 4px; font-size: 17px; font-weight: 500; color: var(--pf-titulo); }
.md-aldia .md-cuerpo h3 { color: var(--pf-texto-2); }
.md-partes { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.md-ayuda { margin: 0 0 10px; font-size: 13px; color: var(--pf-texto-3); }
.md-aldia .md-ayuda { display: none; }
.md-cta { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
.md-aldia .md-cta { min-height: 36px; }
.md-ultimos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.md-ultimos li { font-size: 14px; }
.md-pie { margin-top: 16px; }
@media (max-width: 720px) {
  .md-titulo { font-size: 24px; }
  .md-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-tareas { grid-template-columns: minmax(0, 1fr); }
  .md-num { flex-basis: 52px; font-size: 32px; }
  .md-cta { min-height: 44px; }
}
.md-aldia-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -10px 0 22px; font-size: 14px; color: var(--pf-texto-2); }
.md-aldia-linea .ico { flex: 0 0 auto; color: var(--pf-verde-texto); }

/* v0.498 — Recursos humanos → Competencias y SGI (sgi.php) */
.sgi-cab { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sgi-score { font-size: 44px; line-height: 1; letter-spacing: -.5px; }
.sgi-verde-txt { color: var(--pf-verde-texto); } .sgi-ambar-txt { color: var(--pf-ambar-texto); } .sgi-rojo-txt { color: var(--pf-rojo-texto); }
.sgi-cab-txt p { margin: 4px 0; }
.sgi-prox { font-size: 16px; }
.sgi-sem { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-top: 4px; }
.sgi-verde { background: var(--pf-verde); } .sgi-ambar { background: var(--pf-ambar); } .sgi-rojo { background: var(--pf-rojo); } .sgi-gris { background: var(--pf-borde-fuerte); }
.sgi-ind { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sgi-ind li { display: flex; gap: 10px; align-items: flex-start; }
.sgi-ind-t { font-size: 15px; }
.sgi-c { display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0; padding: 3px 8px; border-radius: 6px; font-size: 12px; border: 1px solid var(--pf-borde); background: var(--pf-rejilla); }
.sgi-c-n { font-size: 13px; font-variant-numeric: tabular-nums; }
.sgi-ok { background: var(--pf-verde-fondo); border-color: var(--pf-verde-borde); color: var(--pf-verde-texto); }
.sgi-falta { background: var(--pf-caja-suave); border-color: var(--pf-borde); color: var(--pf-texto-3); }
.sgi-bajo { background: var(--pf-ambar-fondo); border-color: var(--pf-ambar-borde); color: var(--pf-ambar-texto); }
.sgi-vencida { background: var(--pf-rojo-fondo); border-color: var(--pf-rojo-borde); color: var(--pf-rojo-texto); }
.sgi-recal { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); color: var(--pf-azul-fuerte); }
.sgi-comp select { min-width: 160px; }
.sgi-grupo td { background: var(--pf-rejilla); font-size: 12px; color: var(--pf-texto-3); letter-spacing: .3px; }
.sgi-check { display: flex; gap: 8px; align-items: center; min-height: 36px; }
/* Grupo de casillas dentro de un formulario en rejilla (12-oct-2026, «Normas» de la auditoría): ocupa su renglón entero, sin el marco
   del navegador; el título se lee como la etiqueta de los otros campos y cada opción es una casilla a la izquierda de su texto. */
.ciclo-form fieldset { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ciclo-form fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: max(12px, .74rem); color: var(--pf-texto-2); }
.ciclo-form fieldset label.sgi-check { flex-direction: row; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--pf-borde); border-radius: 8px; background: var(--pf-caja); font-size: .88rem; color: var(--pf-texto); cursor: pointer; }
.ciclo-form fieldset label.sgi-check:has(input:checked) { border-color: var(--pf-azul-borde); background: var(--pf-azul-fondo); }
.ciclo-form label.sgi-check input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
/* Carpeta del auditor (12-oct-2026): cabecera con acciones, resumen con barra por estado y la lista de verificación en tabla */
.sgi-carpeta-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.sgi-carpeta-cab > div:first-child { flex: 1 1 26rem; min-width: 0; }
.sgi-carpeta-cab h2 { margin-bottom: 4px; }
.sgi-carpeta-cab .barra-acc { flex: 0 1 auto; }
.sgi-resumen { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; margin: 16px 0 14px; padding: 14px 16px;
  border: 1px solid var(--pf-borde); border-radius: 10px; background: var(--pf-caja-suave); }
.sgi-resumen-n { margin: 0; font-size: 15px; color: var(--pf-texto-2); }
.sgi-resumen-grande { font-size: 30px; line-height: 1; color: var(--pf-titulo); margin-right: 4px; font-variant-numeric: tabular-nums; }
.sgi-barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--pf-rejilla); gap: 2px; }
.sgi-barra span { min-width: 6px; }
.sgi-barra-verde { background: var(--pf-verde); } .sgi-barra-ambar { background: var(--pf-ambar); } .sgi-barra-rojo { background: var(--pf-rojo); } .sgi-barra-gris { background: var(--pf-borde-fuerte); }
.sgi-leyenda { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--pf-texto-2); font-variant-numeric: tabular-nums; }
.sgi-checklist .sgi-req { color: var(--pf-titulo); text-decoration: none; font-size: 14.5px; }
.sgi-checklist .sgi-req:hover { color: var(--pf-azul); text-decoration: underline; text-underline-offset: 3px; }
.sgi-clausula { font-size: 12.5px; color: var(--pf-texto-2); font-variant-numeric: tabular-nums; }
.sgi-checklist td { vertical-align: middle; }
.sgi-checklist td:nth-child(5) { color: var(--pf-texto-2); font-size: 13.5px; }
.sgi-ir { text-align: right; white-space: nowrap; }
@media (max-width: 720px) { .sgi-resumen { grid-template-columns: 1fr; } }
.sgi-check input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.sgi-puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 2px 14px; border: 1px solid var(--pf-borde-suave); border-radius: 8px; padding: 8px 12px; }
.sgi-anio { font-size: 20px; padding: 0 6px; }
.sgi-sug { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sgi-sug li { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--pf-borde-suave); padding-bottom: 8px; }
.sgi-sug-t { font-size: 15px; }
.sgi-acc { min-width: 170px; }
.sgi-acc .rh-anular { margin-top: 6px; }
.sgi-asis-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px 14px; max-height: 460px; overflow-y: auto; padding: 4px 2px; }
.sgi-asis-p { display: grid; grid-template-columns: 24px 1fr 64px; gap: 8px; align-items: center; min-height: 44px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--pf-borde-suave); }
.sgi-asis-p input[type=checkbox] { width: 20px; height: 20px; }
.sgi-asis-p input[type=text] { width: 60px; min-height: 36px; }
.sgi-asis-p[hidden] { display: none; }
.sgi-ef select, .sgi-ef input[type=text] { min-height: 36px; }
.sgi-hall { border-top: 1px solid var(--pf-borde-suave); padding: 12px 0; }
.sgi-hall:first-of-type { border-top: 0; }
.sgi-exp { display: flex; gap: 6px; } .sgi-exp input { max-width: 90px; }
@media (max-width: 600px) {
  .sgi-score { font-size: 36px; }
  .sgi-sug li { flex-direction: column; align-items: flex-start; }
  .sgi-asis-lista { grid-template-columns: minmax(0, 1fr); max-height: none; }
}

/* ---------- Tiempos (v0.499) ---------- */
.tq-rapidos { margin: -4px 0 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.tq-rapidos a.chip { text-decoration: none; }
.tq-persona { margin: 4px 0 10px; }
.tq-col-barra { width: 28%; min-width: 120px; }
.tq-barra { position: relative; display: block; height: 14px; background: transparent; }
.tq-barra i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; display: block; }
.tq-barra i.tq-pres { background: var(--pf-rejilla); border: 1px solid var(--pf-borde); box-sizing: border-box; }
.tq-barra i.tq-ord { background: var(--pf-azul); top: 3px; height: 8px; }
.tq-leyenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tq-sw { display: inline-block; width: 18px; height: 10px; border-radius: 3px; vertical-align: middle; }
.tq-sw-pres { background: var(--pf-rejilla); border: 1px solid var(--pf-borde); }
.tq-sw-ord { background: var(--pf-azul); }
.tq-quien { border: 1px solid var(--pf-borde); border-radius: 8px; padding: 8px 10px; margin: 6px 0; min-width: 0; }
.tq-quien legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.tq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; max-height: 220px; overflow-y: auto; }
/* ronda 30-sep noche: el supervisor marca a su gente en el teléfono → renglones, «otra cuadrilla» y buscador de 36 px o más */
.tq-p { display: flex; align-items: center; gap: 6px; font-weight: normal; min-height: 36px; cursor: pointer; }
.tq-p[hidden] { display: none; }
.tq-otros > summary { cursor: pointer; color: var(--pf-azul); font-size: 14px; margin: 6px 0; min-height: 36px; display: flex; align-items: center; }
.tq-buscar { margin: 4px 0 6px; max-width: 260px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--pf-borde); border-radius: 8px; background: var(--pf-caja); color: var(--pf-texto); font-size: .88rem; }
.tq-dias td > div + div { margin-top: 3px; }
@media (max-width: 1100px) { .tq-col-barra, .tq-leyenda { display: none; } }
@media (max-width: 600px) { .tq-lista { grid-template-columns: minmax(0, 1fr); } }
.ciclo-form .tq-quien, .tq-quien { grid-column: 1 / -1; }
.ciclo-form .tq-quien label.tq-p { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 8px; margin: 0; font-size: 14px; }
.ciclo-form .tq-quien label.tq-p input { width: auto; min-width: 18px; height: 18px; margin: 0; flex: none; }
.ciclo-form .tq-quien .tq-buscar { width: 100%; }

/* ---------- Permisos de trabajo (v0.500) ---------- */
.pt-matriz td.pt-celda { background: rgba(192, 57, 43, calc(var(--pt, 0) * .5)); font-variant-numeric: tabular-nums; }
.pt-matriz th, .pt-matriz td { white-space: nowrap; }
.pt-matriz td:first-child { white-space: normal; min-width: 180px; }

/* ---------- Pruebas de calidad (v0.501) ---------- */
.pt-matriz td.cb-nc { background: color-mix(in srgb, var(--pf-rojo) 18%, transparent); }

.rh-barra-et a { display: inline-flex; align-items: center; min-height: 36px; }
.ciclo-form input[type=file] { min-height: 36px; }
.ciclo-form input[type=time], .ciclo-form input[type=date], .ciclo-form input[type=search] { min-height: 36px; }
.tabla th a { display: inline-block; padding: 8px 0; }
/* v0.501 ronda: ligas de KPI y del tablero SGI con área de toque de 36 px sin mover el diseño */
.kpi span > a, .sgi-ind-t > a { display: inline-flex; align-items: center; min-height: 36px; margin: -9px 0; }

/* v0.507: «Editar» y «N medidas» dentro de tablas, con zona de toque de 36 px en el teléfono */
.det-toque > summary{display:inline-block;min-height:36px;line-height:36px;padding:0 4px;cursor:pointer}

/* v0.512: facturas (CFDI) en la orden de compra */
.cfdi-avisos { margin: 0; padding: 8px 12px 8px 28px; border-left: 3px solid var(--pf-ambar); background: color-mix(in srgb, var(--pf-ambar) 8%, transparent); font-size: max(12px, .82rem); }
.cfdi-avisos li + li { margin-top: 4px; }
a.cfdi-liga { display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px; }
/* v0.513: asignar una factura a su orden desde la lista */
.cfdi-asignar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cfdi-asignar select, .cfdi-asignar input[type=text] { min-height: 36px; max-width: 100%; flex: 1 1 150px; }
/* v0.514: leer la remisión con foto en la entrada de almacén */
.rem-ia { border: 1px dashed var(--pf-borde); border-radius: 8px; padding: 10px 12px; }
.rem-ia-cab { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rem-ia-cab .nota-inline { flex: 1 1 240px; }
.rem-ia .rem-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.rem-ia .rem-fila .boton { min-height: 36px; }
input.rem-puesto { outline: 2px solid var(--pf-ambar); background: color-mix(in srgb, var(--pf-ambar) 10%, transparent); }
/* v0.518: clima del turno */
.clima-res { margin: 4px 0 8px; font-size: 1.05rem; }
.clima-res.clima-alerta { color: var(--pf-texto, inherit); border-left: 3px solid var(--pf-ambar); padding-left: 8px; }
.clima-horas th, .clima-horas td { white-space: nowrap; }
.clima-horas th { text-transform: none; letter-spacing: normal; }   /* «7 h», no «7 H»: la unidad se escribe en minúscula */
.clima-horas tbody th { text-align: left; font-weight: 400; color: var(--pf-texto-2, inherit); }
/* v0.519: «Cambiar ubicación» del clima */
.clima-lugar { margin: .25rem 0 .75rem; }
.clima-lugar > summary { color: var(--pf-azul); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }   /* que se vea que se toca */
.clima-lugar label { display: block; margin: .5rem 0; }
.clima-lugar input[type=search] { width: 100%; max-width: 26rem; min-height: 40px; }
.clima-opciones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.clima-opciones .boton, .clima-lugar > .boton { min-height: 36px; }
.clima-mal { color: var(--pf-rojo-texto); }
/* 12-oct-2026: varios lugares guardados (pestañas tipo chip, el astillero siempre) y turno del día / próximos días */
.clima-barra { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; margin: 2px 0 10px; }
.clima-lugares { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.clima-lug { display: inline-flex; align-items: center; border: 1px solid var(--pf-borde); border-radius: 999px; background: var(--pf-caja); overflow: hidden; }
.clima-lug > button { all: unset; box-sizing: border-box; min-height: 36px; padding: 0 12px; cursor: pointer; font-size: 13.5px; color: var(--pf-texto-2); white-space: nowrap; }
.clima-lug > .clima-quita { padding: 0 10px 0 4px; font-size: 16px; color: var(--pf-texto-3); }
.clima-lug > .clima-quita:hover { color: var(--pf-rojo-texto); }
.clima-lug.sel { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); }
.clima-lug.sel > button[role=tab] { color: var(--pf-titulo); }
.clima-lug > button:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: -2px; border-radius: 999px; }
.clima-ast { color: var(--pf-texto-3); }
.clima-barra .clima-lugar { margin: 0; }
.clima-barra .clima-lugar > summary { min-height: 36px; display: inline-flex; align-items: center; }
.clima-barra .clima-lugar[open] { flex-basis: 100%; }
.clima-modo { display: inline-flex; border: 1px solid var(--pf-borde); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.clima-modo button { all: unset; box-sizing: border-box; min-height: 36px; padding: 0 12px; cursor: pointer; font-size: 13.5px; color: var(--pf-texto-2); background: var(--pf-caja); }
.clima-modo button + button { border-left: 1px solid var(--pf-borde); }
.clima-modo button[aria-pressed=true] { background: var(--pf-azul-fuerte); color: #fff; }
.clima-modo button:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: -2px; }
.clima-dias th, .clima-dias td { white-space: nowrap; }
.clima-dias tbody th { text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--pf-titulo); }
.clima-dias td:last-child { white-space: normal; min-width: 16rem; }
.clima-dias tbody th { text-align: left; font-weight: 400; }
@media (pointer: coarse) { .clima-lug > button, .clima-modo button, .clima-barra .clima-lugar > summary { min-height: 44px; } }
/* Formatos y correo (Compras, 12-oct-2026): idioma de la plantilla y vista previa del correo */
.ocv-idiomas { display: flex; gap: 6px; margin: 4px 0 10px; }
.ocv-idiomas .boton.activo { background: var(--pf-azul-fondo); border-color: var(--pf-azul-borde); color: var(--pf-titulo); }
.ocvp-previa { border: 1px solid var(--pf-borde); border-radius: 10px; background: var(--pf-caja-suave); padding: 10px 14px; margin: 6px 0 14px; max-width: 46rem; }
.ocvp-asunto { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--pf-borde-suave); color: var(--pf-titulo); }
.ocvp-previa pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: .92rem; color: var(--pf-texto); }
/* 15-oct-2026: Probar antes de mandar (Formatos y correo) */
.ocvp-prueba { margin: 18px 0 16px; padding-top: 14px; border-top: 1px solid var(--pf-borde-suave); max-width: 46rem; }
.ocvp-elegir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 12px; }
.ocvp-elegir label { flex: 1 1 18rem; min-width: 0; }
.ocvp-titulo { margin: 4px 0 0; color: var(--pf-texto-2); font-size: .92rem; }
.ocvp-mandar { display: grid; gap: 10px; margin: 0 0 8px; }
.ocvp-mandar label input { width: 100%; max-width: 26rem; box-sizing: border-box; }
@media (max-width: 720px) { .ocvp-mandar .barra-acc .boton { flex: 1 1 100%; justify-content: center; } }
.ocvp-hoja { border: 1px solid var(--pf-borde); border-radius: 10px; overflow: hidden; background: #fff; margin: 6px 0 14px; }
.ocvp-hoja iframe { display: block; width: 100%; height: 820px; border: 0; }
.ocvp-hoja-det { margin: 0 0 14px; }
.ocvp-hoja-det > summary { cursor: pointer; color: var(--pf-azul); min-height: 36px; display: flex; align-items: center; }
@media (max-width: 720px) { .ocvp-hoja iframe { height: 70vh; } }

/* ── v0.523 Envío de la orden de compra al proveedor (includes/oc_envio_vista.php, js/oc_envio.js) y formato de la OC ── */
.ocv-panel { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--pf-azul); border-radius: 12px; background: var(--pf-caja); }
.ocv-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ocv-cab h3 { margin: 0; font-size: 1.1rem; font-weight: 400; }
.ocv-x { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 26px; line-height: 1; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.ocv-x:hover { background: rgba(0,0,0,.06); }
.ocv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 10px 14px; }
.ocv-grid label, .ocv-plantilla label, .ocf-form label { display: grid; gap: 4px; font-size: .92rem; color: var(--pf-texto-3); }
.ocv-grid .ocv-ancho { grid-column: 1 / -1; }
.ocv-grid input, .ocv-grid select, .ocv-grid textarea, .ocv-plantilla input, .ocv-plantilla textarea, .ocf-form input, .ocf-form textarea { font: inherit; font-size: 1rem; color: var(--pf-texto); padding: 8px 10px; border: 1px solid var(--pf-borde); border-radius: 8px; min-height: 40px; max-width: 100%; background: var(--pf-caja); }
.ocv-grid textarea, .ocv-plantilla textarea { font-family: inherit; line-height: 1.45; resize: vertical; }
.ocv-grid input[readonly], .ocv-grid textarea[readonly] { opacity: .75; }
.ocv-msg { margin: 8px 0 0; }
.ocv-link { border: 0; background: none; padding: 6px 0; min-height: 36px; color: var(--pf-azul); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.ocv-plantilla { margin-top: 14px; border-top: 1px solid var(--pf-borde); padding-top: 10px; }
.ocv-plantilla > summary { cursor: pointer; color: var(--pf-azul); min-height: 36px; display: flex; align-items: center; }
.ocv-plantilla label { margin: 8px 0; }
.ocv-campo { font: inherit; font-size: .95rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 8px; min-height: 36px; border: 1px solid var(--pf-borde); border-radius: 6px; background: var(--pf-fondo); color: inherit; cursor: pointer; white-space: nowrap; }
.ocv-campo:hover { border-color: var(--pf-azul); }
.ocv-campos td { vertical-align: middle; }
.ocv-campos td:nth-child(2) { min-width: 16rem; }
.ocv-campos td:nth-child(3) { min-width: 12rem; white-space: pre-line; }
.ocv-panel { scroll-margin-top: 80px; }
.ocv-h3 { margin: 16px 0 6px; font-size: 1.05rem; font-weight: 400; }
.ocv-anulado td { opacity: .6; }
.ocv-correo > summary { cursor: pointer; color: var(--pf-azul); min-height: 36px; display: inline-flex; align-items: center; }
.ocv-correo-txt { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--pf-borde); border-radius: 8px; font-size: .9rem; max-width: 46rem; }
.ocv-cambio { margin: 6px 0 10px; }
.ocv-chip2 { display: inline-block; margin-top: 3px; }
.ocf-form fieldset { border: 1px solid var(--pf-borde); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 14px; }
.ocf-form legend { padding: 0 6px; color: var(--pf-azul); }
.ocf-form label { margin: 8px 0; max-width: 44rem; }
.ocf-form .nota-inline { font-size: .85rem; }
.ocf-form .ocf-cambiado { color: var(--pf-azul); }
@media (max-width: 720px) { .ocv-grid { grid-template-columns: minmax(0, 1fr); } .ocv-panel { padding: 12px; } }
/* ── fin v0.523 ── */

/* v0.524 — Facturas y conciliación de tres vías (fac_helpers.php) */
.fac-cabeza { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.fac-cabeza h2 { margin-bottom: .2rem; }
.fac-cabeza .nota { max-width: 62ch; margin-top: 0; }
.fac-subir > summary { list-style: none; cursor: pointer; }
.fac-subir > summary::-webkit-details-marker { display: none; }
.fac-subir[open] { flex-basis: 100%; }
.fac-subir form { display: grid; gap: .5rem; margin-top: .75rem; padding: .9rem 1rem; border: 1px dashed var(--pf-borde-fuerte); border-radius: 10px; background: var(--pf-caja-suave); }
.fac-pestanas { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.fac-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--pf-borde); background: var(--pf-caja); color: var(--pf-texto-2); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.fac-pill b { font-weight: 500; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.fac-pill:hover { background: var(--pf-caja-hover); }
.fac-pill.activa { background: var(--pf-azul-fuerte); border-color: var(--pf-azul-fuerte); color: var(--pf-caja); }
.fac-pill.activa b { color: var(--pf-caja); }
.fac-pill-ambar:not(.activa) { border-color: var(--pf-ambar-borde); background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); }
.fac-pill-rojo:not(.activa) { border-color: var(--pf-rojo-borde); background: var(--pf-rojo-fondo); color: var(--pf-rojo-texto); }
.fac-filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.fac-filtros input[type=search] { flex: 1 1 220px; min-width: 0; }
.fac-filtros select, .fac-filtros input[type=month] { flex: 0 1 auto; }
/* lista: renglones-tarjeta que se tocan completos */
.fac-lista { display: flex; flex-direction: column; border: 1px solid var(--pf-borde-suave); border-radius: 10px; overflow: hidden; }
.fac-fila { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(160px, 1.5fr) 100px 130px minmax(150px, 1.1fr) 150px; gap: .75rem; align-items: center; padding: .65rem .9rem; border-top: 1px solid var(--pf-borde-suave); color: var(--pf-texto); text-decoration: none; background: var(--pf-caja); }
.fac-fila:first-child { border-top: 0; }
a.fac-fila:hover { background: var(--pf-caja-hover); }
a.fac-fila:focus-visible { outline: 2px solid var(--pf-azul-claro); outline-offset: -2px; }
.fac-fila-cab { background: var(--pf-caja-suave); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-texto-3); padding-top: .45rem; padding-bottom: .45rem; }
.fac-fila .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-fila small { display: block; color: var(--pf-texto-3); font-size: max(12px, .78rem); }
.fac-por_asignar { box-shadow: inset 3px 0 0 var(--pf-ambar); }
.fac-fuera { color: var(--pf-texto-2); }
.fac-c-fac b { margin-right: .35rem; color: var(--pf-titulo); font-weight: 500; font-size: 1.04rem; }
.fac-origen, .fac-pdf { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .02em; padding: .05rem .4rem; border-radius: 4px; margin-right: .25rem; vertical-align: 1px; }
.fac-origen { background: var(--pf-rejilla); color: var(--pf-texto-2); }
.fac-pdf { background: var(--pf-rojo-fondo); color: var(--pf-rojo-texto); border: 1px solid var(--pf-rojo-borde); }
/* v0.541: a nombre de quién está la factura (Grupo Kratfel o Naval Solutions) */
.chip.fac-emp { font-size: 12px; padding: .05rem .45rem; margin-right: .25rem; vertical-align: 1px; }
.fac-emp-kratfel { background: var(--pf-azul-fondo); color: var(--pf-azul); }
.fac-emp-naval { background: color-mix(in srgb, #0d9488 16%, transparent); color: #0f766e; }
@media (prefers-color-scheme: dark) { .fac-emp-naval { color: #5eead4; } }
.fac-folio { font-weight: 500; color: var(--pf-azul); margin-right: .2rem; }
.fac-lista-conc .fac-fila { grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.5fr) minmax(200px, 1.8fr) 130px 160px; }
.fac-rojo { color: var(--pf-rojo-texto); }
/* barras pedido · recibido · facturado */
.fac-b-ped { background: var(--pf-borde-fuerte); }
.fac-b-rec { background: var(--pf-verde); }
.fac-b-fac { background: var(--pf-azul-claro); }
.fac-b-fac.fac-b-mal { background: var(--pf-rojo); }
.fac-barras { display: grid; gap: .45rem; margin: .4rem 0 .7rem; }
.fac-barra { display: grid; grid-template-columns: 80px 1fr minmax(120px, auto); gap: .6rem; align-items: center; }
.fac-barra-k { font-size: .85rem; color: var(--pf-texto-2); }
.fac-barra-pista { height: 12px; background: var(--pf-rejilla); border-radius: 6px; overflow: hidden; }
.fac-barra-pista i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.fac-barra-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.02rem; color: var(--pf-titulo); white-space: nowrap; }
.fac-veredicto { margin: .2rem 0 .4rem; line-height: 1.5; }
.fac-mini { display: grid; gap: 2px; width: 100%; max-width: 220px; margin: .15rem 0 .2rem; }
.fac-mini i { display: block; height: 5px; border-radius: 3px; min-width: 2px; }
.fac-ley { display: inline-block; width: 18px; height: 6px; border-radius: 3px; vertical-align: middle; }
.fac-lineas td { vertical-align: top; }
.fac-lineas .chip { margin: 0 .2rem .2rem 0; }
.fac-sub { margin: .8rem 0 .3rem; font-size: 1.05rem; color: var(--pf-titulo); }
.fac-sueltos { margin: .3rem 0 .4rem; padding-left: 1.1rem; }
.fac-sueltos li { margin: .15rem 0; }
.fac-retener { background: var(--pf-rojo-fondo); border: 1px solid var(--pf-rojo-borde); color: var(--pf-rojo-texto); border-radius: 8px; padding: .55rem .8rem; margin: .4rem 0 .6rem; }
/* KPIs del tablero */
.fac-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0 .4rem; }
.fac-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--pf-borde); background: var(--pf-caja-suave); text-decoration: none; color: var(--pf-texto); }
.fac-kpi:hover { background: var(--pf-caja-hover); }
.fac-kpi span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pf-texto-3); }
.fac-kpi b { font-weight: 500; font-size: 1.35rem; color: var(--pf-titulo); font-variant-numeric: tabular-nums; line-height: 1.25; }
.fac-kpi small { color: var(--pf-texto-3); font-size: max(12px, .78rem); }
.fac-kpi-rojo { border-color: var(--pf-rojo-borde); background: var(--pf-rojo-fondo); }
.fac-kpi-rojo b { color: var(--pf-rojo-texto); }
.fac-kpi-ambar { border-color: var(--pf-ambar-borde); background: var(--pf-ambar-fondo); }
.fac-kpi-ambar b { color: var(--pf-ambar-texto); }
.fac-kpi-verde { border-color: var(--pf-verde-borde); background: var(--pf-verde-fondo); }
.fac-kpi-verde b { color: var(--pf-verde-texto); }
/* una factura: documento a la izquierda, datos y acciones a la derecha */
.fac-volver { margin: 0 0 .4rem; }
.fac-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.fac-titulo h2 { margin: 0; }
.fac-titulo .nota { margin: .15rem 0 0; }
.fac-titulo-tot { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.fac-titulo-tot b { font-weight: 500; font-size: 1.6rem; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.fac-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(min(320px, 100%), 1fr); gap: 1rem; align-items: start; }
.fac-doc { position: sticky; top: calc(var(--demo-h, 0px) + .75rem); padding: .7rem; }
.fac-doc-tabs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.fac-doc-mas { margin-left: auto; font-size: .85rem; }
.fac-iframe { display: block; width: 100%; height: min(78vh, 1000px); border: 1px solid var(--pf-borde-suave); border-radius: 8px; background: var(--pf-caja); }
.fac-sinpdf { margin: 0 0 .5rem; }
.fac-lado { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fac-lado .tarjeta { margin: 0; }
.fac-lado h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--pf-titulo); }
.fac-datos { margin: 0; display: grid; gap: .35rem; }
.fac-datos > div { display: grid; grid-template-columns: 100px 1fr; gap: .6rem; }
.fac-datos dt { color: var(--pf-texto-3); font-size: .85rem; }
.fac-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fac-uuid { font-size: .8rem; }
.fac-alertas { border-color: var(--pf-ambar-borde); background: var(--pf-ambar-fondo); }
.fac-alertas h3 { color: var(--pf-ambar-texto); }
.fac-alertas ul { margin: 0; padding-left: 1.1rem; color: var(--pf-ambar-texto); }
.fac-cand b { font-weight: 500; font-size: 1.04rem; }
.fac-cand { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .6rem .75rem; border: 1px solid var(--pf-borde); border-radius: 10px; margin-bottom: .5rem; }
.fac-cand-exacta { border-color: var(--pf-verde-borde); background: var(--pf-verde-fondo); }
.fac-cand-txt { min-width: 0; flex: 1; }
/* v0.527: ¿de qué orden es? — sugeridas con su porcentaje y por qué, y el selector de todas */
.fac-cand-cab { display: flex; align-items: baseline; gap: .5rem; }
.fac-cand-folio { font-size: 1.08rem; font-weight: 500; }
.fac-match { font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.fac-match-alto { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); border: 1px solid var(--pf-verde-borde); }
.fac-match-medio { background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); border: 1px solid var(--pf-ambar-borde); }
.fac-razones { list-style: none; margin: .3rem 0 .2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .4rem; }
.fac-razones li { font-size: .8rem; color: var(--pf-texto-3); background: var(--pf-caja-suave); border-radius: 6px; padding: .05rem .45rem; }
.fac-oc-sel { margin-top: .9rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; min-width: 0; }
.fac-oc-sel label { font-size: .95rem; }
.fac-oc-fila { display: flex; gap: .5rem; }
.fac-oc-fila select { flex: 1; min-width: 0; width: 100%; text-overflow: ellipsis; padding: .5rem .6rem; border: 1px solid var(--pf-borde); border-radius: 8px; background: var(--pf-caja); font: inherit; }
.fac-oc-filtro { width: 100%; min-width: 0; box-sizing: border-box; padding: .45rem .6rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; }
.fac-folio-mas { margin-top: .8rem; }
.fac-folio-mas summary { cursor: pointer; color: var(--pf-texto-3); font-size: .9rem; }
.fac-folio-mas .fac-folio-form { margin-top: .5rem; }
@media (max-width: 640px) { .fac-oc-fila { flex-direction: column; } }
.fac-folio-form { display: flex; gap: .5rem; margin-top: .6rem; }
.fac-folio-form input { flex: 1; min-width: 0; }
.fac-fuera { display: grid; gap: .6rem; }
.fac-fuera label { display: grid; gap: .25rem; }
.fac-fuera input[type=text] { width: 100%; box-sizing: border-box; }
.fac-cats { display: flex; flex-wrap: wrap; gap: .35rem; }
.fac-cat { position: relative; }
.fac-cat input { position: absolute; opacity: 0; pointer-events: none; }
.fac-cat span { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--pf-borde); border-radius: 999px; cursor: pointer; font-size: .86rem; background: var(--pf-caja); }
.fac-cat input:checked + span { background: var(--pf-azul-fuerte); border-color: var(--pf-azul-fuerte); color: var(--pf-caja); }
.fac-cat input:focus-visible + span { outline: 2px solid var(--pf-azul-claro); outline-offset: 1px; }
.fac-correo { margin-top: 1rem; }
.fac-correo > summary { cursor: pointer; padding: .75rem 1rem; border: 1px solid var(--pf-borde-suave); border-radius: 10px; background: var(--pf-caja); }
.fac-correo[open] > summary { margin-bottom: .6rem; }
/* 0.548.0 · Compras › Logística › Guías del correo sin orden: la lista de órdenes no se come la columna del correo; acciones en fila (formato §13) */
.gs-form { margin: 0; }
.gs-form select { width: 100%; min-width: 11rem; max-width: 22rem; }
#guias-sueltas td.acc .boton { min-height: 40px; }   /* misma altura que la lista de la orden en el renglón (formato §7) */
@media (max-width: 600px) {   /* en el teléfono cada guía es una ficha: la orden y los botones a la vista, sin desplazar de lado */
  #guias-sueltas thead { display: none; }
  #guias-sueltas tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .4rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--pf-borde-suave); }
  #guias-sueltas tbody td { display: block; padding: 0; border: 0; }
  #guias-sueltas tbody td:nth-child(1) { grid-column: 2; grid-row: 1; text-align: right; }
  #guias-sueltas tbody td:nth-child(2) { grid-column: 1; grid-row: 1; }
  #guias-sueltas tbody td:nth-child(n+3) { grid-column: 1 / -1; }
  #guias-sueltas tbody td.acc { width: auto; text-align: left; }
  #guias-sueltas .gs-form select { max-width: none; min-height: 44px; }
  #guias-sueltas td.acc .boton { min-height: 44px; }
}
@media (max-width: 1000px) {
  .fac-split { grid-template-columns: 1fr; }
  .fac-doc { position: static; }
  .fac-iframe { height: 70vh; }
  .fac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fac-fila-cab { display: none; }
  .fac-fila, .fac-lista-conc .fac-fila { grid-template-columns: 1fr auto; gap: .2rem .75rem; }
  .fac-c-fac { grid-column: 1; } .fac-c-tot { grid-column: 2; grid-row: 1; }
  .fac-c-prov { grid-column: 1 / -1; } .fac-c-fecha { grid-column: 1; color: var(--pf-texto-3); font-size: .85rem; }
  .fac-c-donde { grid-column: 1 / -1; } .fac-c-sat { grid-column: 1 / -1; }
  .fac-c-barras { grid-column: 1 / -1; }
  .fac-barra { grid-template-columns: 70px 1fr; } .fac-barra-v { grid-column: 2; text-align: left; font-size: .9rem; }
  .fac-cand { flex-direction: column; align-items: stretch; }
  .fac-pill, .fac-cat span { min-height: 36px; display: inline-flex; align-items: center; }   /* toque de 36 px en el teléfono */
  .fac-titulo-tot { align-items: flex-start; }
}
.fac-resumen { margin: .7rem 0 0; }
/* v0.525 — por pagar y facturadas sin recibir */
.fac-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.fac-cubetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0 1rem; }
.fac-cubeta { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .85rem; border-radius: 10px; border: 1px solid var(--pf-borde); background: var(--pf-caja-suave); border-top-width: 4px; }
.fac-cubeta > span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pf-texto-3); }
.fac-cubeta b { font-weight: 500; font-size: 1.2rem; color: var(--pf-titulo); font-variant-numeric: tabular-nums; }
.fac-cubeta small { color: var(--pf-texto-3); font-size: max(12px, .78rem); }
.fac-cubeta-rojo { border-top-color: var(--pf-rojo); } .fac-cubeta-ambar { border-top-color: var(--pf-ambar); }
.fac-cubeta-azul { border-top-color: var(--pf-azul-claro); } .fac-cubeta-gris { border-top-color: var(--pf-borde-fuerte); }
.fac-colas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fac-colas h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--pf-titulo); font-weight: 500; }
.fac-colas .fac-fila { grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; }
.fac-colas .fac-c-prov { grid-column: 1; grid-row: 2; color: var(--pf-texto-2); font-size: .92rem; }
.fac-colas .fac-c-fac { grid-column: 1; grid-row: 1; }
.fac-colas .fac-c-tot { grid-column: 2; grid-row: 1; }
.fac-colas .fac-c-donde { grid-column: 1 / -1; grid-row: 3; display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.fac-colas .fac-c-prov { grid-column: 1 / -1; }
.fac-recibir .fac-fila { grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.6fr) 130px auto; }
@media (max-width: 1000px) { .fac-colas { grid-template-columns: 1fr; } .fac-cubetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fac-kpis-3 { grid-template-columns: 1fr; } .fac-recibir .fac-fila { grid-template-columns: 1fr auto; } }
/* v0.526 — vencimiento y pago por factura */
.fac-vence { margin-bottom: .6rem; }
.fac-vence-fecha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fac-vence-fecha > span { color: var(--pf-texto-3); font-size: .9rem; }
.fac-vence-fecha b { font-weight: 500; font-size: 1.45rem; color: var(--pf-titulo); }
.fac-pagar { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; margin: .4rem 0 .6rem; }
.fac-pagar label { display: grid; gap: .25rem; }
.fac-pagar input { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .fac-pagar { grid-template-columns: 1fr; } }
.fac-pagar .nota-inline { display: inline; }

/* v0.527: devoluciones a proveedor y complementos de pago */
.dvp-card { border: 1px solid var(--pf-borde); border-radius: 10px; padding: .75rem .9rem; margin: .6rem 0; background: var(--pf-caja); }
.dvp-cab { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.dvp-folio { font-size: 1.06rem; font-weight: 500; color: var(--pf-titulo); }
.dvp-der { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.dvp-monto { font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--pf-titulo); }
.dvp-lineas { list-style: none; margin: .5rem 0 .2rem; padding: 0; display: grid; gap: .2rem; }
.dvp-lineas li { font-size: .95rem; }
.dvp-cerrar { margin-top: .5rem; }
.dvp-cerrar summary { cursor: pointer; color: var(--pf-texto-3); font-size: .9rem; }
.dvp-cerrar form { display: flex; gap: .5rem; margin-top: .5rem; }
.dvp-cerrar input[type=text] { flex: 1; min-width: 0; }
.dvp-form > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.dvp-form > summary::-webkit-details-marker { display: none; }
.dvp-form > summary::before { content: '↩'; font-size: 1.1rem; color: var(--pf-ambar-texto); }
.dvp-form-tit { font-size: 1.12rem; font-weight: 500; color: var(--pf-titulo); }
.dvp-form[open] > summary { margin-bottom: .8rem; }
.dvp-tabla input[type=number] { width: 7rem; text-align: right; }
.dvp-lote { display: block; width: 7rem; margin: .3rem 0 0 auto; }
.dvp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin: .9rem 0 .4rem; }
.dvp-campos label { display: grid; gap: .3rem; }
.dvp-resol { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dvp-resol legend { padding: 0; margin-bottom: .3rem; }
.fac-aviso-dvp { background: var(--pf-ambar-fondo); border: 1px solid var(--pf-ambar-borde); border-radius: 8px; padding: .5rem .75rem; color: var(--pf-ambar-texto); margin: .6rem 0; }
.rep-linea { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rep-lista { list-style: none; margin: .6rem 0 0; padding: 0; border: 1px solid var(--pf-borde); border-radius: 10px; overflow: hidden; }
.rep-fila { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .9rem; border-top: 1px solid var(--pf-borde-suave); background: var(--pf-caja); }
.rep-fila:first-child { border-top: 0; }
.rep-fila a { display: grid; gap: .1rem; color: var(--pf-texto); text-decoration: none; min-width: 0; }
.rep-fila a:hover .rep-tit { text-decoration: underline; }
.rep-tit { font-size: 1rem; color: var(--pf-titulo); }
.rep-der { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .dvp-cab, .rep-fila { flex-direction: column; align-items: stretch; }
  .dvp-der, .rep-der { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .dvp-campos { grid-template-columns: 1fr; }
  .dvp-cerrar form { flex-direction: column; }
}
.dvp-lineas .nota-inline, .dvp-campos label .nota-inline { display: inline; margin-left: .3rem; }
.dvp-campos input[type=text], .dvp-campos select, .dvp-tabla input, .dvp-cerrar input[type=text] { width: 100%; box-sizing: border-box; padding: .5rem .65rem; border: 1px solid var(--pf-borde); border-radius: 8px; background: var(--pf-caja); font: inherit; color: var(--pf-texto); }
.dvp-tabla input[type=number] { width: 7.5rem; }
.dvp-campos input:focus, .dvp-campos select:focus, .dvp-tabla input:focus { outline: 2px solid var(--pf-azul); outline-offset: 1px; }

/* v0.528: montos de autorización */
.doa-lista { list-style: none; margin: .6rem 0 0; padding: 0; border: 1px solid var(--pf-borde); border-radius: 10px; overflow: hidden; }
.doa-fila { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .9rem; border-top: 1px solid var(--pf-borde-suave); background: var(--pf-caja); }
.doa-fila:first-child { border-top: 0; }
.doa-mia { background: var(--pf-ambar-fondo); }
.doa-fila a { display: grid; gap: .1rem; color: var(--pf-texto); text-decoration: none; min-width: 0; }
/* 15-oct-2026 (Caro): la fila entera abre la orden (el enlace se estira sobre toda la fila) y se ve que se puede tocar */
.doa-fila { position: relative; cursor: pointer; transition: background .15s; }
.doa-fila a::after { content: ""; position: absolute; inset: 0; }
.doa-fila:hover, .doa-fila:focus-within { background: var(--pf-borde-suave); }
.doa-fila a:focus-visible { outline: none; }
.doa-fila:focus-within { box-shadow: inset 0 0 0 2px var(--pf-titulo); }
.doa-ver { color: var(--pf-titulo); font-size: .95rem; text-decoration: underline; text-underline-offset: 2px; }
.doa-folio { font-size: 1.04rem; color: var(--pf-titulo); }
.doa-der { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doa-niveles { margin: .6rem 0 .4rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.doa-rango { font-size: 1.02rem; color: var(--pf-titulo); }
.doa-form { display: grid; gap: .8rem; }
.doa-escalon { border: 1px solid var(--pf-borde); border-radius: 10px; padding: .7rem .9rem; display: grid; gap: .6rem; }
.doa-escalon legend { padding: 0 .3rem; font-size: 1.02rem; color: var(--pf-titulo); }
.doa-escalon label { display: grid; gap: .3rem; }
.doa-escalon label .nota-inline { display: inline; margin-left: .3rem; }
.doa-escalon input[type=text] { padding: .5rem .65rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; max-width: 28rem; }
.doa-roles { display: flex; flex-wrap: wrap; gap: .4rem; }
.doa-nota { display: block; margin-top: .25rem; }
@media (max-width: 640px) { .doa-fila { flex-direction: column; align-items: stretch; } .doa-der { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }
.doa-roles label { display: inline-block; }
/* v0.528: label con texto + «opcional» en una línea y el campo abajo (grid partía el texto en renglones) */
.doa-escalon label, .dvp-campos label { display: block; }
.doa-escalon label input[type=text], .dvp-campos label input, .dvp-campos label select { display: block; width: 100%; margin-top: .3rem; box-sizing: border-box; max-width: none; }
.doa-form { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: start; }
.doa-form .ciclo-acciones { grid-column: 1 / -1; }
.doa-roles label { display: inline-block; }

/* v0.529: presupuesto por centro */
.pres-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pres-cab .filtros { margin: 0; }
.pres-usado { min-width: 150px; white-space: nowrap; }
.pres-barra { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 999px; background: var(--pf-borde-suave); overflow: hidden; margin-right: .4rem; }
.pres-barra span { display: block; height: 100%; border-radius: 999px; }
.pres-verde span { background: var(--pf-verde); } .pres-ambar span { background: var(--pf-ambar); } .pres-rojo span { background: var(--pf-rojo); }
.pres-pct { font-variant-numeric: tabular-nums; font-size: .9rem; }
.pres-pct.pres-rojo { color: var(--pf-rojo-texto); } .pres-pct.pres-ambar { color: var(--pf-ambar-texto); }
.pres-in { width: 8.5rem; text-align: right; padding: .35rem .5rem; border: 1px solid var(--pf-borde); border-radius: 6px; font: inherit; }
.pres-in-hh { width: 6rem; }
.pres-tarifa { display: block; margin: .4rem 0 .9rem; }
.pres-tarifa input { display: block; margin-top: .3rem; width: 10rem; min-height: 38px; padding: .45rem .6rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; }
.pres-tarifa .nota-inline { display: inline; margin-left: .3rem; }

/* v0.530: cotizaciones y evaluación de proveedores */
.cot-tabla th.cot-col { min-width: 150px; vertical-align: bottom; }
.cot-tabla th.cot-min { background: var(--pf-verde-fondo); }
.cot-tabla th.cot-gana { background: var(--pf-verde-fondo); box-shadow: inset 0 -3px 0 var(--pf-verde); }
.cot-min-celda { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); }
.cot-pie td { background: var(--pf-caja-suave); }
.cot-total { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cot-total-min { color: var(--pf-verde-texto); }
.cot-adj { margin: .8rem 0; } .cot-ganador { font-size: 1.06rem; color: var(--pf-titulo); }
.cot-adjudicar { display: grid; gap: .6rem; margin-top: .9rem; }
.cot-adjudicar label { display: flex; flex-direction: column; gap: 4px; font-size: max(12px, .74rem); color: var(--pf-texto-2); } .cot-adjudicar input[type=text] { display: block; width: 100%; box-sizing: border-box; margin-top: 0; padding: .5rem .65rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .85rem; color: var(--pf-texto); }
.cot-adjudicar .nota-inline { display: inline; margin-left: .3rem; }
.cot-unico { display: flex !important; gap: .5rem; align-items: center; }
.cot-nueva { margin-top: 1rem; } .cot-nueva summary { cursor: pointer; font-size: 1.02rem; color: var(--pf-titulo); }
.cot-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 12px; align-items: end; }
/* 21-oct-2026 (kratfel-formato §9 y §16): etiquetas como las de .ciclo-form — arriba, a 4 px, 12 px en gris; el valor .85rem */
.cot-form label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-content: end; font-size: max(12px, .74rem); color: var(--pf-texto-2); min-width: 0; }
.cot-form label > :is(input, select:not(.ctl-oculto), .ctl-seg, .ctl-combo) { grid-column: 1 / -1; }
.cot-form label { position: relative; }   /* la etiqueta y su «opcional» en un renglón; el control abajo, a lo ancho */
.cot-form label .nota-inline { display: inline; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cot-form .ctl-seg { flex-wrap: nowrap; } .cot-form .ctl-seg button { white-space: nowrap; padding-inline: 10px; }
.cot-form label:has(select[name=iva_tasa]) { grid-column: span 2; }   /* «8 % (frontera)»: el segmentado no se parte en dos renglones */
.cot-form label input, .cot-form label select:not(.ctl-oculto) { display: block; width: 100%; box-sizing: border-box; margin-top: 0; padding: .5rem .65rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; font-size: .85rem; color: var(--pf-texto); background: var(--pf-caja); }
.cot-precios, .cot-ancho { grid-column: 1 / -1; }
.cot-quitar, .cot-inline { display: inline; }

/* v0.531: reabasto y conteo cíclico */
.reab-in { width: 6.5rem; }
.reab-nota { display: block; margin: .8rem 0 .2rem; } .reab-nota input { display: block; width: 100%; max-width: 32rem; margin-top: .3rem; padding: .45rem .6rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; }
.reab-nota .nota-inline { display: inline; margin-left: .3rem; }
.abc { display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; border-radius: 6px; font-size: .85rem; font-weight: 500; }
.abc-A { background: var(--pf-rojo-fondo); color: var(--pf-rojo-texto); border: 1px solid var(--pf-rojo-borde); }
.abc-B { background: var(--pf-ambar-fondo); color: var(--pf-ambar-texto); border: 1px solid var(--pf-ambar-borde); }
.abc-C { background: var(--pf-caja-suave); color: var(--pf-texto-3); border: 1px solid var(--pf-borde); }

/* v0.532: tesorería */
.tes-pagar { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin: .9rem 0 .3rem; }
.tes-pagar label { display: grid; gap: .3rem; } .tes-pagar input { padding: .45rem .6rem; border: 1px solid var(--pf-borde); border-radius: 8px; font: inherit; }
.tes-rastreo { width: 14rem; padding: .35rem .5rem; border: 1px solid var(--pf-borde); border-radius: 6px; font: inherit; text-transform: uppercase; }
.tes-ant > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.tes-ant > summary::-webkit-details-marker { display: none; }
.tes-ant[open] > summary { margin-bottom: .6rem; }

/* v0.533: cobranza por hitos */
.cxc-contrato { border: 1px solid var(--pf-borde); border-radius: 12px; padding: .9rem 1rem; margin: .8rem 0; background: var(--pf-caja); }
.cxc-tabla td { vertical-align: top; }
.cxc-acc { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin: .3rem 0; }
.cxc-acc input { padding: .3rem .45rem; border: 1px solid var(--pf-borde); border-radius: 6px; font: inherit; width: 8rem; }
.cxc-acc input[type=date] { width: auto; }
.cxc-det { margin-top: .6rem; } .cxc-det > summary { cursor: pointer; color: var(--pf-titulo); }

/* ================= Entrenamiento → El proceso (v0.534.0, 12-oct-2026) =================
   Fichas del software dentro del texto (ent_p_txt): chips reales, folio, botón y pantalla. Roles con iniciales en azul marino:
   nunca verde/ámbar/rojo, que en el ERP son colores de ESTADO y aquí se enseñan sin ruido. Negritas al mínimo: se destaca con tamaño. */
.ep-ficha { vertical-align: 1px; white-space: nowrap; }
.ep-folio { display: inline-block; padding: 1px 7px; border-radius: 6px; border: 1px dashed var(--pf-borde-fuerte); background: var(--pf-caja-suave);
  font: 500 max(12px, .8em)/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--pf-titulo); letter-spacing: .2px; white-space: nowrap; vertical-align: 1px; }
.ep-boton { display: inline-flex; align-items: center; padding: 2px 10px; min-height: 22px; border-radius: 7px; background: var(--pf-azul-fuerte); color: #fff;
  font-size: .78rem; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 0 rgba(0, 31, 63, .35); vertical-align: 1px; }
.ep-pantalla { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; border-radius: 7px; border: 1px solid var(--pf-azul-borde);
  background: var(--pf-azul-fondo); color: var(--pf-azul); font-size: .8rem; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.ep-pantalla svg { flex: 0 0 auto; }
a.ep-pantalla-a { text-decoration: none; } a.ep-pantalla-a:hover { background: var(--pf-caja); border-color: var(--pf-azul); }
.ep-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Quién: iniciales + nombre */
.ep-quien { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--pf-titulo); white-space: nowrap; }
.ep-quien i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pf-azul-fuerte); color: #fff;
  font: 600 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; letter-spacing: .2px; flex: 0 0 auto; }   /* piso 12 px (ronda 12-oct) */
.ep-q-sistema i { font-size: 12px; letter-spacing: -.3px; background: var(--pf-caja); color: var(--pf-azul-fuerte); border: 2px solid var(--pf-azul-fuerte); }
.ep-q-semar i, .ep-q-proveedor i { background: var(--pf-texto-3); }

/* Dosis de software: 3 segmentos */
.ep-dosis { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--pf-texto-3); white-space: nowrap; }
.ep-dosis-b { display: inline-flex; gap: 3px; }
.ep-dosis-b i { width: 14px; height: 6px; border-radius: 3px; background: var(--pf-rejilla); border: 1px solid var(--pf-borde); }
.ep-dosis-b i.on { background: var(--pf-azul-claro); border-color: var(--pf-azul-claro); }

/* Escalera */
.ep-hero .ent-hero-txt p { max-width: 62ch; }
.ep-escalera .ent-marca { font-style: normal; font-size: 12px; color: var(--pf-texto-3); }
.ep-escalera .es-siguiente a { background: var(--pf-azul-fondo); }
.ep-escalera .es-siguiente .ent-marca { border-color: var(--pf-azul); color: var(--pf-azul); }
.ep-li-der { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ep-colores .ep-col-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ep-col-lista li { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--pf-borde-suave); font-size: .9rem; line-height: 1.45; }
.ep-col-lista li:first-child { border-top: 0; }
.ep-col-m { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-col-n { font-size: 1.02rem; color: var(--pf-titulo); }
a.ep-aviso { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; color: inherit; border: 1px solid var(--pf-azul-borde); background: var(--pf-azul-fondo); }
a.ep-aviso:hover { border-color: var(--pf-azul); }
.ep-aviso-t { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; line-height: 1.45; color: var(--pf-texto); }
.ep-aviso-k { font-size: 1.05rem; color: var(--pf-titulo); }
.ep-aviso-ir { flex: 0 0 auto; font-size: .86rem; color: var(--pf-azul); white-space: nowrap; }

/* Módulo */
.ep-modulo .ent-cab .ep-dosis { margin-left: auto; }
.ep-idea { font-size: 1.05rem; }
.ep-hist + .ep-hist { margin-top: 10px; }
.ep-hist { max-width: 75ch; }
.ep-piezas { margin: 8px 0 0; display: grid; gap: 0; }
.ep-pieza { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) minmax(150px, auto); gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pf-borde-suave); }
.ep-pieza:first-child { border-top: 0; }
.ep-pieza dt { font-size: .98rem; color: var(--pf-titulo); }
.ep-pieza dd { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--pf-texto-2); }
.ep-ve { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.ep-ve-l { width: 100%; text-align: right; font-size: max(12px, 10.5px); letter-spacing: .3px; text-transform: uppercase; color: var(--pf-texto-3); }

.ep-recorrido { list-style: none; margin: 6px 0 0; padding: 0; position: relative; counter-reset: ep; }
.ep-paso { counter-increment: ep; position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center;
  padding: 12px 12px 12px 40px; border-radius: 12px; }
.ep-paso::before { content: counter(ep); position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--pf-azul); color: var(--pf-azul); background: var(--pf-caja); font-size: 12px; font-weight: 600; z-index: 1; }
.ep-rec-n { margin: 0; }
.ep-paso.es-actual { background: var(--pf-azul-fondo); }
.ep-paso:focus { outline: none; } .ep-paso:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: 2px; }
.ep-que { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--pf-titulo); }
.ep-porque { margin: 2px 0 0; font-size: .85rem; line-height: 1.4; color: var(--pf-texto-2); }
.ep-sw { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; }
.ep-sw-l { font-size: max(12px, 10.5px); letter-spacing: .3px; text-transform: uppercase; color: var(--pf-texto-3); }
.ep-sw-y { color: var(--pf-texto-3); }
.ep-paso-ve { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ep-entra { animation: ep-entra .35s ease-out; }
@keyframes ep-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ep-ordena { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: eo; display: grid; gap: 6px; }
.ep-oi { counter-increment: eo; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--pf-borde-suave); border-radius: 11px; background: var(--pf-caja); }
.ep-oi-n::before { content: counter(eo); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pf-rejilla); color: var(--pf-texto-2); font-size: 12px; }
.ep-oi-t { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .9rem; line-height: 1.4; color: var(--pf-titulo); }
.ep-oi-b { flex: 0 0 auto; display: flex; gap: 4px; }
.ep-mueve { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--pf-azul-borde); border-radius: 9px; background: var(--pf-caja); color: var(--pf-azul); font-size: 17px; cursor: pointer; }
.ep-mueve:hover { background: var(--pf-azul-fondo); }
.ep-mueve:focus-visible { outline: 2px solid var(--pf-azul); outline-offset: 1px; }
.ep-oi:first-child .ep-mueve[data-dir="-1"], .ep-oi:last-child .ep-mueve[data-dir="1"] { opacity: .35; pointer-events: none; }
.ep-oi.es-ok { border-color: var(--pf-verde-borde); background: var(--pf-verde-fondo); }
.ep-oi.es-ok .ep-oi-n::before { background: var(--pf-verde); color: #fff; }
.ep-oi.es-mal { border-color: var(--pf-ambar-borde); background: var(--pf-ambar-fondo); }
.ep-salta { animation: ep-salta .25s ease-out; }
@keyframes ep-salta { from { transform: scale(.98); } to { transform: none; } }

.ep-tabla td { vertical-align: middle; font-size: .86rem; }
.ep-h4 { margin: 16px 0 6px; font-size: .95rem; color: var(--pf-titulo); font-weight: 500; }
.ep-sw-lista .ent-li-min .chip { margin-right: 4px; }

/* Repaso */
.ep-rq + .ep-rq { margin-top: 2px; }
.ep-rq-de { display: block; font-size: max(12px, 11px); font-weight: 500; letter-spacing: .3px; text-transform: uppercase; color: var(--pf-texto-3); margin-bottom: 3px; }

@media (max-width: 720px) {
  .ep-col-lista li { grid-template-columns: 1fr; gap: 6px; }
  .ep-pieza { grid-template-columns: 1fr; gap: 4px; }
  .ep-ve { justify-content: flex-start; } .ep-ve-l { text-align: left; }
  .ep-paso { grid-template-columns: 1fr; gap: 6px; padding-left: 40px; }
  .ep-paso::before { top: 14px; transform: none; }
  .ep-paso-ve { justify-content: flex-start; }
  .ep-modulo .ent-cab .ep-dosis { margin-left: 0; width: 100%; }
  a.ep-aviso { flex-direction: column; align-items: flex-start; }
  .ep-li-der .ep-dosis-t { display: none; }
  .ep-oi-t .ep-quien { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .ep-entra, .ep-salta { animation: none; } }

/* ===================== Entrenamiento → practicar sin perder tu lugar (v0.536, 12-oct-2026) — js/entrenamiento.js §4 =====================
   La lección se queda en su pestaña; la pantalla, el Muéstrame y la demo se abren en otra con «Volver al entrenamiento».
   Abajo a la izquierda: abajo a la derecha vive el chip de la bitácora de campo (.campo-chip). */
.ico.ent-sale { flex: 0 0 auto; opacity: .75; }
.ent-nota-pestana { flex: 1 1 100%; margin: 2px 0 0; }
.ent-regreso {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 65;
  display: flex; align-items: stretch; max-width: calc(100vw - 28px);
  border-radius: 24px; background: var(--pf-azul-fuerte); color: #fff;
  box-shadow: 0 8px 24px rgba(0, 31, 63, .30);
  animation: ent-regreso-entra .28s ease;
}
.ent-regreso-b {
  display: flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0; padding: 6px 8px 6px 16px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 24px 0 0 24px;
}
.ent-regreso-b:hover, .ent-regreso-b:focus-visible { background: var(--pf-azul-fuerte-hover); }
.ent-regreso-f { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; }
.ent-regreso-tx { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ent-regreso-l { font-size: .92rem; line-height: 1.2; }
.ent-regreso-t { font-size: .75rem; line-height: 1.25; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ent-regreso-x {
  display: flex; align-items: center; justify-content: center; flex: 0 0 44px; min-height: 48px;
  border: 0; border-left: 1px solid rgba(255, 255, 255, .18); background: transparent; color: rgba(255, 255, 255, .8);
  cursor: pointer; border-radius: 0 24px 24px 0;
}
.ent-regreso-x:hover, .ent-regreso-x:focus-visible { background: var(--pf-azul-fuerte-hover); color: #fff; }
@keyframes ent-regreso-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* al volver: el bloque desde donde se salió se marca un momento */
.ent-bloque.ent-vuelta, section.ent-vuelta { animation: ent-vuelta 2.4s ease; }
@keyframes ent-vuelta { 0%, 55% { box-shadow: 0 0 0 3px var(--pf-ambar); } 100% { box-shadow: 0 0 0 3px transparent; } }
.ent-aviso-vuelta {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1500; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px;
  background: var(--pf-azul-fuerte); color: #fff; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 31, 63, .28);
  transition: opacity .35s ease;
}
.ent-aviso-vuelta.es-sale { opacity: 0; }
body.con-regreso { padding-bottom: 76px; }   /* que la cápsula no tape el último botón de la página */
@media print { .ent-regreso, .ent-aviso-vuelta { display: none !important; } }
@media (max-width: 640px) { .ent-regreso-t { max-width: 180px; } }
@media (prefers-reduced-motion: reduce) { .ent-regreso, .ent-bloque.ent-vuelta, section.ent-vuelta { animation: none; } .ent-bloque.ent-vuelta, section.ent-vuelta { box-shadow: 0 0 0 3px var(--pf-ambar); } }

/* ===================== Entrenamiento → Mi ruta en etapas (v0.536, 12-oct-2026) =====================
   1) El proceso · 2) Base común · 3) tu área: una barra, un «Sigue con». El proceso deja de ser una tarjeta aparte que se saltaba. */
/* 12-oct-2026 (Pablo, captura de Mi ruta): las etapas eran píldoras de ancho libre — unas de 1 renglón, otras de 3, «El proceso»
   partido en dos. Ahora: rejilla de columnas iguales, misma altura por fila, nombre en UN renglón (con «…» si no cabe). */
.ent-etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.ent-etapas li { min-width: 0; }
.ent-etapas a { display: flex; align-items: center; gap: 8px; height: 100%; box-sizing: border-box; min-height: 48px; padding: 6px 12px 6px 8px; border-radius: 10px;
                border: 1px solid var(--pf-borde); background: var(--pf-caja); color: var(--pf-texto); text-decoration: none; font-size: .86rem; }
.ent-etapas a:hover { border-color: var(--pf-azul-borde); background: var(--pf-azul-fondo); }
.ent-etapas i { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 28px; border-radius: 50%;
                background: var(--pf-fondo); color: var(--pf-texto-2); font-style: normal; font-size: .82rem; }
.ent-etapas span { display: block; min-width: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-etapas small { display: block; font-size: .75rem; color: var(--pf-texto-2); }
.ent-etapas li.es-aqui a { border-color: var(--pf-azul); box-shadow: inset 0 0 0 1px var(--pf-azul); }
.ent-etapas li.es-aqui i { background: var(--pf-azul-fuerte); color: #fff; }
.ent-etapas li.es-hecha i { background: var(--pf-verde-fondo); color: var(--pf-verde-texto); }
.ent-etapa-n { display: block; font-size: .75rem; color: var(--pf-texto-2); margin-bottom: 2px; font-weight: 400; }
.ent-ruta-proceso { border-top: 4px solid var(--pf-ambar); }
.ent-lista li.es-siguiente > a { box-shadow: inset 3px 0 0 var(--pf-azul); }
@media (max-width: 640px) { .ent-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ent-etapas a { padding-right: 10px; } }


/* 12-oct-2026 · expediente de RH: documentos por tipo, con «Falta» en los básicos */
.rh-docs th{width:32%;text-align:left;font-weight:500;vertical-align:top;padding-right:12px}
.rh-doc{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;overflow-wrap:anywhere}
.rh-doc>a,.rh-subir{display:inline-flex;align-items:center;min-height:36px}
.rh-docs th{padding-top:10px}
@media (max-width:600px){.rh-docs th,.rh-docs td{display:block;width:auto}.rh-docs th{padding-top:10px}}

/* Ficha de la requisición (21-oct-2026, Pablo: «todo se ve super amontonado»; kratfel-formato §16 «Aire entre bloques»):
   datos en dos columnas con una sola letra, título de cada bloque, y las acciones en su propio bloque con 16 px entre una y otra. */
.req-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 16px 0 24px; font-size: .88rem; line-height: 1.45; }
.req-datos dt { color: var(--pf-texto-2); }
.req-datos dd { margin: 0; min-width: 0; color: var(--pf-texto); overflow-wrap: anywhere; }
.req-datos dd .nota-inline { margin-top: 2px; }
.req-datos dd .chip { margin-left: 6px; }
.req-ficha > :is(.aviso-err, .aviso-ok) { margin: 0 0 16px; }
.req-ficha .req-sub { margin: 24px 0 8px; }
.req-ficha > .tabla-scroll + p.nota, .req-ficha > p.nota { margin: 8px 0 0; }
.req-acciones { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--pf-borde); }
.req-acciones > * { margin: 0; }
.req-acciones > .tarjeta { border: 0; padding: 0; box-shadow: none; background: none; }   /* caja dentro de caja no (§9): Cotizaciones es un bloque más de la ficha */
.req-acciones > p:has(> .boton) { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.req-ficha #historial { margin-top: 24px; }
.req-ficha #historial > summary { display: list-item; padding-block: 8px; line-height: 20px; cursor: pointer; }   /* list-item: con flex se pierde el triángulo */
@media (max-width: 640px) {
  .req-datos { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .req-datos dd { margin-bottom: 10px; }
}
.req-ficha .ciclo-titulo { font-size: .95rem; color: var(--pf-titulo); }
.req-ficha .ciclo-titulo .nota-inline { margin-top: 2px; }
.req-ficha details.req-mas > summary { display: list-item; padding-block: 8px; line-height: 20px; cursor: pointer; font-size: .88rem; color: var(--pf-azul); }
.req-ficha details.req-mas[open] > .ciclo-form { margin-top: 8px; }
.cot-nueva > summary { display: list-item; padding-block: 8px; line-height: 20px; }
@media (max-width: 640px) { .cot-form label:has(select[name=iva_tasa]) { grid-column: auto; } .cot-form .ctl-seg { flex-wrap: wrap; width: 100%; } }

/* Facturas (21-oct-2026, Pablo con una captura de la app de la Mac): el folio y sus etiquetas se encimaban y se partían en tres renglones
   («Factura CFDB / 7609059592 Kratfel / Del correo PDF») y la fecha en dos. El nombre va en UN renglón (con «…» y el completo en title)
   y las etiquetas en el renglón de abajo, siempre; la fecha no se parte (kratfel-formato §11, §12 y §17). */
.fac-c-fac { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fac-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pf-titulo); font-weight: 500; font-size: 1.04rem; }
.fac-etqs { display: flex; flex-wrap: wrap; gap: 4px; }
.fac-etqs > * { margin: 0 !important; vertical-align: 0; }
.fac-c-fecha { white-space: nowrap; }
.fac-c-prov { min-width: 0; }
.fac-filtros > * { margin: 0; }

/* 0.546.0 · Primeros pasos (Mi día y Entrenamiento), constancias y candado del quiz (includes/ent_adopcion.php) */
.ent-pp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ent-pp-cab h2 { margin: 0; }
.ent-pp-lista { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--pf-borde-suave); border-radius: 12px; overflow: hidden; }
.ent-pp-lista li + li { border-top: 1px solid var(--pf-borde-suave); }
.ent-pp-lista a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: inherit; text-decoration: none; min-height: 52px; }
.ent-pp-lista a:hover { background: var(--pf-caja-hover); }
.ent-pp-lista .es-hecha .ent-marca { border-color: var(--pf-verde); background: var(--pf-verde); color: #fff; }
.ent-pp-t { color: var(--pf-titulo); font-size: .92rem; }
.ent-pp-lista .es-hecha .ent-pp-t { color: var(--pf-texto-2); }
.ent-pp-lista small { color: var(--pf-texto-3); font-size: .8rem; line-height: 1.35; }
.ent-const-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }
.ent-const td { vertical-align: middle; }
.ent-const select, .ent-const input[type=text] { width: 100%; min-width: 180px; }
.ent-espera { color: var(--pf-ambar-texto); }
/* 0.546.0 · Orden firmada por el proveedor (includes/oc_firmada.php) */
.ocf-lista { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.ocf-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ocf-lista li form { margin: 0; }
.ocf-subir { margin: 8px 0 0; }
.ocf-subir { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.ocf-subir label:not(.boton) { display: grid; gap: 4px; font-size: .92rem; color: var(--pf-texto-3); }
.ocf-pide { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; }
.ocf-pide > li > .ocf-lista { margin: 4px 0 0 12px; }
.ald-doc .nota-inline { margin-left: 4px; }

/* formato §18 (22-oct-2026) · reflow a 320 px (WCAG 1.4.10): la barra fija del teléfono cabe con sus botones */
@media (max-width: 360px) {
  .movil-top { gap: 4px; padding: 0 6px; }
  .movil-version { display: none; }
}