/* Ventana emergente del embudo de acceso.
 *
 * Va en un archivo aparte y se carga en diferido (preload + swap, como
 * `cart-drawer.css`): nada de esto se pinta hasta el `showModal()`, así que no
 * tiene por qué costar nada en el primer pintado de la tienda.
 *
 * Los tokens salen del sistema F.I.S.M. que ya gobierna la zona de cuenta
 * (`_ac.html` -> `_ck.html`). Aquí no se define ni un color nuevo: si algo se
 * ve distinto del checkout, es un fallo, no una decisión.
 *
 * Spec: docs/superpowers/specs/2026-08-23-acceso-ventana-emergente-design.md
 */

/* ── El diálogo ────────────────────────────────────────────────────────────
   Se le quita TODO lo del agente de usuario. Un `<dialog>` trae borde, padding
   y un `max-width: calc(100% - 6px)` propios; sin resetearlos la tarjeta sale
   con un marco fino que no está en ningún mockup y en móvil no llega a pegarse
   al borde de la pantalla. */
.acc{
  border:0;padding:0;background:transparent;color:inherit;
  max-width:none;max-height:none;width:auto;
  overflow:visible;
}

/* ── Centrado en escritorio ───────────────────────────────────────────────
   El `width:auto` de arriba hace falta para matar el `max-width` del agente de
   usuario, pero de paso se lleva por delante su `width:fit-content`. Y ahí está
   la trampa: con `inset:0` en los dos ejes y el ancho en `auto`, la caja queda
   sobredimensionada y CSS resuelve el `margin:auto` que centraba a CERO. El
   diálogo se estiraba a la ventana entera y la tarjeta se quedaba pegada arriba
   a la izquierda — medido: 0px de hueco a un lado y 794px al otro, cuando la
   animación de entrada de este mismo archivo se llama `acc-entra-centro`.

   Se centra con flex y no devolviendo `margin:auto`, porque `fit-content` se
   resuelve aquí contra el espacio disponible y vuelve a dar la ventana entera.

   `[open]` NO es decorativo: sin él este `display:flex` le gana al
   `display:none` que el agente de usuario le da al diálogo CERRADO, y el
   formulario quedaría pintado encima de la tienda sin que nadie lo abra. Es la
   misma familia de fallo que ya mordió cuatro veces en este repo (un `display`
   de autor pisando el ocultado). Comprobado por mutación.

   Sólo de 641px para arriba: por debajo manda el bloque de más abajo, que la
   pega al fondo como una hoja. */
@media (min-width: 641px){
  .acc[open]{
    display:flex;align-items:center;justify-content:center;
    height:auto;inset:0;
  }
}

.acc::backdrop{background:rgba(20,12,28,.55)}
/* El desenfoque va bajo `@supports` porque en los navegadores que no lo tienen
   la declaración entera se descarta y el velo se quedaría transparente. */
@supports (backdrop-filter: blur(4px)){
  .acc::backdrop{backdrop-filter:blur(4px)}
}

/* ── La tarjeta ────────────────────────────────────────────────────────────
   420px es el ancho del diseño de Stitch. `box-sizing:content-box` y no el
   `border-box` global: con border-box el padding de 2rem sale de dentro de los
   420 y la caja útil se queda en 356. Es la misma corrección que ya lleva
   `.ac-col` en `_ac.html`, medida allí y no supuesta. */
.acc__caja{
  /* `border-box` y ancho 484 = 420 de contenido + 2rem de relleno a cada lado.
     Con `content-box` el ancho salía bien pero el ALTO no: `max-height` limita
     entonces sólo la caja de contenido y los 64px de relleno se suman por
     fuera. Medido en una ventana de 1280x720: la tarjeta pedía 700px con un
     `max-height` resuelto en 633,6 — y el botón de cerrar quedaba FUERA de la
     pantalla, comprobado con `getBoundingClientRect()`, no a ojo. Declarar los
     484 a mano es más largo de leer que `content-box`, pero es la única forma
     de que el mismo tope valga para los dos ejes. */
  box-sizing:border-box;
  width:min(484px, calc(100vw - 2.5rem));
  background:var(--pl-surface,#fff);
  border:1px solid var(--glass-border,var(--pl-border,#e0d0de));
  border-radius:16px;
  /* 2rem por los cuatro lados costaba 64px de alto. Arriba sobra de verdad: la
     fila de controles ya trae su propio `padding-top` de .5rem y un botón de
     44px, así que 1.15rem deja el mismo aire óptico con 13px menos. A los lados
     se quedan 1.5rem, que es lo que separa el campo del borde sin estrechar la
     caja útil. */
  padding:1.15rem 1.5rem 1.5rem;
  /* 94svh y no 88. Subirlo no engorda la tarjeta: `max-height` es un TOPE, y la
     caja se sigue encogiendo a su contenido — a 1440x900 el paso más alto mide
     622px y el tope resuelve 846, así que la ventana se ve igual de pequeña. Lo
     único que cambia es el caso raro en que un paso se pasa: con 88svh, `entrar`
     y los dos primeros del alta se desplazaban en cuanto aparecía un aviso de
     error encima. Queda un 6% de velo (43px a 720) — la ventana nunca toca el
     borde de la pantalla. */
  max-height:min(94svh, 100% - 1.5rem);
  overflow-y:auto;
  /* Hueco de la barra reservado SIEMPRE. Medido: la barra ocupa 17px, así que
     los pasos que desplazan dejaban el formulario 17px más estrecho que los que
     no, y al cambiar de paso los campos daban un salto lateral. Con el hueco
     fijo el ancho es el mismo en los trece. En los sistemas de barra flotante
     —macOS, móvil— no reserva nada y no cuesta un píxel. */
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}

/* `svh` y no `vh`: en móvil la barra del navegador entra y sale, y con `vh` la
   altura se calcula contra la ventana SIN barra — el botón de enviar queda por
   debajo del borde visible justo cuando el teclado está abierto, que es el
   único momento en que hace falta. Fallback para quien no tenga `svh`. */
@supports not (height: 1svh){
  .acc__caja{max-height:94vh}
}

/* ── Cabecera de la tarjeta ───────────────────────────────────────────────
   Fila de controles con hueco reservado a ambos lados aunque sólo haya uno:
   sin el hueco, los pasos con flecha de volver y los que no la tienen mueven
   el título unos píxeles al cambiar de contenido, y el salto se ve. */
.acc__cab{
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;margin:-.5rem -.5rem .25rem;
  /* Pegada arriba mientras el contenido se desplaza por dentro. El arreglo del
     `box-sizing` ya hace que la tarjeta quepa, pero un formulario largo —el
     alta pide siete campos— sigue desplazándose dentro de la caja, y sin esto
     la X se va hacia arriba y desaparece. Cerrar tiene que estar SIEMPRE a la
     vista: Escape y el velo también cierran, pero son los atajos de quien ya
     los conoce, no la salida visible.
     El fondo es obligatorio: sin él, el formulario se leería por debajo de los
     botones al pasar. */
  position:sticky;top:0;z-index:1;
  background:var(--pl-surface,#fff);
  padding-top:.5rem;
}
.acc__ctrl{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;
  border:0;background:none;padding:0;cursor:pointer;
  border-radius:999px;color:var(--pl-ink-soft,#6b5580);
  font-size:1.05rem;line-height:1;
  transition:background-color .18s ease,color .18s ease;
}
.acc__ctrl:hover{background:var(--pl-surface-2,#f5edf4);color:var(--pl-ink,#2d1f3d)}
.acc__ctrl:focus-visible{outline:2px solid var(--pl-brand,#7c3aed);outline-offset:2px}
/* Hueco fantasma cuando el paso no tiene flecha de volver. */
.acc__ctrl--hueco{visibility:hidden;pointer-events:none}

/* ── Agarre de la hoja móvil ──────────────────────────────────────────────
   Sólo existe en móvil; en escritorio no hay nada que arrastrar. */
.acc__agarre{display:none}

/* ── Móvil: hoja inferior ─────────────────────────────────────────────────
   El corte es 640px, el mismo que ya usa el checkout. */
@media (max-width: 640px){
  .acc{
    /* Pegada abajo y a lo ancho. `margin:auto auto 0` es lo que baja un
       <dialog> modal desde el centro hasta el borde inferior. */
    margin:auto auto 0;width:100%;
  }
  .acc__caja{
    width:100%;max-width:none;
    border-radius:24px 24px 0 0;
    border-bottom:0;
    padding:.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    /* Mismo tope que en escritorio. Estaba en 88svh y a 390x844 el paso 3 del
       alta pedía 748px contra 742 — se desplazaba por seis. Un mismo número
       para los dos modos es además una cosa menos que descuadrar al tocar
       cualquiera de los dos, y a 94svh la hoja sigue leyéndose como hoja: el
       agarre, las esquinas redondeadas y la tienda asomando arriba siguen ahí. */
    max-height:94svh;
  }
  .acc__agarre{
    display:block;width:40px;height:4px;border-radius:999px;
    background:var(--pl-border,#e0d0de);
    margin:.35rem auto .1rem;
    /* Zona táctil real por encima de los 4px que se ven: arrastrar una barrita
       de 4px es imposible con el pulgar. */
    padding:12px 0;background-clip:content-box;
    box-sizing:content-box;cursor:grab;touch-action:none;
  }
  .acc__cab{margin:-.25rem -.5rem .25rem}
}

/* ── Entrada ──────────────────────────────────────────────────────────────
   Sólo al abrir. Cerrar no se anima: hacerlo obliga a retrasar el `close()`
   con un temporizador, y si el temporizador no llega a correr —pestaña en
   segundo plano— el diálogo se queda abierto e invisible por encima de todo. */
@keyframes acc-entra-centro{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes acc-entra-hoja{
  from{transform:translateY(100%)}
  to{transform:none}
}
.acc[open] .acc__caja{animation:acc-entra-centro .22s cubic-bezier(.16,1,.3,1) both}
@media (max-width: 640px){
  .acc[open] .acc__caja{animation-name:acc-entra-hoja}
}
@media (prefers-reduced-motion: reduce){
  .acc[open] .acc__caja{animation:none}
}

/* Arrastre en curso: sin transición, que la siga el dedo. */
.acc--arrastrando .acc__caja{animation:none;transition:none}

/* ── Contenido ────────────────────────────────────────────────────────────
   El encabezado recibe el foco en cada paso, y `tabindex="-1"` deja un contorno
   feo en algunos navegadores al hacerlo por programa. Se quita el de `:focus`
   pero se CONSERVA el de `:focus-visible`: quien navega con teclado tiene que
   seguir viendo dónde está. */
.acc__t{margin:0;text-align:center;font-size:1.5rem;font-weight:600;
        color:var(--pl-ink,#2d1f3d);line-height:1.3}
.acc__t:focus{outline:none}
.acc__t:focus-visible{outline:2px solid var(--pl-brand,#7c3aed);outline-offset:4px;
                      border-radius:4px}
.acc__lead{margin:.35rem 0 0;text-align:center;font-size:.875rem;
           color:var(--pl-ink-soft,#6b5580)}
/* La marca. 72px es su tamaño en la PANTALLA COMPLETA de respaldo, que tiene
   toda la página para ella: allí 48px se leía como un icono de sistema y no
   como la firma de la tienda.

   Dentro de la ventana ya no se pinta este bloque. Se midió lo que costaba:
   84,6px de alto (72 + 13,6 de separación) en los doce pasos, y con ese peso
   ninguno cabía sin desplazamiento. `_acc_marco.html` la mueve a la fila de
   controles, donde el hueco ya está pagado por los botones de 44px. */
.acc__marca{display:block;width:72px;height:72px;margin:0 auto .85rem}
@media (max-width: 640px){
  .acc__marca{width:60px;height:60px;margin-bottom:.7rem}
}
/* La marca dentro de la barra. 26px dentro de una fila de 44 y centrada por el
   `space-between` de `.acc__cab`: entre el hueco/flecha de la izquierda y la X
   de la derecha, que miden lo mismo. No añade alto. */
.acc__marca--cab{width:26px;height:26px;margin:0}

/* ── Aviso de fallo ───────────────────────────────────────────────────────
   Lo pinta `render_acceso()` con los `flash()` de la vista. Va arriba del todo
   del fragmento y recibe el foco, porque es lo primero que hay que saber: sin
   él, equivocarse de contraseña repintaba la misma pantalla sin decir nada.

   Rojo de error del sistema, no uno nuevo. Borde grueso a la izquierda y no
   sólo color de fondo: el color por sí solo no es un canal (SC 1.4.1), y con
   sol encima un fondo rosa claro se lava. */
.acc__aviso{
  margin:0 0 1rem;padding:.7rem .9rem;
  border-radius:8px;border:1px solid var(--pl-err,#dc2626);
  border-left-width:4px;
  background:color-mix(in srgb, var(--pl-err,#dc2626) 8%, transparent);
  color:var(--pl-ink,#2d1f3d);font-size:.875rem;line-height:1.45;
}
.acc__aviso p{margin:0}
.acc__aviso p + p{margin-top:.35rem}
.acc__aviso:focus{outline:none}
.acc__aviso:focus-visible{outline:2px solid var(--pl-err,#dc2626);outline-offset:2px}
@supports not (color: color-mix(in srgb, red 8%, transparent)){
  .acc__aviso{background:#fdf2f2}
}
[data-theme="dark"] .acc__aviso{color:var(--pl-ink,#f2f0f3)}

/* Mientras se pide el paso siguiente. No se vacía la caja: dejar un hueco en
   blanco y volver a llenarlo hace saltar la ventana entera de alto. */
.acc__caja[aria-busy="true"]{opacity:.55;pointer-events:none;
                             transition:opacity .12s ease}

/* ── Compactado: el paso entero SIN desplazamiento ────────────────────────
   Todo lo de aquí abajo está acotado a `.acc__caja`, y eso no es prudencia: las
   mismas clases (`.ac-form`, `.ac-quick`, `.ck-field`…) las pinta también la
   PANTALLA COMPLETA de respaldo, que tiene una página entera para respirar y no
   necesita apretarse. Comprimir ahí sería pagar en aire lo que aquí se gana en
   alto. Los selectores llevan por eso dos clases (0,2,0) y ganan a la hoja
   `_ac.html`, que viaja DENTRO del fragmento y por tanto se inserta después.

   Los números salen de una medición, no del gusto: los trece pasos se abrieron
   en el navegador y se comparó `scrollHeight` contra `clientHeight` en 360x640,
   375x812, 390x844, 768x1024, 1280x720 y 1366x768. A 1280x720 —el portátil que
   manda— siete se desplazaban por dentro; `entrar` pedía 906px contra 632
   disponibles y el paso 2 del alta, 1579. El contrato acordado con el dueño es
   que ninguno se desplace de 390x844 y 1280x720 para arriba, ni siquiera con un
   aviso de error de dos líneas encima.

   Cada regla de aquí es alto que se recupera; ninguna cambia el tamaño del
   texto que hay que leer ni el de las zonas pulsables (los campos siguen en
   44px, los botones de proveedor en 46). */

/* El aviso de error, apretado. Es lo que aparece ENCIMA del paso cuando algo
   falla —correo ya tomado, contraseña incorrecta, cuenta bloqueada— y son 84px
   que llegan de golpe sobre un paso que ya cabía justo. Aquí se queda en ~56 sin
   tocar el texto: el mensaje entero se sigue leyendo, con su borde grueso a la
   izquierda y su color de error. */
.acc__caja .acc__aviso{margin-bottom:.7rem;padding:.55rem .8rem;
                       font-size:.8125rem;line-height:1.4}

/* Con un aviso delante, la entradilla del paso sobra: lo que hay que leer es
   qué falló, no la frase de orientación que ya se leyó al llegar. El `~` los
   alcanza porque los dos son hijos de `.acc__caja` — el aviso lo antepone
   `render_acceso()`. Se excluye el microtexto legal del pie, que también es
   `.acc__lead` y ése no se puede esconder nunca. */
.acc__caja .acc__aviso ~ .acc__lead:not(.acc__legal){display:none}

/* Titular: 1.4rem en vez de 1.5. Sigue mandando sobre la entradilla de .85rem
   —la diferencia de escala es la misma— y devuelve 3px por paso. */
.acc__caja .acc__t{font-size:1.4rem;line-height:1.25}
.acc__caja .acc__lead{margin-top:.3rem;line-height:1.45}

/* El formulario y sus campos. El `gap` baja de 1rem a .7rem: con la etiqueta
   pegada a su campo (.3rem) el grupo sigue leyéndose como unidad y la
   separación ENTRE campos sigue siendo más del doble que la de dentro, que es
   lo que hace que se lean como bloques y no como una lista suelta. */
.acc__caja .ac-form{margin-top:.9rem;gap:.7rem}
.acc__caja .ac-form .ck-submit{margin-top:.4rem}
.acc__caja .ck-field{gap:.3rem}
.acc__caja .ac-group{gap:.8rem}
.acc__caja .ac-group+.ac-group{margin-top:.9rem;padding-top:.85rem}

/* Vías de un toque, en fila. Apiladas costaban 113px + 25,6 de separación; en
   dos columnas son 46 + 16. `grid-auto-flow:column` con columnas iguales sirve
   para uno o para dos proveedores sin una regla por caso: con uno solo ocupa
   todo el ancho, con dos se reparten. */
.acc__caja .ac-quick{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:.55rem;margin-top:1rem;
}
/* Aquí hubo un `.ac-quick:empty{display:none}` para el caso de no tener ningún
   proveedor configurado (el div se pintaba vacío y seguía cobrando su
   separación). NO FUNCIONABA, y se comprobó midiendo: Jinja deja dentro un nodo
   de texto en blanco, así que `q.matches(':empty')` devuelve **false** y la
   regla no aplicaba nunca. El arreglo está donde tiene que estar — las
   plantillas no pintan el contenedor si no hay a quién meter dentro. */
.acc__caja .ac-google,
.acc__caja .ac-secondary{
  min-height:46px;margin-top:0;
  font-size:.875rem;gap:.5rem;
  /* Dos botones en 420px dan 204 cada uno y «Entrar con Google» mide ~160:
     cabe. El `nowrap` es el seguro de que, si no cupiera, el botón no crezca a
     dos renglones y se lleve por delante el ajuste. */
  white-space:nowrap;
}
.acc__caja .ac-google svg,
.acc__caja .ac-secondary svg{flex:none}

/* Pareja de campos en dos columnas. El `align-items:start` es lo que impide que
   el campo sin ayuda debajo estire su caja hasta la altura del que sí la tiene.

   El corte está en 361px y no en el 641 del resto del archivo: medido a 390x844
   —el móvil del contrato— el paso 3 con un aviso de error encima se quedaba en
   4px de holgura con los campos apilados, y en dos columnas pasa a 87. Cada
   columna mide ahí 171px, y el ojo de ver/ocultar flota encima del campo sin
   robarle ancho, así que se siguen viendo doce puntos largos. Por debajo de
   360px vuelven a apilarse: ahí ya no da. */
.acc__caja .ac-par{gap:.7rem}
@media (min-width: 361px){
  /* `grid-auto-flow:column` con columnas iguales, y no `1fr 1fr`: la pareja
     tiene DOS hijos en el paso 3 (las dos contraseñas) pero puede tener UNO en
     el paso 2 —el país sólo se pregunta con pasaporte—, y con `1fr 1fr` ese
     único campo se quedaría en media caja con un hueco al lado. Así se reparte
     lo que haya. Mismo recurso que `.ac-quick` con uno o dos proveedores. */
  .acc__caja .ac-par{grid-auto-flow:column;grid-auto-columns:1fr;align-items:start}
}

/* Separador «o con tu contraseña». */
.acc__caja .ac-o{margin:.85rem 0 0}

/* Pie de alternativa («¿No tienes cuenta?»). */
.acc__caja .ac-alt{margin-top:1rem;padding-top:.85rem}
.acc__caja .ac-alt .ac-secondary{margin-top:.6rem}

/* Resumen del documento del alta. */
.acc__caja .ac-doc{margin-bottom:.9rem;padding:.6rem .85rem}

/* Los tres avisos en caja del embudo —aviso fiscal, nota del documento y el de
   «nunca pedimos el código por teléfono»— comparten forma y se aprietan igual.
   El texto NO se toca: son los que hay que leer. */
.acc__caja .ac-ecf,
.acc__caja .id-nota,
.acc__caja .cd-aviso{padding:.65rem .8rem;line-height:1.5}
.acc__caja .id-nota{margin-top:.9rem}
.acc__caja .cd-aviso{margin-top:.85rem}
.acc__caja .id-tipos{margin-top:.9rem}
.acc__caja .id-salida{margin-top:.7rem}
.acc__caja .cd-acciones{margin-top:.8rem}
.acc__caja .ck-fine{margin-top:.55rem}
.acc__caja .ck-lead{margin-bottom:1rem}

/* Microtexto legal del pie. Llevaba el margen en un `style=` de la macro, que
   gana a cualquier clase y dejaba estos 6px fuera de alcance: se pasó a la
   clase `acc__legal` en `_acc_marco.html` para poder ajustarlo desde aquí. */
.acc__legal{margin-top:1rem;font-size:.75rem}
.acc__caja .acc__legal{margin-top:.65rem}

/* ── Segundo escalón: la ventana baja ─────────────────────────────────────
   El compactado de arriba se afinó contra los 632px de alto útil que deja un
   navegador a 1280x720, pero nunca llegó a comprobarse EN el navegador: el
   commit que lo trajo lo dejó escrito como pendiente. Medido ahora, con
   `scrollHeight` contra `clientHeight` de `.acc__caja` y el viewport a
   1280x632, el alta seguía sin caber: el paso 2 pedía 613px y el paso 3, 611.
   Se desplazaban por 21 y por 19. El control es `entrar`, que ahí cabe con
   354px y 278 de sobra — o sea que la vara no era injusta: faltaban esos dos.

   Este escalón devuelve ~26px y sólo se enciende donde falta sitio. No baja el
   tamaño de ningún texto ni toca zonas pulsables: los campos siguen en 44px y
   el botón de enviar en 51. La separación ENTRE campos queda en 8,8px contra
   los 4 de dentro del campo — más del doble, que es lo que sostiene que se lean
   como bloques y no como una lista suelta.

   El corte es por ALTO y no por ancho a propósito: quien sufre es el portátil
   de 720px y el teléfono en horizontal, no el teléfono de pie. A 390x844 los
   tres pasos ya cabían (686, 680 y 574 contra 686 disponibles), y ahí este
   bloque no llega a aplicar.

   Lo que este escalón NO arregla, y hay que decirlo: con un aviso de error
   encima, el paso 3 pide 660px y se pasa 68. En el paso 2 el aviso se paga solo
   —al aparecer se esconde la entradilla, que son 40px— pero el paso 3 no tiene
   entradilla que esconder; lo único que le queda debajo es el aviso fiscal, y
   ése es contenido que decide el dueño, no espacio que se pueda recortar. */
@media (max-height: 700px){
  .acc__caja{padding-bottom:1rem}
  .acc__caja .ac-form{margin-top:.6rem;gap:.55rem}
  .acc__caja .ac-form .ck-submit{margin-top:.15rem}
  .acc__caja .ck-field{gap:.25rem}
}

/* El respaldo sin ventana emergente no necesita estilos propios: es la pantalla
   completa de siempre, con el CSS de la zona de cuenta que ya tenía. Lo decide
   el servidor en `entrada_acceso()`, mirando la cookie que pone la cabecera. */