/*
 * Estilos de la PWA de campo.
 *
 * Las decisiones no son esteticas, son de contexto de uso: esto se usa a pie de
 * obra, de pie, con guantes, con el sol de frente y a veces con una sola mano.
 *
 *  - Objetivos tactiles de 64 px minimo. Un boton de 40 px no se acierta con
 *    guantes de carnaza.
 *  - Contraste alto y sin grises claros sobre blanco: a mediodia no se ve nada.
 *  - Tipografia grande por omision (18 px base) y sin texto por debajo de
 *    14 px. La plantilla de obra no es joven en promedio.
 *  - Nada de hover como unica senal: en tactil no existe.
 *  - Modo oscuro soportado, pero el QR nunca se invierte (ver qrSvg.ts).
 */

:root {
  color-scheme: light dark;

  --fondo: #f7f7f5;
  --superficie: #ffffff;
  --borde: #c9c9c4;
  --texto: #15150f;
  --texto-suave: #4a4a42;

  --acento: #0b5c3f;
  --acento-texto: #ffffff;
  --salida: #8a3312;
  --exito: #0b5c3f;
  --error: #9a1b1b;
  --aviso: #7a5200;

  --radio: 10px;
  --espacio: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fondo: #14140f;
    --superficie: #1f1f19;
    --borde: #44443c;
    --texto: #f2f2ec;
    --texto-suave: #b6b6ac;
    --acento: #35c08a;
    --acento-texto: #0a2018;
    --salida: #f0a07a;
    --exito: #35c08a;
    --error: #ff9b9b;
    --aviso: #e8bf63;
  }
}

:root[data-tema='oscuro'] {
  --fondo: #14140f;
  --superficie: #1f1f19;
  --borde: #44443c;
  --texto: #f2f2ec;
  --texto-suave: #b6b6ac;
  --acento: #35c08a;
  --acento-texto: #0a2018;
  --salida: #f0a07a;
  --exito: #35c08a;
  --error: #ff9b9b;
  --aviso: #e8bf63;
}

* { box-sizing: border-box; }

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

body {
  background: var(--fondo);
  color: var(--texto);
  font: 18px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Evita el zoom accidental por doble toque sin bloquear el pinch. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

.marco {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--espacio);
  /* Respeta la muesca y la barra de gestos en celulares modernos. */
  padding-top: max(var(--espacio), env(safe-area-inset-top));
  padding-bottom: max(var(--espacio), env(safe-area-inset-bottom));
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
p { margin: 0 0 12px; }

.silencio { color: var(--texto-suave); font-size: 0.95rem; }

/* --- Encabezado ---------------------------------------------------------- */

.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: var(--espacio);
  flex-wrap: wrap;
}

.marca { font-weight: 700; letter-spacing: -0.01em; }

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--espacio);
  margin-bottom: var(--espacio);
}

/* --- Estado de conexion -------------------------------------------------- */

.conexion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  margin-bottom: var(--espacio);
}

.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--texto-suave);
}

.conexion[data-estado='linea'] .punto { background: var(--exito); }
.conexion[data-estado='sin-red'] .punto { background: var(--aviso); }
.conexion[data-estado='enviando'] .punto { background: var(--acento); }

/* --- Botones ------------------------------------------------------------- */

button {
  font: inherit;
  font-weight: 600;
  border-radius: var(--radio);
  border: 2px solid transparent;
  cursor: pointer;
  /* 64 px: alcanzable con guantes. */
  min-height: 64px;
  width: 100%;
  padding: 12px 16px;
}

button:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

button:disabled { opacity: 0.5; cursor: not-allowed; }

.principal { background: var(--acento); color: var(--acento-texto); }
.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }

.marcajes {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.marcajes button { min-height: 108px; font-size: 1.2rem; }
.btn-entrada { background: var(--acento); color: var(--acento-texto); }
.btn-salida { background: var(--salida); color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .btn-salida { color: #2a1206; }
}

/* --- Formularios --------------------------------------------------------- */

label { display: block; font-weight: 600; margin-bottom: 6px; }

input {
  font: inherit;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  margin-bottom: var(--espacio);
}

input[inputmode='numeric'] {
  font-size: 1.6rem;
  letter-spacing: 0.22em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Mensajes ------------------------------------------------------------ */

.mensaje {
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: var(--espacio);
  border: 1px solid;
  font-size: 0.98rem;
}

.mensaje[data-tipo='exito'] { border-color: var(--exito); color: var(--exito); }
.mensaje[data-tipo='error'] { border-color: var(--error); color: var(--error); }
.mensaje[data-tipo='aviso'] { border-color: var(--aviso); color: var(--aviso); }
.mensaje:empty { display: none; }

/* --- Escaner ------------------------------------------------------------- */

.visor {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--espacio);
}

.visor video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mira {
  position: absolute;
  inset: 18%;
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* --- Pendientes ---------------------------------------------------------- */

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

.lista li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.95rem;
}

.lista li:last-child { border-bottom: 0; }

.etiqueta {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  white-space: nowrap;
}

/* --- Pantalla del residente --------------------------------------------- */

.qr-marco {
  background: #fff;
  border-radius: var(--radio);
  padding: 12px;
  max-width: min(78vw, 440px);
  margin: 0 auto var(--espacio);
}

.qr-marco svg { display: block; width: 100%; height: auto; }

.codigo-grande {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 11vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  margin: 0 0 8px;
}

.barra-tiempo {
  height: 10px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
  margin-bottom: 6px;
}

.barra-tiempo > div {
  height: 100%;
  background: var(--acento);
  transition: width 0.3s linear;
}

.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Utilidades de separacion ---------------------------------------------
 *
 * Estas clases existen porque la CSP de la aplicacion declara
 * `style-src 'self'`, que bloquea los atributos `style=` del HTML. Un estilo
 * en linea no es que se vea mal: simplemente NO se aplica, y en silencio. Lo
 * detecto la prueba de navegador (pwa/pruebas/navegador.test.mjs), que falla si
 * aparece una violacion de CSP en consola.
 *
 * Los estilos que el JavaScript fija por CSSOM -- `elemento.style.width` -- si
 * estan permitidos: la CSP restringe el marcado, no la manipulacion
 * programatica.
 */

.obra-fila { margin-bottom: 12px; }
.titulo-obra { margin: 2px 0 0; }
.nota { margin: 12px 0 0; }
.separado { margin-top: 12px; }
.centrado { text-align: center; }
.centrado-ajustado { text-align: center; margin: 0 0 4px; }
.pasos { margin: 0; padding-left: 20px; }

#barra { width: 100%; }

/* --- Enlaces (pagina de entrada de la demostracion) --------------------- */

a {
  color: var(--acento);
  font-weight: 600;
  /* Subrayado siempre visible: el color por si solo no es una senal
   * accesible, y en obra con sol de frente se distingue aun menos. */
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Objetivo tactil holgado tambien para los enlaces. */
  display: inline-block;
  padding: 10px 0;
}

a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* === Pantalla administrativa =============================================
 *
 * Otro contexto de uso, otras reglas: esto se usa sentado, en un monitor, con
 * mouse. Caben tablas y densidad. Lo que NO cambia es el contraste ni los
 * objetivos tactiles, porque tambien se abre en tablet.
 */

.marco-ancho {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--espacio);
  padding-top: max(var(--espacio), env(safe-area-inset-top));
  padding-bottom: max(var(--espacio), env(safe-area-inset-bottom));
}

/* --- Pestanas ------------------------------------------------------------ */

.pestanas {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--borde);
  margin-bottom: var(--espacio);
  overflow-x: auto;
}

.pestanas button {
  width: auto;
  min-height: 48px;
  padding: 10px 16px;
  background: transparent;
  color: var(--texto-suave);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  white-space: nowrap;
}

.pestanas button[aria-selected='true'] {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

/* --- Filtros ------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filtros > div { flex: 1 1 160px; }
.filtros input { margin-bottom: 0; }
.filtros button { width: auto; min-width: 150px; }

/* --- Periodos (mis horas) ------------------------------------------------ */

/* Botones en lugar de un selector de fechas: en obra se usa con una mano, de
   pie y a veces con guantes. Los 64 px de alto del boton base se conservan. */
.periodos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--espacio);
}

.periodos button { flex: 1 1 130px; width: auto; }

/* El periodo elegido se marca con `aria-pressed`, asi que el estilo cuelga del
   mismo atributo: no hay dos fuentes de verdad que se puedan desincronizar. */
.periodos button[aria-pressed='true'] {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
}

/* --- Resumen ------------------------------------------------------------- */

.cifras {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-bottom: var(--espacio);
}

.cifra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
}

.cifra b {
  display: block;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cifra span { font-size: 0.85rem; color: var(--texto-suave); }
.cifra[data-alerta='true'] b { color: var(--error); }

/* --- Tablas -------------------------------------------------------------- */

.tabla-marco {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  position: sticky;
  top: 0;
  background: var(--superficie);
}

tbody tr:last-child td { border-bottom: 0; }
td.numero { font-variant-numeric: tabular-nums; }
tr[data-incidencia='true'] { background: color-mix(in srgb, var(--aviso) 10%, transparent); }

td button {
  width: auto;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* --- Insignias ----------------------------------------------------------- */

.insignia {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.insignia[data-tono='aviso'] { color: var(--aviso); }
.insignia[data-tono='error'] { color: var(--error); }
.insignia[data-tono='neutro'] { color: var(--texto-suave); }
.insignia[data-tono='exito'] { color: var(--exito); }

/* --- Panel lateral de correccion ---------------------------------------- */

dialog {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  padding: var(--espacio);
  max-width: 520px;
  width: calc(100% - 2 * var(--espacio));
}

dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

dialog h2 { margin-bottom: 4px; }

.acciones {
  display: flex;
  gap: 12px;
  margin-top: var(--espacio);
}

.acciones button { width: auto; flex: 1; }

textarea {
  font: inherit;
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  margin-bottom: var(--espacio);
  resize: vertical;
}

.vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 28px 16px;
}

.separado-abajo { margin-bottom: 16px; }