/* ============================================================================================================
* plantilla-repaso.css · VisionLovers · REPASO DE LAS PANTALLAS YA MONTADAS CONTRA EL DIBUJO DE CLAUDE DESIGN
* 26/09/2026, Claude Code (ayudante del coordinador). Lo encola inc/plantilla-repaso.php con el interruptor
* VL_PLANTILLA_REPASO (true = todos · 'prueba' = solo con ?vl_camino_b=1 · false = apagado).
*
* Qué es, en cristiano: se ha mirado la web viva (sin sesión) a 375, 850 y 1440 px al lado del dibujo
* (08-REMATE-FINAL/03-pantallas: registro-por-tipo, confirmacion-del-triaje, barra-iconos-movil, letra-titulos,
* 11331-resultados-busqueda; y de referencia 07-DISENO-TOTAL/03-pantallas/10978-login). Aquí van SOLO las
* diferencias que se arreglan con CSS. Cada regla dice qué diferencia arregla y el dato medido (antes → dibujo).
* Lo que necesita tocar PHP o es una decisión NO está aquí: va en el informe.
*
* Reglas de la casa: cero !important (se gana por especificidad, como en cabecera-1200.css), todo con tokens --vl-*.
* Las reglas que tocan letra o espaciado dejan en paz el panel de accesibilidad (html[data-vl-letra],
* html[data-vl-espaciado], html[data-vl-facil]): si el visitante lo usa, manda el panel.
* Marcha atrás: VL_PLANTILLA_REPASO en false, o quitar 'plantilla-repaso' del bucle de functions.php.
* ============================================================================================================ */
/* ---------- 1 · El hueco blanco de 40 px entre la cabecera y la primera franja ----------
Medido: Woodmart pone «padding-top: 40px» (y 40 abajo) a main.wd-content-layout. En la web viva la primera franja
empieza 40 px por debajo de la cabecera: a 375/850 la barra de iconos acaba en 153 y el hero empieza en 193; a 1440 la
cabecera acaba en 76 y el hero empieza en 116. En el dibujo (marco.html y capturas de 07) la franja lila va pegada
a la cabecera: 0 px. Pasa en los 5 registros por tipo, en resultados de la búsqueda (11331, con y sin triaje),
en la portada (10499), en entrar (10978), en el registro de ópticas (10987), en la venta de la ficha (11332, sin
sesión) y en los listados por localidad (medido en /single-location/espana/valencia/). Solo se quita cuando el
primer bloque es una pantalla del camino B; las páginas de WPBakery no se tocan (comprobado en el triaje, 10547). */
html body .wd-content-layout:has(> .wd-content-area > .entry-content > .vl-plantilla-entrar:first-child),
html body .wd-content-layout:has(> .wd-content-area > .entry-content > .vl-plantilla-alta-venta:first-child),
html body .wd-content-layout:has(> .wd-content-area > .entry-content > .vl-hero:first-child),
html body .wd-content-layout:has(> .wd-content-area > .entry-content > .vl-confirmacion:first-child),
html body .wd-content-layout:has(> .vl-plantilla-portada > .vl-hero:first-child) {
padding-top: 0;
}
/* Y abajo: en los 5 registros la franja lila es el último bloque, y entre ella y el pie quedaban 40 px en blanco
(medido: hero acaba en 2671, pie en 2711, a 375 en /registro-profesional-visionlovers/). En el dibujo, lila y pie se tocan. */
html body .wd-content-layout:has(> .wd-content-area > .entry-content > .vl-plantilla-entrar > .vl-hero--registro:last-child) {
padding-bottom: 0;
}
/* ---------- 2 · 10 px de más debajo de cada punto de las listas ----------
Medido: Woodmart da «margin-bottom: 10px» a todo (parts/base.css «:is(ul, ol) li»). En el dibujo las listas
del sistema ya separan sus puntos con «gap» y el no lleva margen. Resultado en la web viva:
· registro (.vl-hero__meta, las 3 garantías): 106 px de alto a 1440/850 frente a 86 del dibujo; 129 frente a 109 a 375;
· «Qué pasa ahora» del triaje (.vl-confirmacion__pasos): 10 px de más entre paso y paso;
· migas de pan (.vl-migas, «Inicio › Directorio › Resultados»): 38 px de alto frente a 32. */
html body .vl-hero__meta li,
html body .vl-confirmacion__pasos li,
html body .vl-migas li {
margin-bottom: 0;
}
/* ---------- 3 · «Triaje recibido» (resultados que vienen del triaje): doble margen lateral ----------
Medido a 375: el bloque va dentro del .container de Woodmart (15 px a cada lado) y además lleva su .vl-container
(16 px): el texto empieza en x=31 y la columna mide 313 px. En el dibujo empieza en x=16 y mide 343 px (un 9 % más).
El hero «Resultados de tu búsqueda» al que sustituye ya iba a todo el ancho (base.css hace eso con .vl-hero);
aquí se hace lo mismo, con el mismo truco (body ya lleva overflow-x:hidden). A 850 y 1440 no cambia nada visible:
el bloque va centrado en 640 px igual que en el dibujo (x=105 a 850, x=400 a 1440, medido). */
html body .entry-content > .vl-confirmacion.vl-triaje-resultados {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
/* ---------- 4 · Barra de 6 iconos: «Mi cuenta» partido en dos líneas ----------
Medido a 375: cada hueco mide 59,8 px y el enlace lleva 4 px de relleno a cada lado (reparo-a.css G4, letra de 12 px);
«Mi cuenta» necesita 59,8 px y solo tiene 51,8, así que sale en dos líneas y su icono queda 6 px más arriba que los
otros cinco (icono a y=4 frente a y=10). En el dibujo las seis etiquetas van en una línea y los iconos a la misma
altura. Se quita el relleno lateral del enlace (el hueco que se toca sigue midiendo lo mismo), el espaciado de letra
(0,24 px por letra) y el salto de línea: «Mi cuenta» pasa a medir 57,6 px y cabe. Se mantiene la letra de 12 px de
la auditoría. Solo entre 360 y 440 px, que es donde se partía (por encima de ~423 px ya cabía); por debajo de 360
no cabría en una línea y se deja como está. No se aplica con el panel de accesibilidad en «letra» o «espaciado». */
@media (min-width: 360px) and (max-width: 440px) {
html:not([data-vl-letra]):not([data-vl-espaciado="si"]) body.vl-con-barra-iconos .wd-page-content nav.vl-barra-iconos[aria-label] a {
padding-inline: 0;
letter-spacing: 0;
white-space: nowrap;
}
}
/* ---------- 5 · Letra de los títulos: la opción B (Manrope) lleva el espaciado apretado ----------
Medido en el dibujo letra-titulos, opción B (la elegida por Sergio el 24/09): h1 y título del hero con
letter-spacing -0,8 px a 40 px, h2 con -0,6 px a 30 px (= -0,02em, remate-1-1.css «.vl-letra--manrope»). En la web
viva la letra ya es Manrope pero el espaciado es «normal»: esa regla solo funcionaba dentro de .vl-letra--manrope,
una clase que ninguna página lleva. Aquí se aplica a todos los títulos, igual que el dibujo.
OJO, especificidad a propósito MÍNIMA (:where + etiqueta = 0,0,1): así cualquier título con clase propia que lleve su
espaciado gana. Caso medido: los títulos del pie son