/* ===== THEME TOKENS ===== */

/* Default: DARK */
:root{
  --bg: #0b0f17;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  --accent: #ff8a00;
  --good: #17c964;
  --bad: #ff4d4d;

  --radius: 18px;

  /* Si quieres, también puedes parametrizar fondos */
  --bg-grad-1: radial-gradient(1100px 520px at 50% 0%, rgba(255,138,0,.18), transparent 60%);
  --bg-grad-2: radial-gradient(900px 520px at 20% 20%, rgba(11,95,255,.14), transparent 55%);
  --bg-grad-3: none; /* en dark no lo usas */
  --bg-base: var(--bg);
}

/* LIGHT overrides */
:root[data-theme="light"]{
  --bg: #f6f8fc;
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.92);
  --text: rgba(18,23,33,.92);
  --muted: rgba(18,23,33,.64);
  --stroke: rgba(18,23,33,.12);
  --shadow: 0 18px 55px rgba(16,24,40,.10);

  --bg-grad-1: radial-gradient(900px 520px at 50% 0%, rgba(255,138,0,.18), transparent 62%);
  --bg-grad-2: radial-gradient(1000px 640px at 12% 18%, rgba(36, 99, 235, .12), transparent 58%);
  --bg-grad-3: radial-gradient(900px 560px at 90% 28%, rgba(16, 185, 129, .10), transparent 60%);
  --bg-base: linear-gradient(180deg, #ffffff, #f6f8fc 42%, #f3f6fb);
}


*{ box-sizing:border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Fondo “no repetible” fijo */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    var(--bg-grad-1),
    var(--bg-grad-2),
    var(--bg-grad-3),
    var(--bg-base);

  background-repeat: no-repeat;
}

.container{
  width:min(1060px, calc(100% - 24px));
  margin:0 auto;
}

.hero__bar{
  width: 100%;
  display:flex;
  justify-content:flex-end;
  margin-bottom: 6px;    
  margin-bottom: -45px;
}

#btnTheme{
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

#btnTheme .themeIcon{
  width: 20px;
  height: 20px;
  display:block;
  fill: currentColor;
}

.hero{ padding: 28px 0 10px; }
.hero__inner{
  display:grid;
  gap:12px;
  justify-items:center;
  text-align:center;
}
.hero__logo{
  width: min(360px, 72vw);
  height:auto;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.55));
}
.hero__title{
  margin: 6px 0 0;
  font-size: clamp(24px, 3.2vw, 38px);
  letter-spacing: -0.02em;
}
.hero__subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.45;
}

.steps{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width:100%;
}
@media (max-width: 860px){
  .steps{ grid-template-columns: 1fr; }
}
.step{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  text-align: left;
}
.step__num{
  width:28px; 
  height:28px;
  border-radius:999px;
  display:grid; 
  place-items:center;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--stroke);
  font-weight:700;
  flex: 0 0 28px;      /* no crecer / no encoger / base fija */
  flex-shrink: 0;      /* (redundante con lo de arriba, pero claro) */
  aspect-ratio: 1 / 1; /* extra seguridad */
}
.step__text{ color: var(--muted); line-height:1.35; }

main{ padding: 14px 0 26px; }

.card{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.h2{ margin:0 0 8px; font-size: 22px; letter-spacing:-0.01em; }
.h3{ margin:0 0 10px; font-size: 18px; }
.muted{ color: var(--muted); }

.btn{
  appearance:none;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 12px 18px;
  font-size: 16px;
  border-radius: 12px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease;
}

.btn--lg{ padding: 12px 18px; border-radius: 14px; font-size: 16px; }
/* Hover SOLO para botones no-primary */
.btn:not(.btn--primary):hover{
  background: rgba(255,255,255,.12);
}

.btn:active{ transform: translateY(1px); }

/* Primary (naranja) */
.btn--primary{
  border-color: rgba(255,138,0,.45);
  background: linear-gradient(180deg, rgba(255,138,0,.98), rgba(255,120,0,.82));
  color: #121212;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(255,138,0,.12);
}

/* Hover del primary: mantiene el degradado + glow + leve elevación */
.btn--primary:hover{
  background: linear-gradient(180deg, rgba(255,160,40,1), rgba(255,120,0,.92));
  box-shadow:
    0 14px 36px rgba(255,138,0,.22),
    0 0 0 1px rgba(255,138,0,.28) inset;
  transform: translateY(-1px);
}


/* Active del primary */
.btn--primary:active{
  transform: translateY(0px);
  box-shadow: 0 10px 28px rgba(255,138,0,.16);
}

/* Estado disabled (que se note y no tenga hover/animación) */
.btn:disabled,
.btn:disabled:hover{
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  filter: saturate(.6);
  box-shadow: none !important;
}

.btn--primary:disabled,
.btn--primary:disabled:hover{
  background: linear-gradient(180deg, rgba(255,138,0,.70), rgba(255,120,0,.55));
  color: rgba(18,18,18,.75);
  border-color: rgba(255,138,0,.25);
}

.verifier__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.verifier__bottom{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    flex-direction: row-reverse;
}

.verifier__bottom button#btnShutter,
.verifier__bottom button#btnClose {
    margin-top: 30px;
}

.verifier__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Flip */
.flip{ perspective: 1100px; }
.flip__inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.flip.is-flipped .flip__inner{ transform: rotateY(180deg); }

.flip__face{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__face--back{
  position:absolute;
  inset:0;
  transform: rotateY(180deg);
}

.stage{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  min-height: 420px;
  display:grid;
  place-items:center;
  padding: 18px 0;
}
.stage__bg{
  width: min(520px, 92%);
  height:auto;
  opacity: .95;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,.7));
}

/* overlay wireframe encima (semi transparente) */
.stage__overlay{
  position:absolute;
  inset:0;
  margin:auto;
  width: min(520px, 92%);
  height:auto;
  opacity: .55;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
  pointer-events:none;
}

/* Lente circular */
.lens {
    position: absolute;
    width: min(514px, 74vw);
    aspect-ratio: 1;
    border-radius: 9999px;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .18);
    background: #000;
}

.lens video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.lens__shade{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,.42));
  pointer-events:none;
}

.lens__ring {
    position: absolute;
    inset: 0%;
    border-radius: 9999px;
    border: 3px dashed rgba(238, 238, 238, .52);
    pointer-events: none;
}

.lens__preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.lens video[hidden] {
  display: none !important;
}

/* Badge */
.badge{
  position:absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--stroke);
  font-weight: 900;
  letter-spacing: .06em;
}

/* Callout */
.callout{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--stroke);
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.35;
}
.callout--small{ opacity: .95; }

/* Panel resumen */
.panel{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  padding: 14px;
}
.panel__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}
@media (max-width: 920px){
  .panel__grid{ grid-template-columns: 1fr; }
  .step {
    align-items: center;
  }
}

.thumbs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.thumb{
  margin:0;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 10px;
}
.thumb figcaption{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: .08em;
}
.thumb img{
  width:100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  background:#000;
}

.loaderBox{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.spinner{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,138,0,.95);
  animation: spin .9s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }
.loaderTitle{ font-weight: 900; }

.statusBox{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  line-height: 1.35;
}

.raw{
  margin-top: 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.raw summary{
  cursor:pointer;
  padding: 10px 12px;
  color: var(--muted);
}
.raw pre{
  margin:0;
  padding: 12px;
  overflow:auto;
  max-height: 260px;
  color: rgba(255,255,255,.9);
}

.panel__actions{ margin-top: 10px; }

.footer{ padding: 18px 0 28px; }
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.srOnly{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.logoWrap{
  position: relative;
  display: inline-block;

  /* Tunning rápido */
  --flare-top: 1%;      /* posición vertical del efecto */
  --flare-size: 200px;   /* tamaño del aro giratorio */
  --flare-power: 0;      /* intensidad general (1 = normal) */
}


.logoWrap .hero__logo{
  display:block;
  width: min(360px, 72vw);
  height:auto;
  margin-bottom: 30px;
}

/* ARO con rayos girando + glow fuerte */
.logoWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top: var(--flare-top);
  width: var(--flare-size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 9999px;
  pointer-events:none;

  background:
    conic-gradient(
      from 0deg,
      transparent 0 14deg,
      rgba(255,210,140,.95) 14deg 24deg,
      transparent 24deg 70deg,
      rgba(255,150,20,.95) 70deg 80deg,
      transparent 80deg 190deg,
      rgba(255,235,180,.95) 190deg 202deg,
      transparent 202deg 360deg
    );

  /* Aro más ancho */
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 58% 78%, transparent 84%);
  mask: radial-gradient(circle, transparent 52%, #000 58% 78%, transparent 84%);

  /* Mucho más brillo + más difuminado */
  opacity: calc(.95 * var(--flare-power));
  filter:
    blur(1.4px)
    drop-shadow(0 0 10px rgba(255,140,0,.55))
    drop-shadow(0 0 22px rgba(255,140,0,.45))
    drop-shadow(0 0 48px rgba(255,170,60,.35));

  mix-blend-mode: screen;
  animation: beaconSpin 1.35s linear infinite;
}

/* HALO grande difuminado (glow “ambiente”) */
.logoWrap::after{
    content:"";
    position:absolute;
    left:50%;
    top: calc(var(--flare-top) + 2px);
    width: calc(var(--flare-size) * 1.05);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 9999px;
    pointer-events:none;
  
    background:
      radial-gradient(circle at 50% 50%,
        rgba(255,170,60,.55),
        rgba(255,150,20,.22) 42%,
        transparent 70%
      );
  
    opacity: calc(.95 * var(--flare-power));
    filter: blur(10px);
    mix-blend-mode: screen;
  
    animation: beaconPulse 1.05s ease-in-out infinite;
}

@keyframes beaconSpin{
    to{ transform: translateX(-50%) rotate(360deg); }
}

@keyframes beaconPulse{
    0%,100%{ transform: translateX(-50%) scale(.96); opacity:.55; }
    50%{ transform: translateX(-50%) scale(1.06); opacity:1; }
}

#loaderBox[hidden]{
    display: none !important;
}

html[data-theme="light"] .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--stroke);
    font-weight: 900;
    letter-spacing: .06em;
    color: rgba(18, 23, 33, .92);
    box-shadow: 0 10px 20px rgba(16, 24, 40, .08);
}

html[data-theme="light"] .stage {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, .55);
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 18px 0;
}

html[data-theme="light"] .callout {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--stroke);
    color: rgba(18, 23, 33, .88);
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 12px 22px rgba(16, 24, 40, .08);
}

html[data-theme="light"] .hero__logo {
    display: block;
    filter: drop-shadow(0 14px 28px rgba(16, 24, 40, .16)) drop-shadow(0 0 2px rgba(0, 0, 0, .35)) drop-shadow(0 0 10px rgba(0, 0, 0, .18));
}

html[data-theme="light"] .panel {
    margin-top: 14px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, .62);
    padding: 14px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .08);
}


/* ===== StatusBox celebration (in-place) ===== */
.statusBox{
  position: relative;
  overflow: hidden;
}

/* Estado OK: más “premium”, serio */
.statusBox.is-ok{
  border-color: rgba(23,201,100,.28);
  background:
    radial-gradient(700px 140px at 20% 10%, rgba(23,201,100,.14), transparent 55%),
    radial-gradient(600px 160px at 85% 0%, rgba(255,138,0,.10), transparent 60%),
    rgba(255,255,255,.06);
  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    0 0 0 1px rgba(23,201,100,.12) inset,
    0 0 44px rgba(23,201,100,.12);
}

/* “Sheen” (brillo barrido) sutil */
.statusBox.is-ok::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(255,255,255,.12) 45%,
    rgba(255,255,255,.04) 55%,
    transparent 65%
  );
  transform: translateX(-30%) rotate(8deg);
  animation: statusSheen 900ms cubic-bezier(.2,.8,.2,1) 1;
  pointer-events:none;
}

@keyframes statusSheen{
  to{ transform: translateX(35%) rotate(8deg); }
}

/* Canvas de partículas dentro del statusBox */
.statusBox__fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Layout del contenido “Homologada” con icono */
.statusOk{
  position: relative;
  z-index: 1; /* encima del canvas */
  display:flex;
  align-items:center;
  gap:10px;
}

.statusOk__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(23,201,100,.12);
  border: 1px solid rgba(23,201,100,.22);
  flex: 0 0 34px;
}

.statusOk__icon svg{ width: 22px; height: 22px; }

.statusOk__circle{
  fill: none;
  stroke: rgba(23,201,100,.35);
  stroke-width: 4;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: okStroke .65s ease forwards;
}
.statusOk__check{
  fill:none;
  stroke: rgba(23,201,100,.95);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: okStroke .5s ease forwards .18s;
}
@keyframes okStroke{ to{ stroke-dashoffset: 0; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .statusBox.is-ok::after{ animation: none; }
  .statusOk__circle, .statusOk__check{ animation:none; stroke-dashoffset:0; }
}

/* ===== StatusBox BAD (in-place, sin artificio) ===== */
.statusBox.is-bad{
  border-color: rgba(255,77,77,.30);
  background:
    radial-gradient(700px 140px at 20% 10%, rgba(255,77,77,.14), transparent 55%),
    rgba(255,255,255,.06);
  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,77,77,.12) inset;
}

.statusBad{
  position: relative;
  z-index: 1; /* por si existe canvas de fx de un OK anterior */
  display:flex;
  align-items:center;
  gap:10px;
}

.statusBad__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,77,77,.12);
  border: 1px solid rgba(255,77,77,.22);
  flex: 0 0 34px;
}

.statusBad__icon svg{ width: 22px; height: 22px; }

.statusBad__circle{
  fill: none;
  stroke: rgba(255,77,77,.35);
  stroke-width: 4;
}

.statusBad__x{
  fill:none;
  stroke: rgba(255,77,77,.95);
  stroke-width: 5;
  stroke-linecap: round;
}

.statusBad__text{
  margin-top: 2px;
}

.statusBad__help{
  margin-top: 8px;
}

.statusBad__link{
  color: var(--text);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.statusBad__link:hover{
  opacity: .9;
}

.statusBad__link:focus-visible{
  outline: 2px solid rgba(255,138,0,.65);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===== Loader dinámico ===== */

.loaderBox{
  position: relative;
  overflow: hidden;
  padding-bottom: 16px;
}

/* línea luminosa en movimiento */
.loaderBox::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,138,0,.10) 18%,
      rgba(255,138,0,.95) 50%,
      rgba(255,138,0,.10) 82%,
      transparent 100%
    );
  transform: translateX(-120%);
  pointer-events: none;
}

.loaderBox.is-active::after{
  opacity: 1;
  animation: loaderSweep 1.8s cubic-bezier(.2,.8,.2,1) infinite;
}

.loaderTitle,
#loaderText{
  will-change: opacity, transform, filter;
  transform-origin: left center;
}

/* salida */
.loaderTitle.is-leaving,
#loaderText.is-leaving{
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  filter: blur(4px);
  transition:
    opacity .22s ease,
    transform .22s ease,
    filter .22s ease;
}

/* entrada */
.loaderTitle.is-entering,
#loaderText.is-entering{
  animation: loaderCopyIn .42s cubic-bezier(.2,.8,.2,1);
}

@keyframes loaderCopyIn{
  from{
    opacity: 0;
    transform: translateY(8px) scale(.985);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes loaderSweep{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .loaderBox.is-active::after{
    animation: none;
    opacity: .5;
  }

  .loaderTitle.is-leaving,
  #loaderText.is-leaving{
    transition: none;
    transform: none;
    filter: none;
  }

  .loaderTitle.is-entering,
  #loaderText.is-entering{
    animation: none;
  }
}