/* ============================================================================
Azulejo — sistema visual de Farmacia Márquez
============================================================================
🔴 Los colores NO se eligen a ojo. `node ops/comprobar-css.js` calcula el
contraste de cada pareja con la fórmula de WCAG y falla por debajo del
mínimo. Si se cambia uno, hay que pasar ese script — porque el cliente
medio de una farmacia de barrio tiene setenta años y mira el móvil en la
calle, y porque el RD 193/2023 art. 14 obliga a nivel AA a las webs
privadas de bienes y servicios, sin exención por tamaño, el 1-ene-2029.
LA IDEA. El azulejo sevillano es loza blanca vidriada con un rótulo encima,
azul y blanco, cogida con junta. Aquí eso no se imita con texturas: la
página es CAL y el contenido es PLIEGO blanco apoyado encima. El blanco deja
de ser el vacío y vuelve a ser un material — que es justo lo que hace falta
cuando los packshots del proveedor son blancos y hoy se funden con el fondo.
TRES COSAS QUE NO SE HACEN, Y POR QUÉ:
· NO hay tipografía web. Medido: la web pesa 17-22 kB en el cable y bloquea
6,2 (ops/pesar.js). Una variable de dos ejes en woff2 son 40-90 kB: entre
dos y cuatro veces la página entera. Y lo único que era requisito de
verdad —las cifras tabulares para que los precios no bailen— ya lo da la
pila del sistema. El registro de rótulo se consigue con peso, caja alta y
prosa espaciada. Si algún día se quiere, se presupuesta contra pesar.js.
· NO hay modo oscuro. Los packshots son blancos y deslumbran sobre negro.
· NO hay animación de entrada, ni sombras que floten, ni urgencia. El
art. 3.4 del RD 870/2013 prohíbe incentivos con medicamentos, y la
cerámica no flota: solo se animan color, borde y sombra, 120 ms.
========================================================================= */
:root {
/* --- los ocho nombres que audita ops/comprobar-css.js. No se renombran. -- */
--fondo: #ffffff; /* EL PLIEGO: tarjeta, ficha, diálogo, packshot */
--texto: #0c1a14; /* tinta · 17,90:1 sobre pliego · 16,29 sobre cal */
--gris: #4f5f59; /* secundario · 7,04:1 sobre pliego */
--verde: #0f6b4f; /* verde botica · 6,49:1 */
--verde-claro: #d7e8df; /* verde cal */
--rojo: #a3231c; /* 7,46:1 */
--borde: #d5ded8; /* 🔴 DECORATIVO. 1,38:1. Nunca en un control. */
--borde-campo: #6e827a; /* 4,09:1 — el de los CONTROLES */
/* --- el resto del sistema --------------------------------------------- */
--papel: #f2f5f2; /* cal: el suelo de body, cabecera y pie */
--verde-hondo: #0a4633; /* :hover y :active del botón principal */
--azul: #1b4b73; /* azul de Triana */
--azul-hondo: #12324d; /* barra de identidad del panel */
--azul-cal: #e3eaf1; /* fondo del bloque oficial */
--azul-tenue: #a9c0d4; /* texto secundario SOBRE --azul-hondo */
--rojo-hondo: #7f1b16; /* :hover del botón de rechazar */
--rojo-cal: #f7e4e2;
--ambar: #7a4a00; /* el tercer temple: «lo revisa alguien» */
--ambar-banda: #a9660a;
--ambar-cal: #f6e9d4;
--wa: #25d366; /* verde de Meta. Fijo, no es nuestro. */
/* 🔴 Inerte con COLOR, no con `opacity`. Un botón a opacity .5 da 2,28:1 y
además el valor no se puede medir con un script: el comprobador ve el
color declarado, no el compuesto. Aquí el deshabilitado tiene contraste
real y se audita como cualquier otro par. */
--inerte: #e1e7e4;
--inerte-texto: #45524d; /* 6,29:1 sobre --inerte */
--inerte-borde: #a9b6b0;
/* El foco. Azul de Triana: es lo que mete el azulejo dentro de la tienda y
no solo en el bloque oficial. 9,13:1 sobre pliego, 8,31 sobre cal. */
--foco: #1b4b73;
--aro: 2px;
/* Formas. Cerámica: canto vivo, radio corto. */
--radio: 3px;
--radio-min: 2px;
--linea: 1px;
--regla: 2px; /* la regla que cierra un rótulo */
--banda: 3px; /* la banda de estado a la izquierda */
/* Espacio. TODO en rem: el cliente de setenta años sube el tamaño de letra
del navegador, y un objetivo táctil congelado en px rompe WCAG 1.4.4.
El módulo grande es la junta del azulejo, 2,125rem = 34px por defecto. */
--e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1.0625rem;
--e5: 1.5rem; --e6: 2.125rem; --e7: 3.1875rem; --e8: 4.25rem;
--junta: 2.125rem;
--toque: 2.75rem; /* 2.5.8 pide 24px; 44 es lo cómodo */
--ancho: 1100px;
--ancho-doc: 46rem;
--medida: 68ch; /* ninguna prosa más ancha que esto */
--rapido: 120ms;
}
* { box-sizing: border-box; }
/* 🔴 Sin esto, el atributo `hidden` NO oculta nada en cuanto el elemento tiene
una clase que fija `display`. Y aquí las tiene: `.campo`, `.consent`,
`.ia-panel` y `.prod` son todas flex o grid, así que `el.hidden = true`
—que es como se ocultan cosas en todo el JavaScript de esta web— no hacía
absolutamente nada sobre ellas. Consecuencias reales que hubo: los campos
de dirección seguían a la vista al elegir «recoger en la farmacia», y el
consentimiento de renuncia al desistimiento salía en TODOS los carritos.
El `!important` es correcto: `hidden` es una decisión del documento y tiene
que ganar a cualquier clase de presentación. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--papel);
color: var(--texto);
font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Las cifras del sistema son proporcionales por defecto y los precios bailan
en columna. Esto no cuesta un solo byte de descarga. */
font-variant-numeric: lining-nums;
-webkit-text-size-adjust: 100%;
}
a { color: var(--verde); text-underline-offset: .18em; }
a:hover { color: var(--verde-hondo); }
/* --- EL FOCO ---------------------------------------------------------------
🔴 Antes había UNA sola regla :focus-visible en toda la web (las tarjetas de
categoría). Todo lo demás dependía del recuadro del navegador, que sobre
estos colores casi no se ve. Es el criterio 2.4.7, nivel AA.
El `outline-offset` no es estético: un aro verde sobre un botón verde da
1,00:1 —invisible—. Con separación, el aro se apoya en la PÁGINA, no en
el botón, y ahí el azul da 9,13:1 sobre pliego y 8,31 sobre cal. Por eso
el offset es obligatorio y por eso el aro es azul y no verde. */
:focus-visible {
outline: var(--aro) solid var(--foco);
outline-offset: var(--aro);
}
/* Sobre fondos oscuros el aro azul desaparece: allí se cambia el token, no la
regla. */
.barra-panel, .ia-yo { --foco: #ffffff; }
/* El foco al tras buscar es para lectores de pantalla; el recuadro ahí no
aporta nada y despista. Es la ÚNICA excepción legítima de toda la hoja. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
/* --- rótulos ---------------------------------------------------------------
La voz de azulejo se hace con caja alta, peso y prosa espaciada, no con una
tipografía descargada. */
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }
h1 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2rem); margin: 0 0 var(--e3); letter-spacing: -.01em; }
h2 { font-size: 1.375rem; margin: var(--e6) 0 var(--e3); }
h3 { font-size: 1.0625rem; margin: 0 0 var(--e2); }
p { margin: 0 0 var(--e3); max-width: var(--medida); }
/* La regla de cartucho: cierra el rótulo de sección y corre hasta el final.
Es el gesto del bote de botica, y cuesta dos declaraciones. */
.regla { border-bottom: var(--regla) solid var(--texto); padding-bottom: var(--e2); }
.rotulo {
font-size: .75rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .14em; color: var(--gris);
}
/* --- cabecera -------------------------------------------------------------- */
header {
background: var(--papel);
border-bottom: var(--linea) solid var(--borde);
position: sticky; top: 0; z-index: 10;
}
/* La cornisa: una junta de verde a sangre arriba del todo. Es lo único
decorativo de la cabecera y es lo que la identifica de un vistazo. */
header::before { content: ""; display: block; height: 4px; background: var(--verde); }
.barra {
max-width: var(--ancho); margin: 0 auto; padding: var(--e3) var(--e4);
display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap;
}
.logo {
display: inline-flex; align-items: center; gap: var(--e2);
font-weight: 700; font-size: 1.1rem; color: var(--texto); text-decoration: none;
letter-spacing: -.01em;
}
.logo img { width: 1.75rem; height: 1.75rem; display: block; }
.logo b { font-weight: 700; }
.logo i {
font-style: normal; font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--gris); display: block; margin-top: -.1em;
}
/* 🔴 El `flex:1` va en el FORMULARIO, no en el input. Al envolver el input en
un