/* NeuralAudit — estilos compartidos. Tema oscuro, acento azul (docs/05-front.md).
   Todos los colores salen de estas variables. */
:root {
  --fondo: #121418;
  --superficie: #1b1e24;
  --superficie-2: #242832;
  --borde: #313642;
  --texto: #e7e9ee;
  --texto-suave: #9aa3b2;

  --acento: #3b82f6;
  --acento-hover: #60a5fa;
  --acento-texto: #ffffff;

  /* Estados */
  --igual: #22c55e;
  --empeoro: #ef4444;   /* rojo: errores */
  --a-mejor: #f97316;   /* naranja: A mejor = B empeoró (distinto del ámbar de sin captura) */
  --mejoro: #38bdf8;    /* B mejor */
  --sin-captura: #f59e0b;
  --pendiente: #6b7280;

  --radio: 8px;
  --alto-barra: 48px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 var(--fuente);
}

a { color: var(--acento-hover); }

h1, h2, h3 { margin: 0 0 .5em; font-weight: 600; }

[hidden] { display: none !important; }

/* ---------- Controles ---------- */

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .55em 1.1em;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}
button:hover, .boton:hover { border-color: var(--texto-suave); }
button:active, .boton:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }

.boton-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}
.boton-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }

.boton-texto {
  background: none;
  border-color: transparent;
  color: var(--texto-suave);
}
.boton-texto:hover { color: var(--texto); border-color: transparent; }

input, select, textarea {
  width: 100%;
  padding: .55em .75em;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

label { display: block; margin-bottom: .3em; color: var(--texto-suave); font-size: .9em; }

.error { color: var(--empeoro); font-size: .9em; min-height: 1.4em; margin: .4em 0 0; }

/* ---------- Barra superior ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--alto-barra);
  padding: 0 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--texto);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
}
.marca img { width: 22px; height: 22px; }

.menu { display: flex; gap: .25rem; }
.menu a {
  padding: .35em .8em;
  border-radius: var(--radio);
  color: var(--texto-suave);
  text-decoration: none;
}
.menu a:hover { color: var(--texto); background: var(--superficie-2); }
.menu a[aria-current="page"] { color: var(--texto); background: var(--superficie-2); }

.barra-derecha {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  color: var(--texto-suave);
}

.progreso-barra {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: .92em;
}
.progreso-barra:hover { color: var(--texto); }
.progreso-barra.completo { color: var(--igual); }

.mini-barra {
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: var(--superficie-2);
  overflow: hidden;
}
.mini-barra > span {
  display: block;
  height: 100%;
  background: var(--acento);
  transition: width .3s;
}
.completo .mini-barra > span { background: var(--igual); }

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 .35em;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--fondo);
  color: var(--texto-suave);
  font: .8em/1.5 var(--mono);
  text-align: center;
}

/* Botones pegados tipo interruptor (Día / Noche). */
.segmentado { display: inline-flex; }
.segmentado button { border-radius: 0; }
.segmentado button:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.segmentado button:last-child { border-radius: 0 var(--radio) var(--radio) 0; margin-left: -1px; }
.segmentado button[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}
.segmentado button[aria-pressed="true"] kbd { color: var(--acento-texto); border-color: transparent; background: transparent; }

/* Lienzo de una foto con zoom (zoom.js). Siempre con la proporción de la foto (2688×1520); el ancho lo
   pone cada página. */
.lienzo {
  --proporcion: 2688 / 1520;
  position: relative;
  aspect-ratio: var(--proporcion);
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
}
.lienzo.con-zoom { cursor: grab; }
.lienzo.arrastrando { cursor: grabbing; }
.lienzo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}

/* ---------- Comparación: barra de datos, sin foto y veredicto ----------
   Los usan el comparador (index.html) y la ventana emergente (ventana.js: registro y mosaico). */

/* Botón que queda prendido (Zoom doble): azul como el Día/Noche activo. */
.interruptor[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}
.interruptor[aria-pressed="true"] kbd { color: var(--acento-texto); border-color: transparent; background: transparent; }

.datos {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 2rem;
  padding: 0 .1rem .35rem;
  font-size: .92em;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
}
.datos .lado {
  padding: 0 .5em;
  border-radius: 4px;
  background: var(--superficie-2);
  color: var(--texto);
  font-weight: 700;
}
.datos .alerta { color: var(--sin-captura); }

.sin-foto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px dashed var(--sin-captura);
  border-radius: 6px;
  color: var(--sin-captura);
  font-weight: 600;
  text-align: center;
  background: color-mix(in srgb, var(--sin-captura) 8%, #000);
}

.votos { position: relative; display: flex; gap: .6rem; }

.voto {
  min-width: 10.5rem;
  padding: .75em 1.2em;
  border-left: 4px solid var(--c);
  font-size: 1.02em;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .2s;
}
.voto:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 16%, var(--superficie-2)); }
.voto[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 28%, var(--superficie-2));
  border-color: var(--c);
}
/* "Sensación de envío": el botón se hunde y se ilumina mientras se guarda. */
.voto.enviando {
  transform: translateY(2px) scale(.97);
  background: var(--c);
  border-color: var(--c);
  color: #0b0d10;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent);
}
.voto.enviando kbd { background: transparent; border-color: #0b0d1055; color: #0b0d10; }
.voto.sacudida { animation: sacudir .35s; border-color: var(--empeoro); }

@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.sello {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .6rem);
  translate: -50% 0;
  padding: .35em .9em;
  border-radius: 999px;
  background: var(--igual);
  color: #0b0d10;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.sello.visible { animation: sello .65s ease-out; }
.sello.error { background: var(--empeoro); color: #fff; opacity: 1; animation: none; }

@keyframes sello {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: 1; transform: scale(1.08); }
  45% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.estado-revision { flex-basis: 100%; margin: 0; color: var(--texto-suave); font-size: .9em; min-height: 1.3em; }
.estado-revision.aviso { color: var(--sin-captura); }

@media (prefers-reduced-motion: reduce) {
  .voto, .voto.enviando { transform: none; transition: background .15s; }
  .voto.sacudida { animation: none; }
  .sello.visible { animation: none; opacity: 1; }
}

/* ---------- Página ---------- */

.contenido { padding: 1.5rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio) * 1.5);
  padding: 1.5rem;
}

.suave { color: var(--texto-suave); }