/* ============================================================================ */
/* HOJA DE ESTILOS PRINCIPAL (Arquitectura Mobile First) */
/* ============================================================================ */

/* Normaliza los márgenes y establece la tipografía base del sistema. */
body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background-color: var(--fondo);
  color: var(--texto);
}

/* Estiliza la barra de navegación superior. */
.header {
  background-color: var(--encabezado);
  color: white;
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.header p {
  margin: 5px 0 0 0;
  font-size: 0.9rem;
  color: #94a3b8;
}

/* Contenedor principal que envuelve los módulos de la aplicación. */
.container {
  padding: 1.5rem;
}

/* Define el diseño en forma de "tarjetas" para separar visualmente las funciones. */
.card {
  background: var(--superficie);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin-bottom: 1.5rem;
}
.card h3 {
  margin-top: 0;
  color: var(--texto-fuerte);
}
.card p {
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Estandariza los botones interactivos para asegurar un área táctil óptima. */
button {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
}
button:active {
  opacity: 0.8;
}

/* Paleta de colores semánticos para los botones. */
.btn-primario { background-color: #2563eb; color: white; }
.btn-peligro { background-color: #ef4444; color: white; }
.btn-cancelar { background-color: #64748b; color: white; }

/* Contenedor reservado para renderizar el flujo de la cámara. */
#reader {
  width: 100%;
  margin-top: 1rem;
  border-radius: 8px;
  overflow: hidden;
}

/* Estructura la ventana modal superpuesta para el reporte de incidencias. */
.modal-incidencia {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.55);
}
.modal-incidencia[hidden] {
  display: none;
}
.modal-contenido {
  width: min(100%, 480px);
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
}
.modal-contenido h2 {
  margin: 0 0 0.75rem;
  color: var(--texto-fuerte);
  font-size: 1.25rem;
}
.modal-contenido textarea {
  width: 100%;
  min-height: 130px;
  box-sizing: border-box;
  padding: 0.8rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  background: var(--superficie);
  color: var(--texto);
}
.modal-acciones {
  display: flex;
  gap: 0.75rem;
}
.modal-acciones button {
  flex: 1;
}
.btn-guardar {
  background-color: #16a34a;
  color: white;
}
/* Resultados del chequeo del equipo (cámara, ubicación, conexión). */
.chequeo-intro {
  margin: 0 0 1rem;
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.5;
}
.lista-chequeo {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-chequeo li {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--borde-suave);
  line-height: 1.4;
}
.lista-chequeo li:first-child {
  border-top: none;
}
.lista-chequeo strong {
  display: block;
  color: var(--texto-fuerte);
}
.lista-chequeo small {
  color: var(--texto-suave);
  font-size: 0.85rem;
}

/* Indicador del estado del GPS en la tarjeta de escaneo. */
.estado-gps {
  margin-top: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.estado-gps--listo { background: #dcfce7; color: #166534; }
.estado-gps--buscando { background: #fef3c7; color: #92400e; }
.estado-gps--error { background: #fee2e2; color: #991b1b; }
.estado-gps--neutro { background: var(--superficie-2); color: var(--texto-suave); }

/* Usuario de la sesión en el encabezado. */
.header-usuario {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}
.link-dashboard {
  color: #93c5fd;
  font-weight: 600;
  text-decoration: none;
}
.btn-salir {
  width: auto;
  margin: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  background: #334155;
  color: #e2e8f0;
}

/* Campos del modal de incidencias. */
.campo-modal {
  display: block;
  margin: 0.75rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--etiqueta);
}
.select-modal {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  background: var(--superficie);
}

/* Campo de foto opcional del reporte de incidencias. */
.input-foto {
  display: block;
  width: 100%;
  margin: 6px 0 12px;
  font-size: 14px;
}

/* Barra de recargar, tema e instalar debajo del usuario. */
.header-herramientas {
  justify-content: center;
  margin-top: 0.6rem;
}

/* Ventana de registro del control: checklist y foto. */
.modal-contenido {
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.sector-control {
  margin: 0 0 0.75rem;
  color: var(--texto-suave);
}
.subtitulo-control {
  margin: 0.75rem 0 0.4rem;
  font-weight: 700;
  color: var(--texto-fuerte);
}
.lista-tareas {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.lista-tareas label {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--borde-suave);
  cursor: pointer;
}
/* Casillas grandes, fáciles de tocar con guantes o con el dedo. */
.lista-tareas input[type='checkbox'] {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.vista-foto {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin: 0.5rem auto 0;
  border-radius: 8px;
}
.vista-foto[hidden] {
  display: none;
}

/* Botones de la foto opcional de la incidencia. */
.acciones-foto {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.acciones-foto button {
  flex: 1;
  margin-top: 0.5rem;
}