:root {
  --navy: #16324F;
  --navy-dark: #0E2338;
  --navy-light: #EAF0F6;
  --red: #C0392B;
  --red-dark: #A5281C;
  --amber: #B8860B;
  --amber-bg: #FFF7E6;
  --green: #1E8E5A;
  --green-bg: #E8F7EF;
  --gray-900: #1C2733;
  --gray-700: #45525F;
  --gray-500: #7C8896;
  --gray-300: #D7DEE4;
  --gray-100: #F3F5F7;
  --bg: #F4F6F8;
  --white: #FFFFFF;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,32,48,.06);
  --shadow: 0 2px 10px rgba(16,32,48,.08);
  --shadow-lg: 0 12px 32px rgba(16,32,48,.16);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --nav-h: 62px; --bottomnav-h: 60px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--gray-900);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Inter', sans-serif; }
.oculto { display: none !important; }
svg.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex-shrink: 0; }

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ===================== HEADER ===================== */
header.topbar {
  background: var(--navy); color: #fff; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5); gap: var(--space-4); position: sticky; top: 0; z-index: 40;
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  /* Logotipo real (wordmark ASFALTO), no la "A" roja anterior. Versión clara
     porque va sobre el fondo navy del header. */
  height: 24px; width: auto; flex-shrink: 0; display: block;
}
.brand-text { line-height: 1.2; min-width: 0; }
.brand-text .t1 { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text .t2 { font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

nav.tabs { display: flex; gap: 2px; }
nav.tabs button {
  background: transparent; border: none; color: rgba(255,255,255,.72);
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px;
  font-weight: 600; display: flex; align-items: center; gap: 7px; transition: background .15s, color .15s;
  font-family: inherit;
}
nav.tabs button:hover { background: rgba(255,255,255,.08); color: #fff; }
nav.tabs button.activo { background: rgba(255,255,255,.14); color: #fff; }

.usuario-menu { position: relative; }
.usuario-chip {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); padding: 5px 10px 5px 5px; border-radius: 999px;
  cursor: pointer; color: #fff; font-size: 12.5px;
}
.usuario-chip:hover { background: rgba(255,255,255,.16); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0;
}
.usuario-chip .nombre { font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: var(--gray-900);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 220px; padding: var(--space-2);
  z-index: 50; border: 1px solid var(--gray-300);
}
.dropdown .rol-badge { padding: var(--space-3); font-size: 12px; color: var(--gray-500); border-bottom: 1px solid var(--gray-100); margin-bottom: var(--space-1); }
.dropdown .rol-badge b { display: block; color: var(--gray-900); font-size: 13.5px; }
.dropdown button {
  width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px; color: var(--gray-900); display: flex; align-items: center; gap: 8px; font-family: inherit;
}
.dropdown button:hover { background: var(--gray-100); }
.dropdown button.salir { color: var(--red); }

/* ===================== BOTTOM NAV (móvil) ===================== */
nav.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--gray-300); z-index: 40;
  box-shadow: 0 -2px 10px rgba(16,32,48,.06);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* evita que el gesto/línea de inicio del iPhone tape los botones */
}
nav.bottom-nav .fila { display: flex; height: var(--bottomnav-h); }
nav.bottom-nav button {
  flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: var(--gray-500); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 44px; /* mínimo recomendado para objetivos táctiles */
}
nav.bottom-nav button svg.icon { width: 22px; height: 22px; }
nav.bottom-nav button.activo { color: var(--navy); }
nav.bottom-nav button.activo svg { stroke: var(--red); }
nav.bottom-nav button:active { background: var(--gray-100); }

/* Menú "Más" del bottom-nav (móvil): agrupa Productividad/Administración, mismo
   estilo visual que .dropdown (menú de usuario), pero se despliega hacia ARRIBA desde
   el botón "Más", ya que la barra está fija abajo de la pantalla. */
.bottom-nav-mas-menu {
  position: absolute; right: 6px; bottom: calc(100% + 6px);
  background: #fff; color: var(--gray-900); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 1px solid var(--gray-300);
  min-width: 190px; padding: var(--space-2); z-index: 45;
}
.bottom-nav-mas-menu button {
  width: 100%; text-align: left; background: none; border: none; padding: 10px 12px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--gray-900);
  display: flex; align-items: center; gap: 10px; font-family: inherit;
}
.bottom-nav-mas-menu button svg.icon { width: 18px; height: 18px; stroke: var(--navy); }
.bottom-nav-mas-menu button:hover, .bottom-nav-mas-menu button:active { background: var(--gray-100); }

main { flex: 1; padding: var(--space-5); max-width: 1180px; margin: 0 auto; width: 100%; }

/* ===================== LOGIN ===================== */
#vista-login { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-box {
  max-width: 400px; width: 100%; background: #fff; padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center;
}
.login-box .brand-mark { margin: 0 auto var(--space-4); height: 38px; width: auto; display: block; }
.login-box h1 { font-size: 19px; color: var(--navy); margin: 0 0 4px; font-weight: 700; }
.login-box p.sub { color: var(--gray-500); font-size: 13px; margin: 0 0 var(--space-6); line-height: 1.5; }
.login-box .campo { text-align: left; }
.campo-password { position: relative; }
.campo-password .toggle-pass {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: var(--gray-500); cursor: pointer; padding: 4px; display: flex;
}
.login-hint { margin-top: var(--space-5); font-size: 11.5px; color: var(--gray-500); background: var(--gray-100); border-radius: var(--radius-sm); padding: var(--space-3); text-align: left; line-height: 1.5; }
.login-credito { margin-top: var(--space-4); font-size: 11px; color: var(--gray-500); text-align: center; }

/* ===================== FORMULARIOS ===================== */
.campo { margin-bottom: var(--space-4); text-align: left; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; letter-spacing: .1px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm);
  /* 16px evita que iOS Safari haga zoom automático al enfocar el campo (cualquier valor menor lo dispara) */
  font-size: 16px; font-family: inherit; background: #fff; color: var(--gray-900); transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,50,79,.12);
}
.campo input::placeholder { color: var(--gray-500); opacity: .8; }
/* Safari/iOS: input[type=date] es `display: inline-flex` por defecto en WebKit, y ese
   display no respeta width:100% igual que un bloque normal (bug de Safari, persiste en
   iOS < 18) — por eso min-width:0 solo no bastó y el campo seguía saliéndose de la tarjeta
   en iPhone aunque en Android ya se veía bien (Diego, 2026-07-14). Forzar display:block +
   -webkit-appearance:textfield hace que Safari lo trate como cualquier otro input de texto
   y sí respete el ancho del contenedor. */
.campo input[type="date"] { display: block; -webkit-appearance: textfield; min-width: 0; }
/* Diego confirma que el problema persiste en iPhone tanto en Safari como en Chrome — como
   iOS obliga a todos los navegadores a usar el motor WebKit, es el mismo bug de fondo en
   ambos, y ni min-width:0 ni display:block lo resolvieron del todo (2026-07-14). Como red de
   seguridad definitiva: recortar cualquier exceso del control nativo con overflow:hidden en
   el contenedor .campo, para que nunca pueda pintarse fuera del margen de la tarjeta, sin
   importar por qué WebKit lo está dibujando más ancho de lo declarado. Acotado solo a los
   campos de fecha para no afectar el anillo de foco de los demás inputs. */
.fila-campos > .campo:has(input[type="date"]) { overflow: hidden; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
/* Sin min-width:0, un input nativo con ancho intrínseco grande (p. ej. input[type=date] en
   móvil) no se encoge por debajo de ese ancho dentro de una celda de grid, y empuja el
   campo fuera de los márgenes de la tarjeta (bug reportado por Diego, 2026-07-14). Mismo
   fix ya aplicado a .dos-columnas más abajo. */
.fila-campos > * { min-width: 0; }
/* El punto de quiebre a una sola columna debe coincidir con el resto del "modo móvil" del
   sitio (header/bottom-nav cambian a 760px, ver más abajo). Con 560px aquí, cualquier ancho
   entre 560 y 760px quedaba en modo móvil para todo lo demás pero seguía en 2 columnas para
   fila-campos — con el padding de main ya reducido, eso volvía a empujar inputs como
   Desde/Hasta o Fecha de recibo fuera de la tarjeta (Diego seguía viendo el bug tras el
   primer fix de min-width:0, reportado de nuevo 2026-07-14). */
@media (max-width: 760px) { .fila-campos { grid-template-columns: 1fr; } }

button.btn {
  background: var(--navy); color: #fff; border: none; padding: 12px 20px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 700;
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, transform .05s, box-shadow .15s; box-shadow: var(--shadow-sm);
}
button.btn:hover { background: var(--navy-dark); }
button.btn:active { transform: translateY(1px); }
button.btn.rojo { background: var(--red); }
button.btn.rojo:hover { background: var(--red-dark); }
button.btn.secundario { background: #fff; color: var(--navy); border: 1.5px solid var(--gray-300); box-shadow: none; }
button.btn.secundario:hover { background: var(--gray-100); border-color: var(--gray-500); }
button.btn.fantasma { background: transparent; color: var(--gray-700); box-shadow: none; padding: 8px 12px; }
button.btn.fantasma:hover { background: var(--gray-100); }
button.btn.chico { padding: 7px 12px; font-size: 12.5px; }
button.btn:disabled { opacity: .55; cursor: default; transform: none; }
button.btn-full { width: 100%; }

/* ===================== TOASTS ===================== */
#toast-contenedor {
  position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
@media (max-width: 600px) { #toast-contenedor { left: 12px; right: 12px; max-width: none; } }
.toast {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 13px 14px;
  display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; border-left: 4px solid var(--navy);
  animation: entrar-toast .2s ease-out;
}
.toast.exito { border-color: var(--green); }
.toast.exito svg { stroke: var(--green); }
.toast.error { border-color: var(--red); }
.toast.error svg { stroke: var(--red); }
.toast .msg { flex: 1; line-height: 1.4; color: var(--gray-900); }
.toast button { background: none; border: none; color: var(--gray-500); cursor: pointer; padding: 0; }
@keyframes entrar-toast { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== TARJETAS ===================== */
.card { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.card-head h2 { font-size: 15px; color: var(--navy); margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card h2 { font-size: 15px; color: var(--navy); margin: 0 0 var(--space-4) 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* ===================== STEPPER (captura) ===================== */
.stepper { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.stepper .paso { display: flex; align-items: center; gap: 8px; color: var(--gray-500); font-size: 13px; font-weight: 700; }
.stepper .paso .num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; border: 1.5px solid var(--gray-300);
}
.stepper .paso.activo { color: var(--navy); }
.stepper .paso.activo .num { background: var(--navy); color: #fff; border-color: var(--navy); }
.stepper .linea { flex: 1; height: 1.5px; background: var(--gray-300); max-width: 60px; }

/* ===================== KPIs ===================== */
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.kpi { background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius); padding: var(--space-4); display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm); }
.kpi .icono { width: 42px; height: 42px; border-radius: 11px; background: var(--navy-light); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi.acento .icono { background: #FBEAE8; color: var(--red); }
.kpi .valor { font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.kpi .etiqueta { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; font-weight: 600; }

/* ===================== PENDIENTES (captura etapa 2) ===================== */
.pendiente-item {
  border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff;
}
.pendiente-item .izq { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pendiente-item .icono-vehiculo { width: 38px; height: 38px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pendiente-item .info { font-size: 13px; min-width: 0; }
.pendiente-item .info .placa { font-weight: 700; color: var(--gray-900); font-size: 14px; }
.pendiente-item .info .detalle { color: var(--gray-500); font-size: 12px; margin-top: 2px; }
.pendiente-item .acciones { display: flex; gap: 8px; flex-shrink: 0; }
.dot-pulso { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-right: 5px; animation: pulso 1.4s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(184,134,11,.35); } 100% { box-shadow: 0 0 0 7px rgba(184,134,11,0); } }

.estado-vacio { text-align: center; padding: var(--space-8) var(--space-4); color: var(--gray-500); }
.estado-vacio svg { width: 40px; height: 40px; stroke: var(--gray-300); margin-bottom: var(--space-3); }
.estado-vacio .titulo-vacio { font-weight: 700; color: var(--gray-700); font-size: 14px; margin-bottom: 3px; }
.estado-vacio .sub-vacio { font-size: 12.5px; }

.skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, #e8ecef 37%, var(--gray-100) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--radius-sm); height: 58px; margin-bottom: 10px; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ===================== TABLAS ===================== */
.tabla-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--gray-300); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th, table.tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gray-100); }
table.tabla th { background: var(--gray-100); color: var(--gray-700); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
table.tabla tbody tr:hover { background: var(--navy-light); }
table.tabla tbody tr:last-child td { border-bottom: none; }
/* Filas completas como acción de "ver detalle" (bitácora de calidad): evita depender de un
   botón en la última columna, que en móvil queda fuera de la vista hasta hacer scroll
   horizontal — no muy intuitivo (Diego, 2026-07-14). */
table.tabla.clicable tbody tr { cursor: pointer; }
table.tabla.clicable tbody tr:hover { background: var(--navy-light); }
.chevron-fila { color: var(--gray-500); }
/* Inputs numéricos dentro de tablas (granulometría/especímenes del reporte de laboratorio):
   más angostos que .campo input, para que quepan varias columnas sin scroll excesivo. */
table.tabla input[type="number"], table.tabla input[type="text"] {
  width: 84px; padding: 7px 8px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--gray-900);
}
table.tabla input[type="number"]:focus, table.tabla input[type="text"]:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,50,79,.12);
}
.rango-tolerancia { color: var(--gray-500); font-size: 12px; white-space: nowrap; }
.indicador-rango { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; }
.indicador-rango.dentro { color: var(--green); }
.indicador-rango.fuera { color: var(--red); }

.filtros { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin-bottom: 0; min-width: 150px; flex: 1; }
.filtros-acciones { display: flex; gap: 8px; }

/* ===================== BOTONES DE PERIODO (segmentado) ===================== */
.periodo-grupo { display: inline-flex; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.periodo-grupo button {
  background: #fff; border: none; padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--gray-700);
  cursor: pointer; font-family: inherit; border-right: 1.5px solid var(--gray-300); transition: background .15s, color .15s;
}
.periodo-grupo button:last-child { border-right: none; }
.periodo-grupo button:hover { background: var(--gray-100); }
.periodo-grupo button.activo { background: var(--navy); color: #fff; }

/* ===================== CHIPS (selección múltiple de plantas, ej. alta de Supervisor) ===================== */
.chip-plantas { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-plantas .chip-planta {
  background: #fff; border: 1.5px solid var(--gray-300); border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.chip-plantas .chip-planta:hover { background: var(--gray-100); }
.chip-plantas .chip-planta.activo { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-todas-btn { display: block; margin: 10px 0 16px; }

/* ===================== PAGINACIÓN ===================== */
.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); font-size: 13px; color: var(--gray-700); }
.paginacion button { background: #fff; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; font-family: inherit; font-weight: 600; color: var(--navy); }
.paginacion button:hover:not(:disabled) { background: var(--gray-100); }
.paginacion button:disabled { opacity: .4; cursor: default; }

.chart-wrap { position: relative; height: 270px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
/* Sin min-width:0, un elemento hijo de grid no se encoge por debajo del ancho
   mínimo de su contenido (p. ej. una tabla ancha), y eso empuja toda la fila fuera
   de la pantalla en vez de dejar que .tabla-wrap haga scroll horizontal interno. */
.dos-columnas > * { min-width: 0; }
@media (max-width: 800px) { .dos-columnas { grid-template-columns: 1fr; } }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.gris { background: var(--gray-100); color: var(--gray-700); }
.badge.verde { background: var(--green-bg); color: var(--green); }
.badge.rojo { background: #FBEAE8; color: var(--red); }
.badge.ambar { background: var(--amber-bg); color: var(--amber); }

/* ===================== SUB-TABS ADMIN ===================== */
.subtabs { display: flex; gap: 4px; margin-bottom: var(--space-5); border-bottom: 1.5px solid var(--gray-300); overflow-x: auto; }
.subtabs button {
  background: none; border: none; padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--gray-500);
  cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap; font-family: inherit;
  display: flex; align-items: center; gap: 7px;
}
.subtabs button.activo { color: var(--navy); border-color: var(--red); }
.subtabs button:hover { color: var(--navy); }

/* ===================== COMPROBANTE IMPRIMIBLE ===================== */
#vista-comprobante, #vista-imprimir-reporte { background: transparent; }
.ticket { max-width: 560px; margin: 0 auto; background: #fff; border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow); }
/* Variante ancha: reporte de laboratorio impreso, con tablas de más columnas que el ticket de entrega. */
.ticket.ticket-ancho { max-width: 820px; }
.ticket.ticket-ancho h3 { color: var(--navy); font-size: 14px; margin: var(--space-5) 0 var(--space-2); }
.ticket.ticket-ancho table.tabla { margin-bottom: var(--space-4); }
.ticket .encabezado-ticket { text-align: center; margin-bottom: var(--space-4); }
.ticket .encabezado-ticket h1 { font-size: 17px; margin: 0 0 2px 0; color: var(--gray-900); }
.ticket .encabezado-ticket p { margin: 0; color: var(--gray-500); font-size: 13px; }
.ticket .folio-box { text-align: center; border: 2px solid var(--navy); border-radius: var(--radius); padding: 10px; margin: var(--space-4) 0; background: var(--navy-light); }
.ticket .folio-box .lbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--navy); }
.ticket .folio-box .num { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: var(--navy); }
.ticket table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: 13px; }
.ticket table td { border: 1px solid var(--gray-300); padding: 8px 10px; }
.ticket table td.etq { background: var(--gray-100); font-weight: 700; width: 42%; color: var(--gray-700); }
.ticket .firmas { display: flex; gap: 20px; margin-top: 70px; }
.ticket .firma-item { flex: 1; min-width: 0; text-align: center; }
.ticket .firma-nombre { font-size: 12px; font-weight: 700; color: var(--gray-900); min-height: 15px; margin-bottom: 55px; }
.ticket .firma-linea { border-top: 1.5px solid var(--gray-900); }
.ticket .firma-label { padding-top: 8px; font-size: 11px; color: var(--gray-700); line-height: 1.4; }
.acciones-ticket { max-width: 560px; margin: 0 auto var(--space-4); display: flex; gap: 10px; justify-content: center; }
/* Ancho a juego con .ticket-ancho (reporte de laboratorio), para que la fila de botones no
   se vea angosta contra un ticket más ancho debajo. */
#vista-imprimir-reporte .acciones-ticket { max-width: 820px; }

@media print {
  header.topbar, nav.tabs, nav.bottom-nav, .acciones-ticket, .no-imprimir, #toast-contenedor { display: none !important; }
  body, #app, main { background: #fff !important; padding: 0; margin: 0; }
  main { max-width: none; }
  .ticket { box-shadow: none; }
}

/* ===================== MODAL ===================== */
.modal-fondo { position: fixed; inset: 0; background: rgba(14,35,56,.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: var(--space-4); animation: fade-in .15s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-caja { background: #fff; border-radius: var(--radius-lg); padding: var(--space-6); max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); }
.modal-caja h3 { margin: 0 0 var(--space-4); color: var(--navy); font-size: 16px; display: flex; align-items: center; gap: 8px; }
/* flex-wrap: los modales con varios botones (p. ej. el detalle de reporte de laboratorio,
   con Editar/Aprobar/Eliminar/Cerrar) no caben en una sola fila en pantallas angostas; sin
   wrap, los últimos botones quedaban recortados fuera de la vista (Diego, 2026-07-14). */
.modal-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: var(--space-2); }
@media (max-width: 560px) {
  .modal-acciones { flex-direction: column; }
  .modal-acciones .btn { width: 100%; }
}
/* Variante ancha: detalle de reporte de laboratorio (granulometría + gráfica + especímenes). */
.modal-caja.modal-ancha { max-width: 780px; max-height: calc(100vh - 48px); overflow-y: auto; }

.ayuda { font-size: 12.5px; color: var(--gray-500); margin: -6px 0 var(--space-4); line-height: 1.5; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
.spinner.oscuro { border-color: rgba(22,50,79,.25); border-top-color: var(--navy); }
@keyframes girar { to { transform: rotate(360deg); } }

hr.separador { border: none; border-top: 1px solid var(--gray-100); margin: var(--space-5) 0; }

@media (max-width: 760px) {
  header.topbar nav.tabs { display: none; }
  /* En móvil el encabezado NO se queda fijo arriba: la navegación principal ya la
     da la barra inferior (fija). Fijar además el encabezado de arriba choca con la
     barra de direcciones del navegador, y lo tapa al cargar. */
  header.topbar { position: static; }
  nav.bottom-nav { display: block; }
  main { padding: var(--space-4) var(--space-3) calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-4)); }
  .brand-text .t2 { display: none; }
  /* El nombre completo del usuario (p. ej. "Secretaría de Infraestructura") ya no
     cabe junto al título de la app en una pantalla angosta — se quita del chip y
     se deja solo el avatar con iniciales; el nombre/rol completo sigue visible al
     abrir el menú desplegable (dropdown .rol-badge). Antes esto causaba que el
     nombre se encimara sobre el título "Órdenes de Producción" (bug reportado por
     Diego 2026-07-10), junto con la falta de overflow/ellipsis en .brand-text .t1. */
  .usuario-chip .nombre { display: none; }
  .usuario-chip { padding: 5px; }
  .modal-caja { max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px); overflow-y: auto; }
}