/* =========================================================================
   LIMASOL SRL — Verificador de documentos (verificar.html)
   Se apoya en las variables de styles.css (colores, espacios, radios).
   Metodología BEM, mobile-first, igual que el resto del sitio.
   ========================================================================= */

/* Tonos ámbar para el estado "vencido / reemplazado".
   #8A5300 sobre #FFF4DC = 6.1:1 (cumple AA). */
:root{
  --color-amber-100:#FFF4DC;
  --color-amber-500:#E6A01E;
  --color-amber-700:#8A5300;
  --color-red-100:#FBEAE8;
}

/* -------------------------------------------------------------------------
   1. Encabezado de la sección
   ------------------------------------------------------------------------- */
.verificador{ padding-top:var(--space-3); }
.verificador__intro{ max-width:62ch; margin-bottom:var(--space-5); }
.verificador__kicker{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:var(--fs-sm); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-green-700); background:var(--color-green-100);
  padding:.35em .9em; border-radius:999px; margin-bottom:var(--space-3);
}
.verificador__intro h1{ font-size:var(--fs-2xl); text-wrap:balance; }
.verificador__lead{ font-size:var(--fs-lg); color:var(--color-text-muted); margin:0; }

/* -------------------------------------------------------------------------
   2. Los dos métodos lado a lado (apilados en el teléfono)
   ------------------------------------------------------------------------- */
.verificador__metodos{
  display:grid; gap:var(--space-4); grid-template-columns:1fr;
}
@media (min-width:880px){
  .verificador__metodos{ grid-template-columns:1fr 1fr; align-items:start; }
}

.metodo{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-3); display:flex; flex-direction:column; gap:var(--space-3);
  min-width:0;
}
@media (min-width:640px){ .metodo{ padding:var(--space-4); } }

.metodo__cabecera{ display:flex; gap:var(--space-2); align-items:flex-start; }
.metodo__numero{
  flex-shrink:0; width:2rem; height:2rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-green-700); color:#fff; font-weight:800; font-size:.95rem;
}
.metodo__titulo{ font-size:var(--fs-lg); margin:0 0 .2em; }
.metodo__texto{ margin:0; color:var(--color-text-muted); font-size:var(--fs-sm); }

.metodo__acciones{ display:grid; gap:var(--space-2); }
.metodo__archivo{ cursor:pointer; }
/* El input real está oculto; el foco se muestra en su etiqueta-botón */
#archivo-qr:focus-visible + label,
.metodo__acciones input:focus-visible ~ .metodo__archivo{ outline:3px solid var(--color-focus); outline-offset:2px; }

.metodo__aviso{
  margin:0; font-size:var(--fs-sm); line-height:1.5;
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  background:var(--color-amber-100); color:var(--color-amber-700);
  border:1px solid var(--color-amber-500);
}
.metodo__aviso[data-tipo="info"]{ background:var(--color-blue-100); color:var(--color-blue-700); border-color:var(--color-blue-500); }

/* Botón principal del verificador: verde institucional (no rojo de venta) */
.boton--verificar{ background:var(--color-green-700); color:#fff; }
.boton--verificar:hover{ background:var(--color-green-900); color:#fff; }
.boton--verificar[disabled]{ opacity:.6; cursor:progress; transform:none; }

/* -------------------------------------------------------------------------
   3. Visor de la cámara
   ------------------------------------------------------------------------- */
.visor{
  position:relative; width:100%; max-width:100%; aspect-ratio:1/1; max-height:420px;
  margin-inline:auto; border-radius:var(--radius-md); overflow:hidden;
  background:#0E1A13;
}
.visor__video{ position:absolute; inset:0; }
.visor__video video{ width:100% !important; height:100% !important; object-fit:cover; }
/* Sombra y marco que dibuja la librería: los dejamos con el verde de marca */
.visor__video #qr-shaded-region{ border-color:rgba(14,26,19,.55) !important; }

.visor__reposo{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-2);
  color:rgba(255,255,255,.78); text-align:center; padding:var(--space-3);
}
.visor[data-estado="activo"] .visor__reposo{ display:none; }

.visor__icono{
  width:72px; height:72px; fill:none; stroke:var(--color-lime-500); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.visor__leyenda{ font-size:var(--fs-sm); max-width:26ch; }

/* Esquinas de encuadre (decorativas) */
.visor__esquinas{
  position:absolute; inset:16%; pointer-events:none;
  background:
    linear-gradient(var(--color-green-500),var(--color-green-500)) top left / 28px 3px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) top left / 3px 28px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) top right / 28px 3px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) top right / 3px 28px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) bottom left / 28px 3px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) bottom left / 3px 28px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) bottom right / 28px 3px no-repeat,
    linear-gradient(var(--color-green-500),var(--color-green-500)) bottom right / 3px 28px no-repeat;
}

/* Línea de escaneo animada mientras la cámara está activa */
.visor[data-estado="activo"]::after{
  content:""; position:absolute; left:15%; right:15%; height:2px; top:15%;
  background:var(--color-lime-500); box-shadow:0 0 12px var(--color-lime-500);
  animation:barrido 2.2s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes barrido{ to{ top:85%; } }
@media (prefers-reduced-motion:reduce){
  .visor[data-estado="activo"]::after{ animation:none; top:50%; }
}

/* -------------------------------------------------------------------------
   4. Formulario de ingreso manual
   ------------------------------------------------------------------------- */
.formulario-codigo{ display:grid; gap:var(--space-3); }
.formulario-codigo input{
  font-family:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.8em .9em;
}
.formulario-codigo input::placeholder{ color:#9AA59F; letter-spacing:.06em; }
.formulario-codigo input[aria-invalid="true"]{ border-color:var(--color-red-700); }

/* Desglose visual del código */
.ejemplo-codigo{
  margin:0; padding:var(--space-3); border-radius:var(--radius-sm);
  background:var(--color-bg-alt); border:1px dashed var(--color-border);
}
.ejemplo-codigo figcaption{
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:var(--space-2);
}
.ejemplo-codigo__partes{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.35rem; }
.ejemplo-codigo__partes span{ display:flex; flex-direction:column; align-items:center; }
.ejemplo-codigo__partes i{ font-style:normal; color:var(--color-text-muted); line-height:1.9; }
.ejemplo-codigo__partes b{
  font-family:ui-monospace, "SF Mono", Consolas, monospace; font-size:1.05rem;
  background:#fff; border:1px solid var(--color-border); border-radius:4px; padding:.15em .45em;
}
.ejemplo-codigo__partes small{ font-size:.72rem; color:var(--color-text-muted); margin-top:.2em; }

/* -------------------------------------------------------------------------
   5. Tarjeta de resultado
   ------------------------------------------------------------------------- */
.resultado{
  margin-top:var(--space-5); border-radius:var(--radius-lg); overflow:hidden;
  border:2px solid var(--color-border); background:#fff;
  scroll-margin-top:120px; outline:none;
}
.resultado:focus-visible{ outline:3px solid var(--color-focus); outline-offset:3px; }

.resultado__banda{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4) var(--space-4);
}
.resultado__icono{ width:3.2rem; height:3.2rem; flex-shrink:0; stroke-width:2; }
.resultado__estado{
  margin:0; font-size:var(--fs-2xl); font-weight:800; letter-spacing:.02em; line-height:1.1;
}
.resultado__resumen{ margin:.25em 0 0; font-size:var(--fs-base); }

.resultado__datos{
  display:grid; gap:0; margin:0; padding:var(--space-2) var(--space-4) var(--space-4);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .resultado__datos{ grid-template-columns:1fr 1fr; column-gap:var(--space-5); } }
.resultado__fila{ padding-block:var(--space-2); border-bottom:1px solid var(--color-gray-100); min-width:0; }
.resultado__fila--ancha{ grid-column:1 / -1; }
.resultado__fila dt{
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:.15em;
}
.resultado__fila dd{ margin:0; font-size:var(--fs-lg); font-weight:600; overflow-wrap:anywhere; }
.resultado__titular{ font-size:var(--fs-xl) !important; font-weight:800 !important; }
.resultado__codigo{ font-family:ui-monospace, "SF Mono", Consolas, monospace; letter-spacing:.04em; }

.resultado__pie{
  display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-4); background:var(--color-bg-alt);
  border-top:1px solid var(--color-gray-100); font-size:var(--fs-sm); color:var(--color-text-muted);
}
.resultado__pie p{ margin:0; }
.resultado__nuevo{
  background:none; border:0; padding:.4em 0; font:inherit; font-weight:700;
  color:var(--color-link); cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}

/* --- Variantes por estado ----------------------------------------------- */
.resultado[data-estado="valido"]{ border-color:var(--color-green-700); }
.resultado[data-estado="valido"] .resultado__banda{ background:var(--color-green-700); color:#fff; }
.resultado[data-estado="valido"] .resultado__icono{ color:var(--color-lime-500); }

.resultado[data-estado="vencido"],
.resultado[data-estado="reemplazado"],
.resultado[data-estado="antiguo"]{ border-color:var(--color-amber-500); }
.resultado[data-estado="vencido"] .resultado__banda,
.resultado[data-estado="reemplazado"] .resultado__banda,
.resultado[data-estado="antiguo"] .resultado__banda{ background:var(--color-amber-100); color:var(--color-amber-700); }

.resultado[data-estado="anulado"],
.resultado[data-estado="no_encontrado"],
.resultado[data-estado="error"]{ border-color:var(--color-red-700); }
.resultado[data-estado="anulado"] .resultado__banda,
.resultado[data-estado="no_encontrado"] .resultado__banda,
.resultado[data-estado="error"] .resultado__banda{ background:var(--color-red-100); color:var(--color-red-900); }

.resultado[data-estado="cargando"]{ border-style:dashed; }
.resultado[data-estado="cargando"] .resultado__banda{ color:var(--color-text-muted); }
.resultado__girando{
  width:2.6rem; height:2.6rem; border-radius:50%; flex-shrink:0;
  border:4px solid var(--color-gray-100); border-top-color:var(--color-green-700);
  animation:girar .8s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .resultado__girando{ animation-duration:2.4s; } }

/* Entrada suave del resultado */
.resultado:not([hidden]){ animation:aparecer .28s ease-out; }
@keyframes aparecer{ from{ opacity:.4; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce){ .resultado:not([hidden]){ animation:none; } }

/* Contactos del aviso "QR ANTERIOR" */
.resultado__contacto{ padding:0 var(--space-4) var(--space-4); }
.resultado__contacto-titulo{ font-weight:700; margin:0 0 var(--space-2); }
.resultado__contacto ul{ list-style:none; padding:0; margin:0 0 var(--space-2); display:grid; gap:.5rem; }
.resultado__contacto li{ font-size:var(--fs-lg); }
.resultado__contacto li span{ color:var(--color-text-muted); font-size:var(--fs-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; }
.resultado__contacto a{ font-weight:700; overflow-wrap:anywhere; }
.resultado__contacto-horario{ margin:0; color:var(--color-text-muted); font-size:var(--fs-sm); }

/* -------------------------------------------------------------------------
   6. Bloque de ayuda / leyenda
   ------------------------------------------------------------------------- */
.verificador__ayuda{
  margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px solid var(--color-border); max-width:72ch;
}
.verificador__ayuda-titulo{ font-size:var(--fs-lg); }
.leyenda{ list-style:none; padding:0; margin:0 0 var(--space-3); display:grid; gap:var(--space-2); }
.leyenda li{ display:grid; grid-template-columns:.8rem 1fr; gap:.6em; align-items:baseline; }
.leyenda__punto{ width:.8rem; height:.8rem; border-radius:50%; transform:translateY(.1em); }
.leyenda__punto--ok{ background:var(--color-green-700); }
.leyenda__punto--alerta{ background:var(--color-amber-500); }
.leyenda__punto--error{ background:var(--color-red-700); }

/* Al imprimir la página se conserva solo el resultado */
@media print{
  .cabecera,.pie,.migas,.verificador__metodos,.verificador__ayuda,.whatsapp-flotante{ display:none !important; }
  .resultado{ margin-top:0; }
}