/* ==========================================================================
   Hoja de identidad de la plataforma (SPCI Ingeniería).
   Única hoja propia del proyecto: cubre la vista pública y el panel privado.
   Se carga después de Pico CSS (classless) y define la marca sobre sus
   variables. Modo claro fijo: el logo solo funciona sobre fondo claro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paleta de marca (derivada del logo) y colores de vigencia.
   Cada estado de vigencia tiene dos usos: como fondo del semáforo público y
   como color de texto sobre blanco en las tablas del panel. El naranja de
   «por vencer» no alcanza AA como texto sobre blanco, así que ese uso tiene
   su propio tono oscuro.
   -------------------------------------------------------------------------- */
:root {
  --spci-primario: #002979;
  --spci-primario-oscuro: #001b52; /* tono de hover del primario */
  --spci-acento: #e30613; /* solo alertas y vencido; nunca decorativo */
  --spci-texto: #2b2b2b;
  --spci-fondo: #ffffff;
  --spci-gris-suave: #6b6b6b; /* texto secundario (pie, notas); 5,3:1 sobre blanco */
  --spci-borde: #d5dae0;
  --spci-vigencia-al-dia: #1e7f3e;
  --spci-vigencia-por-vencer: #c77700;
  --spci-vigencia-por-vencer-texto: #8a5300;
  --spci-vigencia-vencido: #e30613;
  --spci-vigencia-sin-registro: #6b6b6b;
  /* Fondos de los mensajes del panel: tintes claros de cada color. */
  --spci-tinte-error: #fdecec;
  --spci-tinte-exito: #eaf4ee;
  --spci-tinte-aviso: #fdf3e0;
  --spci-tinte-neutro: #f1f4f8;
}

/* --------------------------------------------------------------------------
   Mapeo a Pico. El selector con [data-theme=light] iguala la especificidad
   del bloque claro de Pico (:root:not([data-theme=dark])) y, al cargarse
   después, prevalece.
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  --pico-color: var(--spci-texto);
  --pico-background-color: var(--spci-fondo);
  --pico-primary: var(--spci-primario);
  --pico-primary-background: var(--spci-primario);
  --pico-primary-border: var(--spci-primario);
  --pico-primary-underline: var(--spci-primario);
  --pico-primary-hover: var(--spci-primario-oscuro);
  --pico-primary-hover-background: var(--spci-primario-oscuro);
  --pico-primary-hover-border: var(--spci-primario-oscuro);
  --pico-primary-hover-underline: var(--spci-primario-oscuro);
  --pico-primary-focus: rgba(0, 41, 121, 0.35);
  --pico-primary-inverse: #ffffff;
  /* Espaciado vertical comprimido: la pública cabe de una mirada y el panel
     muestra más filas sin desplazamiento. */
  --pico-typography-spacing-vertical: 0.75rem;
  --pico-typography-spacing-top: 1.25rem;
  --pico-block-spacing-vertical: 0.75rem;
}

/* --------------------------------------------------------------------------
   Clases de vigencia que entrega core/presentacion.py. Cada clase fija su
   color de fondo, el color de texto accesible sobre él y el tono con que se
   escribe sobre blanco; «por vencer» exige texto negro sobre su fondo para
   alcanzar la razón de contraste AA (4,5:1).
   -------------------------------------------------------------------------- */
.al-dia {
  --spci-color-vigencia: var(--spci-vigencia-al-dia);
  --spci-texto-vigencia: #ffffff;
  --spci-vigencia-sobre-blanco: var(--spci-vigencia-al-dia);
}

.por-vencer {
  --spci-color-vigencia: var(--spci-vigencia-por-vencer);
  --spci-texto-vigencia: #000000;
  --spci-vigencia-sobre-blanco: var(--spci-vigencia-por-vencer-texto);
}

.vencido {
  --spci-color-vigencia: var(--spci-vigencia-vencido);
  --spci-texto-vigencia: #ffffff;
  --spci-vigencia-sobre-blanco: var(--spci-vigencia-vencido);
}

.sin-registro {
  --spci-color-vigencia: var(--spci-vigencia-sin-registro);
  --spci-texto-vigencia: #ffffff;
  --spci-vigencia-sobre-blanco: var(--spci-vigencia-sin-registro);
}

/* --------------------------------------------------------------------------
   Anchos de página. La pública es una columna de lectura; el panel necesita
   algo más, y sus listados todavía más.
   -------------------------------------------------------------------------- */
main.columna {
  max-width: 34rem;
  margin-inline: auto;
  padding-block-start: 0.5rem;
}

main.panel {
  max-width: 46rem;
  margin-inline: auto;
  padding-block-start: 0.5rem;
}

main.panel.ancho {
  max-width: 76rem;
}

/* --------------------------------------------------------------------------
   Encabezado de marca, común a la pública y al panel: franja primaria
   superior y área blanca con el logo. En móvil se muestra el isotipo junto al
   nombre de la empresa; desde 768 px, el logo completo (siempre sobre blanco:
   su texto es azul oscuro).
   -------------------------------------------------------------------------- */
body > header.encabezado {
  border-block-start: 0.3rem solid var(--spci-primario);
  border-block-end: 1px solid var(--pico-muted-border-color);
  background: var(--spci-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
}

.encabezado .marca-isotipo {
  height: 3rem;
  width: auto;
}

.encabezado .marca-logo {
  display: none;
  height: 5.5rem;
  width: auto;
  max-width: 100%;
}

.encabezado .marca-nombre {
  color: var(--spci-primario);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .encabezado .marca-isotipo,
  .encabezado .marca-nombre {
    display: none;
  }

  .encabezado .marca-logo {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Semáforo de vigencia: el elemento dominante de la página pública. Siempre
   lleva texto además del color.
   -------------------------------------------------------------------------- */
.semaforo {
  display: block;
  background: var(--spci-color-vigencia);
  color: var(--spci-texto-vigencia);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-block: 0.75rem 1rem;
}

/* --------------------------------------------------------------------------
   Botón «Modo técnico»: área de toque mínima de 44×44 px CSS.
   -------------------------------------------------------------------------- */
.boton-tecnico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* --------------------------------------------------------------------------
   Datos del equipo en la pública: ubicación, mantenedor y empresa como líneas
   compactas, sin encabezado propio.
   -------------------------------------------------------------------------- */
.dato-compacto {
  margin-block: 0 0.15rem;
  color: var(--spci-gris-suave);
  font-size: 0.9rem;
}

.dato-compacto span {
  color: var(--spci-texto);
  font-weight: 600;
}

/* La ubicación es lo primero que busca quien escanea el QR: encabeza el bloque
   de «Descripción» y se lee con cuerpo algo mayor que el resto de las líneas
   compactas, sin acercarse al de los títulos de sección (h2 de Pico, 1.75rem).
   El aire inferior compensa ese cuerpo mayor frente a la descripción. */
.dato-compacto.dato-ubicacion {
  font-size: 1.15rem;
  margin-block-end: 0.4rem;
}

/* --------------------------------------------------------------------------
   Tabla de mantenciones de la pública: contenida en su propio contenedor con
   desborde horizontal para que la página nunca se desplace de lado en móvil.
   -------------------------------------------------------------------------- */
.tabla-mantenciones {
  overflow-x: auto;
}

.tabla-mantenciones th {
  font-weight: 600;
}

/* Con tres columnas —tipo, última y próxima— el relleno horizontal que Pico da
   por defecto a cada celda suma más de lo que ocupan varios nombres de mes. Se
   recorta para que «septiembre 2026» quepa en una línea en un teléfono angosto;
   el desborde del contenedor sigue ahí como última red. */
.tabla-mantenciones :is(th, td) {
  padding-inline: 0.5rem;
}

/* --------------------------------------------------------------------------
   Pie: nombre de la empresa y código del equipo, en texto secundario.
   -------------------------------------------------------------------------- */
body > footer.pie {
  border-block-start: 1px solid var(--pico-muted-border-color);
  color: var(--spci-gris-suave);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 34rem;
  margin-inline: auto;
}

.pie .pie-codigo {
  font-family: var(--pico-font-family-monospace);
  letter-spacing: 0.08em;
}

/* ==========================================================================
   Panel privado
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra de navegación: tres destinos fijos y la línea de sesión. Sin menú
   desplegable y sin JavaScript, porque con tres enlaces no hace falta.
   -------------------------------------------------------------------------- */
body > nav.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1rem;
  background: var(--spci-primario);
  color: #ffffff;
  font-size: 0.9rem;
}

.barra a {
  color: #ffffff;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.barra .sesion {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}

.barra .sesion-usuario {
  font-weight: 700;
}

.barra form {
  margin: 0;
}

.barra button {
  min-height: 44px;
  padding-block: 0.4rem;
  background: #ffffff;
  border-color: #ffffff;
  color: var(--spci-primario);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Mensajes de Django. El error lleva el acento rojo; el resto usa colores de
   vigencia o neutros. El texto es siempre el color base sobre tintes claros.
   -------------------------------------------------------------------------- */
.mensajes {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.mensaje {
  margin-block-end: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-inline-start: 0.3rem solid var(--spci-gris-suave);
  border-radius: 0.25rem;
  background: var(--spci-tinte-neutro);
  color: var(--spci-texto);
}

.mensaje.error {
  border-inline-start-color: var(--spci-acento);
  background: var(--spci-tinte-error);
}

.mensaje.success {
  border-inline-start-color: var(--spci-vigencia-al-dia);
  background: var(--spci-tinte-exito);
}

.mensaje.warning {
  border-inline-start-color: var(--spci-vigencia-por-vencer);
  background: var(--spci-tinte-aviso);
}

/* --------------------------------------------------------------------------
   Listados del inicio: cada listado con su descripción corta.
   -------------------------------------------------------------------------- */
.listados dt {
  font-weight: 700;
  margin-block-start: 0.6rem;
}

.listados dd {
  margin: 0;
  color: var(--spci-gris-suave);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Tablas de los listados: dentro de un <figure> que se desplaza de lado en
   móvil sin arrastrar la página entera.
   -------------------------------------------------------------------------- */
figure {
  overflow-x: auto;
  margin-block-end: 0.75rem;
}

figure table {
  font-size: 0.9rem;
}

td.al-dia,
td.por-vencer,
td.vencido,
td.sin-registro,
.vigencia {
  color: var(--spci-vigencia-sobre-blanco);
  font-weight: 700;
}

td.total {
  font-weight: 700;
  background: var(--spci-tinte-neutro);
}

td.vacio {
  color: var(--spci-gris-suave);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Filtros, paginación y exportación de los listados.
   -------------------------------------------------------------------------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 1rem;
  margin-block-end: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--spci-borde);
  border-radius: 0.25rem;
}

.filtro {
  margin: 0;
}

.filtro > label,
.filtro > legend {
  font-size: 0.85rem;
  color: var(--spci-gris-suave);
}

.filtro input,
.filtro select {
  margin-block-end: 0;
}

.filtro fieldset {
  margin: 0;
}

.filtros button {
  min-height: 44px;
  width: auto;
}

.resumen,
.exportar,
.nota {
  color: var(--spci-gris-suave);
  font-size: 0.9rem;
}

.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Detalle de equipo, acciones y avisos, comunes a hoja, anulación y cambio de
   estado.
   -------------------------------------------------------------------------- */
.detalle-equipo {
  color: var(--spci-gris-suave);
  margin-block: 0 0.5rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.acciones a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.aviso {
  padding: 0.6rem 0.75rem;
  border-inline-start: 0.3rem solid var(--spci-vigencia-por-vencer);
  border-radius: 0.25rem;
  background: var(--spci-tinte-aviso);
}

.resumen-datos {
  margin-block-end: 0.75rem;
}

.datos-resumen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
}

.datos-resumen dt {
  color: var(--spci-gris-suave);
  font-size: 0.9rem;
}

.datos-resumen dd {
  margin: 0;
}

.items-observados {
  color: var(--spci-acento);
}

/* --------------------------------------------------------------------------
   Formularios del panel: secciones, ítems del checklist y casilla de
   confirmación. Todo control de toque llega a 44 px.
   -------------------------------------------------------------------------- */
fieldset.seccion {
  border: 1px solid var(--spci-borde);
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-block-end: 0.75rem;
}

fieldset.seccion > legend {
  font-weight: 700;
  padding-inline: 0.25rem;
}

fieldset.item,
fieldset.opciones-estado {
  border-block-start: 1px solid var(--pico-muted-border-color);
  padding-block-start: 0.5rem;
  margin-block-end: 0.75rem;
}

fieldset.item > legend,
fieldset.opciones-estado > legend {
  font-weight: 600;
  font-size: 0.95rem;
}

fieldset.item div,
fieldset.opciones-estado div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.casilla {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  cursor: pointer;
}

.casilla input {
  margin: 0;
}

.errorlist {
  list-style: none;
  margin: 0.15rem 0 0.5rem;
  padding: 0;
  color: var(--spci-acento);
  font-size: 0.9rem;
}

.lista-fotos {
  list-style: none;
  padding: 0;
}

.lista-fotos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.4rem;
}

.acciones-hoja,
.descartar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block: 0.75rem 0;
}

.acciones-hoja button,
.descartar button,
.lista-fotos button {
  width: auto;
  min-height: 44px;
  margin: 0;
}

button.peligro {
  background: var(--spci-acento);
  border-color: var(--spci-acento);
  color: #ffffff;
}

button.secundario {
  background: var(--spci-fondo);
  border-color: var(--spci-primario);
  color: var(--spci-primario);
}

/* --------------------------------------------------------------------------
   Detalle de una mantención cerrada: checklist congelado y fotos. El ítem
   respondido NO lleva el acento, igual que la lista de ítems observados de la
   anulación; sobre blanco el acento alcanza 4,88:1.
   -------------------------------------------------------------------------- */
.respuestas {
  list-style: none;
  padding: 0;
}

.respuestas li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--pico-muted-border-color);
}

.respuesta-valor {
  font-weight: 700;
}

.respuesta-valor.observada {
  color: var(--spci-acento);
}

.respuesta-comentario {
  color: var(--spci-gris-suave);
  flex-basis: 100%;
}

.fotos-detalle {
  list-style: none;
  padding: 0;
}

.fotos-detalle li {
  margin-block-end: 0.75rem;
}

.fotos-detalle img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--spci-borde);
  border-radius: 0.25rem;
}

.foto-comentario {
  display: block;
  color: var(--spci-gris-suave);
}

/* --------------------------------------------------------------------------
   Ayuda de los validadores de contraseña bajo el campo que la exige.
   -------------------------------------------------------------------------- */
.ayuda {
  color: var(--spci-gris-suave);
  font-size: 0.9rem;
  margin-block-end: 0.5rem;
}

.ayuda ul {
  margin: 0;
  padding-inline-start: 1.2rem;
}

/* --------------------------------------------------------------------------
   Pantalla de etiquetas QR
   -------------------------------------------------------------------------- */

.filtro textarea {
  margin-bottom: 0;
  min-height: 44px;
}

/* Botones de marcar/desmarcar todo: los crea etiquetas.js, y sin él no existen. */
.acciones-seleccion {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.acciones-seleccion button {
  width: auto;
  min-height: 44px;
  padding: 0.4rem 1rem;
  margin: 0;
}

td.casilla-etiqueta {
  text-align: center;
  width: 5rem;
}

td.casilla-etiqueta input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
}