/*
 * Biwenger · sheet del código Premium.
 *
 * Solo el CUERPO del sheet: el chrome (backdrop, cabecera, cierre, animación de
 * entrada) lo pone `select-modal.css`, que ya se importa global. Aquí no se
 * redefine nada de eso — divergir del resto de bottom-sheets por un componente
 * sería justo lo que el design system existe para evitar.
 *
 * Las filas de la sección viven en `pages/settings.css` y NO necesitaron CSS:
 * `.settings-row__label` ya era flex-column y `.settings-row__hint` ya era el
 * subtítulo. El macro solo tuvo que emitirlo.
 */
@layer components {
  /* Solo existe para dar scope de Stimulus a la fila que abre el modal y al
     modal a la vez. `display: contents` lo borra del layout, así que el título
     y el grupo siguen siendo hijos directos del flex de `.settings` y conservan
     su gap. El scope de Stimulus es del DOM, no del layout. */
  .bw-code-scope {
    display: contents;
  }

  .bw-code__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  /* Cómo funciona — numerada, porque es una secuencia y el orden importa.
     Nada de `display: flex` aquí: convierte los <li> en items flex y el
     navegador deja de pintar los marcadores, que es justo lo que aporta la
     lista. El hueco entre pasos va por margen, no por gap. */
  .bw-code__steps {
    margin: 0;
    padding-left: var(--space-5);
    list-style: decimal;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .bw-code__steps li + li {
    margin-top: var(--space-2);
  }

  /* El atributo `hidden` tiene que MANDAR dentro del modal.
   *
   * El `[hidden] { display: none }` del reset no gana a una regla de CLASE que
   * declare `display` en una capa posterior — lo avisa el propio reset — y
   * `.bw-code__state` declara `display: flex` justo aquí. El modal funcionaba
   * igualmente porque su único anfitrión, Ajustes, trae un
   * `.settings [hidden] { display: none }` de PÁGINA que lo tapaba de rebote.
   *
   * Al montar el mismo modal en el home eso dejó de existir y el bloque
   * "Cargando…" se veía en un modal que no estaba cargando nada. El guard vive
   * ahora en el componente, que es de donde no se puede caer: cualquier
   * anfitrión futuro lo hereda sin saber que existe.
   */
  .bw-code [hidden] {
    display: none;
  }

  .bw-code__state {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }

  .bw-code__state--loading {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  .bw-code__countdown,
  .bw-code__note,
  /* La letra pequeña del final. Una sola regla: estaba declarada DOS veces
     seguidas y la segunda pisaba el `font-size` de la primera, así que el
     `--text-sm` de arriba no llegaba a pintar nunca.

     Sin `padding-top`: `.bw-code__body` es flex column con `gap: var(--space-4)`,
     que ya separa este bloque del anterior. El padding sumaba encima del gap. */
  .bw-code__legal {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
    border-top: 1px solid var(--color-border-subtle);
  }

  /* El filete separa la letra pequeña del resto del modal, así que lo lleva solo
     la PRIMERA. Con `border-top` en las dos, la segunda dibujaba una raya entre
     dos líneas que son el mismo bloque. El aire entre ellas ya lo pone el `gap`
     del body. */
  .bw-code__legal + .bw-code__legal {
    border-top: 0;
  }

  .bw-code__done {
    margin: 0;
    color: var(--color-success);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .bw-code__warn {
    margin: 0;
    color: var(--color-warning-strong);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .bw-code__cta {
    /* 44px de alto mínimo: objetivo táctil, regla del modo. */
    min-height: 44px;

    /* El CTA principal (`issued`) es un <a>, no un <button>: sin esto llegaría
       subrayado, con el texto pegado arriba a la izquierda y sin usar el alto
       táctil, porque un anchor no centra su contenido como sí hace un botón. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-title);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
  }

  /* El icono de "sale de la web" acompaña al texto, no compite con él. */
  .bw-code__cta svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }

  .bw-code__cta:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .bw-code__cta--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
  }
}