/* Menos, pero mejor. Solo modo claro. Un solo color, el naranja, y solo donde hay que actuar
   o mirar: el disparador y lo que supera θ. Lo demás es tinta, papel y superficies blancas. */
:root {
  --papel: #f1f0ec;
  --superficie: #ffffff;
  --hundido: #f6f5f2;
  --tinta: #1d1d1b;
  --gris: #66655f;
  --gris-claro: #aeaca5;
  --linea: #e4e2dc;
  --naranja: #e05a1a;
  --naranja-hundido: #c64c12;
  --bien: #3f8a55;
  --aviso: #c28a12;
  --visor: #161615;
  --radio: 18px;
  --radio-chico: 12px;
  --letra: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Un `display` propio le gana al atributo `hidden`: sin esto un elemento oculto se sigue pintando. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 17px/1.5 var(--letra); -webkit-font-smoothing: antialiased;
}
h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
button, input { font: inherit; color: inherit; }
output { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── barra superior ── */
.barra-superior {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 1560px; margin: 0 auto; padding: 24px 32px 8px;
}
/* Solo el nombre, lo que hay en la galería y la sesión. */
.marca { display: grid; gap: 2px; }
.nombre-producto { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.estado { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gris); font-size: 15px; }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-claro); }
.led.encendido { background: var(--bien); }
.led.error { background: var(--naranja); }

/* ── tres superficies redondeadas ── */
.rejilla {
  display: grid; grid-template-columns: 520px 340px minmax(0, 1fr); gap: 20px; align-items: start;
  max-width: 1560px; margin: 0 auto; padding: 20px 32px 32px;
}
.columna { background: var(--superficie); border-radius: var(--radio); padding: 28px; min-width: 0; }
/* Sin rostro analizado, la columna del medio no existe y los candidatos se ensanchan. */
.rejilla:has(.analisis[hidden]) { grid-template-columns: 520px minmax(0, 1fr); }

/* ── selector de modo: tres píldoras ── */
.modos { display: flex; gap: 6px; padding: 5px; margin-bottom: 22px; background: var(--hundido); border-radius: 999px; }
.modo {
  flex: 1; padding: 11px 0; border: 0; border-radius: 999px; background: none;
  color: var(--gris); font-size: 17px; font-weight: 500; cursor: pointer;
}
.modo:hover { color: var(--tinta); }
.modo.activo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* ── visor ── */
.visor {
  position: relative; aspect-ratio: 4 / 3; background: var(--visor);
  border-radius: var(--radio); overflow: hidden;
}
.visor video, .visor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Solo la cámara frontal se ve como un espejo; la trasera se ve tal cual, como la ve el agente. */
.visor video.espejo { transform: scaleX(-1); }
/* Cuadro congelado al disparar (app.js, congelar): encima del vídeo, igual de encuadrado. */
.visor .congelado { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visor .congelado.espejo { transform: scaleX(-1); }
/* Destello del obturador. */
.visor.disparo::after {
  content: ""; position: absolute; inset: 0; background: #fff; pointer-events: none;
  animation: destello 220ms ease-out forwards;
}
@keyframes destello { from { opacity: .7; } to { opacity: 0; } }
/* Botones que flotan sobre el vídeo. */
.flotante {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(22, 22, 21, .7); color: #fff;
  font-size: 14px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.girar { right: 10px; bottom: 10px; }
.boton-ajustes, .volver { display: none; }
.sin-camara {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 28px;
  color: #d4d2cc; text-align: center; font-size: 16px;
}

/* ── disparador: el único botón redondo y el único naranja ── */
.disparo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px 0 4px; }
.disparador {
  display: grid; place-items: center; width: 84px; height: 84px; padding: 0;
  border: 2px solid var(--linea); border-radius: 50%; background: var(--superficie); cursor: pointer;
}
.disparador span {
  width: 62px; height: 62px; border-radius: 50%; background: var(--naranja);
  transition: transform .12s ease, background .12s ease;
}
.disparador:hover:not(:disabled) span { background: var(--naranja-hundido); }
.disparador:active:not(:disabled) span { transform: scale(.92); }
.disparador:disabled { cursor: not-allowed; }
.disparador:disabled span { background: var(--gris-claro); }
.disparador.ocupado span { animation: latido 1s ease-in-out infinite; }
.etiqueta-disparo { font-size: 17px; font-weight: 500; }

/* ── archivo ── */
.soltar {
  position: relative; display: grid; place-items: center; align-content: center; gap: 8px;
  aspect-ratio: 4 / 3; padding: 24px; background: var(--hundido);
  border: 2px dashed var(--linea); border-radius: var(--radio-chico); text-align: center; cursor: pointer;
}
.soltar.encima { border-color: var(--naranja); border-style: solid; }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar-titulo { font-size: 19px; font-weight: 600; }
.soltar-sub { color: var(--gris); font-size: 15px; }

/* ── botones y formulario ── */
.boton {
  display: inline-flex; justify-content: center; align-items: center; flex: 1;
  padding: 13px 18px; border: 0; border-radius: var(--radio-chico);
  background: var(--hundido); font-weight: 500; cursor: pointer;
}
.boton:hover:not(:disabled) { background: var(--linea); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.primario { width: 100%; background: var(--tinta); color: #fff; }
.boton.primario:hover:not(:disabled) { background: #3a3a37; }

.registro { display: grid; gap: 16px; }
.acciones-foto { display: flex; gap: 10px; }
.campos { display: grid; gap: 14px; }
.campos label { display: grid; gap: 6px; }
.campos span { font-size: 15px; font-weight: 500; color: var(--gris); }
/* width + min-width: sin esto el campo usa el ancho propio del navegador (~20 caracteres) y dos
   lado a lado se salen de la pantalla del teléfono. */
.campos input {
  width: 100%; min-width: 0; padding: 13px 16px; border: 2px solid transparent;
  border-radius: var(--radio-chico); background: var(--hundido);
}
.campos label { min-width: 0; }
.campos input:focus { outline: 0; border-color: var(--tinta); background: var(--superficie); }
.casilla { display: flex; gap: 12px; align-items: flex-start; color: var(--gris); font-size: 16px; }
.casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinta); }
.mensaje { margin: 0; padding: 14px 16px; border-radius: var(--radio-chico); background: #e8f3eb; font-size: 16px; }
.mensaje.error { background: #fbe9df; }
.nota { margin: 0; color: var(--gris); font-size: 15px; }

/* ── parámetros (plegables) ── */
.ajustes { margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--hundido); }
.ajustes summary {
  display: flex; justify-content: space-between; align-items: center; color: var(--gris);
  font-size: 16px; font-weight: 500; cursor: pointer; list-style: none;
}
.ajustes summary::-webkit-details-marker { display: none; }
.ajustes summary::after { content: "+"; font-size: 22px; line-height: 1; }
.ajustes[open] summary::after { content: "−"; }
.ajustes-cuerpo { display: grid; gap: 20px; margin-top: 18px; }
.deslizador { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: 14px; }
.rotulo { font-size: 16px; color: var(--gris); }
.deslizador output { text-align: right; font-size: 18px; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--linea); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--linea); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--tinta);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--tinta);
}
.segmentos { grid-column: 2 / -1; display: flex; gap: 4px; padding: 4px; background: var(--hundido); border-radius: 999px; }
.segmentos label { flex: 1; cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos span { display: block; padding: 8px 0; border-radius: 999px; text-align: center; font-size: 15px; color: var(--gris); }
.segmentos input:checked + span { background: var(--tinta); color: #fff; }
.segmentos input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* ── columna del medio: el rostro y su calidad ── */
.analisis { display: flex; flex-direction: column; gap: 16px; }
.analisis h2 { display: flex; justify-content: space-between; align-items: baseline; }
.analisis h2:not(:first-child) { margin-top: 10px; }
canvas { width: 100%; border-radius: var(--radio-chico); background: var(--visor); }
.alineado { display: flex; gap: 16px; align-items: center; }
.alineado img { width: 96px; height: 96px; border-radius: var(--radio-chico); }
.alineado p { margin: 0; color: var(--gris); font-size: 15px; }
#calidad-nivel {
  padding: 4px 14px; border-radius: 999px; background: #e8f3eb; color: var(--bien);
  font-size: 15px; font-weight: 600;
}
#calidad-nivel:empty { display: none; }
#calidad-nivel.aceptable { background: #faf1dc; color: #8a6208; }
#calidad-nivel.baja { background: #fbe9df; color: var(--naranja-hundido); }

/* Pilotos: una luz y una lectura por medida, como los indicadores de un aparato. */
.pilotos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pilotos li {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 16px; background: var(--hundido); border-radius: var(--radio-chico); font-size: 16px;
}
.pilotos i { width: 12px; height: 12px; border-radius: 50%; background: var(--bien); }
.pilotos .aviso-l i { background: var(--aviso); }
.pilotos .mal i { background: var(--naranja); }
.pilotos small { color: var(--gris); font-size: 15px; font-variant-numeric: tabular-nums; }
.pilotos .motivo { grid-column: 2 / -1; color: var(--gris); font-size: 14px; }
.pie { margin: 0; color: var(--gris); font-size: 14px; }

/* ── candidatos ── */
.resultados h2 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.contador { font-size: 16px; font-weight: 400; color: var(--gris); }
.revision {
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radio-chico);
  background: var(--hundido); color: var(--gris); font-size: 16px;
}
.aviso { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radio-chico); background: #fbe9df; font-size: 16px; }

.candidatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.candidatos .vacio { padding: 60px 0; color: var(--gris); text-align: center; }
.candidato {
  display: grid; grid-template-columns: 30px 72px minmax(0, 1fr) 240px; gap: 18px; align-items: center;
  padding: 12px 18px 12px 12px; border-radius: var(--radio-chico); animation: entrar .2s ease-out both;
}
.candidato:hover { background: var(--hundido); }
.candidato.supera { background: #fdf1ea; }
.rango { color: var(--gris-claro); font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; }
.candidato img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radio-chico); background: var(--linea); }
/* Sin consultar al Registro Civil no hay foto: el índice no la tiene. */
.candidato .sin-foto {
  display: grid; place-items: center; width: 72px; height: 72px; box-sizing: border-box;
  border: 1.5px dashed var(--linea); border-radius: var(--radio-chico);
  color: var(--gris-claro); font-size: 12px; text-align: center; line-height: 1.2;
}
.consultar { margin: 0 0 16px; }
.nombre { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.dato { color: var(--gris); font-size: 15px; }

.similitud { display: grid; grid-template-columns: 1fr 76px; gap: 14px; align-items: center; }
.similitud strong { font-size: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* La escala lleva marcado el umbral θ: se ve de un vistazo a qué distancia está cada uno. */
.escala { position: relative; height: 8px; border-radius: 999px; background: var(--linea); }
.escala span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--gris-claro); }
.escala .theta { position: absolute; top: -5px; bottom: -5px; width: 2px; border-radius: 2px; background: var(--tinta); }
.candidato.supera .escala span { background: var(--naranja); }
.candidato:not(.supera) { color: var(--gris); }
.candidato:not(.supera) .nombre { font-weight: 500; }
.candidato:not(.supera) img { opacity: .6; filter: grayscale(1); }

/* ── marca del agente tras comparar: solo queda en la auditoría ── */
.marcas { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.marcas button {
  padding: 6px 12px; border: 1.5px solid var(--linea); border-radius: 999px;
  background: var(--superficie); color: var(--tinta); font-size: 14px; cursor: pointer;
}
.marcas button:hover:not(:disabled) { border-color: var(--tinta); }
.marcas button.elegida { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.marcas button:disabled { opacity: .5; cursor: wait; }

/* ── tiempos ── */
.tiempos {
  display: grid; grid-template-columns: auto minmax(160px, 420px) 1fr; gap: 20px; align-items: center;
  max-width: 1496px; margin: 0 auto 32px; padding: 20px 28px;
  background: var(--superficie); border-radius: var(--radio);
}
.tiempos .rotulo { color: var(--tinta); font-weight: 600; }
.barra-tiempo { display: flex; height: 10px; gap: 3px; }
.barra-tiempo span { height: 100%; border-radius: 999px; background: var(--tinta); }
.barra-tiempo span:nth-child(2) { opacity: .75; }
.barra-tiempo span:nth-child(3) { opacity: .55; }
.barra-tiempo span:nth-child(4) { opacity: .38; }
.barra-tiempo span:nth-child(5) { opacity: .22; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; color: var(--gris); font-size: 15px; }
.leyenda b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
#cronometro { grid-column: 2 / -1; }

@keyframes entrar { from { opacity: 0; } }
@keyframes latido { 50% { transform: scale(.86); } }
@media (prefers-reduced-motion: reduce) { .candidato, .disparador.ocupado span { animation: none; } }

/* Pantallas medianas: siguen las tres columnas (el rostro en medio), más estrechas, y la barra
   de similitud se acorta para que el nombre del candidato quepa en una línea. */
@media (max-width: 1640px) {
  .rejilla { grid-template-columns: 440px 290px minmax(0, 1fr); gap: 16px; padding: 16px 24px 28px; }
  .rejilla:has(.analisis[hidden]) { grid-template-columns: 440px minmax(0, 1fr); }
  .barra-superior { padding: 22px 24px 6px; }
  .columna { padding: 24px; }
  .candidato { grid-template-columns: 24px 60px minmax(0, 1fr) 170px; gap: 14px; }
  .candidato img, .candidato .sin-foto { width: 60px; height: 60px; }
  .nombre { font-size: 17px; }
  .similitud { grid-template-columns: 1fr 66px; gap: 10px; }
  .similitud strong { font-size: 18px; }
  .alineado img { width: 80px; height: 80px; }
  .pilotos li { padding: 10px 14px; font-size: 15px; }
}
/* Por debajo ya no caben tres: el rostro va debajo de la cámara. */
@media (max-width: 1260px) {
  .rejilla, .rejilla:has(.analisis[hidden]) { grid-template-columns: 420px minmax(0, 1fr); }
  .analisis { grid-column: 1; }
  .resultados { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 1100px) {
  .rejilla, .rejilla:has(.analisis[hidden]) { grid-template-columns: 400px minmax(0, 1fr); }
  .candidato { grid-template-columns: 26px 60px minmax(0, 1fr); }
  .candidato img, .candidato .sin-foto { width: 60px; height: 60px; }
  .similitud { grid-column: 2 / -1; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .rejilla, .rejilla:has(.analisis[hidden]) { display: grid; grid-template-columns: 1fr; padding: 12px 16px 24px; gap: 14px; }
  .analisis, .resultados { grid-column: auto; grid-row: auto; }
  .columna { padding: 20px; }
  .barra-superior { padding: 18px 16px 4px; flex-wrap: wrap; }
  .candidato { grid-template-columns: 24px 56px minmax(0, 1fr); gap: 12px; }
  .candidato img, .candidato .sin-foto { width: 56px; height: 56px; }
  .similitud { grid-column: 2 / -1; }
  .tiempos { grid-template-columns: 1fr; margin: 0 16px 24px; }
  #cronometro { grid-column: auto; }
  /* En el teléfono: cámara → candidatos → análisis. Lo que el agente necesita va primero. */
  .captura { order: 1; }
  .resultados { order: 2; scroll-margin-top: 12px; }
  .analisis { order: 3; }
  /* «Consultar Registro Civil» queda pegado abajo mientras se ven los candidatos. */
  .consultar { position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
  /* Registrar, en corto: que foto, datos y botón quepan casi en una pantalla. */
  .registro { gap: 10px; }
  .registro .visor { aspect-ratio: auto; height: 34vh; }
  .registro .campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
  .registro .campos label:first-child { grid-column: 1 / -1; }
  .registro .campos label { gap: 2px; }
  .registro .campos span { font-size: 13px; }
  .registro .campos input { padding: 9px 12px; }
  .registro .boton { padding: 11px 14px; }
  .registro .casilla { font-size: 14px; }
  .registro .nota { display: none; }
  .modos { margin-bottom: 14px; }
}

/* ── acceso y sesión del agente ── */
.acceso {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: var(--papel);
}
.tarjeta-acceso {
  display: grid; gap: 18px; width: min(400px, 100%); padding: 32px;
  background: var(--superficie); border-radius: var(--radio);
}
.tarjeta-acceso .nota { margin: 0; color: var(--gris); font-size: 15px; }
.sesion {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 4px 4px 18px;
  background: var(--superficie); border-radius: 999px; font-size: 15px;
}
.boton.chico { flex: none; padding: 6px 14px; font-size: 14px; }
@media (max-width: 820px) {
  .marcas { grid-column: 2 / -1; }
}

/* ══ Teléfono: proporciones de app (márgenes de 16 px, tarjetas de 24 px, cámara enorme) ══ */
@media (max-width: 820px) {
  :root { --radio: 24px; --radio-chico: 14px; }
  /* Red de seguridad: nada mueve la página de lado. «clip» y no «hidden», que rompería el
     botón pegado de «Consultar Registro Civil». */
  html, body { overflow-x: clip; }
  .barra-superior { min-height: 64px; padding: 12px 16px 4px; flex-wrap: nowrap; }
  .nombre-producto { font-size: 22px; }
  .estado { font-size: 13px; }
  .estado .modelo { display: none; }
  .sesion { padding: 4px 4px 4px 14px; gap: 8px; font-size: 14px; }
  .sesion #agente-nombre { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .boton.chico { min-height: 40px; padding: 8px 14px; border-radius: 12px; }
  .rejilla, .rejilla:has(.analisis[hidden]) { padding: 8px 16px 24px; gap: 16px; }
  .columna { padding: 16px; }
  h2 { font-size: 22px; font-weight: 700; }
  .modos { margin-bottom: 12px; }
  .modo { padding: 10px 0; font-size: 16px; }

  .soltar { aspect-ratio: 3 / 4; max-height: 60vh; }
  .barra-superior { padding-top: calc(12px + env(safe-area-inset-top)); }

  .ajustes { margin-top: 14px; padding-top: 14px; }
  .revision { font-size: 14px; padding: 12px 14px; }
}

/* ══ Teléfono: flujo lineal ══
   1) La cámara a pantalla completa, con todo flotando encima (como la app de cámara).
   2) Al buscar, los resultados REEMPLAZAN a la cámara; «Nueva búsqueda» vuelve.
   app.js pone body[data-modo] (cámara / archivo / registro) y body.movil-resultado. */
@media (max-width: 820px) {
  /* ── 1) cámara ── */
  body[data-modo="camara"]:not(.movil-resultado) { background: #000; }
  body[data-modo="camara"]:not(.movil-resultado) .barra-superior {
    position: fixed; top: 0; left: 0; right: 0; z-index: 5; color: #fff;
    padding: calc(12px + env(safe-area-inset-top)) 16px 32px;
    background: linear-gradient(rgba(0, 0, 0, .6), transparent);
  }
  body[data-modo="camara"]:not(.movil-resultado) .estado { color: rgba(255, 255, 255, .85); }
  body[data-modo="camara"]:not(.movil-resultado) .sesion { background: rgba(0, 0, 0, .35); color: #fff; }
  body[data-modo="camara"]:not(.movil-resultado) .sesion .boton {
    background: rgba(255, 255, 255, .18); color: #fff;
  }
  body[data-modo="camara"]:not(.movil-resultado) .rejilla { padding: 0; }
  body[data-modo="camara"]:not(.movil-resultado) .captura { padding: 0; background: none; border-radius: 0; }
  body[data-modo="camara"]:not(.movil-resultado) #vista-camara .visor {
    position: fixed; inset: 0; height: 100dvh; aspect-ratio: auto; border-radius: 0;
  }
  body[data-modo="camara"]:not(.movil-resultado) .flotante {
    position: fixed; top: calc(84px + env(safe-area-inset-top)); bottom: auto; z-index: 4;
  }
  body[data-modo="camara"]:not(.movil-resultado) .girar { right: 16px; }
  body[data-modo="camara"]:not(.movil-resultado) .boton-ajustes { display: flex; left: 16px; }
  body[data-modo="camara"]:not(.movil-resultado) .modos {
    position: fixed; left: 50%; bottom: calc(124px + env(safe-area-inset-bottom)); z-index: 4;
    width: min(320px, calc(100% - 32px)); margin: 0; transform: translateX(-50%);
    background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  body[data-modo="camara"]:not(.movil-resultado) .modo { color: rgba(255, 255, 255, .8); }
  body[data-modo="camara"]:not(.movil-resultado) .modo.activo { background: #fff; color: var(--tinta); }
  body[data-modo="camara"]:not(.movil-resultado) .disparo {
    position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 4; margin: 0;
  }
  body[data-modo="camara"]:not(.movil-resultado) .etiqueta-disparo { display: none; }
  body[data-modo="camara"]:not(.movil-resultado) .disparador {
    width: 78px; height: 78px; border: 4px solid #fff; background: rgba(255, 255, 255, .25);
  }
  body[data-modo="camara"]:not(.movil-resultado) .disparador span { width: 58px; height: 58px; }
  /* Los ajustes, como una hoja que sube desde abajo al tocar «Ajustes». */
  body[data-modo="camara"]:not(.movil-resultado) .ajustes { display: none; }
  body[data-modo="camara"].ajustes-abiertos:not(.movil-resultado) .ajustes {
    display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 6; margin: 0; padding: 18px; border: 0; border-radius: 24px;
    background: var(--superficie); box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  }

  /* ── 2) resultados en lugar de la cámara ── */
  body:not(.movil-resultado) .resultados,
  body:not(.movil-resultado) .analisis,
  body:not(.movil-resultado) .tiempos { display: none !important; }
  body.movil-resultado .captura { display: none; }
  body.movil-resultado .volver {
    display: flex; align-items: center; width: 100%; margin: 0 0 14px; padding: 12px 16px;
    border: 0; border-radius: var(--radio-chico); background: var(--tinta); color: #fff;
    font-size: 16px; font-weight: 600; cursor: pointer;
  }
}

/* ── comparación lado a lado ── */
.ver-grande { padding: 0; border: 0; background: none; border-radius: var(--radio-chico); cursor: zoom-in; }
.comparar {
  width: min(900px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 20px;
  border: 0; border-radius: var(--radio); background: var(--superficie); color: var(--tinta);
}
.comparar::backdrop { background: rgba(0, 0, 0, .65); }
.comparar-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--gris); font-size: 15px; }
.comparar-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comparar-fotos figure { display: grid; gap: 6px; margin: 0; }
.comparar-fotos img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio-chico); background: var(--visor);
}
.comparar-fotos figcaption { color: var(--gris); font-size: 14px; text-align: center; }
.comparar-datos { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 10px; }
.comparar-datos strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.comparar .marcas { margin-bottom: 10px; }
.comparar .marcas button { flex: 1; padding: 12px 8px; font-size: 15px; }
.comparar .nota { margin-bottom: 12px; font-size: 14px; }
.comparar-nav { display: flex; gap: 10px; }
@media (max-width: 820px) {
  .comparar {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }
  .comparar-fotos { gap: 8px; }
  .candidato img, .candidato .sin-foto, .candidato .ver-grande { width: 64px; height: 64px; }
  .candidato { grid-template-columns: 24px 64px minmax(0, 1fr); }
}

/* ── elegir a quién buscar ── */
.elegir-marco { display: grid; place-items: center; }
.elegir-foto { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.elegir-foto img {
  display: block; max-width: 100%; max-height: calc(100dvh - 140px); border-radius: var(--radio-chico);
}
.cara {
  position: absolute; padding: 0; border: 3px solid #fff; border-radius: 12px; background: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); cursor: pointer;
}
.cara:hover, .cara:focus-visible { border-color: var(--naranja); outline: 0; }
.cara.buscada { border-color: var(--naranja); }
.cara span {
  position: absolute; top: -14px; left: -14px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--tinta); color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.cara.buscada span { background: var(--naranja); }
.otra-cara { width: 100%; margin: 0 0 10px; }
@media (max-width: 820px) {
  .elegir-foto img { max-height: calc(100dvh - 110px); }
}