/* Verificación Seix — estilos del componente · piel v20261105-v4
   Paleta B de la casa: azul Seix (primario), negro tinta, rojo vivo (acción),
   verde (confirmación), con sus tintes. SOLO presentación: las clases, los
   estados (on/ok/casi/mal) y las guardas [hidden] son el contrato con
   verificacion.js, cuyo motor queda intacto (v20261105-v2). */
.svx-login, .svx-pasos, .svx-card {
  --svx-azul:#2563eb; --svx-azul2:#1d4ed8; --svx-azulprof:#0a2456;
  --svx-rojo:#e63329; --svx-verde:#0b6b34; --svx-verde2:#0e9f57;
  --svx-fondo:#ffffff; --svx-borde:#dfe9f7; --svx-tit:#0a2456; --svx-txt:#2a3a4f;
  --svx-suave:#5a6d84; --svx-campo:#fbfdff; --svx-campoborde:#b9cbe8;
  --svx-login1:#eef4ff; --svx-login2:#e6efff; --svx-loginborde:#bfd4fb;
  --svx-paso:#ffffff; --svx-pasoborde:#d7e3f5; --svx-pasotxt:#40506b;
  --svx-prog:#e3edfb; --svx-progborde:#c9dbf6;
  --svx-sombra:0 14px 34px rgba(10,36,86,.10);
}
html[data-tema="oscuro"] .svx-login, html[data-tema="oscuro"] .svx-pasos, html[data-tema="oscuro"] .svx-card {
  --svx-fondo:#0e1930; --svx-borde:#22345c; --svx-tit:#eaf1ff; --svx-txt:#c3d2ee;
  --svx-suave:#8fa5c9; --svx-campo:#0a1428; --svx-campoborde:#2c4470;
  --svx-login1:#0d1a33; --svx-login2:#0a1528; --svx-loginborde:#27406e;
  --svx-paso:#0e1930; --svx-pasoborde:#22345c; --svx-pasotxt:#9db1d6;
  --svx-prog:#12234a; --svx-progborde:#22345c;
  --svx-sombra:0 14px 34px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark) {
  html:not([data-tema="claro"]) .svx-login, html:not([data-tema="claro"]) .svx-pasos, html:not([data-tema="claro"]) .svx-card {
    --svx-fondo:#0e1930; --svx-borde:#22345c; --svx-tit:#eaf1ff; --svx-txt:#c3d2ee;
    --svx-suave:#8fa5c9; --svx-campo:#0a1428; --svx-campoborde:#2c4470;
    --svx-login1:#0d1a33; --svx-login2:#0a1528; --svx-loginborde:#27406e;
    --svx-paso:#0e1930; --svx-pasoborde:#22345c; --svx-pasotxt:#9db1d6;
    --svx-prog:#12234a; --svx-progborde:#22345c;
    --svx-sombra:0 14px 34px rgba(0,0,0,.45);
  }
}

/* — El recorrido: los pasos como una ruta con presencia — */
.svx-pasos { display:flex; gap:.5rem; flex-wrap:wrap; list-style:none; padding:0; margin:0 0 1.1rem; }
.svx-pasos li { padding:.5rem .95rem; border-radius:999px; background:var(--svx-paso); border:1.5px solid var(--svx-pasoborde); color:var(--svx-pasotxt); font-weight:700; font-size:.88rem; opacity:.75; box-shadow:0 3px 10px rgba(10,36,86,.06); transition:all .2s ease; }
.svx-pasos li.on { opacity:1; background:linear-gradient(120deg,var(--svx-azul2),var(--svx-azul)); border-color:var(--svx-azul2); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.32); }
.svx-pasos li.ok { opacity:1; background:linear-gradient(120deg,var(--svx-verde),var(--svx-verde2)); border-color:var(--svx-verde); color:#fff; box-shadow:0 8px 20px rgba(11,107,52,.28); }

/* — Tarjetas — */
.svx-card { position:relative; background:var(--svx-fondo); border:1px solid var(--svx-borde); border-radius:20px; padding:1.35rem 1.4rem 1.2rem; margin:0 0 1.1rem; box-shadow:var(--svx-sombra); }
.svx-card::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; border-radius:20px 20px 0 0; background:linear-gradient(90deg,var(--svx-azul),var(--svx-azulprof)); }
.svx-card h3 { margin:.15rem 0 .55rem; color:var(--svx-tit); font-size:1.27rem; font-weight:800; letter-spacing:-.01em; }
.svx-card p { color:var(--svx-txt); line-height:1.6; }
.svx-login { background:linear-gradient(160deg,var(--svx-login1),var(--svx-login2)); border:1px solid var(--svx-loginborde); border-radius:20px; padding:1.25rem 1.35rem; margin:0 0 1.1rem; box-shadow:var(--svx-sombra); }
.svx-login label, .svx-card label { display:block; font-weight:700; color:var(--svx-tit); margin:.6rem 0; }
.svx-login input, .svx-card input { display:block; width:100%; margin-top:.32rem; padding:.7rem .85rem; border:1.5px solid var(--svx-campoborde); border-radius:12px; font-size:1rem; background:var(--svx-campo); color:var(--svx-txt); box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; }
.svx-login input:focus, .svx-card input:focus { border-color:var(--svx-azul); box-shadow:0 0 0 4px rgba(37,99,235,.16); outline:none; }

/* — Cámara y guías — */
.svx-cam { position:relative; border-radius:18px; overflow:hidden; background:#04070d; margin:.7rem 0; border:1px solid #16233d; box-shadow:0 16px 34px rgba(4,7,13,.35); }
.svx-cam video { width:100%; display:block; max-height:62vh; object-fit:cover; }
.svx-guia { position:absolute; inset:12% 22%; border:3px dashed rgba(255,255,255,.88); border-radius:50%; pointer-events:none; }
.svx-guia-doc { position:absolute; inset:14% 8%; border:3px dashed rgba(255,255,255,.88); border-radius:14px; pointer-events:none; }
.svx-reto { position:absolute; left:0; right:0; bottom:0; margin:0; padding:.65rem .6rem; text-align:center; background:rgba(3,6,12,.72); backdrop-filter:blur(3px); color:#fff; font-weight:800; font-size:1.06rem; letter-spacing:.01em; }
.svx-foto { width:100%; max-width:340px; border-radius:16px; display:block; margin:.7rem auto; border:3px solid var(--svx-verde); box-shadow:0 12px 26px rgba(11,107,52,.22); }
.svx-foto[hidden] { display:none !important; }

/* — Botones — */
.svx-btn { display:inline-block; background:linear-gradient(145deg,#f2483a,var(--svx-rojo) 55%,#d92c20); color:#fff; border:0; border-radius:14px; padding:.85rem 1.5rem; font-weight:800; font-size:1rem; cursor:pointer; margin:.35rem .35rem .35rem 0; box-shadow:0 10px 22px rgba(217,44,32,.30); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.svx-btn:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 14px 26px rgba(217,44,32,.36); }
.svx-btn:active { transform:scale(.99); }
.svx-btn:focus-visible { outline:3px solid rgba(37,99,235,.55); outline-offset:2px; }
.svx-btn2 { display:inline-block; background:var(--svx-fondo); color:var(--svx-azul2); border:2px solid var(--svx-azul); border-radius:14px; padding:.78rem 1.25rem; font-weight:800; font-size:1rem; cursor:pointer; margin:.35rem .35rem .35rem 0; transition:background .15s ease, transform .15s ease; }
.svx-btn2:hover { background:var(--svx-login1); transform:translateY(-1px); }
.svx-btn2:focus-visible { outline:3px solid rgba(37,99,235,.55); outline-offset:2px; }

/* — Mensajes, resumen, textos — */
.svx-msg { min-height:1.2em; color:var(--svx-verde); font-weight:700; }
.svx-msg.mal { color:#e0483a; }
html[data-tema="oscuro"] .svx-msg { color:#4ade80; }
html[data-tema="oscuro"] .svx-msg.mal { color:#ff8a7a; }
@media (prefers-color-scheme:dark) {
  html:not([data-tema="claro"]) .svx-msg { color:#4ade80; }
  html:not([data-tema="claro"]) .svx-msg.mal { color:#ff8a7a; }
}
.svx-resumen { line-height:1.9; color:var(--svx-txt); font-weight:600; padding-left:1.2rem; }
.svx-t { color:var(--svx-txt); line-height:1.6; }

/* Seguimiento en vivo del rostro (fix 2026-11-05): el punto se mueve con la
   cara, la barra marca el progreso del reto y el óvalo avisa al completar. */
.svx-guia { transition:border-color .18s ease, box-shadow .18s ease; }
.svx-guia.casi { border-color:#3ddc74; border-style:solid; box-shadow:0 0 0 6px rgba(61,220,116,.16), inset 0 0 0 2px rgba(61,220,116,.25); }
.svx-punto { position:absolute; left:50%; top:44%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#ffd43b; border:3px solid #fff; box-shadow:0 0 0 3px rgba(37,99,235,.9), 0 0 14px rgba(255,212,59,.55); pointer-events:none; will-change:transform; }
.svx-punto[hidden] { display:none !important; }
.svx-prog { height:14px; background:var(--svx-prog, #e3edfb); border:1.5px solid var(--svx-progborde, #c9dbf6); border-radius:999px; overflow:hidden; margin:.6rem 0 .2rem; box-shadow:inset 0 2px 5px rgba(10,36,86,.10); }
.svx-prog[hidden] { display:none !important; }
.svx-prog-in { height:100%; width:0%; background:linear-gradient(90deg,var(--svx-azul, #2563eb),var(--svx-azulprof, #0a2456)); border-radius:999px; transition:width .12s linear; }
.svx-pista { min-height:1.25em; margin:.25rem 0 0; font-weight:700; color:var(--svx-azul2); }
html[data-tema="oscuro"] .svx-pista { color:#8fb4ff; }
@media (prefers-color-scheme:dark) { html:not([data-tema="claro"]) .svx-pista { color:#8fb4ff; } }
/* El atributo hidden manda sobre display:inline-block de los botones: sin
   esta guarda, «Repetir»/«Capturar» se veían desde el inicio (se ve en las
   fotos del CEO del 2026-11-05) aunque el JS los tuviera ocultos. */
.svx-btn[hidden], .svx-btn2[hidden] { display:none !important; }

/* v20261105-v2: vista previa espejada del rostro (como un espejo, natural
   para la persona; el documento NO se espeja), sello de versión visible y
   línea de depuración (solo con ?depurar=1). La piel v3 no toca estas
   reglas de comportamiento. */
.svx-cam video.espejo { transform:scaleX(-1); }
.svx-ver { margin:.85rem 0 0; font-size:.78rem; color:var(--svx-suave, #7186a3); font-weight:600; }
.svx-dep { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.75rem; color:#664d03; background:#fff3cd; border-radius:8px; padding:.35rem .5rem; }
.svx-dep[hidden] { display:none !important; }

/* Teléfonos: botones a todo el ancho, tarjetas más compactas. */
@media (max-width:480px) {
  .svx-card { padding:1.1rem 1rem 1rem; border-radius:18px; }
  .svx-login { padding:1.05rem 1rem; }
  .svx-btn, .svx-btn2 { width:100%; text-align:center; margin-right:0; }
  .svx-pasos li { font-size:.82rem; padding:.45rem .8rem; }
}

/* — Experiencia v4: escaneo, sonido visual, documento, registro, sello — */
.svx-scan { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.svx-scan[hidden] { display:none !important; }
.svx-scanline { position:absolute; left:4%; right:4%; height:64px; top:-70px; border-radius:50%;
  background:linear-gradient(180deg, rgba(230,51,41,0) 0%, rgba(230,51,41,.28) 55%, rgba(230,51,41,.75) 88%, rgba(255,255,255,.9) 100%);
  filter:blur(.4px); animation:svxbarrido 2.3s ease-in-out infinite alternate; }
@keyframes svxbarrido { from { top:-70px; } to { top:calc(100% - 6px); } }
.svx-chipscan { position:absolute; top:.55rem; left:50%; transform:translateX(-50%); margin:0; max-width:92%;
  background:rgba(4,10,24,.82); color:#fff; border:1.5px solid rgba(96,165,250,.85); border-radius:999px;
  padding:.34rem .8rem; font-size:.82rem; font-weight:800; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.4); }
.svx-sello { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; padding:.85rem .95rem;
  background:linear-gradient(150deg, rgba(37,99,235,.10), rgba(10,36,86,.06)); border:1.5px solid var(--svx-loginborde, #bfd4fb);
  border-radius:16px; color:var(--svx-txt); }
.svx-sello img { width:100%; height:96px; object-fit:cover; object-position:50% 30%; border-radius:10px; display:block; }
.svx-sello strong { color:var(--svx-tit); }
.svx-sello p { margin:.25rem 0; line-height:1.5; font-size:.92rem; }
.svx-firma { font-size:.8rem !important; color:var(--svx-suave); word-break:break-word; }
.svx-firma a, .svx-marca-final a, .svx-prov a { color:var(--svx-azul2); font-weight:800; }
.svx-ev-n { font-size:.8rem !important; color:var(--svx-verde); font-weight:700; }
.svx-marca-final { font-size:.88rem; line-height:1.55; color:var(--svx-txt); }
.svx-marca-final:empty { display:none; }
.svx-reg { margin-top:.9rem; border-top:1.5px dashed var(--svx-loginborde, #bfd4fb); padding-top:.9rem; }
.svx-reg-form label { display:block; font-weight:700; color:var(--svx-tit); margin:.6rem 0; }
.svx-reg-form input, .svx-reg-form select { display:block; width:100%; margin-top:.32rem; padding:.7rem .85rem; border:1.5px solid var(--svx-campoborde); border-radius:12px; font-size:1rem; background:var(--svx-campo); color:var(--svx-txt); box-sizing:border-box; }
.svx-docx { margin:.8rem 0; }
.svx-doclab { font-weight:800; color:var(--svx-tit); margin:.4rem 0; }
.svx-lados { display:flex; gap:.5rem; flex-wrap:wrap; }
.svx-lados button { padding:.5rem .9rem; border-radius:999px; border:1.5px solid var(--svx-campoborde); background:var(--svx-campo); color:var(--svx-pasotxt); font-weight:800; cursor:pointer; }
.svx-lados button.on { background:linear-gradient(120deg, var(--svx-azul2), var(--svx-azul)); color:#fff; border-color:var(--svx-azul2); }
.svx-doclive { font-weight:800; color:var(--svx-azul2); margin:.6rem 0 0; }
.svx-checks { list-style:none; padding:0; margin:.6rem 0; }
.svx-checks li { padding:.42rem .7rem; border-radius:10px; margin:.32rem 0; font-size:.9rem; font-weight:650; background:var(--svx-prog); color:var(--svx-txt); border:1px solid var(--svx-progborde); }
.svx-checks li.cab { background:transparent; border:none; padding-left:0; font-weight:800; color:var(--svx-tit); }
.svx-checks li.ok { background:rgba(11,107,52,.10); border-color:rgba(11,107,52,.4); }
.svx-checks li.aviso { background:rgba(230,51,41,.08); border-color:rgba(230,51,41,.35); }
.svx-checks li.info { background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.3); }
.svx-flip { margin:.8rem 0; padding:.9rem 1rem; border:2px solid var(--svx-azul); border-radius:14px; background:linear-gradient(150deg, rgba(37,99,235,.10), rgba(37,99,235,.03)); }
.svx-flip p { margin:.2rem 0 .7rem; }
.svx-prov { margin-top:1rem; padding:.9rem 1rem; border-radius:14px; border:1.5px solid var(--svx-azul); background:linear-gradient(150deg, rgba(37,99,235,.09), rgba(37,99,235,.02)); color:var(--svx-txt); line-height:1.55; font-size:.94rem; }
.svx-prov[hidden] { display:none !important; }