/* Estilos de Atlas Conductores.
   Mobile-first a propósito: la única audiencia real es un celular en
   la mano de un conductor, a veces con sol directo o con guantes -
   botones grandes, alto contraste, sin dependencias de fuentes/CDN
   externas (la app debe abrir offline). */

:root {
  --color-fondo: #0f172a;
  --color-superficie: #ffffff;
  --color-texto: #0f172a;
  --color-texto-suave: #475569;
  --color-primario: #1d4ed8;
  --color-primario-activo: #1e40af;
  --color-borde: #cbd5e1;
  --color-error: #b91c1c;
  --color-exito: #15803d;
  --color-chip: #fef3c7;
  --color-chip-texto: #92400e;
  --radio: 12px;
  --espacio: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--espacio);
  padding-top: calc(14px + env(safe-area-inset-top));
  color: #fff;
}

.encabezado__marca {
  font-weight: 700;
  font-size: 1.1rem;
}

.indicador-conexion {
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
}

.indicador-conexion--offline {
  background: #b91c1c;
}

/* Bloque MOBILE COLA V1 (fix real -- causa raíz definitiva del banner
   falso persistente): `display: flex` en el selector de clase pisaba
   la regla `[hidden] { display: none }` del navegador -- ambas tienen
   la MISMA especificidad (0,1,0) y la del autor (esta hoja) siempre
   gana el empate sobre la del navegador. Resultado real: el banner se
   veía SIEMPRE, sin importar qué valor tuviera `bannerActualizacion.
   hidden` en JS -- app.js calculaba correctamente cuándo ocultarlo
   (confirmado con local=remoto="0.13.0"), pero esa decisión nunca
   llegaba a la pantalla. `:not([hidden])` sube la especificidad de
   ESTA regla (0,2,0) sólo cuando el atributo NO está presente -- con
   `hidden` puesto, no hay ninguna regla de autor compitiendo y gana la
   del navegador, tal como debía ser desde el principio. */
.banner-actualizacion:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px var(--espacio);
  background: var(--color-primario);
  color: #fff;
  font-size: 0.85rem;
}

.banner-actualizacion .boton--enlace {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}

main {
  padding: var(--espacio);
}

.vista {
  max-width: 480px;
  margin: 0 auto;
}

.tarjeta {
  background: var(--color-superficie);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

h1 {
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.texto-ayuda {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

label {
  display: block;
  margin-top: 14px;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.9rem;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

/* Bloque MOBILE OBSERVACIÓN DEL CHOFER V1 -- 16px mínimo: por debajo,
   iOS Safari hace zoom automático al enfocar el campo. */
.campo-observacion {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  resize: vertical;
}

.contador-observacion {
  margin: 4px 0 0;
  text-align: right;
}

/* Ojo de mostrar/ocultar contraseña -- objetivo táctil de 44px (guía de
   iOS) superpuesto al campo, sin achicar el ancho del input. */
.campo-password-envoltorio {
  position: relative;
}

.campo-password-envoltorio input[type="password"],
.campo-password-envoltorio input[type="text"] {
  padding-right: 48px;
}

.boton-mostrar-password {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boton {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 18px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.boton--primario {
  background: var(--color-primario);
  color: #fff;
}

.boton--primario:active {
  background: var(--color-primario-activo);
}

.boton--primario:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.boton--secundario {
  background: #e2e8f0;
  color: var(--color-texto);
}

.boton--enlace {
  background: none;
  color: var(--color-primario);
  width: auto;
  margin-top: 0;
  padding: 6px 0;
  text-decoration: underline;
  font-weight: 500;
}

.fila-entre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Bloque MOBILE CIERRE PRE-PRUEBA REAL -- mismo patrón/causa raíz que
   ya se corrigió antes para el banner de actualización, ver el bloque
   MOBILE COLA V1 más arriba en este archivo: display fijo en el
   selector de clase (especificidad 0,1,0) pisaba la regla hidden del
   navegador (misma especificidad, empate que siempre gana la hoja del
   autor) -- el estado JS se calculaba bien, pero nunca se traducía en
   visibilidad real. El calificador "sin atributo hidden" sube la
   especificidad de la regla del autor SÓLO cuando el atributo no está
   puesto. */
.chip-pendientes:not([hidden]) {
  display: inline-block;
  background: var(--color-chip);
  color: var(--color-chip-texto);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 10px 0 0;
}

/* Bloque MOBILE CONFIRMACIÓN DE RECEPCIÓN -- estado por tanda. Mismo
   lenguaje visual que .chip-pendientes/.aviso-sesion; `:not([hidden])`
   por el mismo motivo de especificidad (ver .chip-pendientes). */
.estado-recepcion:not([hidden]) {
  display: block;
  margin: 10px 0 0;
}

.estado-recepcion__linea {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.estado-recepcion__linea--ok {
  background: #ecfdf3;
  color: var(--color-exito);
  border: 1px solid var(--color-exito);
}

.estado-recepcion__linea--pendiente {
  background: var(--color-chip);
  color: var(--color-chip-texto);
  border: 1px solid var(--color-chip-texto);
}

/* Bloque MOBILE COLA V2 -- aviso de sesión vencida durante una subida.
   Mismo lenguaje visual que el resto (tarjeta/borde); nunca una pantalla
   nueva. `:not([hidden])` por el mismo motivo de especificidad que el
   resto de este archivo (ver comentario de .chip-pendientes). */
.aviso-sesion:not([hidden]) {
  display: block;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--color-primario);
  border-radius: 8px;
  background: #fff8f2;
}

.aviso-sesion p {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

/* Bloque MOBILE UX PUNTUAL: lista compacta de envíos pendientes/con
   error, con acción de descartar -- mismo lenguaje visual que el resto
   (tarjeta/borde/chip), nunca una pantalla nueva. */
.lista-pendientes:not([hidden]) {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-pendiente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: #f8fafc;
}

.item-pendiente__info {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.item-pendiente__descartar {
  background: none;
  border: none;
  color: var(--color-error);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* Bloque MOBILE COLA V1 (diagnóstico, temporal) -- panel de sólo
   lectura, colapsado por defecto (<details>) para no estorbar, mismo
   lenguaje visual que .item-pendiente. Quitar cuando el caso real
   quede cerrado. */
.panel-diagnostico {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 0.8rem;
}

.panel-diagnostico__texto {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
  margin: 8px 0 0;
}

/* Bloque MOBILE MULTIGUÍA V1 -- miniaturas de la tanda en curso, en
   orden de captura. Fila con scroll horizontal (nunca un carrusel
   pesado): funciona igual con 1 o con LIMITE_FOTOS_TANDA fotos.
   El calificador "sin atributo hidden": mismo fix de especificidad que
   el resto del Bloque MOBILE CIERRE PRE-PRUEBA REAL, más arriba en
   este archivo. */
.lista-tanda:not([hidden]) {
  list-style: none;
  margin: 14px 0;
  padding: 0 0 4px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.item-tanda {
  flex: 0 0 auto;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  background: #f8fafc;
}

.item-tanda__miniatura {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f5f9;
}

.item-tanda__numero {
  font-size: 0.75rem;
  color: var(--color-texto-suave);
}

.item-tanda__quitar {
  background: none;
  border: none;
  color: var(--color-error);
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px;
}

/* Bloque MOBILE CONTRATO V2 -- primera guía (Cámara / Fotos), tarjeta "+"
   dentro de la lista y guía firmada vinculada a su guía. */
/* `:not([hidden])`: mismo motivo de especificidad que .chip-pendientes --
   sin esto `display: grid` pisaría `hidden` y nunca se ocultaría. */
.acciones-primera-guia:not([hidden]) {
  display: grid;
  gap: 8px;
}

.item-tanda--agregar {
  justify-content: center;
  border-style: dashed;
  background: #fff;
}

.item-tanda__mas {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-texto-suave);
}

.item-tanda__accion {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
}

.item-tanda__firmada {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-borde);
}

.item-tanda__miniatura--firmada {
  height: 64px;
  outline: 2px solid #16a34a;
}

.item-tanda__etiqueta-firmada {
  font-size: 0.72rem;
  text-align: center;
  color: var(--color-texto-suave);
}

.grupo-incidencias__titulo {
  margin: 10px 0 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-texto-suave);
}

fieldset {
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  margin-top: 18px;
  padding: 12px;
}

legend {
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0 6px;
}

.opcion-radio,
.opcion-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.opcion-radio input,
.opcion-checkbox input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Bloque MOBILE V1 -- selector grande de planta de origen, estilo
   interruptor físico de dos posiciones: dos radios nativos (accesibles,
   testeables por .checked) ocultos visualmente, cada uno con una
   etiqueta grande que ocupa la mitad del interruptor -- nunca un
   <select>. La mitad seleccionada queda con fondo sólido y texto
   blanco; la otra, neutra -- nunca un estado ambiguo (Sección 2). */
.grupo-planta-origen {
  border-color: var(--color-primario);
}

.interruptor-planta {
  display: flex;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.interruptor-planta__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.interruptor-planta__opcion {
  flex: 1;
  margin: 0;
  padding: 18px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.interruptor-planta__input:checked + .interruptor-planta__opcion {
  background: var(--color-primario);
  color: #fff;
}

.interruptor-planta__input:focus-visible + .interruptor-planta__opcion {
  outline: 3px solid var(--color-primario-activo);
  outline-offset: 2px;
}

.texto-error {
  color: var(--color-error);
  font-weight: 600;
  margin-top: 12px;
}

.texto-exito {
  color: var(--color-exito);
  font-weight: 600;
  margin-top: 12px;
}