/* componentes.css — los diez componentes de §8.9, más estados, modal y menú móvil.
   Regla: ni un color literal (R6). Ni un `style=""` (R8): los valores dinámicos entran
   por propiedad personalizada fijada con CSSOM (`el.style.setProperty('--pct', n)`, §7.6). */

/* ======================================================================
   8.9.1 · Botón oro
   ====================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: 0.95rem 2.1rem;
  min-height: 44px;                         /* objetivo táctil (§8.10) */
  font-family: var(--f-interfaz);
  font-size: var(--t-menor);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radio-pildora);
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease,
              background-color .18s ease, color .18s ease;
}

.boton--oro { background: var(--barrido-oro); color: var(--tinta); }
.boton--oro:hover  { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--sombra-boton); }
.boton--oro:active { transform: translateY(0); filter: brightness(.97); }
.boton--oro:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.boton--negro { background: var(--tinta); color: var(--papel); }
.boton--negro:hover { transform: translateY(-1px); filter: brightness(1.15); }

/* §8.11 regla 16: el texto del botón va a --t-menor (13 px) y --oro da 4.30:1 sobre
   --papel. El oro se conserva en el BORDE, que no es texto; el rótulo usa
   --oro-profundo (7.4:1). Este botón es el de todos los estados vacíos, el de
   ↻ Reintentar, el del 404 y el de los planes no destacados. */
.boton--contorno { background: transparent; border: var(--filete-oro); color: var(--oro-profundo); }
.boton--contorno:hover { background: var(--papel-claro); }

.boton--texto {
  background: transparent;
  color: var(--tinta-suave);
  padding-inline: 0;
  border-bottom: 1px solid var(--oro);
  border-radius: 0;
}
.boton--texto:hover { color: var(--oro-profundo); }

/* §8.9.1: el deshabilitado se comunica por el borde y por la AUSENCIA del barrido de oro,
   nunca bajando el contraste del texto. --tinta-tenue sobre --papel-hundido da ~13:1. */
.boton[disabled],
.boton[aria-disabled='true'] {
  background: var(--papel-hundido);
  color: var(--tinta-tenue);
  border: 1px solid var(--papel-borde);
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* §8.9.1 y §8.10: la explicación de por qué está deshabilitado va FUERA del control. */
.boton-ayuda {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-menor);
  color: var(--tinta-tenue);
  max-width: 34ch;
}

.boton--ancho { width: 100%; }

/* ======================================================================
   8.7 · Iconografía — círculo negro + pictograma outline oro
   ====================================================================== */

.icono-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radio-pildora);
  background: var(--tinta);
  color: var(--oro-sobre-negro);
  flex: 0 0 auto;
}
.icono-circulo--chico { width: 40px; height: 40px; }
.icono-circulo--grande { width: 60px; height: 60px; }

/* Variante sobre marfil: círculo oro relleno con glifo negro (§8.7). */
.icono-circulo--oro { background: var(--oro); color: var(--tinta); }

.icono { fill: none; stroke: currentColor; stroke-width: 1.5;
         stroke-linecap: round; stroke-linejoin: round; }
.icono--16 { width: 16px; height: 16px; }
.icono--20 { width: 20px; height: 20px; }
.icono--24 { width: 24px; height: 24px; }
.icono--28 { width: 28px; height: 28px; }   /* NUNCA un atributo style: lo bloquea la CSP */
.icono--32 { width: 32px; height: 32px; }
.icono--48 { width: 48px; height: 48px; }

/* lord-icon es la MEJORA; el sprite es la capa base Y el respaldo (§8.7).
   El <lord-icon> se imprime inerte y sólo se ve cuando iconos.js confirma que la
   animación cargó, marcando la envoltura con data-ico-listo="1". Mientras tanto —y
   para siempre si el CDN, el custom element o el .json fallan— manda el <svg>. */
lord-icon:not(:defined) { display: none; }
.icono-circulo:not([data-ico-listo="1"]) lord-icon { display: none; }
.icono-circulo[data-ico-listo="1"] > .icono { display: none; }
lord-icon { display: block; width: 28px; height: 28px; }
.icono-circulo--chico lord-icon { width: 20px; height: 20px; }
.icono-circulo--grande lord-icon { width: 32px; height: 32px; }

/* ======================================================================
   8.9.2 · Tarjeta de formato (9:16) — grupo de radio NATIVO
   ====================================================================== */

.grupo-formatos,
.grupo-conductores { border: 0; padding: 0; margin: 0; }

.grupo-formatos > legend,
.grupo-conductores > legend {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--tinta-tenue);
  margin-bottom: var(--e-6);
  max-width: 48ch;
}

.grupo-formatos__rejilla {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e-4);
}
@media (max-width: 1023px) { .grupo-formatos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Móvil (revisión de usabilidad 2026-10-05): a una columna cada formato era un póster de ~550 px casi negro con el
   título al pie («parece un video roto», dijo el cliente). Dos columnas y proporción 3:4 dejan los seis a la vista en
   dos pantallas y el retrato sigue leyéndose. */
@media (max-width: 619px)  {
  .grupo-formatos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .tarjeta-formato { aspect-ratio: 3 / 4; }
}

.tarjeta-formato {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  /* El retrato va a sangre y ocupa la tarjeta entera; el fondo es el suelo que queda
     mientras la foto carga o cuando el formato todavía no tiene imagen. Va en --tinta
     —no en marfil— porque sobre él se pintan el logotipo CII y el título en claro:
     con suelo marfil esos dos elementos quedarían por debajo de 4.5:1 (§8.10). */
  background: var(--tinta);
  border: var(--filete);
  border-radius: var(--radio-chico);
  cursor: pointer;
  isolation: isolate;
}

.tarjeta-formato__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--suavizado);
  z-index: 0;
}

/* Degradado a TRANSPARENTE, no entre colores (§8.9.2). Opacidad mínima medible .82. */
.tarjeta-formato__velo {
  position: absolute; inset: 0;
  background: var(--velo-foto);
  z-index: 1;
  pointer-events: none;
}

/* Capa oscura EXTRA bajo el bloque de texto: el velo del degradado no bastaba sobre
   retratos claros y el título y la duración quedaban por debajo de 4.5:1 (§8.10). */
.tarjeta-formato__cuerpo::before {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0; top: -40%;
  background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .74) 62%, transparent);
  z-index: -1;
  pointer-events: none;
}

.tarjeta-formato__marca {
  position: absolute; top: var(--e-4); left: var(--e-4);
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: .06em;
  color: var(--oro-sobre-negro);
}

.tarjeta-formato__cuerpo {
  position: absolute; inset-inline: 0; bottom: 0;
  z-index: 2;
  padding: var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-2);
  isolation: isolate;   /* para que el ::before quede DETRÁS del texto y no de la foto */
}

.tarjeta-formato__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  /* Fluida y sin partir palabras: en la rejilla de seis, «PERSONALIZADO» se rompía.
     La celda de esa rejilla deja 157 px a 1 440 y 108 px a 1 024 (seis columnas y
     padding de tarjeta); «PERSONALIZADO» mide 8.75 em con este tracking, de donde
     salen el techo de 17 px y la pendiente de 1.15vw. `overflow-wrap: normal`:
     si alguna vez no cupiera, se vería —no se partiría a escondidas. */
  font-size: clamp(.75rem, 1.15vw, 1.0625rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  letter-spacing: .02em;
  line-height: 1.15;
  font-variant-caps: small-caps;
  text-transform: uppercase;
  color: var(--papel);
  margin: 0;
}

.tarjeta-formato__duracion {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--e-1);
  border: var(--filete-oro);
  border-radius: var(--radio-pildora);
  /* Suelo propio: en «Personalizado» la banda dorada de la foto pasa justo por detrás de
     la píldora y «LIBRE» se leía a medias. El velo de §8.9.2 la despega de la imagen. */
  background: var(--velo-solido);
  padding: .2rem .65rem;
  font-size: var(--t-menor);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* La tarjeta tiene suelo --tinta: el oro legible sobre negro es --oro-sobre-negro.
     --oro-badge sobre marfil da 2.62:1 y §8.11 regla 16 lo prohíbe a 13 px. */
  color: var(--oro-sobre-negro);
  transition: box-shadow .3s ease, color .3s ease;
}

.tarjeta-formato__descripcion {
  font-size: var(--t-menor);
  line-height: 1.5;
  color: var(--papel-sobre-negro-80);
  margin: 0;
}

.tarjeta-formato__ayuda {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--papel-sobre-negro-80);
  margin: 0;
}

.tarjeta-formato__reproductor {
  margin-top: var(--e-2);
  height: 2px;
  background: var(--papel-sobre-negro-80);
  border-radius: var(--radio-pildora);
  position: relative;
  overflow: hidden;
}
.tarjeta-formato__reproductor::after {
  content: '';
  position: absolute; inset-block: 0; left: 0;
  width: 22%;
  background: var(--oro-badge);
}

.tarjeta-formato__palomita {
  position: absolute; top: var(--e-4); right: var(--e-4);
  z-index: 3;
  width: 24px; height: 24px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: var(--radio-pildora);
  background: var(--oro);
  color: var(--tinta);
}

.tarjeta-formato:hover .tarjeta-formato__foto { transform: scale(1.03); }
.tarjeta-formato:hover .tarjeta-formato__duracion { color: var(--oro-boton-fin); box-shadow: 0 0 0 1px var(--oro-boton-med); }

/* Estado seleccionado pintado desde el radio nativo (§8.9.2). */
.tarjeta-formato:has(:checked) { border: 2px solid var(--oro); }
.tarjeta-formato:has(:checked) .tarjeta-formato__palomita { display: inline-flex; }

/* El foco visible se dibuja sobre la TARJETA COMPLETA, no sobre el radio oculto. */
.tarjeta-formato:has(:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ======================================================================
   8.9.3 · Tarjeta de conductor — mismo patrón de radio nativo
   ====================================================================== */

.grupo-conductores__lista { display: flex; flex-direction: column; gap: var(--e-3); }

.tarjeta-conductor {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  background: var(--papel-claro);
  border: var(--filete);
  border-radius: var(--radio);
  cursor: pointer;
  min-height: 44px;
  transition: border-color .18s ease, background-color .18s ease;
}

.tarjeta-conductor__retrato {
  width: 56px; height: 56px;
  border-radius: var(--radio-pildora);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--papel-hundido);
}

/* Opciones sin retrato (Sólo voz, Sin conductor): círculo gris claro con icono gris humo. */
.tarjeta-conductor__simbolo {
  width: 56px; height: 56px;
  border-radius: var(--radio-pildora);
  background: var(--papel-hundido);
  border: var(--filete);
  color: var(--gris-humo);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

.tarjeta-conductor__texto { flex: 1 1 auto; min-width: 0; }

.tarjeta-conductor__etiqueta {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: .04em;
  line-height: 1.15;
  font-variant-caps: small-caps;
  color: var(--tinta);
  margin: 0;
}

.tarjeta-conductor__subtitulo {
  font-size: var(--t-menor);
  color: var(--gris-humo);
  margin: 0;
}

.tarjeta-conductor__coste {
  flex: 0 0 auto;
  font-size: var(--t-menor);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--tinta-tenue);
  border: var(--filete);
  border-radius: var(--radio-pildora);
  padding: .2rem .65rem;
  white-space: nowrap;
}

.tarjeta-conductor:hover { background: var(--papel); }
.tarjeta-conductor:has(:checked) { border: var(--filete-oro); background: var(--papel-claro); }
.tarjeta-conductor:has(:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ======================================================================
   8.9.4 · Tarjeta de plan
   ====================================================================== */

.tarjeta-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-7) var(--e-5) var(--e-5);
  background: var(--papel-claro);
  border: var(--filete);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta-plan--destacado { border: 2px solid var(--oro-badge); }

.tarjeta-plan__insignia {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--oro-badge);
  color: var(--tinta);
  border-radius: var(--radio-pildora);
  padding: .3rem 1rem;
  font-size: var(--t-menor);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tarjeta-plan__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: .04em;
  font-variant-caps: small-caps;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 0;
}

.tarjeta-plan__lema { font-size: var(--t-menor); color: var(--gris-humo); margin: 0; }

.tarjeta-plan__cifra { font-family: var(--f-display); font-size: var(--t-cifra);
                       font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--tinta); }
.tarjeta-plan__unidad { font-size: var(--t-menor); color: var(--gris-humo);
                        letter-spacing: .12em; text-transform: uppercase; }
.tarjeta-plan__precio { font-size: var(--t-base); color: var(--tinta-tenue); }

.tarjeta-plan__bullets { display: flex; flex-direction: column; gap: var(--e-3); flex: 1 1 auto; }
.tarjeta-plan__bullet { display: flex; align-items: flex-start; gap: var(--e-3);
                        font-size: var(--t-menor); line-height: 1.5; color: var(--tinta-suave); }
.tarjeta-plan__bullet .icono-circulo { width: 20px; height: 20px; background: var(--oro); color: var(--tinta); }
.tarjeta-plan__bullet .icono { width: 12px; height: 12px; }

.tarjeta-plan__pie { margin-top: auto; }
.tarjeta-plan__nota { font-size: var(--t-micro); color: var(--gris-humo); }

/* ======================================================================
   Tarjeta de historia (catálogo del paso 1 y del panel)
   ====================================================================== */

.tarjeta-historia {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5);
  background: var(--papel-claro);
  border: var(--filete);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  height: 100%;
}
.tarjeta-historia:has(:checked) { border: var(--filete-oro); }
.tarjeta-historia:has(:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }

.tarjeta-historia__meta {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-humo);
}

.tarjeta-historia__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: none;
  color: var(--tinta);
  margin: 0;
}

.tarjeta-historia__resumen { font-size: var(--t-menor); line-height: 1.55;
                             color: var(--tinta-tenue); margin: 0; }

.tarjeta-historia__pie { margin-top: auto; display: flex; align-items: center;
                         justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }

.sello {
  display: inline-flex; align-items: center; gap: var(--e-1);
  border: var(--filete);
  border-radius: var(--radio-pildora);
  padding: .15rem .6rem;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  white-space: nowrap;
}
.sello--oro   { border: var(--filete-oro); color: var(--tinta-tenue); }
.sello--exito { border-color: var(--exito); color: var(--tinta-tenue); }
.sello--alerta{ border-color: var(--alerta); color: var(--tinta-tenue); }
.sello--error { border-color: var(--error); color: var(--tinta-tenue); }

/* ======================================================================
   8.9.5 · Stepper
   ====================================================================== */

.stepper { margin: 0; padding: 0; }

.stepper__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }

.stepper__paso {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  text-align: center;
  padding-top: var(--e-1);
}

/* La línea de 1 px que une los pasos; avanza con scaleX al cambiar de paso (§8.6.2). */
.stepper__paso::before {
  content: '';
  position: absolute;
  top: 16px; left: -50%; width: 100%;
  height: 1px;
  background: var(--papel-borde);
  z-index: 0;
}
.stepper__paso:first-child::before { display: none; }
.stepper__paso--completado::before,
.stepper__paso--actual::before { background: var(--oro); }

.stepper__circulo {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  border-radius: var(--radio-pildora);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-menor);
  font-weight: 600;
  background: var(--papel);
  border: 1px solid var(--papel-borde);
  color: var(--gris-humo);
}

.stepper__paso--completado .stepper__circulo {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--tinta);
}

/* §8.9.5 + §8.10: el numeral del paso actual va en --tinta (21:1), NO en oro:
   mide muy por debajo de 20 px y el oro sobre marfil no alcanza 4.5:1 ahí. */
.stepper__paso--actual .stepper__circulo {
  background: var(--papel-claro);
  border: 2px solid var(--oro);
  color: var(--tinta);
}

.stepper__rotulo { font-size: var(--t-micro); letter-spacing: .12em;
                   text-transform: uppercase; color: var(--gris-humo); }
.stepper__paso--completado .stepper__rotulo { color: var(--tinta-suave); }
.stepper__paso--actual .stepper__rotulo { color: var(--tinta); font-weight: 600; }

/* --- Modo compacto en móvil (§8.9.5): retroceder sigue siendo posible --- */
.stepper__compacto { display: none; }

@media (max-width: 619px) {
  .stepper__lista { display: none; }
  .stepper__compacto { display: flex; flex-direction: column; gap: var(--e-3); }

  .stepper__compacto-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

  .stepper__atras { font-size: var(--t-menor); color: var(--tinta-suave);
                    border-bottom: 1px solid var(--oro); min-height: 44px;
                    display: inline-flex; align-items: center; }

  .stepper__resumen {
    list-style: none;
    font-size: var(--t-menor);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta);
    cursor: pointer;
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .stepper__resumen::-webkit-details-marker { display: none; }

  .stepper__desplegable { display: flex; flex-direction: column; gap: var(--e-2);
                          padding-top: var(--e-3); border-top: var(--filete); }
  .stepper__desplegable a { color: var(--tinta-suave); border-bottom: 1px solid var(--oro);
                            align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
  .stepper__desplegable span { color: var(--gris-humo); min-height: 44px; display: inline-flex; align-items: center; }

  .stepper__barra { height: 2px; background: var(--papel-borde); border-radius: var(--radio-pildora); overflow: hidden; }
  .stepper__barra::after {
    content: '';
    display: block; height: 100%;
    /* --pct lo fija la clase de abajo (servidor) o el front por CSSOM.
       Nunca un atributo style: `style-src 'self'` lo bloquea sin error visible (§7.6).
       §8.6.2 fija `scaleX` para el stepper y §8.6.4 reserva la única excepción de
       `width` a la barra de progreso del render (`.progreso__relleno`). */
    width: 100%;
    transform: scaleX(calc(var(--pct, 0) / 100));
    transform-origin: left center;
    background: var(--oro);
    transition: transform .6s var(--suavizado);
  }
}

/* Avance servido desde el servidor, sin atributo `style` (R8) y sin 101 clases:
   el asistente tiene CINCO pasos fijos (§5.11), así que los únicos valores
   posibles son 0, 25, 50, 75 y 100. Lo usan la barra compacta del stepper y la
   barra de progreso del render; el front puede afinar con `setProperty('--pct', n)`. */
.avance--0   { --pct: 0; }
.avance--25  { --pct: 25; }
.avance--50  { --pct: 50; }
.avance--75  { --pct: 75; }
.avance--100 { --pct: 100; }

/* ======================================================================
   8.9.6 · Campo de formulario
   ====================================================================== */

.campo { display: flex; flex-direction: column; gap: var(--e-2); }

.campo__etiqueta {
  font-size: var(--t-menor);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.campo__control {
  width: 100%;
  background: var(--papel-claro);
  border: 1px solid var(--gris-humo-claro);
  border-radius: var(--radio-chico);
  padding: 0.8rem 1rem;
  font-family: var(--f-interfaz);
  font-size: 1rem;              /* 16 px evita el zoom automático en iOS (§8.9.6) */
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.campo__control::placeholder { color: var(--gris-humo); }

.campo__control:focus-visible {
  border-color: var(--oro);
  outline: 2px solid var(--oro-badge);
  outline-offset: 1px;
}

textarea.campo__control { min-height: 9rem; resize: vertical; }
select.campo__control { appearance: none; padding-right: 2.5rem; }

.campo__ayuda { font-size: var(--t-menor); color: var(--gris-humo); }

.campo__error { font-size: var(--t-menor); color: var(--error); }
.campo--error .campo__control { border-color: var(--error); }

/* §8.6.3: formularios, campos y mensajes de validación aparecen al instante. */
.campo, .campo__error, .banda-aviso { animation: none; }

/* ======================================================================
   8.9.7 · Banda de aviso
   ====================================================================== */

.banda-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--gris-humo);
  background: var(--papel-hundido);
  border-radius: var(--radio-chico);
  font-size: var(--t-menor);
  line-height: 1.55;
  color: var(--tinta-suave);
}
.banda-aviso--info   { border-left-color: var(--gris-humo); }
.banda-aviso--exito  { border-left-color: var(--exito); }
.banda-aviso--alerta { border-left-color: var(--alerta); }

.banda-aviso__texto { flex: 1 1 auto; margin: 0; }
.banda-aviso__accion { flex: 0 0 auto; }
.banda-aviso__cerrar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: calc(var(--e-3) * -1) calc(var(--e-3) * -1) 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gris-humo);
}

/* ======================================================================
   8.9.7 · Bloque de créditos — Costo / Saldo actual / Saldo después
   ====================================================================== */

.bloque-creditos {
  background: var(--papel-claro);
  border: var(--filete);
  border-radius: var(--radio);
  padding: var(--e-5);
}
.bloque-creditos__titulo {
  font-size: var(--t-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris-humo);
  margin-bottom: var(--e-3);
}
.bloque-creditos__fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  padding-block: var(--e-3);
  border-bottom: var(--filete);
  font-size: var(--t-menor);
  color: var(--tinta-suave);
}
.bloque-creditos__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.bloque-creditos__cifra { font-variant-numeric: tabular-nums; font-weight: 600;
                          color: var(--tinta); text-align: right; }
.bloque-creditos__cifra--insuficiente { color: var(--error); }

/* ======================================================================
   Estados obligatorios de §5.2 — cargando / vacío / error
   ====================================================================== */

.estado {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-4);
  padding: var(--e-8) var(--e-5);
  text-align: center;
  border: 1px dashed var(--papel-borde);
  border-radius: var(--radio);
  background: var(--papel-claro);
}
.estado__texto { font-size: var(--t-base); color: var(--tinta-tenue); max-width: 46ch; margin: 0; }
.estado__detalle { font-size: var(--t-menor); color: var(--gris-humo); max-width: 52ch; margin: 0; }
.estado--error { border-style: solid; border-color: var(--error); }
.estado--cargando .icono-circulo { animation: pulso 1.6s var(--suavizado-suave) infinite; }

@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Casilla (§5.7, §5.12) — la etiqueta va a la DERECHA del control y todo el conjunto
   es una sola zona de toque de 44 px. Sin `.campo__etiqueta` encima: el <label>
   envuelve al control, que es lo que hace que el texto sea clicable. */
.campo--casilla { gap: var(--e-1); }
.campo-casilla {
  display: flex; align-items: flex-start; gap: var(--e-3);
  min-height: 44px; padding-block: var(--e-2);
  cursor: pointer;
}
.campo-casilla__control {
  flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--oro-profundo);
}
.campo-casilla__control:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.campo-casilla__texto { font-size: var(--t-base); line-height: 1.45; color: var(--tinta); }
.campo--error .campo-casilla__texto { color: var(--tinta); }

/* ======================================================================
   8.9.7 · Modal — reemplaza confirm() y prompt() nativos
   ====================================================================== */

.modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--canal);
  background: var(--tinta-velo);
}
.modal[hidden] { display: none; }

.modal__caja {
  width: 100%;
  max-width: var(--ancho-estrecho);
  background: var(--papel-claro);
  border: var(--filete);
  border-radius: var(--radio);
  box-shadow: var(--sombra-modal);
  padding: var(--e-6);
  display: flex; flex-direction: column; gap: var(--e-4);
  max-height: 85vh;
  overflow-y: auto;
}
.modal__titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4);
                 letter-spacing: .02em; text-transform: uppercase; color: var(--tinta); margin: 0; }
.modal__cuerpo { font-size: var(--t-menor); line-height: 1.6; color: var(--tinta-suave); }
.modal__acciones { display: flex; gap: var(--e-3); justify-content: flex-end; flex-wrap: wrap; }

/* ======================================================================
   8.9.8 · Menú móvil — superposición a pantalla completa sobre --papel
   NO es un cajón lateral. NO es glassmorphism (§8.11.2).
   ====================================================================== */

.menu-movil__disparador {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--tinta);
}
@media (min-width: 1024px) { .menu-movil__disparador { display: none; } }

.menu-movil {
  position: fixed; inset: 0;
  z-index: var(--z-menu-movil);
  background: var(--papel);
  overflow-y: auto;
  padding: var(--canal);
  display: flex; flex-direction: column; gap: var(--e-6);
  animation: aparecer var(--dur-corta) var(--suavizado);
}
.menu-movil[hidden] { display: none; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.menu-movil__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.menu-movil__cerrar { width: 44px; height: 44px; display: inline-flex;
                      align-items: center; justify-content: center; color: var(--tinta); }

.menu-movil__lista { display: flex; flex-direction: column; }
.menu-movil__enlace {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: 52px;
  font-size: var(--t-menor);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: var(--filete);
}
.menu-movil__enlace--activo { color: var(--oro-profundo); }
.menu-movil__saldo { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; }

.menu-movil__separador { height: 1px; background: var(--papel-borde); border: 0; margin: 0; }

.menu-movil__legales { display: flex; flex-wrap: wrap; gap: var(--e-4);
                       font-size: var(--t-micro); color: var(--gris-humo); }
.menu-movil__legales a { min-height: 44px; display: inline-flex; align-items: center; }

/* ======================================================================
   8.9.7 · Tabla de la consola — sin reveals, filete inferior
   ====================================================================== */

.tabla-admin { width: 100%; font-size: var(--t-menor); }
.tabla-admin th {
  text-align: left;
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: .1em;
  color: var(--gris-humo);
  padding: var(--e-3) var(--e-4);
  border-bottom: var(--filete);
  white-space: nowrap;
}
.tabla-admin td { padding: var(--e-3) var(--e-4); border-bottom: var(--filete);
                  color: var(--tinta-suave); vertical-align: top; }
.tabla-admin tr:hover td { background: var(--papel-claro); }
.tabla-admin__numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-envoltura { overflow-x: auto; }

/* ======================================================================
   Barra de progreso del render (§8.10) — única excepción a "sólo transform/opacity"
   ====================================================================== */

.progreso {
  height: 4px;
  background: var(--papel-borde);
  border-radius: var(--radio-pildora);
  overflow: hidden;
}
.progreso__relleno {
  height: 100%;
  /* --pct lo fija sondeo-render.js con setProperty; jamás un atributo style (R8). */
  width: calc(var(--pct, 0) * 1%);
  background: var(--oro);
  transition: width .45s var(--suavizado-suave);
}

/* ======================================================================
   Panel y filete de marca reutilizables
   ====================================================================== */

.panel {
  background: var(--papel-claro);
  border: var(--filete);
  border-radius: var(--radio);
  padding: var(--e-6);
  box-shadow: var(--sombra-tarjeta);
}
.panel--elevado { box-shadow: var(--sombra-elevada); }
.panel--hundido { background: var(--papel-hundido); box-shadow: none; }

.logotipo { display: inline-flex; align-items: center; gap: var(--e-3); }
.logotipo__marca { font-family: var(--f-display); font-weight: 700;
                   font-size: var(--t-h3); letter-spacing: .04em; color: var(--oro); line-height: 1; }
.logotipo__bloque { font-size: var(--t-micro); letter-spacing: .18em;
                    text-transform: uppercase; color: var(--tinta-tenue); line-height: 1.4; }

/* El subtítulo del conductor va en su propia línea: en línea con el nombre («Conductora CII Lista para usar») se leía
   como un solo nombre raro (revisión de usabilidad 2026-10-05). */
.tarjeta-conductor__subtitulo { display: block; }

/* Catálogo: el formulario «Crear con esta historia» envuelve la tarjeta y su botón. Sin esto el botón flotaba entre dos
   tarjetas y no se sabía a cuál pertenecía (revisión de usabilidad 2026-10-05). Tarjeta y botón se sueldan: sin hueco,
   esquinas inferiores de la tarjeta rectas y botón con las esquinas de abajo. */
form.pila:has(> .tarjeta-historia) { gap: 0; }
form.pila:has(> .tarjeta-historia) > .tarjeta-historia { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; height: auto; flex: 1 1 auto; }
form.pila:has(> .tarjeta-historia) > .boton { border-radius: 0 0 var(--radio) var(--radio); }
form.pila:has(> .tarjeta-historia) { display: flex; flex-direction: column; height: 100%; }

/* Video de muestra de la tarjeta de formato: encima de la foto (que queda de póster y respaldo); con movimiento reducido
   no se pinta y la foto vuelve a mandar. Mismo zoom al pasar el cursor que la foto. */
.tarjeta-formato__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .6s var(--suavizado);
}
.tarjeta-formato:hover .tarjeta-formato__video { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .tarjeta-formato__video { display: none; } }