:root {
  --fg: #1b1f24;
  --muted: #5b6470;
  --bg: #f6f7f9;
  --card: #ffffff;
  --ok: #1a7f4b;
  --ko: #b3261e;
}

* { box-sizing: border-box; }

/* `[hidden]` del navegador es una regla de baja especificidad: cualquier
   `display` puesto por una clase la gana, y el atributo deja de ocultar. Como
   media docena de bloques de esta app se muestran y ocultan con `.hidden` desde
   JS —y varios son `display: grid` o `flex`—, aquí hace falta el !important. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 1.5rem 1rem;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

main { max-width: 40rem; margin: 0 auto; }
/* El backoffice se mira en pantalla grande: sus tablas tienen más columnas. */
main.wide { max-width: 76rem; }

.filters {
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.filters input, .filters select { flex: 0 1 9rem; }
.filters input[type="date"] { flex: 0 0 9.5rem; }

h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1rem; margin: 0 0 .75rem; }

.lead { color: var(--muted); margin-top: 0; }

section {
  background: var(--card);
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

form { display: flex; gap: .5rem; flex-wrap: wrap; }

input {
  flex: 1 1 12rem;
  padding: .5rem .625rem;
  font: inherit;
  border: 1px solid #c6ccd4;
  border-radius: .375rem;
}

button {
  padding: .5rem 1rem;
  font: inherit;
  color: #fff;
  background: #1b1f24;
  border: 0;
  border-radius: .375rem;
  cursor: pointer;
}

button:hover { background: #333a44; }

dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; }

.ok { color: var(--ok); font-weight: 600; }
.ko { color: var(--ko); font-weight: 600; }

.note { color: var(--muted); font-size: .875rem; }

select {
  flex: 1 1 8rem;
  padding: .5rem .625rem;
  font: inherit;
  border: 1px solid #c6ccd4;
  border-radius: .375rem;
  background: #fff;
}

/* Impresión: se guarda el informe como PDF desde el diálogo del navegador, que
   maqueta texto largo mejor que cualquier librería de PDF en JS y no cuesta
   ninguna dependencia. Solo sale `#print-area`, que se rellena al pulsar. */
@media print {
  body > * { display: none !important; }
  #print-area { display: block !important; }

  body { padding: 0; background: #fff; color: #000; font-size: 11pt; }

  #print-area h1 { font-size: 18pt; margin: 0 0 .25rem; }
  #print-area .portada { margin: 0 0 1rem; font-size: 9pt; color: #444; }
  #print-area .portada-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .125rem 1rem;
    font-size: 10pt;
  }
  #print-area .portada-datos dt { color: #444; }
  #print-area hr { margin: 1rem 0; border: 0; border-top: 1px solid #999; }
  #print-area .informe { max-width: none; margin: 0; padding: 0; border: 0; background: none; }
  #print-area .pie {
    margin-top: 1.5rem;
    padding-top: .5rem;
    font-size: 8.5pt;
    color: #444;
    border-top: 1px solid #ccc;
  }

  /* Nada de cortes a mitad de un título, una tabla o una fila. */
  h1, h2, h3, h4 { break-after: avoid; }
  table, tr, blockquote, pre { break-inside: avoid; }
  a { color: #000; text-decoration: none; }

  @page { margin: 18mm 16mm; }
}

/* Informe IA (HU-15): texto largo, se lee en columna estrecha. */
.informe {
  max-width: 46rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
}
.informe h2 { font-size: 1.125rem; margin: 1.25rem 0 .5rem; }
.informe h3 { font-size: 1rem; margin: 1rem 0 .375rem; }
.informe h4, .informe h5, .informe h6 { font-size: .9375rem; margin: .875rem 0 .25rem; }
.informe > :first-child { margin-top: 0; }
.informe p, .informe li { line-height: 1.6; }
.informe ul, .informe ol { padding-left: 1.25rem; }
.informe table { margin: .75rem 0; }
.informe td, .informe th { text-align: left; }
.informe code {
  padding: .0625rem .25rem;
  font-size: .875em;
  background: #eef1f5;
  border-radius: .25rem;
}
.informe pre {
  overflow-x: auto;
  padding: .75rem;
  background: #eef1f5;
  border-radius: .375rem;
}
.informe pre code { background: none; padding: 0; }
.informe blockquote {
  margin: .75rem 0;
  padding-left: .75rem;
  color: var(--muted);
  border-left: 3px solid #c6ccd4;
}

/* Pantalla de configuración (HU-14): etiqueta, control, pista y su error. */
.campo {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: .25rem .75rem;
  align-items: baseline;
  margin-bottom: .625rem;
}
.campo > label { color: var(--muted); }
/* La ruta del campo en la configuración, para poder localizar un error por su
   nombre interno (`gateway.auth.ciba_private_key`) sin adivinar. */
.campo .ruta {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  opacity: .6;
}
.campo > input, .campo > select, .campo > textarea { width: 100%; }
.campo > textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
  padding: .5rem;
  border: 1px solid #c6ccd4;
  border-radius: .375rem;
}
.campo > .pista, .campo > .campo-error { grid-column: 2; font-size: .8125rem; }
.campo > .pista { color: var(--muted); }
.campo > .campo-error { color: var(--ko); font-weight: 600; }

.escenario { display: flex; gap: .5rem; margin-bottom: .375rem; }
.escenario .sc-nombre { flex: 1 1 12rem; }
.escenario .sc-p95 { flex: 0 0 8rem; }
.escenario .sc-quitar { flex: none; background: transparent; color: var(--muted);
  border: 1px solid #c6ccd4; }

#probe-raw {
  max-height: 16rem;
  overflow: auto;
  padding: .75rem;
  font-size: .8125rem;
  background: #f0f2f5;
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
}

/* Detalle de sesión (HU-12): datos en dos columnas y tarjetas por escenario. */
dl.cols { grid-template-columns: auto 1fr auto 1fr; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .75rem;
}

.card {
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  padding: .75rem;
  background: var(--bg);
}
.card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
  font-weight: 700;
  text-transform: capitalize;
}
.card dl { font-size: .875rem; }

label.inline { display: block; margin: .5rem 0 .75rem; font-size: .9375rem; }
label.inline input { flex: none; margin-right: .375rem; }

.acciones { white-space: nowrap; }
.acciones button {
  padding: .125rem .375rem;
  font-size: .75rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid #c6ccd4;
}
.acciones button:hover { background: #eef1f5; color: var(--fg); }

td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }

#raw-view {
  max-height: 20rem;
  overflow: auto;
  padding: .75rem;
  font-size: .8125rem;
  background: #f0f2f5;
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
}

/* El PIN se lee en voz alta o se teclea en otro móvil: grande y monoespaciado. */
.pin {
  margin: .25rem 0;
  font: 700 2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .25em;
}

h3 { font-size: .9375rem; margin: 1.25rem 0 .5rem; }

/* Controles de la ráfaga en una línea, que el móvil tiene poco ancho. */
.burst {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .9375rem;
}
.burst input { flex: 0 0 4.5rem; }
.burst button { flex: 1 1 auto; }

/* Botón de capturar: se pulsa con una mano, andando, mirando la calle. */
button.big { width: 100%; padding: 1rem; font-size: 1.125rem; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }

#map {
  height: 18rem;
  margin: .75rem 0 .25rem;
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
}

.status {
  margin: .75rem 0;
  padding: .625rem .75rem;
  font-size: .9375rem;
  border-radius: .375rem;
  background: #eef1f5;
}
.status.ok   { background: #e3f6eb; color: #145c37; }
.status.err  { background: #fdeceb; color: #8d1d17; }
.status.warn { background: #fff4d6; color: #7a4a00; }
.status.info { background: #eaf1fb; color: #1c4f8f; }

.dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  vertical-align: baseline;
}
.dot.gps { background: #2bd4a7; }
.dot.net { background: #4f9cff; }

/* Las tablas no deben ensanchar la página en el móvil: scrollan ellas. */
#captures-table, #metrics-table, #closed-table, #list-table { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .375rem .5rem; text-align: right; border-bottom: 1px solid #e2e5ea; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; }
td { font-variant-numeric: tabular-nums; }

/* Captura fallida: se ve que está ahí, sin gritar más que las medidas buenas. */
.ko-row td { color: var(--ko); }

.v-PASA    { color: var(--ok); font-weight: 700; }
.v-FALLA   { color: var(--ko); font-weight: 700; }
.v-REVISAR { color: #7a4a00; font-weight: 700; }

/* Veredictos de LV, mismos colores que el círculo del mapa. UNKNOWN en gris:
   la red no pudo localizar, que no es lo mismo que decir que no estabas. */
.v-TRUE    { color: var(--ok); font-weight: 700; }
.v-PARTIAL { color: #7a4a00; font-weight: 700; }
.v-FALSE   { color: var(--ko); font-weight: 700; }
.v-UNKNOWN { color: var(--muted); font-weight: 700; }

/* Modo simulación: tiene que cantar, para no confundir datos inventados con
   medidas reales del operador. */
.sim {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  font-size: .9375rem;
  color: #7a4a00;
  background: #fff4d6;
  border: 1px solid #e8c574;
  border-radius: .5rem;
}