/* ==========================================================================
   CLUB ELITE — puerta, riel y pasos
   assets/css/wizard.css   ·   depende de los tokens de elite.css

   1) PUERTA   2) CONFIRMACIÓN   3) ARMAZÓN   4) RIEL
   5) BARRA MÓVIL   6) PASOS   7) REVISIÓN   8) BOTONERA
   9) MOVIMIENTO REDUCIDO / IMPRESIÓN
   ========================================================================== */

/* ==========================================================================
   1) PUERTA DE CORREO (paso 0)
   ========================================================================== */
.ce-puerta { margin-block-start: var(--sp-10); }
.ce-puerta[hidden] { display: none; }

.ce-puerta__caja {
  max-width: 520px; padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(180deg, var(--carbon), var(--negro-2));
  border: var(--borde) solid var(--linea-oro); border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.ce-puerta__ic { display: block; width: 44px; height: 44px; color: var(--oro); margin-block-end: var(--sp-5); }
.ce-puerta__ic svg { width: 100%; height: 100%; }
.ce-puerta__t {
  font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .06em; margin-block-end: var(--sp-2);
}
.ce-puerta__d { color: var(--fg-muted); font-size: var(--fs-body-sm); margin-block-end: var(--sp-6); }
.ce-puerta__caja .ce-f { margin-block-end: var(--sp-5); }
.ce-puerta__caja .btn { width: 100%; }
.ce-puerta.esta-ocupado { opacity: .75; pointer-events: none; }

.ce-puerta__seguir {
  display: block; width: 100%; margin-block-start: var(--sp-5);
  padding: var(--sp-3) var(--sp-4); min-height: 48px;
  font: inherit; font-size: var(--fs-caption); text-align: start;
  color: var(--fg-muted); background: transparent; cursor: pointer;
  border: var(--borde) dashed var(--oro-a40); border-radius: var(--r-sm);
}
.ce-puerta__seguir:hover { color: var(--blanco); border-color: var(--oro-claro); }
.ce-puerta__seguir[hidden] { display: none; }

/* ==========================================================================
   2) CONFIRMACIÓN Y ÉXITO
   ========================================================================== */
.ce-conf {
  max-width: 520px; margin-block-start: var(--sp-10);
  padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center;
  background: linear-gradient(180deg, var(--carbon), var(--negro-2));
  border: var(--borde) solid var(--linea-oro); border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.ce-conf[hidden] { display: none; }
.ce-ok .ce-conf { margin-inline: auto; }
.ce-conf__ic { display: block; width: 56px; height: 56px; margin-inline: auto;
  color: var(--exito); margin-block-end: var(--sp-4); }
.ce-conf__ic svg { width: 100%; height: 100%; }
.ce-conf__t {
  font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .06em; margin-block-end: var(--sp-6);
}
/* El QR va sobre blanco sí o sí: sobre el negro de la marca muchos lectores
   fallan, porque esperan módulos oscuros sobre fondo claro. */
.ce-conf__qr {
  width: min(240px, 70vw); aspect-ratio: 1; margin-inline: auto;
  padding: 12px; background: #fff; border-radius: var(--r-sm);
}
.ce-conf__qr[hidden] { display: none; }
.ce-conf__qr svg { width: 100%; height: 100%; display: block; }
.ce-conf__nombre { font-size: var(--fs-body-lg); color: var(--blanco); margin-block-end: var(--sp-5); }
.ce-conf .ce-folio { margin-inline: auto; }
.ce-ok .ce-conf .ce-lead { margin-inline: auto; text-align: center; }

/* ==========================================================================
   3) ARMAZÓN DEL WIZARD
   ========================================================================== */
.ce-wz { margin-block-start: var(--sp-8); }
.ce-wz[hidden] { display: none; }

.ce-wz__cols { display: grid; gap: var(--grid-gap); align-items: start; }
@media (min-width: 1024px) {
  .ce-wz__cols { grid-template-columns: 280px minmax(0, 1fr); }
}

/* ==========================================================================
   4) RIEL / MENÚ LATERAL
   ========================================================================== */
.ce-wz__lado {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--negro-2);
  border: var(--borde) solid var(--linea-oro); border-radius: var(--r-md);
}
@media (min-width: 1024px) {
  .ce-wz__lado { position: sticky; top: var(--sp-5); }
}

.ce-lado__cab { display: flex; align-items: center; gap: var(--sp-4); }
.ce-lado__t {
  flex: 1; font-size: var(--fs-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--fg-subtle);
}
.ce-lado__x { display: none; }

/* Anillo de progreso */
.ce-prog { display: block; width: 44px; height: 44px; flex: none; }
.ce-prog svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ce-prog__f, .ce-prog__v { fill: none; stroke-width: 3.5; }
.ce-prog__f { stroke: var(--blanco-a08); }
.ce-prog__v { stroke: var(--oro); stroke-linecap: round; stroke-dashoffset: 999; }
.ce-prog--mini { width: 34px; height: 34px; }

.ce-riel { display: flex; flex-direction: column; gap: 2px; }
.ce-riel__it[hidden] { display: none; }

.ce-riel__b {
  display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%;
  min-height: 48px; padding: var(--sp-3); text-align: start;
  font: inherit; color: var(--fg-muted); background: transparent;
  border: var(--borde) solid transparent; border-radius: var(--r-sm); cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.ce-riel__b:hover { background: var(--carbon); color: var(--blanco); }

.ce-riel__ic { flex: none; width: 22px; height: 22px; margin-block-start: 1px; color: var(--fg-subtle); }
.ce-riel__ic svg { width: 100%; height: 100%; }
.ce-riel__tx { display: flex; flex-direction: column; min-width: 0; }
.ce-riel__n {
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.ce-riel__t { font-size: var(--fs-body-sm); line-height: 1.3; }
.ce-riel__e { font-size: 11px; letter-spacing: .04em; color: var(--fg-subtle); margin-block-start: 2px; }

/* Estado: NUNCA sólo color. Va el color, el texto de .ce-riel__e y un
   indicador de forma distinto en cada caso. */
.ce-riel__it[data-estado="completo"] .ce-riel__ic { color: var(--exito); }
.ce-riel__it[data-estado="completo"] .ce-riel__e { color: var(--exito); }
.ce-riel__it[data-estado="completo"] .ce-riel__e::before { content: "✓ "; }

.ce-riel__it[data-estado="errores"] .ce-riel__ic { color: var(--error); }
.ce-riel__it[data-estado="errores"] .ce-riel__e { color: var(--error); font-weight: 600; }
.ce-riel__it[data-estado="errores"] .ce-riel__e::before { content: "! "; }

.ce-riel__it.es-actual .ce-riel__b {
  background: var(--carbon); color: var(--blanco);
  border-color: var(--oro-a40); box-shadow: inset 3px 0 0 var(--oro);
}
.ce-riel__it.es-actual .ce-riel__ic { color: var(--oro-claro); }
.ce-riel__it.es-actual .ce-riel__e { color: var(--oro-claro); }
.ce-riel__it.es-actual .ce-riel__e::before { content: "▸ "; }

/* Aviso de guardado local */
.ce-lado__guardado {
  padding-block-start: var(--sp-4); border-block-start: var(--borde) solid var(--linea);
  font-size: 11px; line-height: 1.5; color: var(--fg-subtle);
}
.ce-lado__guardado[hidden] { display: none; }
.ce-lado__borrar {
  display: block; margin-block-start: var(--sp-2); padding: var(--sp-2) 0;
  font: inherit; font-size: 11px; color: var(--oro-claro);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: .2em;
}
.ce-lado__borrar:hover { color: var(--blanco); }

/* ==========================================================================
   5) BARRA MÓVIL
   El riel se convierte en panel inferior. El <aside> es el MISMO nodo: no se
   duplica el marcado, se recoloca. Un riel duplicado se desincroniza con el
   estado a la primera.
   ========================================================================== */
.ce-wz__barra { display: none; }

@media (max-width: 1023px) {
  .ce-wz__barra {
    display: block; position: sticky; top: 0; z-index: calc(var(--z-sticky) + 1);
    margin-block-end: var(--sp-5);
  }
  .ce-wz__barraB {
    display: flex; align-items: center; gap: var(--sp-4); width: 100%;
    min-height: 56px; padding: var(--sp-3) var(--sp-4);
    font: inherit; color: var(--blanco); cursor: pointer;
    background: rgba(18,17,19,.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: var(--borde) solid var(--linea-oro); border-radius: var(--r-md);
  }
  .ce-wz__barraT { flex: 1; text-align: start; line-height: 1.25; }
  .ce-wz__barraT span { display: block; font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--oro); }
  .ce-wz__barraT b { display: block; font-size: var(--fs-body-sm); font-weight: 500; }
  .ce-wz__barraX {
    flex: none; width: 12px; height: 12px; border-inline-end: 2px solid var(--fg-subtle);
    border-block-end: 2px solid var(--fg-subtle); transform: rotate(45deg); margin-block-end: 4px;
  }

  /* El panel: fuera de pantalla y fuera del árbol de accesibilidad mientras
     está cerrado. `visibility` y no sólo `transform`, para que el lector de
     pantalla no lea un menú que nadie ve. */
  .ce-wz__lado {
    position: fixed; inset: auto 0 0 0; z-index: calc(var(--z-sticky) + 2);
    max-height: 82svh; overflow-y: auto;
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom));
    box-shadow: 0 -24px 60px -20px rgba(0,0,0,.9);
    transform: translateY(101%); visibility: hidden;
    transition: transform var(--d-base) var(--e-out), visibility var(--d-base);
  }
  .ce-wz__lado.esta-abierto { transform: translateY(0); visibility: visible; }

  .ce-lado__x {
    display: block; flex: none; width: 40px; height: 40px; position: relative;
    background: none; border: 0; cursor: pointer;
  }
  .ce-lado__x::before, .ce-lado__x::after {
    content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 20%;
    width: 60%; height: 2px; background: var(--fg-subtle);
  }
  .ce-lado__x::before { transform: rotate(45deg); }
  .ce-lado__x::after  { transform: rotate(-45deg); }

  body.ce-panel-abierto { overflow: hidden; }
  body.ce-panel-abierto::after {
    content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sticky) + 1);
    background: rgba(0,0,0,.6);
  }
}

/* ==========================================================================
   6) PASOS
   ========================================================================== */
.ce-paso {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--negro-2);
  border: var(--borde) solid var(--linea); border-radius: var(--r-md);
}
.ce-paso[hidden] { display: none; }

.ce-paso__cab {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding-block-end: var(--sp-5); margin-block-end: var(--sp-2);
  border-block-end: var(--borde) solid var(--linea-oro);
}
.ce-paso__ic { flex: none; width: 36px; height: 36px; color: var(--oro); }
.ce-paso__ic svg { width: 100%; height: 100%; }
.ce-paso__t {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .06em;
}
.ce-paso__t:focus { outline: none; }
.ce-paso__t:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.ce-paso__d { margin-block-start: var(--sp-2); font-size: var(--fs-body-sm); color: var(--fg-muted); max-width: 60ch; }

.ce-restaurado {
  padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-5);
  font-size: var(--fs-body-sm); color: var(--fg-muted);
  background: var(--carbon); border-inline-start: 3px solid var(--oro);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ce-restaurado[hidden] { display: none; }

/* ==========================================================================
   7) REVISIÓN
   ========================================================================== */
.ce-rev { display: grid; gap: var(--sp-5); margin-block: var(--sp-5) var(--sp-8); }

.ce-rev__b {
  padding: var(--sp-5);
  background: var(--carbon); border: var(--borde) solid var(--linea);
  border-radius: var(--r-sm);
}
.ce-rev__cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block-end: var(--sp-3); margin-block-end: var(--sp-4);
  border-block-end: var(--borde) solid var(--linea);
}
.ce-rev__cab h4 {
  margin: 0; font-size: var(--fs-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--oro);
}

.ce-rev__datos {
  display: grid; gap: var(--sp-3) var(--grid-gap); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ce-rev__datos dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-subtle); margin-block-end: 2px;
}
.ce-rev__datos dd {
  margin: 0 0 var(--sp-2); font-size: var(--fs-body-sm); color: var(--blanco);
  overflow-wrap: anywhere;
}
/* La foto de la INE al lado del nombre tecleado: es el cotejo que evita el
   boleto reexpedido, y se hace mirando, no marcando una casilla. */
.ce-rev__ine {
  width: 100%; max-width: 220px; border-radius: var(--r-sm);
  border: var(--borde) solid var(--linea-oro);
}

/* ==========================================================================
   8) BOTONERA
   ========================================================================== */
.ce-wz__pie {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  margin-block-start: var(--sp-6);
  padding: var(--sp-4) 0 calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--negro) 35%);
}
.ce-wz__botones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ce-wz__botones .btn { min-height: 52px; flex: 1 1 auto; }
@media (min-width: 700px) { .ce-wz__botones .btn { flex: 0 0 auto; min-width: 180px; } }
.ce-wz__botones .btn[hidden] { display: none; }
.ce-wz__pie .ce-err--global { margin-block-end: var(--sp-4); }

/* ==========================================================================
   9) MOVIMIENTO REDUCIDO / IMPRESIÓN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ce-wz__lado, .ce-riel__b, .ce-puerta__seguir { transition: none; }
}

@media print {
  .ce-wz__lado, .ce-wz__barra, .ce-wz__pie, .ce-puerta { display: none; }
  .ce-paso[hidden] { display: block; }     /* en papel se quiere todo */
  .ce-conf { border-color: #000; }
  .ce-conf__qr { background: #fff; }
}