/* =================================================================
   styles.css – Control de Acceso Vehicular PWA
   =================================================================
   SECCIONES:
   1. Design Tokens (declarados desde DESIGN.md) en :root
   2. CSS exacto extraído de login-stitch.html (Stitch) – No alterar
   3. Utilidades de la aplicación (page visibility, etc.)
   ================================================================= */

/* ===================================================================
   1. DESIGN TOKENS (from DESIGN.md)
   =================================================================== */
:root {
  /* ─── Colors: Surface ─── */
  --color-surface: #f7f9fb;
  --color-surface-dim: #d8dadc;
  --color-surface-bright: #f7f9fb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-on-surface: #191c1e;
  --color-on-surface-variant: #3d4a3c;
  --color-inverse-surface: #2d3133;
  --color-inverse-on-surface: #eff1f3;
  --color-outline: #6d7b6b;
  --color-outline-variant: #bccbb8;
  --color-surface-tint: #006e2b;
  --color-surface-variant: #e0e3e5;

  /* ─── Colors: Primary (Green) ─── */
  --color-primary: #006e2b;
  --color-on-primary: #ffffff;
  --color-primary-container: #2ccb5d;
  --color-on-primary-container: #004f1d;
  --color-inverse-primary: #4ae170;
  --color-primary-fixed: #6aff89;
  --color-primary-fixed-dim: #4ae170;
  --color-on-primary-fixed: #002108;
  --color-on-primary-fixed-variant: #00531f;

  /* ─── Colors: Secondary (Red) ─── */
  --color-secondary: #b61621;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #da3437;
  --color-on-secondary-container: #fffbff;
  --color-secondary-fixed: #ffdad7;
  --color-secondary-fixed-dim: #ffb3ad;
  --color-on-secondary-fixed: #410004;
  --color-on-secondary-fixed-variant: #930013;

  /* ─── Colors: Tertiary ─── */
  --color-tertiary: #4f6073;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #a2b3c9;
  --color-on-tertiary-container: #354558;
  --color-tertiary-fixed: #d2e4fb;
  --color-tertiary-fixed-dim: #b7c8de;
  --color-on-tertiary-fixed: #0b1d2d;
  --color-on-tertiary-fixed-variant: #38485a;

  /* ─── Colors: Error ─── */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* ─── Colors: Background ─── */
  --color-background: #f7f9fb;
  --color-on-background: #191c1e;

  /* ─── Typography ─── */
  --font-family: "Hanken Grotesk", "Inter", sans-serif;

  --font-display-lg-size: 48px;
  --font-display-lg-weight: 800;
  --font-display-lg-line-height: 56px;
  --font-display-lg-letter-spacing: -0.02em;

  --font-headline-lg-size: 32px;
  --font-headline-lg-weight: 700;
  --font-headline-lg-line-height: 40px;

  --font-headline-md-size: 24px;
  --font-headline-md-weight: 700;
  --font-headline-md-line-height: 32px;

  --font-body-lg-size: 18px;
  --font-body-lg-weight: 500;
  --font-body-lg-line-height: 28px;

  --font-body-md-size: 16px;
  --font-body-md-weight: 400;
  --font-body-md-line-height: 24px;

  --font-label-bold-size: 14px;
  --font-label-bold-weight: 700;
  --font-label-bold-line-height: 20px;

  --font-label-sm-size: 13px;
  --font-label-sm-weight: 500;
  --font-label-sm-line-height: 18px;

  /* ─── Border Radius ─── */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ─── Spacing ─── */
  --spacing-container-padding: 2rem;
  --spacing-stack-gap: 1.5rem;
  --spacing-element-padding-y: 3rem;
  --spacing-element-padding-x: 2rem;
  --spacing-gutter: 1rem;
}

/* ===================================================================
   2. CSS EXACTO DE STITCH (extraído de login-stitch.html)
   Reglas verbatim del <style> del export de Stitch.
   ¡No alterar ninguna de estas reglas!
   =================================================================== */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}
body {
  font-family: "Hanken Grotesk", "Inter", sans-serif;
  background-color: #f8f9fb;
}
.login-card {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* ===================================================================
   3. UTILIDADES DE LA APLICACIÓN
   Reglas adicionales para el funcionamiento de la SPA (no provienen
   de Stitch y no alteran las reglas de Stitch arriba).
   =================================================================== */

/* Sistema de visibilidad de páginas (SPA-like) */
.page {
  display: none;
  width: 100%;
  height: auto !important;
  /* v31/v32: la página ocupa SIEMPRE el área visible del scroller único
     (#appMain) sin forzar desbordes: `100%` del content-box de <main>
     (el padding —incluido el inferior de 10rem sobre el footer— NO forma
     parte del content-box, así que esta regla NO lo anula).
     Antes era `calc(100vh - 80px)`, que sumado al padding de <main>
     producía ~128px de desborde permanente (barra de scroll espuria). */
  min-height: 100% !important;
  overflow: visible !important;
}
.page.active {
  display: flex;
  flex-direction: column;
}

/* ===================================================================
   4. LAYOUT FLEX ESTRICTO + SCROLL ÚNICO (v31 → v34)
   -------------------------------------------------------------------
   El documento (html/body) NUNCA desplaza: se ancla a la altura del
   viewport (`100dvh`, con respaldo `100%`) y con `overflow: hidden`.
   `body` es un contenedor **flex en columna** cuyos tres hijos viven en
   el flujo (sin flotantes):
     · `#appHeader` → `flex: 0 0 auto` (alto propio: 56px).
     · `#appMain`   → `flex: 1 1 auto` + `min-height: 0` ⇒ ocupa
       EXACTAMENTE el espacio central restante y es el ÚNICO scroller.
     · `#appFooter` → `flex: 0 0 auto` + `position: static` (v34) ⇒
       ocupa su propio espacio al final (48px).
   ⚠️ v34 elimina el `position: fixed` del footer: el scroll de
   `#appMain` termina justo ENCIMA del footer, así que ninguna tarjeta
   puede quedar tapada (antes el footer flotaba sobre el último
   contenido y había que reservar 10rem de padding para compensarlo).
   =================================================================== */
html,
body {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* Altura real del viewport en móvil/tablet (evita el salto de la barra
   de direcciones del navegador). Con respaldo de `100%` si no hay soporte. */
@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh !important;
  }
}
body {
  display: flex;
  flex-direction: column;
}

/* Cabecera superior: item flex de alto propio (no flota). */
#appHeader {
  flex: 0 0 auto;
}

/* ÚNICO contenedor con desplazamiento vertical de la aplicación */
#appMain {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: 100% !important; /* blindaje: nunca excede la altura del viewport */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch; /* inercia por hardware en tablets/iPad */
  overscroll-behavior: contain; /* el scroll no se propaga al documento */
  touch-action: pan-y; /* prioriza el arrastre vertical en el scroller */
  scrollbar-gutter: stable; /* sin salto al aparecer/desaparecer la barra */
}

/* ===================================================================
   4.1 OPTIMIZACIÓN TÁCTIL PARA TABLETS (v31)
   -------------------------------------------------------------------
   `touch-action: manipulation` en botones, tarjetas e inputs permite que
   el arrastre con el dedo siga desplazando #appMain aunque el gesto
   comience sobre un elemento interactivo (evita el bloqueo del pan y el
   retardo por doble-tap). La selección accidental de texto al arrastrar
   se desactiva globalmente, pero los campos de escritura la conservan.
   =================================================================== */
html,
body,
button,
.card,
input,
select,
textarea,
[role="button"],
[type="button"],
[type="submit"] {
  touch-action: manipulation;
}
/* Tarjetas de la app (galería, salidas y accesos de Home) */
.vehicle-card,
.salida-card,
.action-card {
  touch-action: manipulation;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ===================================================================
   FOOTER EN EL FLUJO FLEX — SIN SUPERPOSICIÓN (v32 → v34)
   -------------------------------------------------------------------
   v34: `#appFooter` deja de ser `fixed bottom-0` y pasa a ser un item
   flex estático ⇒ ocupa su propio espacio al final del `body` y el
   scroll de `#appMain` termina JUSTO ENCIMA de él: es físicamente
   imposible que una tarjeta quede tapada. El padding inferior de 10rem
   que se reservaba en v32 (para compensar el footer flotante) ya no es
   necesario y baja a **1.5rem** como simple aire de cierre.
   =================================================================== */
#appFooter {
  flex: 0 0 auto; /* alto propio en el flujo: 48px */
  position: static !important; /* anula el `fixed bottom-0 z-50` del markup */
  /* El footer cubre el safe-area inferior (home indicator): su fondo oscuro
     llega hasta el borde físico de la pantalla sin mover su contenido. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Aire de cierre del scroller (ya no hay footer flotante que compensar). */
main,
#appMain {
  padding-bottom: 1.5rem !important;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  margin-bottom: 0 !important;
}

/* La tarjeta de Bitácora de Entradas y Salidas es la ÚLTIMA de Home:
   margen inferior explícito además del aire del scroller. */
#pageHome .action-card.gap-8 {
  margin-bottom: 1rem;
}

/* Quitar bloqueos de scroll en las secciones */
#pageHome {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

/* ─── LOGIN: centrado vertical limpio dentro del scroller único ───────
   El padding simétrico (56px > 48px del footer) mantiene la tarjeta
   centrada y libre del footer global, y anula el padding asimétrico de
   #appMain (1rem arriba / 1.5rem abajo) que descuadraba el centrado.
   `:has()` degrada sin romper nada si el navegador no lo soporta.
   ⚠️ Única vista autorizada a neutralizar el padding inferior de
   #appMain: el login es una tarjeta centrada, no una lista desplazable. */
#pageLogin.page.active {
  align-items: center;
  align-items: safe center; /* en pantallas muy angostas alinea al inicio y permite scroll */
  justify-content: center;
  justify-content: safe center; /* reserva: si la tarjeta no cabe, no se recorta el borde superior */
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
#appMain:has(#pageLogin.page.active) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===================================================================
   5. RESPONSIVIDAD DE LA PÁGINA HOME
   Ajustes para pantallas pequeñas (< 768px)
   =================================================================== */

/* Banner "Inicio": padding y tipografía reducidos en móvil */
@media (max-width: 767px) {
  #pageHome .relative.bg-surface-container-lowest {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
  }
  #pageHome .relative.bg-surface-container-lowest .w-16.h-16 {
    width: 3rem;
    height: 3rem;
  }
  #pageHome .relative.bg-surface-container-lowest .material-symbols-outlined {
    font-size: 28px !important;
  }
  #pageHome .relative.bg-surface-container-lowest h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #pageHome .relative.bg-surface-container-lowest p {
    font-size: 14px;
    line-height: 20px;
  }
  #pageHome .relative.bg-surface-container-lowest .gap-6 {
    gap: 0.875rem;
  }
}

/* Tarjetas ENTRADA/SALIDA: padding reducido en móvil */
@media (max-width: 767px) {
  #pageHome .action-card.p-12 {
    padding: 2rem 1.25rem;
  }
  #pageHome .action-card .w-24.h-24 {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
  }
  #pageHome .action-card .material-symbols-outlined.text-\[64px\] {
    font-size: 44px !important;
  }
  #pageHome .action-card h2 {
    font-size: 32px;
    line-height: 40px;
  }
  #pageHome .action-card .material-symbols-outlined.text-\[120px\] {
    font-size: 80px !important;
  }
  #pageHome .action-card p {
    font-size: 15px;
    line-height: 22px;
  }
}

/* Tarjeta Bitácora: layout compacto en móvil */
@media (max-width: 767px) {
  #pageHome .action-card.gap-8 {
    gap: 1rem;
    padding: 1.25rem;
  }
  #pageHome .action-card .gap-6 {
    gap: 1rem;
  }
  #pageHome .action-card .w-16.h-16 {
    width: 3rem;
    height: 3rem;
  }
  #pageHome .action-card .material-symbols-outlined.text-\[40px\] {
    font-size: 28px !important;
  }
  #pageHome .action-card h2 {
    font-size: 20px;
    line-height: 26px;
  }
  #pageHome .action-card .material-symbols-outlined.text-\[48px\] {
    font-size: 32px !important;
  }
}

/* Grid: gap reducido en móvil */
@media (max-width: 767px) {
  #pageHome .grid {
    gap: 1.25rem;
  }
}

/* ===================================================================
   4. ESTILOS DE LA PÁGINA HOME (extraídos de inicio-2.html)
   =================================================================== */
.action-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.action-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.action-card:active {
  transform: scale(0.98);
}

/* ===================================================================
   5. MODAL DE INSPECCIÓN Y CONFIRMACIÓN DE SALIDA (@page-registro-salida)
   =================================================================== */

/* Cuerpo del modal: única zona con scroll. Reserva el canal del scrollbar
   (`scrollbar-gutter`) para que el contenido NO se desplace cuando la barra
   aparece/desaparece (p. ej. al expandir el detalle de carga) y evita que el
   scroll se propague a la página de fondo.

   Anti-salto (corrección crítica del modal de salida):
   - `overflow-y: auto` + `max-height: 100%` + `min-height: 0` ⇒ el cuerpo es el
     ÚNICO contenedor desplazable; el header y el footer (`flex-shrink-0`) nunca
     colapsan ni se mueven.
   - `overflow-anchor: none` ⇒ se desactiva el "scroll anchoring" del navegador:
     al expandir/contraer el detalle de carga o alternar los checklists, el
     navegador NO reajusta la posición del scroll por su cuenta.
   - `-webkit-overflow-scrolling: touch` ⇒ scroll inercial fluido en tablets. */
.salida-modal-body {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  max-height: 100%;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Los radios/checkboxes de los checklists del modal son `sr-only`, es decir
   `position: absolute` con una caja de 1×1 px ubicada en la esquina del label,
   que NO coincide con la tarjeta visible. Al recibir el foco, el navegador
   "desplaza a la vista" (scroll into view) esa cajita y, con eso, el cuerpo del
   modal saltaba violentamente hacia arriba (el guardia pulsaba una tarjeta y el
   contenido se movía solo).

   Corrección: el control oculto pasa a cubrir EXACTAMENTE la tarjeta visible
   (misma caja: `inset: 0` + 100 % de ancho/alto). Así el navegador no tiene
   nada que desplazar cuando el guardia toca la tarjeta, y el foco queda dentro
   del área visible. Se mantiene invisible (`opacity: 0`) y sin capturar el
   puntero (`pointer-events: none`): el clic llega a la tarjeta y el `<label>`
   activa el control con su comportamiento nativo (ratón, táctil y teclado).
   `scroll-margin: 0` elimina cualquier desplazamiento residual. La restauración
   del `scrollTop` (app.js: `conScrollSalidaEstable()`) es el segundo cinturón
   de seguridad. */
.salida-modal-body label {
  position: relative;
}

.salida-modal-body input.peer.sr-only {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: auto;
  clip-path: none;
  pointer-events: none;
  scroll-margin: 0;
  scroll-margin-block: 0;
  scroll-margin-inline: 0;
}

/* Scrollbar discreta (Chrome/Edge/Safari: tablets Android e iPad) */
.salida-modal-body::-webkit-scrollbar {
  width: 8px;
}
.salida-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.salida-modal-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 9999px;
}

/* Tarjeta del checklist de verificación del modal de salida.
   Geometría 100 % estable (origen del "salto" de 1-2px ya eliminado):
   - `border: 2px solid transparent` FIJO ⇒ marcar/desmarcar nunca cambia el
     ancho del borde (antes: 0px → 2px, que reflowaba la tarjeta y el body).
   - `transition` limitada a COLOR ⇒ no se animan propiedades de layout.
   - `outline`/`box-shadow` en `none` ⇒ sin sombras dinámicas (los `box-shadow`
     SÍ cuentan para el área desplazable del contenedor con `overflow`, por eso
     `ring-*`/`shadow-*` provocaban la barra y el desplazamiento).
   - `!important` ⇒ ninguna utilidad de Tailwind puede reintroducir el salto. */
.salida-check-card {
  box-sizing: border-box !important;
  border: 2px solid transparent !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Estado MARCADO: solo cambian el color del borde y el fondo (mismas
   dimensiones). Se admite `--md-sys-color-error` (Material 3) y el token propio
   de `:root` (`--color-error`); si no existen, cae a `#ba1a1a`. */
.salida-check-card.activa {
  border-color: var(--md-sys-color-error, var(--color-error, #ba1a1a)) !important;
  background-color: rgba(186, 26, 26, 0.05) !important;
}

/* Tarjeta de la inspección de carga: mismo `box-sizing` explícito (su borde de
   2px también es constante; el color lo administra app.js). */
.salida-cargo-card {
  box-sizing: border-box;
  background-clip: padding-box;
}

/* ─── Empresa Paso 2: checklist de Verificación de Seguridad ────────────────
   (`#page-registro-empresa2`, ids `security_check` / `driver_identity_check`)
   Mismo tratamiento que `.salida-check-card`, pero con el VERDE de EMPRESA:
   `secondary` = `#006c4a` de la paleta Tailwind de `index.html` (⚠️ NO es el
   `--color-secondary` de `:root`, que es el rojo de SALIDA).
   - `border: 2px solid transparent` FIJO ⇒ el estado no altera dimensiones.
   - `transition` solo de color; `outline`/`box-shadow` en `none` ⇒ sin sombras
     dinámicas (los `box-shadow` cuentan para el área desplazable del contenedor
     con `overflow`: era el origen del salto y de las barras internas). */
.empresa-check-card {
  box-sizing: border-box !important;
  border: 2px solid transparent !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Estado MARCADO (lo alterna `toggleSecurityCheckboxVisual`): solo color.
   Mismo valor que `bg-secondary/10` para que el respaldo `peer-checked:` de la
   tarjeta y esta clase se vean idénticos. */
.empresa-check-card.activa {
  border-color: #006c4a !important;
  background-color: rgba(0, 108, 74, 0.1) !important;
}

/* ===================================================================
   Selectores de HORA (compatibilidad + Custom Inline v22)
   ===================================================================
   Alcance: los 3 campos de hora de la PWA —`#entry_time` (Empresa Paso 2),
   `#rv_entry_time` (Particular Paso 2) y `#salida_exit_time` (modal de
   salida)—. Desde v22 son inputs hidden `HH:MM` sincronizados con su
   `.custom-time-picker` inline (flechas táctiles + AM/PM, sin librería
   externa ni popup flotante). El bloque NATIVO anterior se conserva solo
   como compatibilidad (sin efecto sobre `type="hidden"`).

   Reglas de comodidad táctil (tablets Android / iPad / escritorio):
   - Área táctil amplia: `min-height: 56px` (> 48px) con padding vertical.
   - Tipografía legible de 1.1rem con `font-weight: 600` y dígitos tabulares.
   - El ícono de reloj nativo se agranda (2rem) y se separa del borde para que
     el toque sea seguro; los campos HORA / MINUTO / AM-PM internos del control
     de Chromium reciben su propia área de toque y realce al enfocarse.
   - `pointer-events: auto` garantiza que el toque aterrice en el input (el
     formulario tiene capas decorativas con `pointer-events-*` y el ícono
     `schedule` de la izquierda es `pointer-events-none`).
   =================================================================== */

#entry_time,
#rv_entry_time,
#salida_exit_time,
.entry-time-input {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Caja del campo: área táctil amplia, fuente legible y dígitos alineados.
   Las propiedades tipográficas y táctiles van con `!important` a propósito:
   así el control nativo se ve igual en Android, iPad y escritorio aunque las
   utilidades de Tailwind (CDN) se inyecten después de esta hoja. */
input.entry-time-input[type="time"],
#entry_time,
#rv_entry_time,
#salida_exit_time {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 56px !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.4;
  touch-action: manipulation;
}

/* Ícono de reloj nativo (Chromium: Android y escritorio): más grande y con
   margen para que el dedo no toque el borde del campo. En iOS/Safari el control
   lo dibuja el propio sistema y estas reglas simplemente no aplican. */
input.entry-time-input[type="time"]::-webkit-calendar-picker-indicator,
#entry_time::-webkit-calendar-picker-indicator,
#rv_entry_time::-webkit-calendar-picker-indicator,
#salida_exit_time::-webkit-calendar-picker-indicator {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  margin-left: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0.9;
}

input.entry-time-input[type="time"]::-webkit-calendar-picker-indicator:hover,
#entry_time::-webkit-calendar-picker-indicator:hover,
#rv_entry_time::-webkit-calendar-picker-indicator:hover,
#salida_exit_time::-webkit-calendar-picker-indicator:hover {
  background-color: #f3f4f6;
  opacity: 1;
}

/* Campos internos HORA / MINUTO / AM-PM del control nativo (Chromium):
   centrados verticalmente y con su propia área de toque. */
input.entry-time-input[type="time"]::-webkit-datetime-edit,
input.entry-time-input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0;
}

input.entry-time-input[type="time"]::-webkit-datetime-edit-hour-field,
input.entry-time-input[type="time"]::-webkit-datetime-edit-minute-field,
input.entry-time-input[type="time"]::-webkit-datetime-edit-ampm-field {
  padding: 0.25rem 0.35rem;
  border-radius: 0.375rem;
}

input.entry-time-input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input.entry-time-input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input.entry-time-input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
  background-color: rgba(0, 108, 74, 0.12);
  color: #006c4a;
}

/* Foco: se conserva el anillo que cada campo define en el markup (verde de
   ENTRADA en Empresa/Particular y rojo de SALIDA en el modal); aquí solo se
   retira el contorno por defecto del navegador para no duplicar el borde. */
input.entry-time-input[type="time"]:focus,
#entry_time:focus,
#rv_entry_time:focus,
#salida_exit_time:focus {
  outline: none;
}
/* ===================================================================
   Custom Inline Time Picker (v22)
   ===================================================================
   Alcance: los 3 selectores de hora de la PWA:
   - Empresa Paso 2: #custom_time_picker_entry (#entry_time)
   - Particular Paso 2: #custom_time_picker_rv (#rv_entry_time)
   - Modal de Confirmación de Salida: #custom_time_picker_salida (#salida_exit_time)

   Ergonomía táctil para tablets y quioscos:
   - Botones de flecha con objetivo táctil de 44px o superior.
   - Dígitos numéricos tabulares grandes (font-bold text-2xl/3xl).
   - Selector tipo pill switch para AM / PM con acento visual.
   - Prevención de selección de texto y layout shift.
   =================================================================== */

.custom-time-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.time-picker-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--md-sys-color-surface-container-low, #f2f4f6);
  border: 1px solid var(--md-sys-color-outline-variant, #bccbb8);
  border-radius: 0.75rem;
  padding: 0.25rem;
  min-width: 4rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.time-picker-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant, #3d4a3c);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  touch-action: manipulation;
}

.time-picker-arrow-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.time-picker-arrow-btn:active {
  background-color: rgba(0, 0, 0, 0.12);
  transform: scale(0.94);
}

.time-picker-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 100%;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface, #191c1e);
  letter-spacing: 0.05em;
  text-align: center;
}

.time-picker-separator {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--md-sys-color-outline, #6d7b6b);
  padding: 0 0.125rem;
  line-height: 1;
}

.time-picker-ampm-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-left: 0.25rem;
}

.time-picker-ampm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 0.625rem;
  border: 1px solid var(--md-sys-color-outline-variant, #bccbb8);
  background-color: var(--md-sys-color-surface-container-low, #f2f4f6);
  color: var(--md-sys-color-on-surface-variant, #3d4a3c);
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.time-picker-ampm-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.time-picker-ampm-btn.active {
  background-color: var(--md-sys-color-primary, #006e2b);
  color: #ffffff;
  border-color: var(--md-sys-color-primary, #006e2b);
  box-shadow: 0 2px 4px rgba(0, 110, 43, 0.25);
}

/* Variante modal salida (rojo de confirmación de salida) */
#modalConfirmacionSalida .time-picker-ampm-btn.active {
  background-color: var(--md-sys-color-error, #ba1a1a);
  color: #ffffff;
  border-color: var(--md-sys-color-error, #ba1a1a);
  box-shadow: 0 2px 4px rgba(186, 26, 26, 0.25);
}

#modalConfirmacionSalida .time-picker-unit {
  background-color: #ffffff;
  border-color: rgba(186, 26, 26, 0.2);
}

#modalConfirmacionSalida .time-picker-unit:focus-within {
  border-color: var(--md-sys-color-error, #ba1a1a);
  box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.15);
}

/* Variante Empresa Paso 2 / Particular */
#entry_time_container .time-picker-unit,
#page-registro-vehiculo-paso2 .time-picker-unit {
  background-color: #ffffff;
}

#entry_time_container .time-picker-unit:focus-within,
#page-registro-vehiculo-paso2 .time-picker-unit:focus-within {
  border-color: var(--md-sys-color-primary, #006e2b);
  box-shadow: 0 0 0 2px rgba(0, 110, 43, 0.15);
}


/* ===================================================================
   7. COMPACTACIÓN GLOBAL DE TARJETAS Y COMPONENTES (v33)
   -------------------------------------------------------------------
   Objetivo: reducir ~20-25 % la altura vertical de las tarjetas
   principales (acciones de Home, Tipo de Vehículo, galería de Empresa,
   tarjetas de Salida y contenedores de menú/bitácora) para que el
   contenido inferior (tarjeta de Bitácora de Entradas y Salidas,
   botones «Registrar Salida»…) quepa en la VISTA INICIAL de la tablet
   sin scroll forzado.
   Aplica a TODAS las vistas: Home, Registro de Entrada (Empresa y
   Particular), Registro de Salida, Selección Tipo de Vehículo y
   Bitácora. Los `!important` son necesarios porque Tailwind (CDN)
   inyecta sus utilidades DESPUÉS de esta hoja de estilos.
   =================================================================== */

/* ── 7.1 action-card: accesos principales (Home + Tipo de Vehículo) ─── */
.action-card.p-12,
.action-card.p-8 {
  padding: 1.25rem !important; /* p-12 / p-8 → p-5 */
}
/* Caja del ícono principal: 96px → 64px con separación menor */
.action-card .w-24.h-24 {
  width: 4rem !important;
  height: 4rem !important;
  margin-bottom: 1rem !important;
}
.action-card .material-symbols-outlined.text-\[64px\] {
  font-size: 44px !important;
}
.action-card .material-symbols-outlined.text-\[120px\] {
  font-size: 88px !important;
}
/* Título, separador y texto de las tarjetas de acción */
.action-card h2 {
  font-size: 2rem !important;
  line-height: 2.35rem !important;
  margin-bottom: 0.5rem !important;
}
.action-card .h-px {
  margin-bottom: 0.75rem !important;
}
.action-card p {
  font-size: 0.95rem !important;
  line-height: 1.35rem !important;
}

/* ── 7.2 Home: separación entre bloques y tarjeta de Bitácora ──────── */
#pageHome .grid {
  gap: 1rem !important; /* gap-8 → gap-4 */
}
#pageHome .action-card.gap-8 {
  padding: 1rem 1.25rem !important;
  gap: 1rem !important;
  margin-top: 1rem !important; /* mt-8 → mt-4 */
  margin-bottom: 1rem !important;
}
#pageHome .action-card.gap-8 .w-16.h-16 {
  width: 3rem !important;
  height: 3rem !important;
}
#pageHome .action-card.gap-8 .gap-6 {
  gap: 1rem !important;
}
#pageHome .action-card.gap-8 .material-symbols-outlined.text-\[40px\] {
  font-size: 30px !important;
}
#pageHome .action-card.gap-8 .material-symbols-outlined.text-\[48px\] {
  font-size: 34px !important;
}
#pageHome .action-card.gap-8 h2 {
  font-size: 1.35rem !important;
  line-height: 1.75rem !important;
}

/* ── 7.3 Contenedores de menú / cabeceras de vista ──────────────────
   (Tipo de Vehículo, Galería de Empresa, Bitácora y Registro de
   Salida): la primera tarjeta de cada vista pierde aire vertical. */
#page-tipo-vehiculo > div > div:first-child,
#page-registro-empresa > div > div:first-child,
#page-bitacora > div > div:first-child,
#page-registro-salida > div > div:first-child {
  padding: 1.25rem !important; /* p-8 → p-5 */
  margin-bottom: 1.5rem !important; /* mb-12 / mb-10 / mb-8 → mb-6 */
}
#page-tipo-vehiculo .grid,
#page-bitacora .grid {
  gap: 1rem !important;
}
#page-tipo-vehiculo .grid.mb-12 {
  margin-bottom: 1.5rem !important;
}


/* ── 7.4 vehicle-card: galería de Empresa (#containerEmpresaGrid) ─────
   Cabecera 16/10 → 16/9 con tope de 10rem (max-h-40) y cuerpo p-3;
   título/placa secundarios más contenidos. */
.vehicle-card > div:first-child {
  aspect-ratio: 16 / 9 !important;
  max-height: 10rem;
}
.vehicle-card .vehicle-card-info {
  padding: 0.75rem !important; /* p-6 → p-3 */
}
.vehicle-card .vehicle-card-info h3 {
  font-size: 1.1rem !important;
  line-height: 1.45rem !important;
  margin-bottom: 0.5rem !important;
}
.vehicle-card .vehicle-card-info .plate-font {
  padding: 0.375rem 0.75rem !important;
  font-size: 1.15rem !important;
  line-height: 1.5rem !important;
}
.vehicle-card .vehicle-card-info .material-symbols-outlined {
  font-size: 22px !important;
}

/* ── 7.5 salida-card: grid de Salida (#containerSalidasGrid) ──────────
   Cabecera 16/10 → 16/9 con tope de 9rem, cuerpo p-3 space-y-2,
   bloques secundarios (Entrada/Estancia y badges) acotados y botón
   «Registrar Salida» a py-2.5 px-3 con texto medio. */
.salida-card > div:first-child {
  aspect-ratio: 16 / 9 !important;
  max-height: 9rem;
}
.salida-card > div:nth-child(2) {
  padding: 0.75rem !important; /* p-4 → p-3 */
}
.salida-card > div:nth-child(2) > * + * {
  margin-top: 0.5rem !important; /* space-y-3 → space-y-2 */
}
.salida-card > div:nth-child(2) > div:nth-child(2) {
  padding-top: 0.5rem !important; /* py-3 → py-2 */
  padding-bottom: 0.5rem !important;
  gap: 0.5rem !important; /* gap-3 → gap-2 */
}
.salida-card > div:nth-child(2) > div:nth-child(2) span.text-\[11px\] {
  font-size: 0.75rem !important; /* etiquetas Entrada/Estancia */
}
.salida-card > div:nth-child(2) > div:nth-child(2) .font-label-bold {
  font-size: 0.85rem !important; /* valores de hora y estancia */
}
.salida-card > div:nth-child(2) span.font-headline-md {
  font-size: 1.1rem !important;
  line-height: 1.4rem !important;
}
.salida-card button {
  padding: 0.625rem 0.75rem !important; /* py-2.5 px-3 */
  font-size: 0.9rem !important;
}
.salida-card button .material-symbols-outlined {
  font-size: 1.15rem !important;
}
/* Badges Empresa/Particular y de estado (solo los spans dentro de los
   contenedores absolutos `.top-3`, NO el ícono de respaldo
   `directions_car`, que vive directamente en la cabecera). */
.salida-card > div:first-child > div > span {
  font-size: 0.75rem !important;
}

/* ===================================================================
   8. FIT DE LA PANTALLA DE INICIO (v34)
   -------------------------------------------------------------------
   Con el footer en el flujo, el área central mide exactamente
   `100dvh − 56px (header) − 48px (footer)`. Se recorta el aire
   superior del scroller (antes `pt-20` = 80px, heredado del header
   flotante) y la cabecera «Inicio» para que la tarjeta de
   «Bitácora de entradas y salidas» quede 100 % visible en la VISTA
   INICIAL de la tablet, sin scroll.
   =================================================================== */
#appMain {
  padding-top: 1rem !important; /* pt-20 (80px) → 1rem: el header ya ocupa su espacio */
}

/* ===================================================================
   9. UNIFICACIÓN DE CABECERAS DE VISTA (v35)
   -------------------------------------------------------------------
   TODOS los encabezados principales de vista (INICIO, TIPO DE VEHÍCULO,
   REGISTRO DE VEHÍCULO —Empresa y Particular, pasos 1 y 2—, REGISTRO DE
   SALIDA, SALIDA DE VISITA / PARTICULAR, HISTORIAL DE REGISTROS y
   ¡Registro Exitos!) comparten EXACTAMENTE el mismo tamaño, peso e
   interlineado que la cabecera «Inicio»: `1.75rem` (28px) / `700` /
   `line-height: 1.25`. Los íconos integrados y los subtítulos también
   quedan con proporciones uniformes en todas las páginas.
   =================================================================== */

/* ── 9.1 Tamaño/peso uniformes del título de cada vista ───────────── */
.page-header h1,
.page-header h2,
#pageLogin h1,
#pageHome h1,
#page-tipo-vehiculo h1,
#page-registro-empresa h1,
#page-registro-empresa2 h1,
#page-registro-vehiculo-paso1 h1,
#page-registro-vehiculo-paso2 h1,
#page-registro-salida h1,
#page-salida-sin-ingreso h1,
#page-bitacora h1,
#page-registro-exitoso h1 {
  font-size: 1.75rem !important; /* 28px — igual que «Inicio» */
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* ── 9.2 Contenedores de cabecera: padding y margen compactos ─────── */
#pageHome .relative.bg-surface-container-lowest,
#page-tipo-vehiculo > div > div:first-child,
#page-registro-empresa > div > div:first-child,
#page-registro-empresa2 > div > div:first-child,
#page-registro-vehiculo-paso1 > div > div:first-child,
#page-registro-vehiculo-paso2 > div > div:first-child,
#page-registro-salida > div > div:first-child,
#page-salida-sin-ingreso > div > div:first-child,
#page-bitacora > div > div:first-child {
  padding: 1.25rem !important; /* p-8 → p-5 */
  margin-bottom: 1.5rem !important; /* mb-12 / mb-10 / mb-8 → mb-6 */
}

/* ── 12. EXPORTACIÓN A EXCEL DE LA BITÁCORA (v50) ────────────────────────────
   La Bitácora exporta un archivo Excel generado y descargado al instante en el
   propio navegador (CSV UTF-8 + BOM, 6 columnas), sin librerías externas y sin
   peticiones de red. Flujo (app.js): `#btnAbrirModalExportarExcel` →
   `#modalExportarExcel` (rango de fechas con `#inputReporteFechaInicio` /
   `#inputReporteFechaFin`) → `#btnGenerarReporteExcel` filtra el historial de
   IndexedDB y entrega `Bitacora_Vehicular_<desde>_a_<hasta>.csv`.
   v50 retiró la vista previa imprimible, `#reportePrintRoot` y el diálogo de
   impresión PDF de v48 (ya no existe `body.reporte-imprimiendo` ni la sección
   `@media print` del reporte). Se conservan los estilos del modal (cuerpo
   desplazable y botones de rango rápido); las clases `.reporte-*` de las
   tarjetas quedan sin uso. */

/* ── 12.1 Cuerpo desplazable del modal (misma garantía que .salida-modal-body) */
.reporte-body {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
}

/* ── 12.2 Botones de rango rápido (objetivo táctil >= 44px) ── */
.reporte-rango-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.reporte-rango-btn:hover {
  background-color: var(--color-surface-container);
}
.reporte-rango-btn.activo {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.reporte-rango-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 12.3 Vista previa: hoja blanca tipo documento dentro del modal ── */
.reporte-hoja-wrap {
  padding: 1rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.75rem;
  background-color: var(--color-surface-container);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reporte-hoja {
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  padding: 14mm 12mm;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #111827;
  font-family: var(--font-family);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Cabecera del documento */
.reporte-hoja-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #111827;
}
.reporte-hoja-titulo h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111827;
}
.reporte-hoja-titulo p {
  margin: 0.15rem 0 0;
  font-size: 10.5px;
  color: #4b5563;
}
.reporte-hoja-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
  font-size: 10.5px;
  color: #111827;
  white-space: nowrap;
}
.reporte-hoja-meta strong {
  font-weight: 700;
}

/* Resumen (5 contadores) */
.reporte-hoja-resumen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.reporte-resumen-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  background-color: #f9fafb;
}
.reporte-resumen-item span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
}
.reporte-resumen-item strong {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

/* ── 12.3b TARJETAS DE MOVIMIENTO: 6 COLUMNAS ALINEADAS ───────────────────
   Una tarjeta horizontal por movimiento con SIEMPRE las mismas columnas:
   1 TIPO Y FECHA · 2 VEHÍCULO · 3 CONDUCTOR · 4 MOTIVO OPERACIÓN ·
   5 CARGA/MANIFIESTO · 6 CONTROL GUARDIA. La retícula es idéntica en la vista
   previa y en la copia impresa. Solo bordes, radios ligeros y sombra suave:
   nada de `ring`/transiciones de layout (la tarjeta nunca cambia de tamaño). */
.reporte-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.reporte-fila {
  display: grid;
  grid-template-columns:
    minmax(76px, 0.72fr) minmax(116px, 1.3fr) minmax(116px, 1.3fr)
    minmax(118px, 1.4fr) minmax(96px, 0.95fr) minmax(104px, 1fr);
  gap: 0.45rem;
  align-items: start;
  padding: 0.45rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #006e2b;
  border-radius: 0.45rem;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.07);
}
.reporte-fila-salida {
  border-left-color: #b61621;
}
.reporte-col {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.reporte-col-con-foto {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.4rem;
}
.reporte-datos {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
/* Badge de TIPO (ENTRADA verde / SALIDA rojo) y de MODALIDAD */
.reporte-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.reporte-badge-entrada {
  background-color: #006e2b;
}
.reporte-badge-salida {
  background-color: #b61621;
}
.reporte-badge-modalidad {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0.02rem 0.3rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  background-color: #f3f4f6;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
}
.reporte-badge-empresa {
  border-color: #a7d7bd;
  background-color: #eef7f1;
  color: #006e2b;
}
.reporte-badge-particular {
  border-color: #f3d5a9;
  background-color: #fdf5e7;
  color: #9a5b09;
}

/* Miniaturas: el SVG por defecto vive DEBAJO de la foto (si la foto falla,
   `conectarRespaldoImagenesReporte()` la retira y el ícono queda visible). */
.reporte-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0.35rem;
  background-color: #f3f4f6;
  color: #9ca3af;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.reporte-thumb-conductor {
  border-radius: 999px;
}
.reporte-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reporte-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.reporte-svg-thumb {
  width: 20px;
  height: 20px;
}

/* Textos de las columnas */
.reporte-etiqueta {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
}
.reporte-hora {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  font-variant-numeric: tabular-nums;
}
.reporte-fecha {
  font-size: 9.5px;
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}
.reporte-placa {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  overflow-wrap: anywhere;
}
.reporte-nombre {
  font-size: 10.5px;
  font-weight: 800;
  color: #111827;
  overflow-wrap: anywhere;
}
.reporte-linea,
.reporte-destino {
  font-size: 9.5px;
  color: #4b5563;
  overflow-wrap: anywhere;
}
.reporte-motivo {
  font-size: 10px;
  color: #111827;
  overflow-wrap: anywhere;
}
.reporte-guardia {
  font-size: 10px;
  font-weight: 700;
  color: #111827;
  overflow-wrap: anywhere;
}

/* CARGA / MANIFIESTO y CONTROL GUARDIA (badges con ícono vectorial) */
.reporte-badge-carga,
.reporte-estado {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.22rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.reporte-badge-carga {
  padding: 0.08rem 0.3rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  background-color: #f3f4f6;
  color: #374151;
}
.reporte-badge-carga .reporte-svg,
.reporte-estado .reporte-svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.reporte-badge-carga-si {
  border-color: #f0d9a8;
  background-color: #fdf6e3;
  color: #8a5a00;
}
.reporte-estado-ok {
  color: #006e2b;
}
.reporte-estado-alerta {
  color: #b61621;
}
.reporte-vacio {
  padding: 1rem 0.35rem;
  text-align: center;
  font-style: italic;
  color: #6b7280;
}

/* Pie del documento */
.reporte-hoja-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #d1d5db;
  font-size: 9.5px;
  color: #4b5563;
}

/* ── 9.3 Ícono de cabecera: caja 3rem y glifo 28px (uniforme) ─────── */
#pageHome .relative.bg-surface-container-lowest .w-16.h-16,
#page-tipo-vehiculo > div > div:first-child .w-16.h-16,
#page-registro-empresa > div > div:first-child .w-16.h-16,
#page-registro-empresa2 > div > div:first-child .w-16.h-16,
#page-registro-vehiculo-paso1 > div > div:first-child .w-16.h-16,
#page-registro-vehiculo-paso2 > div > div:first-child .w-16.h-16,
#page-bitacora > div > div:first-child .w-16.h-16 {
  width: 3rem !important;
  height: 3rem !important;
}
#pageHome .relative.bg-surface-container-lowest .w-16.h-16 .material-symbols-outlined,
#page-tipo-vehiculo > div > div:first-child .w-16.h-16 .material-symbols-outlined,
#page-registro-empresa > div > div:first-child .w-16.h-16 .material-symbols-outlined,
#page-registro-empresa2 > div > div:first-child .w-16.h-16 .material-symbols-outlined,
#page-registro-vehiculo-paso1 > div > div:first-child .w-16.h-16 .material-symbols-outlined,
#page-registro-vehiculo-paso2 > div > div:first-child .w-16.h-16 .material-symbols-outlined,
#page-bitacora > div > div:first-child .w-16.h-16 .material-symbols-outlined {
  font-size: 28px !important;
}

/* ── 9.4 Subtítulo de cabecera y separación interna (uniforme) ────── */
#pageHome .relative.bg-surface-container-lowest p.font-body-lg,
#page-tipo-vehiculo > div > div:first-child p.font-body-lg,
#page-registro-empresa > div > div:first-child p.font-body-lg,
#page-registro-empresa2 > div > div:first-child p.font-body-lg,
#page-registro-vehiculo-paso1 > div > div:first-child p.font-body-lg,
#page-registro-vehiculo-paso2 > div > div:first-child p.font-body-lg,
#page-registro-salida > div > div:first-child p.font-body-lg,
#page-salida-sin-ingreso > div > div:first-child p.font-body-lg,
#page-bitacora > div > div:first-child p.font-body-lg {
  font-size: 0.95rem !important;
  line-height: 1.4rem !important;
}
#pageHome .relative.bg-surface-container-lowest .gap-6,
#page-tipo-vehiculo > div > div:first-child .gap-6,
#page-registro-empresa > div > div:first-child .gap-6,
#page-registro-empresa2 > div > div:first-child .gap-6,
#page-registro-vehiculo-paso1 > div > div:first-child .gap-6,
#page-registro-vehiculo-paso2 > div > div:first-child .gap-6,
#page-bitacora > div > div:first-child .gap-6 {
  gap: 1rem !important;
}

/* ── 7.6 Nota de mantenimiento ───────────────────────────────────────
   Estas reglas son la ÚNICA autoridad de compactación: si un componente
   nuevo necesita otra altura, ajustar aquí y NO repartir overrides por
   el markup, para que el fit de viewport de la tablet se mantenga. */

/* ── 10. MODAL DE SALIDA: MODO PARTICULAR (v38) ──────────────────────
   Cuando el vehículo que egresa es PARTICULAR se oculta por COMPLETO el
   bloque del avatar/foto del conductor («Conductor sin identificar» + ícono
   de cámara) y el formulario «Conductor que realiza la salida» queda a UNA
   sola columna. La clase `salida-particular` la aplica
   `aplicarModalidadConductorSalida()` (app.js) al abrir el modal; para un
   vehículo EMPRESA la clase se retira y se conserva el avatar/foto del
   empleado. Solo se cambia `display`/`flex-direction`: cero layout shift. */
#modalConfirmacionSalida.salida-particular #salida_driver_avatar_col {
  display: none !important;
}
#modalConfirmacionSalida.salida-particular #salida_driver_row {
  flex-direction: column !important;
}

/* ── 11. TARJETAS DESHABILITADAS (v39): FUERA (SALIDA) = EN PLANTA (ENTRADA) ──
   Estilo ÚNICO (gris + transparencia) compartido por la galería de ENTRADA
   (vehículos ya EN PLANTA) y la vista de SALIDA (vehículos ya FUERA): atenúa
   SOLO la fotografía y el bloque de datos; los badges de estado y modalidad
   quedan nítidos. Solo `opacity`/`filter`: sin `ring`/`shadow` ni cambios de
   tamaño ⇒ cero layout shift. La clase la aplican: `aplicarEstiloBloqueadoEmpresa()`
   (ENTRADA) y `renderTarjetasVehiculosSalida()` (SALIDA, vehículos no en planta). */
.tarjeta-deshabilitada {
  cursor: not-allowed !important;
}
.tarjeta-deshabilitada .bg-cover,
.tarjeta-deshabilitada .vehicle-card-info,
.tarjeta-deshabilitada .salida-card-foto,
.tarjeta-deshabilitada .salida-card-foto-fallback,
.tarjeta-deshabilitada .salida-card-info {
  opacity: 0.5 !important;
  filter: grayscale(1) !important;
}
/* El botón «Registrar Salida» de una tarjeta deshabilitada nunca responde. */
#containerSalidasGrid .tarjeta-deshabilitada button {
  pointer-events: none !important;
  opacity: 0.5 !important;
  filter: grayscale(1) !important;
}