/* * Modal de selección de mercado (DI26-1071): lo que no es token ni maquetación — * el overlay a pantalla completa, el bloqueo del scroll y el desplazamiento del * knob. Los colores salen de las utilidades que compila el tema. * * En fichero y no en línea en `wp_head`: son 9 KB idénticos en todas las páginas y * para todos los visitantes, así que como hoja se descarga una vez por sesión en * lugar de una por página. */ /* El id gana al display:none de [hidden], así que hay que reponerlo. */ #azc-market-modal[hidden] { display: none; } /* Tapa el viewport entero, navbar sticky incluido. */ #azc-market-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; } /* El desenfoque va en una capa HERMANA de la tarjeta, no en su ancestro. Un elemento con backdrop-filter se promociona a su propia capa de composición y el redondeo de sus hijos lo aplica el compositor, que en el primer frame todavía no lo tiene: la tarjeta salía con las esquinas en pico hasta que un clic forzaba el repintado. Como hermana, nada de eso la alcanza. `fixed` y no `absolute`: si el contenido desborda y el contenedor scrollea, el desenfoque tiene que quedarse quieto cubriendo el viewport. */ #azc-market-modal .azc-market-modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--wp--custom--color--grey-800, #2c2e2f) 40%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.azc-market-modal-open { overflow: hidden; } /* AC-6 de DI26-979: con el modal abierto no se muestra ningún aviso. No se puede decidir en servidor —el aviso se pinta ahí y abrir el modal es decisión de cliente, porque la página va cacheada—, así que se resuelve ocultándolos mientras está abierto. No es cosmético: el modal fija en ese mismo momento la señal de tipo de usuario de la que se queja uno de los avisos, así que sin esto el visitante lee un reproche sobre un ajuste que está eligiendo. */ body.azc-market-modal-open .azc-notices { display: none; } /* La forma se declara UNA vez y la usan la regla de foco y la del panel de móvil. Si cada una repitiera el radio, el foco —que la tarjeta recibe al abrirse— volvería a redondear las esquinas de abajo del panel hasta el primer clic. */ #azc-market-modal [role="dialog"] { --azc-modal-radius: var(--wp--custom--radius--r-32, 32px); } /* En móvil el modal es un panel que sube desde abajo: ancho completo, pegado al borde inferior y redondeado solo por arriba. Se corta en 767 porque 768 es donde la tarjeta ya cambia de ancho, así que hay un único punto de cambio y no dos. `max-height` con scroll propio para que una traducción larga no lo desborde, y el hueco inferior suma el área reservada del sistema: sin ella el botón queda debajo de la barra de gestos del móvil. */ @media (max-width: 767px) { #azc-market-modal { align-items: flex-end; padding: 0; } #azc-market-modal [role="dialog"] { --azc-modal-radius: var(--wp--custom--radius--r-32, 32px) var(--wp--custom--radius--r-32, 32px) 0 0; border-radius: var(--azc-modal-radius); width: 100%; max-width: none; max-height: 92vh; overflow-y: auto; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } } /* WordPress emite SIN CAPA, inline en el : a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px } La tarjeta lleva tabindex="-1" solo para recibir el foco al abrir, así que ese `[tabindex]` la engancha y, mientras tiene el foco, le pinta el anillo azul Y le aplasta el radio a 2px: el modal se abría con las esquinas en pico y se redondeaba al primer clic, que es cuando el foco se va. Hay que reponer las DOS cosas — quitar solo el outline deja el radio roto, que fue justo el primer intento. Sin capa gana a `@layer utilities` sin que la especificidad intervenga, por eso va aquí y no en una utilidad. El radio se toma del mismo token que emite `rounded-32`, para que no haya dos verdades. Solo la tarjeta: no es un control que el visitante navegue, y los de dentro conservan su anillo. */ #azc-market-modal [role="dialog"]:focus, #azc-market-modal [role="dialog"]:focus-visible { outline: none; border-radius: var(--azc-modal-radius); } /* El frame recorta las cajas de texto a la altura de mayúscula — 11px para un cuerpo de 16 — y por eso el campo le mide 48: con los line-height del sistema (18 la etiqueta, 24 el valor) salen 68. Se reproduce fijándolos aquí, y no con `text-box-trim`, para no dejar la altura a merced del soporte del navegador: Firefox todavía no lo implementa y el campo mediría distinto según quién mire. 8 + 11 + 8 + 11 + 8 + 2 de borde = 48. Va en este bloque porque el orden entre `text-p` y `leading-*` dentro de @layer utilities no está garantizado. */ #azc-market-modal .azc-market-modal-field label, #azc-market-modal .azc-market-modal-field [role="combobox"], #azc-market-modal .js-azc-market-modal-confirm { line-height: 11px; } /* El frame pide esta línea en Source Sans 3 a 14/500 y la escala no publica ese paso: `text-label-sm` es 12 y `text-p` 16, así que no hay utilidad que lo dé. Sin familia declarada heredaba Barlow, que es la de los titulares. Sale del mismo preset del que la toman las utilidades de tipografía, para no escribir el nombre de la fuente a mano, y se declara aquí entera para que la excepción esté en un sitio y no repartida entre clases y CSS. Debería caerse el día que diseño publique el paso de 14. */ #azc-market-modal .azc-market-modal-caption { font-family: var(--wp--preset--font-family--source-sans-3, "Source Sans 3", sans-serif); font-size: 14px; font-weight: 500; } /* El cuerpo son varias líneas y ahí bajar el interlineado las aplastaría entre sí. El frame recorta solo los bordes EXTERIORES de la caja de texto, que con interlineado 24 y mayúscula 11 son 6.5 por arriba y por abajo; el hueco de 12 que declara el frame es entre cajas ya recortadas, así que el margen negativo lo deja donde toca. Mismo motivo que arriba para no usar `text-box-trim`. */ #azc-market-modal .azc-market-modal-body { margin: -6.5px 0; } /* El glifo del frame no es `quit` a otro tamaño: tiene más aire dentro de su caja y el trazo más grueso. Dentro de los 24px del hueco dibuja una X de 11.0px con 2.15px de trazo; `quit` a 24px dibuja 14.8px con 2.0. Se iguala renderizándolo a 18px — 11.0 x 32/19.68, el ancho que ocupa su aspa — y compensando el trazo, que al encoger adelgazaría: 2.15 x 32/18 = 3.81 totales sobre las 2 que ya trae, o sea 1.81 de contorno. Va como contorno y no como grosor del path porque `quit` es un path RELLENO; el contorno lo engorda hacia fuera. En CSS y no en el SVG: esos ficheros los genera `pnpm sync:icons` desde @airzone/icons y una edición se perdería al regenerarlos. Solo este botón. */ #azc-market-modal .js-azc-market-modal-close svg path { stroke: currentColor; stroke-width: 1.81; stroke-linejoin: round; } /* La flecha apunta hacia arriba mientras la lista está abierta. Con `rotate` y no con `transform`, que es donde Tailwind v4 pone el centrado vertical. El estado lo declara el propio combobox en `aria-expanded`, así que no hay una segunda verdad que se pueda desincronizar. */ #azc-market-modal .azc-market-modal-chevron { transition: rotate 0.15s ease; } #azc-market-modal .azc-market-modal-field:has([aria-expanded="true"]) .azc-market-modal-chevron { rotate: 180deg; } /* La opción activa se marca con una clase desde JS, pero el ratón también tiene que teñirla al pasar por encima. */ #azc-market-modal [role="option"]:hover { background-color: var(--azc-input-field-primary-focus-fill); } @media (prefers-reduced-motion: reduce) { #azc-market-modal .azc-market-modal-chevron { transition: none; } } #azc-market-modal .azc-market-modal-knob { transition: transform 0.2s ease; } #azc-market-modal [aria-checked="true"] .azc-market-modal-knob { transform: translateX(24px); } @media (prefers-reduced-motion: reduce) { #azc-market-modal .azc-market-modal-knob { transition: none; } }