:root {
  --fondo: #fbfbfa; --texto: #1c1b1a; --suave: #6b6a68;
  --borde: #e3e2e0; --panel: #ffffff;
  --rojo: #b3261e; --ambar: #a56a00; --verde: #1d6b3f; --azul: #1f4b99;
}
* { box-sizing: border-box; }

/* El atributo `hidden` lo aplica el navegador con `display: none`, pero cualquier
   regla de autor con `display` lo pisa: `form { display: flex }` hacía que los dos
   formularios de subida se vieran a la vez y que cambiar de pestaña no hiciera nada
   visible. Con !important, `hidden` vuelve a significar oculto. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--borde); background: var(--panel);
}
h1 { font-size: 1.1rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: .95rem; margin: 0 0 .75rem; }
main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1.5rem; }
.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 1.25rem; margin-bottom: 1.25rem;
}
form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--suave); }
input {
  padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 5px;
  font: inherit; background: var(--fondo);
}
button {
  padding: .5rem .9rem; border: 0; border-radius: 5px; background: var(--texto);
  color: var(--panel); font: inherit; cursor: pointer;
}
button:disabled { opacity: .5; cursor: progress; }
.enlace { background: none; color: var(--azul); padding: 0; font-size: .85rem; }
.ayuda { color: var(--suave); font-size: .85rem; margin: 0 0 .75rem; }
.error { color: var(--rojo); font-size: .85rem; }
code { background: var(--fondo); padding: .1em .35em; border-radius: 3px; font-size: .9em; }

table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .875rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borde); }
th { font-weight: 600; color: var(--suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
tr[data-clicable] { cursor: pointer; }
tr[data-clicable]:hover { background: var(--fondo); }
.vacio { color: var(--suave); text-align: center; padding: 1.5rem; }

.etiqueta { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; }
.procesando { background: #fff4e0; color: var(--ambar); }
.borrador   { background: #e8f3ec; color: var(--verde); }
.fallido    { background: #fbe9e7; color: var(--rojo); }
.recibido   { background: var(--fondo); color: var(--suave); }

.hallazgo { border-left: 3px solid var(--borde); padding: .5rem .75rem; margin-bottom: .5rem; }
.hallazgo.bloqueante { border-color: var(--rojo); }
.hallazgo.observacion { border-color: var(--ambar); }
.hallazgo .regla { font-size: .75rem; color: var(--suave); font-family: ui-monospace, monospace; }
.hallazgo p { margin: .2rem 0 0; font-size: .875rem; }
.barra { height: 4px; background: var(--borde); border-radius: 2px; overflow: hidden; margin: .5rem 0; }
.barra i { display: block; height: 100%; background: var(--azul); transition: width .4s; }

.pestanas { display: flex; gap: .25rem; margin-bottom: .9rem; border-bottom: 1px solid var(--borde); }
.pestana {
  background: none; color: var(--suave); border-radius: 5px 5px 0 0;
  border-bottom: 2px solid transparent; font-size: .85rem; padding: .45rem .8rem;
}
.pestana.activa { color: var(--texto); border-bottom-color: var(--azul); font-weight: 600; }
.modo { flex-direction: column; align-items: stretch; gap: .6rem; }
.modo input[type=file] { padding: .55rem; background: var(--fondo); border: 1px dashed var(--borde); }
.modo button[type=submit] { align-self: flex-start; }
.lista { font-size: .8rem; color: var(--suave); max-height: 11rem; overflow-y: auto; }
.lista div { padding: .18rem 0; border-bottom: 1px solid var(--borde); display: flex; gap: .5rem; }
.lista .num {
  font-family: ui-monospace, monospace; min-width: 3.2rem;
  color: var(--azul); font-weight: 600;
}
.lista .sin { color: var(--ambar); }

/* ── Visor ─────────────────────────────────────────────────────────────────── */
#visor {
  position: fixed; inset: 0; background: rgba(28,27,26,.55);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 50;
}
/* Redundante con la regla global [hidden], y a propósito: este elemento cubre la
   pantalla entera con fondo oscuro, así que si alguna vez deja de ocultarse la
   aplicación se ve completamente en negro. No es un fallo que convenga dejar a una
   sola línea. */
#visor[hidden] { display: none !important; }
.visor-caja {
  background: var(--panel); border-radius: 10px; width: min(72rem, 100%);
  height: min(46rem, 92vh); display: flex; flex-direction: column; overflow: hidden;
}
.visor-cab {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--borde);
}
.visor-cab .ayuda { margin: 0 0 0 .6rem; }
.visor-cuerpo { display: flex; flex: 1; min-height: 0; }
.visor-pagina { flex: 1.6; display: flex; flex-direction: column; background: var(--fondo); min-width: 0; }
.lienzo {
  flex: 1; position: relative; overflow: auto; display: flex;
  align-items: flex-start; justify-content: center; padding: 1rem;
}
.lienzo img { display: block; max-width: 100%; height: auto;
  box-shadow: 0 1px 6px rgba(0,0,0,.15); }
/* El marco se ajusta a la imagen, y los resaltes se posicionan en porcentaje
   sobre él: así encajan a cualquier zoom sin recalcular nada. */
.lienzo .marco { position: relative; display: inline-block; line-height: 0; }
/* El resaltado se posiciona en porcentaje: el bbox viene normalizado 0..1, así que
   funciona a cualquier zoom sin recalcular nada. */
.lienzo .resalte {
  position: absolute; background: rgba(255,214,0,.35);
  outline: 2px solid #d19d00; border-radius: 2px; pointer-events: none;
}
.visor-nav {
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  padding: .5rem; border-top: 1px solid var(--borde); font-size: .8rem; color: var(--suave);
}
.visor-lado {
  flex: 1; border-left: 1px solid var(--borde); padding: 1rem;
  overflow-y: auto; min-width: 0;
}
.visor-lado h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--suave); margin: 0 0 .4rem; }
.visor-lado blockquote {
  margin: 0 0 1.2rem; padding: .6rem .8rem; background: #fffbe6;
  border-left: 3px solid #d19d00; font-size: .875rem; border-radius: 0 4px 4px 0;
}
.visor-lado pre {
  white-space: pre-wrap; word-break: break-word; font-size: .75rem;
  color: var(--suave); font-family: ui-monospace, monospace; margin: 0;
}
.hallazgo .ver { font-size: .75rem; margin-top: .35rem; }
.hallazgo .acciones { display: flex; gap: .6rem; margin-top: .4rem; align-items: center; }
.hallazgo .decidido { font-size: .72rem; color: var(--verde); }

.acciones-exp { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
/* Reprocesar reemplaza el resultado anterior: se presenta como acción secundaria
   para que no compita visualmente con la descarga del informe. */
button.secundario {
  background: var(--panel); color: var(--texto); border: 1px solid var(--borde);
}
button.secundario:hover { background: var(--fondo); }