/* !important a propósito: ".oculto" es una clase utilitaria que se combina
   con otras clases que también fijan "display" (ej. ".campo { display:
   flex }") -- con la misma especificidad (1 sola clase cada una), sin
   !important gana la que esté declarada más abajo en este archivo, no
   necesariamente ".oculto". Bug real detectado en "Fecha estimada de
   devolución"/"Nombre de la persona nueva" (Entrega de EPP) y los campos
   equivalentes de Administración/SKU: quedaban SIEMPRE visibles pese a
   tener la clase "oculto", porque ".campo" se define después en este
   archivo y empataba en especificidad. */
.oculto { display: none !important; }

:root {
  --fondo: #f3f4f7;
  --tarjeta: #ffffff;
  --texto: #16181d;
  --texto-suave: #6b7280;
  --texto-tenue: #9aa1ac;
  --borde: #e6e8ec;
  --acento: #0b3d91; /* azul INTUB */
  --acento-claro: #2554e0;
  --acento-fondo: #eaf0fe;
  --ok: #16a34a;
  --ok-fondo: #dcfce7;
  --alerta: #d97706;
  --alerta-fondo: #fef3c7;
  --riesgo: #dc2626;
  --riesgo-fondo: #fee2e2;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --sombra-hover: 0 6px 16px rgba(16, 24, 40, 0.1);
  --radio: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
header {
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--sombra);
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  /* nowrap a propósito -- a pedido de Antonio (16/09/2026): con "wrap", en
     celular el ícono de sesión (2do hijo) se bajaba a una 2da línea en
     vez de quedar junto a la marca. min-width:0 + ellipsis en el título
     de abajo son el respaldo por si algún título de página fuera
     larguísimo en una pantalla muy angosta -- no debería hacer falta en
     la práctica (los títulos son cortos), pero así nunca fuerza overflow. */
  flex-wrap: nowrap;
  max-width: 1100px;
  margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca img { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.marca > div { min-width: 0; }
header h1, header p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header h1 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--acento); }
header p { margin: 2px 0 0 0; color: var(--texto-suave); font-size: 0.8rem; }
@media (max-width: 480px) {
  /* El archivo del logo es bien apaisado (a 34px de alto, ya mide ~150px
     de ancho) -- en celular, junto al título y el ícono de sesión en la
     misma línea, no alcanza el espacio. Un poco más chico acá libera
     campo para que "PR03 - Mantención" (y el título de cada página) no
     se corten con "…". */
  .marca img { height: 24px; }
}

.nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 24px;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}
.nav-interior { display: flex; gap: 4px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; width: 100%; }
.nav a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
}
.nav a:hover { background: var(--fondo); color: var(--texto); }
.nav a.activo { background: var(--acento-fondo); color: var(--acento); }
.nav a.proximamente { color: var(--texto-tenue); cursor: default; }
.nav a.proximamente:hover { background: none; color: var(--texto-tenue); }
/* Celular: Dashboard/Mantenimiento/Inventario/Administración (y Mis OTs,
   para un mecánico) en 1 sola línea -- a pedido de Antonio (15/09/2026),
   para no comerse pantalla con el <nav> antes de llegar al contenido.
   flex:1 con min-width:0 reparte el ancho por igual entre los links en
   vez de que cada uno mida lo que su texto necesita (eso es lo que antes
   los hacía envolver a una 2da línea); si un label no entrara ni así,
   trunca con "…" en vez de desbordar -- nunca vuelve a envolver. */
@media (max-width: 640px) {
  .nav { padding: 6px 10px; }
  .nav-interior { gap: 2px; flex-wrap: nowrap; }
  .nav a {
    flex: 1 1 0; min-width: 0; text-align: center;
    padding: 8px 4px; font-size: 0.72rem; letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
.barra-sesion { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Ícono de persona solo (sin el nombre al lado) -- a pedido de Antonio
   (15/09/2026), junto a la marca arriba a la derecha en vez de al final
   del <nav>, para no competir con los links por espacio en celular. El
   nombre real se ve arriba del menú desplegable (ver
   renderizarBarraSesion() en auth.js), no en el botón. */
.boton-sesion {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  border: 1px solid var(--acento); background: var(--tarjeta); color: var(--acento); cursor: pointer;
}
.boton-sesion:hover { background: var(--acento-fondo); }
.menu-desplegable-nombre {
  margin: 2px 10px 6px; padding-bottom: 6px; border-bottom: 1px solid var(--borde);
  font-size: 0.82rem; font-weight: 700; color: var(--texto);
}

main { max-width: 1100px; margin: 0 auto; padding: 20px 24px 64px; }

h2.seccion {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  margin: 22px 0 8px 2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
h2.seccion:first-child { margin-top: 0; }
.seccion-nota { font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 0.72rem; color: var(--texto-tenue); }

.barra-acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.barra-acciones input[type="search"] {
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.85rem;
  min-width: 220px;
}

button, .boton {
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  transition: background 0.15s, border-color 0.15s;
}
button:hover { border-color: var(--texto-tenue); }
button.primario { background: var(--acento); border-color: var(--acento); color: white; }
button.primario:hover { background: var(--acento-claro); border-color: var(--acento-claro); }
button.secundario { background: var(--tarjeta); border-color: var(--acento); color: var(--acento); }
button.secundario:hover { background: var(--acento-fondo); }
button.peligro { color: var(--riesgo); border-color: var(--riesgo); }
button.peligro:hover { background: var(--riesgo-fondo); }
button:disabled { opacity: 0.5; cursor: default; }
button.chico { padding: 5px 10px; font-size: 0.78rem; }

.menu-desplegable {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  z-index: 20;
}
.menu-desplegable.oculto { display: none; }
.menu-desplegable a { padding: 8px 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--texto); text-decoration: none; }
.menu-desplegable a:hover { background: var(--acento-fondo); color: var(--acento); }
.menu-desplegable label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.85rem; color: var(--texto); cursor: pointer; }
.menu-desplegable label:hover { background: var(--acento-fondo); }
.menu-desplegable button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--texto); cursor: pointer; }
.menu-desplegable button:hover { background: var(--acento-fondo); color: var(--acento); }

.tabla-wrap { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.tabla th { text-align: left; font-weight: 600; color: var(--texto-suave); padding: 10px 14px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
table.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.tabla td.col-cliente { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tabla tbody tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: var(--fondo); }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla th.ordenable { cursor: pointer; user-select: none; }
table.tabla th.ordenable:hover { color: var(--texto); }
/* Celular: letra y relleno más chicos (mismo criterio que
   table.matriz.tabla-compacta del Dashboard) -- a pedido de Antonio
   (15/09/2026), para que entren más columnas antes de tener que usar el
   scroll horizontal propio de ".tabla-wrap". Aplica a las tablas de
   Mantenimiento (Seguimiento OT) e Inventario -- son las más anchas
   (el Listado Maestro de SKU llega a 13 columnas). */
@media (max-width: 640px) {
  table.tabla { font-size: 0.72rem; }
  table.tabla th, table.tabla td { padding: 6px 8px; }
  .tabla-cobertura { font-size: 0.72rem; }
  .tabla-cobertura th { padding: 4px; }
  .tabla-cobertura td { padding: 3px; }
  .celda-cobertura { padding: 6px 2px; }
  .celda-cobertura .num { font-size: 0.85rem; }
  .celda-cobertura .etiqueta { font-size: 0.58rem; }
}
table.tabla th.ordenable .flecha { display: inline-block; width: 12px; color: var(--acento); }

.etiqueta-estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.etiqueta-estado.ok, .etiqueta-estado.vigente, .etiqueta-estado.emitido, .etiqueta-estado.pagada { background: var(--ok-fondo); color: var(--ok); }
.etiqueta-estado.por-vencer, .etiqueta-estado.hes-pendiente, .etiqueta-estado.borrador { background: var(--alerta-fondo); color: var(--alerta); }
.etiqueta-estado.vencida, .etiqueta-estado.perdido, .etiqueta-estado.terminado { background: var(--riesgo-fondo); color: var(--riesgo); }
.etiqueta-estado.sin-contrato, .etiqueta-estado.proyectado { background: var(--fondo); color: var(--texto-suave); }

/* Distingue una tarea de Mantenimiento Programado en la lista de tareas
   de una OT (hoy solo mostraba el nombre del ítem, ej. "Bomba de Agua",
   indistinguible de una Falla/Adhoc a simple vista) -- a pedido de
   Antonio (10/10/2026): "que algo le diga al mecánico que es una tarea
   importante". Mismo color que .etiqueta-estado.por-vencer (ámbar de
   "atención"/vencimiento, ya usado en todo el resto de la app para
   mantenimiento) -- usada en seguimiento-ot.js y mis-ots.js. */
.etiqueta-tipo-item {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--alerta-fondo);
  color: var(--alerta);
}

.vacio, .cargando, .error {
  text-align: center;
  color: var(--texto-suave);
  padding: 40px 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-top: 10px;
}
.error { color: var(--riesgo); }

.estado-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.estado-badge.alta { background: var(--riesgo-fondo); color: var(--riesgo); }
.estado-badge.media { background: var(--alerta-fondo); color: var(--alerta); }
.estado-badge.baja { background: var(--ok-fondo); color: var(--ok); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 25, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 16px;
  z-index: 50;
  overflow-y: auto;
}
.modal-overlay.oculto { display: none; }
.modal {
  background: white;
  border-radius: 16px;
  max-width: 760px;
  width: 100%;
  padding: 22px 24px 28px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.modal.ancho { max-width: 980px; }
.modal .cerrar { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--texto-suave); }
.modal h2 { margin: 0 0 2px 0; font-size: 1.1rem; }
.modal .subtitulo { color: var(--texto-suave); font-size: 0.85rem; margin-bottom: 16px; }

/* Asistente IA (asistente-ia.js) -- botón flotante global + modal tipo
   chat. z-index por encima de todo lo demás del sitio (nav, modales de
   detalle) a propósito: tiene que poder abrirse desde cualquier pantalla. */
.boton-asistente-ia {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--acento); color: white; border: none;
  font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.boton-asistente-ia:hover { filter: brightness(1.08); }
#asistente-ia-modal { z-index: 61; }
.asistente-ia-log { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.asistente-ia-burbuja { padding: 10px 12px; border-radius: 10px; font-size: 0.88rem; line-height: 1.4; }
.asistente-ia-burbuja.usuario { background: var(--acento-fondo); align-self: flex-end; max-width: 85%; }
.asistente-ia-burbuja.asistente { background: var(--fondo); align-self: flex-start; max-width: 95%; }
.asistente-ia-burbuja p:first-child { margin-top: 0; }
.asistente-ia-burbuja p:last-child { margin-bottom: 0; }
.asistente-ia-tarjeta { background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; margin-top: 6px; }
.asistente-ia-entrada { display: flex; gap: 8px; align-items: flex-end; }
.asistente-ia-entrada textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-family: inherit; font-size: 0.88rem; resize: vertical; }

.campos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  font-size: 0.88rem;
  margin-bottom: 18px;
  background: var(--fondo);
  border-radius: 10px;
  padding: 12px 14px;
}
.campos-grid div span { color: var(--texto-suave); display: block; font-size: 0.72rem; }
.colector-bloque {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.colector-bloque h3 { margin: 0 0 6px 0; font-size: 0.92rem; }
.colector-bloque p { font-size: 0.88rem; margin: 6px 0; line-height: 1.4; }
.fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fotos img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--borde);
}

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
.form-grid.una-col { grid-template-columns: 1fr; }
.form-grid.tres-col { grid-template-columns: repeat(3, 1fr); }
/* Celular: los formularios de 2-3 columnas (Crear SKU, Registrar OC,
   Agregar mecánico, etc.) pasan a 1 sola -- con 2-3 columnas fijas, cada
   campo quedaba demasiado angosto para escribir cómodo. */
@media (max-width: 640px) {
  .form-grid, .form-grid.tres-col { grid-template-columns: 1fr; }
}
/* Mismo criterio para la grilla de detalle (llave/valor) de los modales
   de OC/OT -- ver .campos-grid más abajo. */
@media (max-width: 480px) {
  .campos-grid { grid-template-columns: 1fr; }
}
/* min-width:0 -- un ".campo" es un ítem de grid (.form-grid) además de un
   flex column -- ambos layouts le dan, por default, un "ancho mínimo
   automático" igual al min-content de su contenido; con un
   input[type=file] adentro (min-content bastante ancho, el widget nativo
   no se achica) eso empujaba TODO el grid/la página más ancha que la
   pantalla en celular en vez de dejar que el campo se encogiera. */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  background: white;
  color: var(--texto);
}
/* input[type=file]: el widget nativo (botón "Seleccionar archivo" +
   texto) no siempre respeta el stretch del flex column de ".campo" como
   los demás campos -- sin esto, en celular se salía unos px del ancho
   disponible (Cargar SKU nuevos/masivo -- Admin). */
.campo input[type="file"] { max-width: 100%; }
/* Código de SKU autogenerado (correlativo por Tipo, no se escribe a mano)
   -- mismo fondo gris que .fila-gris para que se note de un vistazo que no
   es editable, sin depender de que alguien intente hacer clic para
   descubrirlo. */
.campo input[readonly] { background: var(--fondo); color: var(--texto-suave); cursor: default; }
/* Camiones compatibles (Crear SKU nuevo, tanto el formulario completo de
   inventario-skus.html como el modal chico de inventario-recepcion-sin-oc.html)
   -- checkboxes de patentes en grilla, para que quepan varias por línea sin
   desordenar el resto del formulario. */
.lista-patentes-compatibles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; margin-top: 8px; }
.lista-patentes-compatibles label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 400; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento-claro);
  box-shadow: 0 0 0 3px var(--acento-fondo);
}
.campo textarea { resize: vertical; min-height: 70px; }
.campo .switch-linea { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; padding: 8px 0; }
.campo .switch-linea input[type="checkbox"] { width: 16px; height: 16px; }

fieldset.bloque {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 0;
}
fieldset.bloque legend { font-size: 0.78rem; font-weight: 700; color: var(--acento); padding: 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }

.acciones-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.items-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.items-tabla th { text-align: left; font-size: 0.72rem; color: var(--texto-suave); padding: 4px 6px; }
.items-tabla td { padding: 4px 6px; }
.items-tabla input, .items-tabla select { width: 100%; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px; font-size: 0.85rem; }
.items-tabla .col-desc { min-width: 220px; }
.items-tabla .col-num { width: 90px; }
.items-tabla .col-total { width: 120px; text-align: right; white-space: nowrap; }

/* Checklist de inspección (mis-ots.js) -- una fila por ítem del catálogo,
   con su propia acción correctiva (solo si "Fuera de Normal") y foto. */
.checklist-fila { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.checklist-fila:last-child { border-bottom: none; }
.checklist-fila .chk-titulo { font-weight: 600; font-size: 0.88rem; }
.checklist-fila .chk-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.checklist-fila select, .checklist-fila input[type="file"], .checklist-fila input[type="number"], .checklist-fila textarea {
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 0.85rem; font-family: inherit; background: white; color: var(--texto);
}
.checklist-fila input[type="number"] { width: 110px; }
.checklist-fila textarea { width: 100%; min-height: 60px; resize: vertical; }
.checklist-fila .chk-na-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.items-tabla tfoot td { font-weight: 700; padding-top: 8px; border-top: 1px solid var(--borde); }

.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
}
.chip-check input { margin: 0; }
.chips-grupo { display: flex; flex-wrap: wrap; gap: 6px; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.indicador { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; text-align: center; box-shadow: var(--sombra); }
.indicador .valor { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.indicador .etiqueta { font-size: 0.72rem; color: var(--texto-suave); margin-top: 2px; }

.indicador.vencido { background: var(--riesgo-fondo); border-color: var(--riesgo); }
.indicador.vencido .valor { color: var(--riesgo); }
.indicador.por-vencer { background: var(--alerta-fondo); border-color: var(--alerta); }
.indicador.por-vencer .valor { color: var(--alerta); }
.indicador.al-dia { background: var(--ok-fondo); border-color: var(--ok); }
.indicador.al-dia .valor { color: var(--ok); }
.indicador.proyeccion { background: #f0f1f3; border-color: var(--texto-tenue); }
.indicador.proyeccion .valor { color: var(--texto-suave); }

.total-filtrado { text-align: right; font-size: 0.78rem; color: var(--texto-suave); margin: -4px 0 10px; }

.meta { font-size: 0.78rem; color: var(--texto-suave); }
.link { color: var(--acento); cursor: pointer; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* Layout de "sección con menú lateral": separa lo que necesita atención
   (página principal) de las acciones que no levantan ninguna advertencia
   (páginas aparte), a pedido de Antonio. Usado por Inventario
   (inventario.html / -entrega / -stock / -skus) y Orden de Trabajo
   (seguimiento-ot.html / crear-ot.html). */
.layout-con-menu { display: flex; align-items: flex-start; gap: 24px; }
.menu-lateral { flex: 0 0 230px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.menu-lateral a { padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.menu-lateral a:hover { background: var(--fondo); color: var(--texto); }
.menu-lateral a.activo { background: var(--acento-fondo); color: var(--acento); }
.menu-lateral a.submenu { margin-left: 16px; font-weight: 500; font-size: 0.8rem; padding-top: 6px; padding-bottom: 6px; }
.contenido-con-menu { flex: 1; min-width: 0; }

/* Botón "<página actual> ▾" que colapsa el menú lateral en celular --
   lo inyecta inicializarMenuLateralResponsive() (comun.js) delante del
   <aside class="menu-lateral">, no hace falta agregarlo a mano en cada
   página. Oculto en escritorio -- ahí el menú lateral se ve siempre
   entero, como columna fija a la izquierda (sin cambios). */
.menu-lateral-toggle {
  display: none; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 14px; margin-bottom: 8px; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: var(--texto); cursor: pointer;
}
.menu-lateral-toggle .flecha { color: var(--texto-suave); transition: transform 0.15s; }
.menu-lateral-toggle.abierto .flecha { transform: rotate(180deg); }

@media (max-width: 720px) {
  /* align-items:flex-start (arriba) es a propósito en escritorio -- ahí
     es fila, y evita que el menú lateral se estire a la altura del
     contenido. Pero en columna (celular) ese mismo "flex-start" hace que
     .contenido-con-menu ya NO se estire al ancho del contenedor -- se
     encoge o crece según su propio contenido, y con una tabla ancha
     (ej. Listado Maestro de SKU, 13 columnas con "white-space:nowrap")
     terminaba estirando TODA la página en vez de quedarse contenida en
     su propio ".tabla-wrap" (scroll horizontal). "stretch" en celular
     arregla eso -- vuelve a ocupar el 100% del ancho, como corresponde. */
  .layout-con-menu { flex-direction: column; align-items: stretch; }
  .menu-lateral-toggle { display: flex; }
  /* Antes quedaba siempre desplegado como fila de "pills" que envolvían
     línea tras línea -- con Inventario (~8 links) ocupaba media pantalla
     arriba del contenido. Ahora colapsado por default (el botón de
     arriba lo abre/cierra) y en columna, no en fila, cuando se abre. */
  .menu-lateral {
    display: none; flex-direction: column; position: static; width: 100%;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
    padding: 6px; margin-bottom: 12px; box-shadow: var(--sombra);
  }
  .menu-lateral.abierto { display: flex; }
}

/* Calendario de cobertura (turno x día) -- Seguimiento OT. Mismos 3
   colores semánticos que .indicador.vencido/.por-vencer/.al-dia, pero
   como celdas de tabla en vez de tarjetas. */
.tabla-cobertura { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tabla-cobertura th { text-align: center; font-weight: 600; color: var(--texto-suave); padding: 8px; }
.tabla-cobertura th:first-child { text-align: left; }
.tabla-cobertura td { padding: 6px; text-align: center; }
.tabla-cobertura td:first-child { text-align: left; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.celda-cobertura { display: block; border-radius: 8px; padding: 10px 4px; font-weight: 700; cursor: pointer; }
.celda-cobertura .num { font-size: 1rem; }
.celda-cobertura .etiqueta { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.celda-cobertura.rojo { background: var(--riesgo-fondo); color: var(--riesgo); }
.celda-cobertura.amarillo { background: var(--alerta-fondo); color: var(--alerta); }
.celda-cobertura.verde { background: var(--ok-fondo); color: var(--ok); }
.celda-cobertura:hover { filter: brightness(0.96); }

/* Carrito de la OT (Crear OT): resumen fijo a la derecha de lo que se va
   agregando en Inspecciones/Fallas/Mantenimiento -- sin esto, al cambiar
   de camión en Fallas/Mantenimiento la selección anterior desaparece de
   la vista aunque siga guardada, y parece que "se pierde". */
.layout-con-carrito { display: flex; align-items: flex-start; gap: 24px; }
.carrito-principal { flex: 1; min-width: 0; }
.carrito-lateral {
  flex: 0 0 280px;
  position: sticky;
  top: 76px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  box-shadow: var(--sombra);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.carrito-lateral h3 { margin: 0 0 4px; font-size: 0.85rem; }
@media (max-width: 900px) {
  /* align-items:stretch -- mismo motivo que .layout-con-menu más abajo:
     con align-items:flex-start (el de escritorio) y flex-direction:column,
     .carrito-principal se encoge/crece según su propio contenido en vez
     de ocupar el 100% del ancho -- con una tabla ancha adentro (Fallas/
     Inspecciones), estiraba toda la página. */
  .layout-con-carrito { flex-direction: column; align-items: stretch; }
  .carrito-lateral { position: static; width: 100%; max-height: none; }
}