/* * CCM Tienda Sections — header. * * Paso H.1: estructura de las tres franjas y estado neutro de sesión. Los * paneles desplegables (H.4), el cajón móvil (H.3) y la tira de marcas (H.5) * llegan después; sus contenedores ya están contemplados aquí. * * Los valores del buscador NO son inventados: están medidos sobre el header en * vivo de producción (fondo #eee, alto 44px, radio 4px, 13px, lupa dentro a la * izquierda con 38px de sangría, marcador #777). * * No se declara `font-family`: la hereda del tema, que ya carga * "founder grotesk CCM". Declararla aquí arriesga un fallback si la fuente no * está encolada en esa página. */ /* El cajón va en la lista aunque no sea parte del `

` en el DOM. * * El JS lo cuelga del `` al arrancar —tiene que ser modal y ganar a todo, * y dentro del header no podía por el contexto de apilamiento de Elementor—. * Al salir de ahí dejó de heredar estas variables: se comprobó y **todas * salían vacías** dentro del cajón. * * No se rompió nada de milagro, porque cada regla suya las pide con valor de * respaldo. Pero eso es una mina: cambiar un color aquí arriba no llegaría al * cajón y nadie entendería por qué. Declarándolas también en él, los dos beben * de la misma fuente. */ .ccmts-header, .ccmts-header__cajon { --ccmts-h-tinta: #1a1a1a; /* El rojo de acción de la tienda, medido en producción: es el que llevan el botón de aceptar cookies, el globo del carrito y los iconos. * * Antes había aquí un #e63946 que no aparecía en ningún sitio de la web; * era invención mía. El cambio además arregla un problema de contraste: * blanco sobre #e63946 da 4,17:1 y no llega al mínimo 4,5:1 de WCAG para * texto normal; sobre #e60000 da 4,81:1 y sí pasa. * * Ojo: el #cc3366 que aparece 605 veces en producción NO es marca, es el * color de enlace del tema, heredado por cada de la página. */ --ccmts-h-rojo: #e60000; --ccmts-h-fondo: #fff; --ccmts-h-barra: #191818; --ccmts-h-campo: #eee; --ccmts-h-marcador: #777; --ccmts-h-linea: #e8e8e8; /* Medidos en el header en vivo (produccion, 1280px): franja superior de 82px, barra negra de 42px, y ancho completo con 10px de sangria — sin max-width, el logo pega a la izquierda y el carrito a la derecha. */ --ccmts-h-alto-barra: 82px; --ccmts-h-alto-nav: 42px; --ccmts-h-ancho: 1300px; /* El radio del campo cambia por punto de corte; se guarda en variable para que la regla de foco no lo fije y lo rompa en móvil. */ --ccmts-h-campo-radio: 4px; } /* El fondo y el color van SOLO al header, no al cajón: el cajón ocupa toda la pantalla (`inset: 0`) y pintarlo de blanco taparía la página entera en vez de dejar ver el fondo oscurecido. */ .ccmts-header { background: var(--ccmts-h-fondo); color: var(--ccmts-h-tinta); } /* Header fijo. * * Esto vale cuando el header es hijo directo del body —el caso del tema * propio que vendrá— pero **no basta dentro de Elementor**, y costó verlo. * * `position: sticky` solo se pega dentro de los límites de su padre. Metido en * una plantilla de Elementor, nuestro header queda así: * * header.elementor-location-header ← el envoltorio de la plantilla * div.e-con-parent * div.elementor-widget-ccmts_header * div.elementor-widget-container * header.ccmts-header--fijo ← el nuestro * * Ese envoltorio mide exactamente lo mismo que el header, así que no hay * recorrido donde pegarse: en cuanto el envoltorio sale de pantalla, el header * se va con él. El navegador hacía lo correcto; el sticky estaba puesto en el * elemento equivocado. * * Se deja aquí igualmente porque es lo que hará falta el día que el header * viva fuera de Elementor, y porque un sticky dentro de otro no molesta. */ .ccmts-header--fijo { position: sticky; top: 0; z-index: 300; } /* Y aquí el que de verdad manda dentro de Elementor: se pega el envoltorio de la plantilla, que sí tiene toda la página por delante. * * Con `:has()` para no pegar TODAS las plantillas de header del sitio, solo la * que contiene este header. Si un navegador no soporta `:has()` ignora la * regla entera y el header se queda como estaba: no se rompe nada. * * Y no hace falta separador ni reservar hueco a mano: `sticky` conserva su * sitio en el flujo, que es justo lo que `fixed` no hace. */ .elementor-location-header:has(.ccmts-header--fijo) { position: sticky; top: 0; z-index: 300; } /* --------------------------------------------------------------------------- * Header compacto al bajar * * El header YA es `position: sticky`, así que esto no lo hace fijo: solo lo * encoge. Eso evita de raíz el salto de maquetación clásico de cambiar a * `fixed`, donde el contenido pega un brinco al cruzar el umbral. * * Qué se anima y qué no: `opacity` la resuelve el navegador sin rehacer la * maquetación; `max-width`, `max-height` y `padding` sí cuestan, pero son * inevitables si el hueco tiene que cerrarse de verdad. Se aceptan porque * ocurren una vez por cruce de umbral, no en cada fotograma del scroll. * ------------------------------------------------------------------------ */ /* Ni se ve ni ocupa: solo sirve para que el observador sepa cuándo el header ha salido de la pantalla. El margen negativo cancela su propio píxel. */ .ccmts-header__centinela { height: 1px; margin-bottom: -1px; pointer-events: none; } /* La caja y el contenido no van al mismo ritmo, y ese desfase es lo que se siente como animación y no como parpadeo: - al COMPACTARSE, el contenido se desvanece rápido (.15s) y la caja se cierra detrás (.28s): nunca se ve texto aplastándose; - al EXPANDIRSE (este bloque, el estado de reposo), la caja se abre primero y la opacidad entra con .1s de retraso, así el contenido aparece dentro de un hueco que ya existe. La curva (.2,0,.13,1) arranca decidida y aterriza suave — un `ease` a secas frena demasiado pronto y se percibe mecánico. */ .ccmts-header__logo, .ccmts-header__nav, .ccmts-header__cuenta, .ccmts-header__carrito, .ccmts-header .ccmg-brands-strip { transition: max-width .28s cubic-bezier(.2, 0, .13, 1), max-height .28s cubic-bezier(.2, 0, .13, 1), margin .28s cubic-bezier(.2, 0, .13, 1), padding .28s cubic-bezier(.2, 0, .13, 1), opacity .2s ease .1s; } .ccmts-header--compacto .ccmts-header__logo, .ccmts-header--compacto .ccmts-header__nav, .ccmts-header--compacto .ccmts-header__cuenta, .ccmts-header--compacto .ccmts-header__carrito, .ccmts-header--compacto .ccmg-brands-strip { transition: max-width .28s cubic-bezier(.2, 0, .13, 1), max-height .28s cubic-bezier(.2, 0, .13, 1), margin .28s cubic-bezier(.2, 0, .13, 1), padding .28s cubic-bezier(.2, 0, .13, 1), opacity .15s ease; } /* El header compacto flota sobre el contenido: la sombra es la señal de que está pegado, y se enciende/apaga con la misma suavidad. */ .ccmts-header { transition: box-shadow .28s ease; } .ccmts-header--compacto { box-shadow: 0 2px 14px rgba(0, 0, 0, .10); } /* ── Escritorio: se desvanece la barra negra. El logo se queda ────────── * * Se probó escondiendo el logo para que el buscador ocupara su hueco, y el * dueño prefirió que se quede: la marca sigue a la vista mientras se navega. * Así que en escritorio lo único que se va es la barra de navegación, y el * header pasa de 124px a los 82 de su barra superior. * * `max-height` y no `display: none`, para que la transición tenga algo que * animar: de `none` a visible no se puede animar nada. Eso es lo que hace que * se desvanezca en vez de desaparecer de golpe. */ @media (min-width: 1025px) { /* SIN un max-height de reposo no hay animación: de `none` a `0` el navegador no puede interpolar y la barra se cerraba DE GOLPE — solo la opacidad alcanzaba a verse. Medido el 29-ago: la barra mide 43px; el tope va ajustado (52) porque todo el sobrante es retraso muerto al inicio del cierre. El `overflow: hidden` aquí no recorta los paneles desplegables: son `position: absolute` y su bloque contenedor es el header (sticky), no este nav, que es static. */ .ccmts-header__nav { max-height: 52px; overflow: hidden; } .ccmts-header--compacto .ccmts-header__nav { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; } } /* ── Móvil: solo quedan hamburguesa y buscador ────────────────────────── * * El corte va en 1024 y no en 767 porque es ahí donde este header cambia de la * barra de escritorio a la de móvil. Medido en la propia hoja, no supuesto. * * En reposo la barra móvil va en dos filas —`flex-wrap: wrap`—: arriba el logo * con la hamburguesa empujada a la derecha, y el buscador debajo ocupando todo * el ancho. Si solo se escondiera el logo, seguirían siendo dos filas y el * header no adelgazaría nada. * * Por eso compacto quita el envoltorio: hamburguesa y buscador pasan a * convivir en una sola línea, que es lo que deja la barra fina de verdad. */ @media (max-width: 1024px) { /* El `padding` vertical es lo que evita que se vea mocho: sin él la fila se queda con el alto justo del buscador y este toca los bordes. Y el `min-height` da un suelo, para que la barra no dependa de lo que mida el contenido de cada momento. */ .ccmts-header--compacto .ccmts-header__barra--movil .ccmts-header__interior { flex-wrap: nowrap; gap: 12px; min-height: 56px; padding: 8px 16px; } /* Buscador primero y hamburguesa después. En reposo van al revés, pero compacto es otra cosa: el buscador es lo que se usa mientras se navega, y el pulgar alcanza mejor el borde derecho. * * Y aquí lo que sacaba la hamburguesa de la pantalla. En reposo el * buscador móvil lleva: * * .ccmts-header__buscador--movil { flex: 1 0 100% } * * Es lo correcto en el diseño de dos filas —ocupa la segunda entera—, pero * ese `1 0 100%` significa «quiero todo el ancho y NO me encojo». Al * ponerlos en una sola línea, el buscador se quedaba con el 100% y empujaba * la hamburguesa fuera. * * En compacto pasa a `1 1 auto`: coge lo que sobre y cede lo que haga * falta. El `min-width: 0` es imprescindible, porque un elemento flex no * baja de su contenido mínimo si no se le permite. */ .ccmts-header--compacto .ccmts-header__barra--movil .ccmts-header__buscador { order: 1; flex: 1 1 auto; min-width: 0; } .ccmts-header--compacto .ccmts-header__barra--movil .ccmts-header__hamburguesa { order: 2; } /* Tres clases, no dos, y por un motivo concreto: el logo de la barra móvil lleva `margin-right: auto` desde `.ccmts-header__barra--movil .ccmts-header__logo`, que pesa (0,2,0). Una regla de dos clases empata y pierde por orden de carga, así que el logo colapsado seguía empujando todo a la derecha y dejaba la hamburguesa y el buscador apretados contra el borde. Con tres clases pesa (0,3,0) y gana sin `!important`. */ /* Mismo motivo que el nav de escritorio: sin estos valores de reposo, logo y tira se cerraban de golpe en vez de plegarse. */ .ccmts-header__barra--movil .ccmts-header__logo { max-width: 170px; overflow: hidden; } .ccmts-header .ccmg-brands-strip { max-height: 72px; overflow: hidden; } .ccmts-header--compacto .ccmts-header__barra--movil .ccmts-header__logo { max-width: 0; margin: 0; opacity: 0; overflow: hidden; } .ccmts-header--compacto .ccmg-brands-strip { max-height: 0; opacity: 0; overflow: hidden; } /* La hamburguesa no se encoge; el buscador se queda con lo que sobre. */ .ccmts-header--compacto .ccmts-header__hamburguesa { flex: 0 0 auto; } } /* Medido en producción: a 1280px el logo empieza en x=10 y a 1440 en x=73, o sea el contenido va centrado con un ancho máximo, no a sangre. */ .ccmts-header__interior { display: flex; align-items: center; gap: 24px; width: 100%; max-width: var(--ccmts-h-ancho); margin: 0 auto; padding: 0 10px; } /* --------------------------------------------------------------------------- * Qué franja se ve, y a partir de dónde * * DEFECTO 1 corregido. Antes el `display` se declaraba en DOS sitios: * `.ccmts-header__barra--movil { display: none }` y, más abajo, * `.ccmts-header__barra { display: flex }`. Las dos con especificidad 0,1,0, * así que ganaba la última del archivo y la franja móvil nunca se ocultaba: * las dos se pintaban a la vez y el header medía 295px en vez de 124. * * La corrección NO es subir especificidad ni reordenar —eso solo gana un * empate que no debería existir—: el selector base deja de declarar `display`, * y cada franja declara el suyo una sola vez. Sin empate no hay orden del que * depender. * * Se usa `display` y no `visibility`: la franja oculta no debe ocupar espacio * ni recibir el tabulador. * ------------------------------------------------------------------------ */ .ccmts-header__barra--escritorio { display: flex; align-items: center; } .ccmts-header__barra--movil { display: none; } @media (max-width: 1024px) { .ccmts-header__barra--escritorio { display: none; } .ccmts-header__barra--movil { display: flex; align-items: center; } } /* --------------------------------------------------------------------------- * Franja superior * ------------------------------------------------------------------------ */ /* Sin `display` aquí a propósito: lo declara cada franja. Ver arriba. */ .ccmts-header__barra { min-height: var(--ccmts-h-alto-barra); } /* La franja móvil no hereda los 82px del escritorio: su alto sale del contenido, y en producción son ~94px con el buscador debajo. */ .ccmts-header__barra--movil { min-height: 0; } .ccmts-header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; color: inherit; } /* DEFECTO 2 corregido. `frontend.min.css` de Elementor trae * `.elementor img { height: auto; max-width: 100% }` con especificidad 0,1,1 * — exactamente la misma que `.ccmts-header__logo img`— y su hoja se encola * después, así que ganaba. Con `height: auto` y el `max-width: 100%` de un * padre que a su vez medía 0, el SVG colapsaba a 0×0. * * Se sube a 0,2,1 con el bloque del header por delante. **Sin `!important`**: * no hace falta, porque 0,2,1 gana a 0,1,1 pase lo que pase con el orden. * * `max-width: none` rompe el colapso circular padre-hijo, y `width` explícito * porque un SVG sin dimensiones intrínsecas no se dimensiona solo dentro de * un contenedor flex. Medido en producción: 89×45 en escritorio. */ .ccmts-header .ccmts-header__logo img { display: block; width: 89px; height: 45px; max-width: none; } /* Producción tiene un estado INTERMEDIO, no dos: medido a 1024px el logo es 90×37 y el campo mantiene el radio de escritorio con el alto de móvil. */ @media (max-width: 1024px) { .ccmts-header .ccmts-header__logo img { width: 90px; height: 37px; } } @media (max-width: 767px) { /* Medido en producción a 390px: 60×25. */ .ccmts-header .ccmts-header__logo img { width: 60px; height: 25px; } } .ccmts-header__logo-texto { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; } .ccmts-header__buscador { flex: 1 1 auto; min-width: 0; } .ccmts-header__acciones { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; } /* --------------------------------------------------------------------------- * Sesión y carrito * * `min-width` no es cosmético: el nombre del cliente NO viaja en el HTML * cacheable y se rellena después (ver el comentario del renderizador). Sin un * hueco reservado, al llegar "Hola, Fulanito" se movería el carrito y todo lo * de al lado. Con esto, el texto cambia dentro de un espacio que ya existía. * ------------------------------------------------------------------------ */ .ccmts-header__cuenta, .ccmts-header__carrito { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; font-size: .875rem; line-height: 1.25; } .ccmts-header__cuenta { min-width: 108px; } .ccmts-header__cuenta:hover, .ccmts-header__carrito:hover { color: var(--ccmts-h-rojo); } .ccmts-header__icono { display: inline-flex; flex: 0 0 auto; } .ccmts-header__icono svg { width: 22px; height: 22px; } .ccmts-header__carrito { position: relative; } /* Con sesión el saludo es más largo que "Mi cuenta": se deja que crezca sin empujar al carrito, y si el nombre es larguísimo se recorta con puntos. */ .ccmts-header__cuenta--con-sesion .ccmts-header__cuenta-texto { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El número lo pinta el carrito lateral con su propio marcado; aquí solo se coloca sobre el icono, sin tocar cómo lo genera. */ .ccmts-header__carrito .xoo-wsc-items-count, .ccmts-header__carrito .ccmts-header__contador { position: absolute; top: 2px; left: 13px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ccmts-h-rojo); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 18px; text-align: center; } /* --------------------------------------------------------------------------- * Buscador — valores medidos en el header en vivo * ------------------------------------------------------------------------ */ .ccmts-header__buscador .ccm-ac { width: 100%; } .ccmts-header__buscador form.ccm-searchonly { position: relative; display: flex; align-items: center; width: 100%; } /* DEFECTO 3 corregido. Producción NO usa el mismo campo en los dos tamaños, * y yo había puesto 4px fijo. Medido: * escritorio 1440 → 44px de alto, radio 4px, sangría izquierda 38px * móvil 390 → 34px de alto, radio 30px, sangría izquierda 48px */ .ccmts-header__buscador input[type="search"] { box-sizing: border-box; /* `flex` además de `width`: el formulario de ccm-search es flex, y ahí un `width: 100%` sin `flex-grow` no llena — medido, el campo se quedaba en 207px dentro de un formulario de 358. */ flex: 1 1 auto; width: 100%; height: 44px; padding: 0 14px 0 38px; border: 2px solid transparent; border-radius: var(--ccmts-h-campo-radio); background: var(--ccmts-h-campo); font: inherit; font-size: 13px; color: #000; appearance: none; } @media (max-width: 1024px) { /* El alto baja ya en tableta, pero el radio NO: medido en producción a 1024px sigue siendo 4px, y solo se vuelve cápsula en móvil. */ .ccmts-header__buscador input[type="search"] { height: 34px; } .ccmts-header__buscador button { height: 34px; } } @media (max-width: 767px) { .ccmts-header { --ccmts-h-campo-radio: 30px; } .ccmts-header__buscador input[type="search"] { padding: 0 12px 0 48px; } .ccmts-header__buscador button { width: 48px; } } .ccmts-header__buscador input[type="search"]::placeholder { color: var(--ccmts-h-marcador); } .ccmts-header__buscador input[type="search"]:focus { outline: none; border-color: var(--ccmts-h-tinta); /* El kit de Elementor inyecta `border-radius: 100px` en `input:focus` para todo el sitio. El `!important` se mantiene porque su regla lo lleva también, y contra un `!important` la especificidad no decide: solo gana otro `!important`. Comprobado en la página; documentado igual en ccm-checkout y en ccm-account. Toma el valor de la variable, así que respeta el radio de cada tamaño. */ border-radius: var(--ccmts-h-campo-radio) !important; } /* La lupa va DENTRO y a la izquierda, como en producción (comprobado: allí el input lleva `padding-left: 38px` y la lupa se apoya en ese hueco). * * Aquí estaba el fallo de "el buscador se ve muy mal". Se había copiado el * patrón de FiboSearch —lupa superpuesta con `position: absolute; left: 0`, y * un `padding-left` en el input que le deja sitio—. Con `ccm-search` la mitad * de ese patrón no llega: su CSS blinda el input con * * .ccm-ac .ccm-searchonly-input { padding-left: 0 !important; * margin: 0 !important; * width: auto !important; } * * y contra un `!important` no decide la especificidad. Resultado: la lupa se * quedaba encima del texto, porque el hueco nunca se abría. Comprobado que ni * un estilo en línea lo movía. * * El arreglo NO es contestar con otro `!important`: es dejar de sacar el botón * del flujo y reordenarlo. En el marcado de `[ccm_search]` el orden es * INPUT y después BUTTON, así que sin `position` la lupa se va a la DERECHA * —comprobado, no supuesto: primero escribí aquí que iba antes y era falso—. * `order: -1` la trae a la izquierda dentro de la misma fila flex. * * `order` TAMBIÉN está disputado —aquí llegué a escribir que no lo estaba, y * era falso—: `ccm-search.css` trae `.ccm-ac .ccm-searchonly-btn { order: 1 }`. * Los dos selectores pesan (0,2,0), o sea EMPATE, y un empate lo rompe el orden * de carga: su hoja entra en la posición 79 y ésta en la 28, así que ganaba él. * Se sube a (0,3,0) y se acabó. Sin `!important`: contra una regla que no lo * lleva, subir especificidad es la respuesta correcta. * * Medido a 1440: el texto pasa de empezar en 185,5 —debajo de la lupa— a * empezar en 231,5, con la lupa en 185,5→231,5 y cero solape. */ .ccmts-header__buscador .ccm-ac .ccm-searchonly-btn { order: -1; } .ccmts-header__buscador button { width: 38px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #555; cursor: pointer; } /* --------------------------------------------------------------------------- * Franja móvil * ------------------------------------------------------------------------ */ /* Aire ajustado contra producción: allí la franja móvil son ~94px (112 del header menos los 18 de la tira de marcas). */ .ccmts-header__barra--movil .ccmts-header__interior { flex-wrap: wrap; gap: 6px 16px; padding: 6px 16px; } .ccmts-header__barra--movil .ccmts-header__logo { margin-right: auto; } .ccmts-header__hamburguesa { display: inline-flex; align-items: center; justify-content: center; /* 40×40. Producción usa una fila más baja, pero no se baja de aquí: 40 es cómodo para el dedo y muy por encima del 24×24 que pide la WCAG 2.2. Es una desviación deliberada de "igual que producción". */ width: 40px; height: 40px; margin-right: -10px; color: var(--ccmts-h-rojo); } /* Alto en `auto` y no 26px fijos: este icono tiene rejilla 31×19, o sea que no es cuadrado. Forzarle un alto igual al ancho lo dejaría achatado o con franjas vacías arriba y abajo, según cómo resolviera el navegador la proporción. Con el ancho fijo y el alto libre conserva su forma. */ .ccmts-header__hamburguesa svg { width: 26px; height: auto; } .ccmts-header__buscador--movil { flex: 1 0 100%; } /* --------------------------------------------------------------------------- * Barra inferior de navegación * ------------------------------------------------------------------------ */ .ccmts-header__nav { background: var(--ccmts-h-barra); } .ccmts-header__nav .ccmts-header__interior { justify-content: center; gap: 0; } .ccmts-header__nav-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .ccmts-header__nav .ccmts-header__interior { min-height: var(--ccmts-h-alto-nav); } .ccmts-header__nav-enlace { display: inline-flex; align-items: center; gap: 6px; /* El alto sale del relleno y no de una altura fija: así una etiqueta que se parta en dos líneas no se sale de la barra. */ padding: 11px 14px; color: #fff; text-decoration: none; font-size: .9375rem; line-height: 1.2; } .ccmts-header__nav-enlace:hover, .ccmts-header__nav-enlace:focus-visible { color: #fff; background: rgba(255, 255, 255, .12); } .ccmts-header__nav-flecha svg { width: 14px; height: 14px; } @media (max-width: 1024px) { /* Producción NO muestra la barra de navegación en móvil: medido a 390px, no hay ninguna barra oscura y el header entero son 112px. Sus secciones están en el cajón, así que no se pierde nada. */ .ccmts-header__nav { display: none; } .ccmts-header__nav .ccmts-header__interior { padding: 0; } .ccmts-header__nav-lista { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 12px; } .ccmts-header__nav-lista::-webkit-scrollbar { display: none; } .ccmts-header__nav-item { flex: 0 0 auto; } } /* --------------------------------------------------------------------------- * Accesibilidad * ------------------------------------------------------------------------ */ .ccmts-header a:focus-visible, .ccmts-header button:focus-visible { outline: 2px solid var(--ccmts-h-rojo); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { /* `.ccmts-header *` no incluye al propio header, y la sombra transiciona sobre él. */ .ccmts-header, .ccmts-header * { transition: none !important; } } /* --------------------------------------------------------------------------- * Cajón de móvil (H.3) * * El marcado va en el HTML y no se construye con JavaScript: así el contenido * existe para los buscadores y no hay que pedir nada al abrirlo. Se mantiene * con `hidden` hasta que el JS lo habilita. * ------------------------------------------------------------------------ */ /* Bloquea el desplazamiento de la página mientras el cajón está abierto, o se desplaza lo de detrás en vez del panel. */ .ccmts-sin-scroll, .ccmts-sin-scroll body { overflow: hidden; } /* El cajón es un diálogo modal: mientras está abierto, manda sobre todo lo * demás de la pantalla. * * El número es absurdo y aun así es el correcto. El widget flotante de * WhatsApp se pone `z-index: 999999999` —casi mil millones—, así que con el * 1000 que había aquí se plantaba ENCIMA del menú abierto. Y no era solo feo: * `document.elementFromPoint()` en la zona baja del panel devolvía el botón de * WhatsApp, o sea que **las opciones que quedaban debajo no se podían pulsar**. * Se notaba sobre todo al abrir un desplegable, porque la lista crece y más * filas caen bajo ese botón. * * Se sube por encima en vez de esconder ese widget por su clase: los nombres * de clase de un plugin ajeno cambian con cualquier actualización, y entonces * el fallo volvería en silencio. Un modal que gana a todo no depende de saber * quién más hay en la página. * * Con el cajón arriba, esos botones quedan detrás del fondo oscurecido: ni se * ven ni se pulsan, que es como debe comportarse un modal. */ .ccmts-header__cajon { position: fixed; inset: 0; z-index: 1000000000; /* Safari de iOS pinta un rectángulo de color al tocar cualquier enlace o botón. Es suyo, no del CSS, y no se parece a ninguno de nuestros estados: se quita para que el único realce sea el que decidimos nosotros. En escritorio no existe y no molesta. */ -webkit-tap-highlight-color: transparent; } .ccmts-header__cajon[hidden] { display: none; } .ccmts-header__cajon-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s ease; } .ccmts-header__cajon--abierto .ccmts-header__cajon-fondo { opacity: 1; } .ccmts-header__cajon-panel { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: min(86vw, 340px); background: #fff; /* `transform` y no `left`: se anima en la capa de composición, sin obligar al navegador a recalcular la maqueta en cada fotograma. */ transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto; overscroll-behavior: contain; } .ccmts-header__cajon--abierto .ccmts-header__cajon-panel { transform: translateX(0); } .ccmts-header__cajon-cabecera { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--ccmts-h-barra, #191818); color: #fff; } /* Botón de cerrar. * * Relleno con el rojo de acción de la tienda —el mismo del globo del carrito— * para que se reconozca, pero con el comportamiento de un control de verdad: * responde al pasar por encima, se hunde al pulsarlo y tiene anillo de foco * propio. Antes era un círculo rojo plano que no reaccionaba a nada. * * 40×40, por encima del mínimo 24×24 de WCAG 2.5.8. */ .ccmts-header__cajon-cabecera .ccmts-header__cajon-cerrar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 12px; background: var(--ccmts-h-rojo, #e60000); color: #fff; cursor: pointer; transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease; } .ccmts-header__cajon-cabecera .ccmts-header__cajon-cerrar:hover { /* Un punto más oscuro, no más claro: al pasar por encima el control debe parecer que se presiona, no que se apaga. */ background: #c40000; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .ccmts-header__cajon-cabecera .ccmts-header__cajon-cerrar:active { transform: scale(.92); box-shadow: none; } /* El anillo va en blanco y no en rojo: el botón ya es rojo y sobre la banda negra un halo rojo sobre fondo rojo no se vería. */ .ccmts-header__cajon-cabecera .ccmts-header__cajon-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ccmts-header__cajon-cabecera .ccmts-header__cajon-cerrar svg { width: 20px; height: 20px; } /* El nombre de la tienda en la banda. La banda es negra y no roja por una razón medida: blanco sobre #e63946 da 4,17:1, por debajo del mínimo 4,5:1 de WCAG para texto normal. Sobre #191818 son 16:1. */ .ccmts-header__cajon-marca { flex: 1 1 auto; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Bloque de cuenta ────────────────────────────────────────────────── * Sale neutro del servidor —«Hola, invitado»— y el JS le cambia el texto. * Aquí no hay nada que dependa de quién mira, porque este marcado viaja * dentro del header cacheado y compartido. */ .ccmts-header__cajon-cuenta { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 14px 18px; border-bottom: 1px solid var(--ccmts-h-linea, #e8e8e8); color: var(--ccmts-h-tinta, #1a1a1a); text-decoration: none; } .ccmts-header__cajon-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--ccmts-h-campo, #eee); color: var(--ccmts-h-marcador, #777); } .ccmts-header__cajon-avatar svg { width: 20px; height: 20px; } .ccmts-header__cajon-cuenta-textos { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .ccmts-header__cajon-cuenta-nombre { font-size: .9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ccmts-header__cajon-cuenta-accion { color: var(--ccmts-h-marcador, #777); font-size: .8125rem; } /* ── Grupos y filas de servicio ───────────────────────────────────── */ /* El separador grueso entre bloques, como en el menú que se tomó de referencia. Solo ENTRE grupos: sobre el primero sobraría. */ .ccmts-header__cajon-grupo + .ccmts-header__cajon-grupo { border-top: 6px solid #f4f4f4; } .ccmts-header__cajon-epigrafe { margin: 14px 18px 4px; color: var(--ccmts-h-marcador, #777); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; } .ccmts-header__cajon-fila { display: flex; align-items: center; gap: 14px; /* 48px de zona pulsable. El mínimo de WCAG 2.5.8 es 24×24; para el pulgar 48 es lo cómodo. */ min-height: 48px; padding: 12px 18px; color: var(--ccmts-h-tinta, #1a1a1a); font-size: .9375rem; text-decoration: none; } /* Cualquier `display` de autor pisa el `display: none` que el navegador aplica al atributo `hidden`, así que hay que devolvérselo a mano. * * Sin esto, «Mis pedidos» —que sale con `hidden` y solo lo destapa el JS al * detectar sesión— se veía a cualquier visitante. No es una fuga de datos, * pero sí una fila que lleva a una página que no puede abrir. Lo cazó la * verificación, no la lectura del CSS. */ .ccmts-header__cajon-fila[hidden], .ccmts-header__cajon-grupo[hidden], .ccmts-header__cajon-cuenta[hidden] { display: none; } /* ── Realce de la fila señalada ──────────────────────────────────────── * * La fila se pone en negro con el contenido en blanco: el mismo negro de la * banda de arriba, así que el resalte y la cabecera hablan el mismo idioma. * Blanco sobre `#191818` son 16:1 de contraste, de sobra para cualquier tamaño * de letra. * * ── Por qué está partido en dos bloques * * En una pantalla táctil **no existe el hover**: no hay puntero que pase por * encima, y `@media (hover: none)` desactiva esas reglas. Lo que da respuesta * al dedo en un teléfono es `:active`, el instante que dura el toque. Si solo * se pinta el `:hover`, en el móvil no se ve nada al pulsar —o peor, el * resalte se queda pegado a la última fila tocada hasta que toques otra—. * * Así que el mismo aspecto se declara dos veces: para el ratón con `:hover`, * y para el dedo con `:active`. El teclado entra por `:focus-visible`. */ /* ── Aislamiento del cajón ────────────────────────────────────────────── * * Aquí dentro no decide nadie de fuera. * * Se llegó a esto después de tapar el reset del tema estado por estado —el * `:hover`, luego el `:focus`, luego el desplegado— y de que en el iPhone * siguiera saliendo el rojo de Elementor y filas negras pegadas. Ir uno a uno * era el enfoque equivocado: cada vez que el navegador elegía una combinación * que no habíamos previsto, volvía a colarse algo. * * Así que se apagan **todos** los estados de golpe, para enlaces y botones del * panel. Lo que venga después en esta hoja es lo único que pinta. * * Pesa (0,2,1) —una clase, un tipo, una pseudoclase—, por encima del (0,2,0) * del reset del tema. Y va antes que nuestras reglas de estado, que suben a * (0,3,0) o más y por tanto ganan a este apagado. */ .ccmts-header__cajon-panel a, .ccmts-header__cajon-panel a:link, .ccmts-header__cajon-panel a:visited, .ccmts-header__cajon-panel a:hover, .ccmts-header__cajon-panel a:focus, .ccmts-header__cajon-panel a:active, .ccmts-header__cajon-panel button, .ccmts-header__cajon-panel button:hover, .ccmts-header__cajon-panel button:focus, .ccmts-header__cajon-panel button:active { background: none; color: var(--ccmts-h-tinta, #1a1a1a); border: 0; box-shadow: none; text-decoration: none; outline: none; } .ccmts-header__cajon-fila, .ccmts-header__cajon-enlace, .ccmts-header__cajon-cuenta, .ccmts-header__cajon-subenlace { transition: background-color .16s ease, color .16s ease; } /* Ratón de verdad, y solo ratón. * * Se pide `hover: hover` **y** `pointer: fine`. Con `hover: hover` a secas no * bastaba: en el iPhone las filas se quedaban todas en negro después de tocar, * porque Safari deja el `:hover` pegado y hay configuraciones que lo declaran * disponible igualmente. `pointer: fine` exige un puntero preciso —un ratón o * un lápiz—, y un dedo no lo es. */ @media (hover: hover) and (pointer: fine) { .ccmts-header__cajon-panel .ccmts-header__cajon-fila:hover, .ccmts-header__cajon-panel .ccmts-header__cajon-enlace:hover, .ccmts-header__cajon-panel .ccmts-header__cajon-cuenta:hover { background: var(--ccmts-h-barra, #191818); color: #fff; } .ccmts-header__cajon-fila:hover .ccmts-header__cajon-icono, .ccmts-header__cajon-fila:hover .ccmts-header__cajon-flecha, .ccmts-header__cajon-enlace:hover .ccmts-header__cajon-icono, .ccmts-header__cajon-enlace:hover .ccmts-header__cajon-flecha, .ccmts-header__cajon-cuenta:hover .ccmts-header__cajon-flecha { color: #fff; } .ccmts-header__cajon-cuenta:hover .ccmts-header__cajon-cuenta-accion { /* La segunda línea del bloque de cuenta es gris; sobre negro hay que aclararla o desaparece. */ color: #d5d5d5; } .ccmts-header__cajon-panel .ccmts-header__cajon-subenlace:hover { background: #ececee; } } /* Dedo: el realce dura lo que dura el toque, y ni un instante más. * * Aquí estaba el «el hover dura un tiempo todo negro». El relleno negro * colgaba también de `:focus-visible`, y al tocar una fila el navegador se la * deja enfocada: el negro se quedaba pegado hasta tocar otra cosa. Un realce * de toque que sobrevive al toque parece un fallo, no una respuesta. * * El teclado se atiende más abajo con un anillo, que es lo suyo: marca dónde * estás sin fingir que estás pulsando. */ .ccmts-header__cajon-panel .ccmts-header__cajon-fila:active, .ccmts-header__cajon-panel .ccmts-header__cajon-enlace:active, .ccmts-header__cajon-panel .ccmts-header__cajon-cuenta:active { background: var(--ccmts-h-barra, #191818); color: #fff; } /* Teclado: anillo, no relleno. */ .ccmts-header__cajon-panel .ccmts-header__cajon-fila:focus-visible, .ccmts-header__cajon-panel .ccmts-header__cajon-enlace:focus-visible, .ccmts-header__cajon-panel .ccmts-header__cajon-cuenta:focus-visible, .ccmts-header__cajon-panel .ccmts-header__cajon-subenlace:focus-visible { outline: 2px solid var(--ccmts-h-rojo, #e60000); outline-offset: -2px; } .ccmts-header__cajon-fila:active .ccmts-header__cajon-icono, .ccmts-header__cajon-fila:active .ccmts-header__cajon-flecha, .ccmts-header__cajon-enlace:active .ccmts-header__cajon-icono, .ccmts-header__cajon-enlace:active .ccmts-header__cajon-flecha, .ccmts-header__cajon-cuenta:active .ccmts-header__cajon-flecha { color: #fff; } .ccmts-header__cajon-cuenta:active .ccmts-header__cajon-cuenta-accion { color: #d5d5d5; } /* El avatar tiene fondo propio: sobre la fila en negro se invierte para que no quede un disco gris flotando. */ .ccmts-header__cajon-cuenta:active .ccmts-header__cajon-avatar { background: rgba(255, 255, 255, .16); color: #fff; } /* ── El morado del reset ─────────────────────────────────────────────── * * `reset.css` trae esto para TODOS los botones del sitio: * * [type="button"]:focus, [type="button"]:hover, button:focus, button:hover * { background-color: #cc3366; color: #fff } * * Lo que muerde no es el `:hover` —ese lo tapábamos— sino el **`:focus`**. * Al pulsar un botón se queda enfocado, y entonces esa regla lo pinta de ese * morado rojizo y ahí se queda. Es lo que le pasaba al botón de cerrar: se * volvía morado en cuanto lo tocabas una vez. * * Solo se había escrito `:focus-visible`, que es otra cosa: el navegador lo * reserva para el teclado y no salta al pulsar con el ratón o el dedo. Por eso * no lo tapaba. * * Se fija el color de fondo también en `:focus`, para los tres controles. */ .ccmts-header__cajon-cabecera .ccmts-header__cajon-cerrar:focus { background: var(--ccmts-h-rojo, #e60000); color: #fff; } /* Fondo Y color juntos, siempre. * * Antes se corregía el fondo en un sitio y el color en otro, y en el iPhone * salió la factura: la sección desplegada se veía **negra y sin texto**. El * fondo lo ponía la regla del desplegable y el color lo ponía esta, cada una * ganando por su lado, y quedaba tinta oscura sobre negro. * * En iOS se ve y en escritorio no porque ahí el `:focus` se queda pegado * después de tocar; con ratón se va al mover el puntero. * * La lección: fondo y color de texto son una sola decisión y se escriben en * la misma regla. Separarlos es pedir que alguna combinación quede ilegible. */ .ccmts-header__cajon-panel .ccmts-header__cajon-enlace:focus { background: none; color: var(--ccmts-h-tinta, #1a1a1a); } /* …salvo si la sección está desplegada, que manda su propio negro. * * Dos clases más el atributo pesan (0,4,0) y ganan a la regla de arriba —que * es (0,3,0)— **en cualquier estado**, con foco o sin él. Antes esto llevaba * `:focus` y solo cubría ese caso concreto: bastaba con que el navegador * decidiera otra combinación para que el texto volviera a desaparecer. */ .ccmts-header__cajon-panel .ccmts-header__cajon-enlace.ccmts-header__cajon-abrir[aria-expanded="true"], .ccmts-header__cajon-panel .ccmts-header__cajon-enlace.ccmts-header__cajon-abrir[aria-expanded="true"] span { background: var(--ccmts-h-barra, #191818); color: #fff; } /* El `span` de arriba hereda el fondo del botón, que no es lo que se quiere: solo debe tomar el color de letra. Se le devuelve el suyo. */ .ccmts-header__cajon-panel .ccmts-header__cajon-enlace.ccmts-header__cajon-abrir[aria-expanded="true"] span { background: none; } @media (hover: hover) and (pointer: fine) { .ccmts-header__cajon-cuenta:hover .ccmts-header__cajon-avatar { background: rgba(255, 255, 255, .16); color: #fff; } } /* El acordeón abierto se queda en negro mientras lo está: así se ve de un vistazo de qué sección son las filas de debajo. * * Tres clases más el atributo, (0,4,0), para ganar al apagado de estados de * más arriba y a cualquier combinación que elija el navegador. */ .ccmts-header__cajon-panel .ccmts-header__cajon-enlace.ccmts-header__cajon-abrir[aria-expanded="true"] { background: var(--ccmts-h-barra, #191818); color: #fff; } .ccmts-header__cajon-abrir[aria-expanded="true"] .ccmts-header__cajon-icono, .ccmts-header__cajon-abrir[aria-expanded="true"] .ccmts-header__cajon-flecha { color: #fff; } .ccmts-header__cajon-subenlace:active, .ccmts-header__cajon-subenlace:focus-visible { background: #ececee; outline: none; } .ccmts-header__cajon-fila--salir { color: var(--ccmts-h-marcador, #777); } /* Globo del carrito. * * Sale del servidor vacío y oculto —el número es de quien mira y este marcado * se cachea compartido— y lo rellena el JS copiando el contador del carrito * lateral. Blanco sobre este rojo da 4,81:1, por encima del mínimo. */ .ccmts-header__cajon-globo { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 9px; background: var(--ccmts-h-rojo, #e60000); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1; } /* `display: inline-flex` pisa el `display: none` que el navegador da al atributo `hidden`; hay que devolvérselo. Es exactamente el fallo que dejó a la vista la fila «Mis pedidos» sin sesión. */ .ccmts-header__cajon-globo[hidden] { display: none; } /* Sobre la fila en negro del realce, el globo se queda como está: el rojo sigue leyéndose y además es lo que lo hace destacar. */ /* El icono se coloca con flex, NO con `position: absolute`. Sacarlo del flujo fue exactamente lo que puso la lupa del buscador encima del texto. */ .ccmts-header__cajon-icono { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; color: var(--ccmts-h-tinta, #1a1a1a); } .ccmts-header__cajon-icono svg { width: 20px; height: 20px; } .ccmts-header__cajon-lista, .ccmts-header__cajon-sublista { margin: 0; padding: 0; list-style: none; } /* ── Defensa contra el reset del tema ────────────────────────────────── * * `reset.css` trae una regla base para TODOS los botones del sitio: * * [type="button"], [type="submit"], button { * border: 1px solid #c36; color: #c36; border-radius: 3px; * padding: .5rem 1rem; white-space: nowrap; ... * } * * La mayoría la ganamos por orden de carga —empatan a (0,1,0) y esta hoja * entra después—, pero **lo que no declaramos, lo impone ella**. Se colaban * dos cosas: * * - `border-radius: 3px`, que redondeaba una fila que ocupa todo el ancho. * - `white-space: nowrap`, que impide que una categoría de nombre largo parta * en dos líneas. Ese es el que muerde de verdad: no se ve hasta que alguien * crea una categoría con nombre largo, y entonces se sale o se corta. * * Y una tercera, en otro sitio de la misma hoja: * * [type="button"]:hover, [type="submit"]:hover { color: #fff } * * que pone el texto blanco al pasar por encima de cualquier botón. A nosotros * nos conviene —la fila se pone negra— pero por casualidad, no por diseño. Se * fija el color explícitamente para no depender de eso. * * Se arregla aquí, acotado al cajón, y NO tocando el reset. Esa regla viste * cada botón de la tienda —añadir al carrito, finalizar compra, el aviso de * cookies—; cambiarla desde un mu-plugin sería tocar páginas que no hemos * probado para arreglar un menú. */ .ccmts-header__cajon-panel button { border-radius: 0; /* Que un nombre largo pueda partirse en vez de salirse. */ white-space: normal; /* Y esto, que costó encontrar. * * Un