/* ============================================================================ BANNER Y PANEL DE COOKIES — sólo presentación. Archivo propio, como intake-wizard.css: el componente entra en index.html con un y no engorda styles.css. La lógica de consentimiento vive en src/js/cookies-consent.js (motor, único escritor del estado) y el cableado en src/js/cookies-ui.js. Acá no hay nada que decida: sólo cómo se ve. Los tokens de color salen de src/css/styles.css. Los tres de abajo son del componente y no existen en el sitio. ============================================================================ */ :root{ --ck-ring:#E0BE7A; /* anillo de foco sobre fondo oscuro (banner) */ --ck-ring-lt:#2D4A3E; /* anillo de foco sobre fondo claro (panel) */ /* Gris del track APAGADO. No es un token del sitio y por eso está acá: la medición de contraste lo exige y ninguno de los grises existentes sirve. --t4 (#999) da 2.85:1 sobre blanco y NO llega al 3:1 que pide WCAG 1.4.11 para un componente de interfaz; --t3 (#6B6B6B) llega pero es tan oscuro que un track apagado se lee como encendido. #8A8A8A da 3.45:1 contra el blanco del panel Y 3.45:1 contra el thumb blanco: los dos bordes que hay que poder ver. Medido, no elegido a ojo. */ --ck-off:#8A8A8A; } /* ⚠️ SIN ESTA REGLA, `hidden` NO OCULTA NADA — y fue exactamente lo que pasó en staging. `.ckp` declara `display:flex`, y una hoja de AUTOR le gana al `[hidden]{display:none}` del navegador. Resultado: el panel de configuración y la política aparecían abiertos sin que nadie los abriera, encimados, y el ✕ no hacía nada — `cerrarDialogo()` ponía `hidden = true` y el elemento seguía en pantalla. POR QUÉ LA SUITE NO LO VIO: jsdom no aplica hojas de estilo externas, así que ahí `display:flex` nunca existe y el `hidden` del navegador funciona. Las aserciones miran `el.hidden` —la PROPIEDAD—, que era `true` y correcta. Verdaderas, y sobre un observable que no distingue el estado bueno del malo: lo que importa no es qué dice la propiedad sino si el elemento SE VE. La regla venía en la maqueta y se descartó al partirla, tomándola por reset que el sitio ya tendría. `src/css/styles.css` no la tiene. */ .ck[hidden], .ckp[hidden] { display: none !important; } /* ===== sr-only ============================================================ */ .ck-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ===== Foco visible — nunca outline:none sin reemplazo ==================== */ .ck :focus-visible,.ckp :focus-visible{outline:3px solid var(--ck-ring); outline-offset:2px;border-radius:8px} .ckp__dialog :focus-visible{outline-color:var(--ck-ring-lt)} .ck :focus,.ckp :focus{outline:3px solid var(--ck-ring);outline-offset:2px} .ckp__dialog :focus{outline-color:var(--ck-ring-lt)} .ck :focus:not(:focus-visible),.ckp :focus:not(:focus-visible){outline:none} /* ========================================================================== 1) BANNER — inferior, NO modal -------------------------------------------------------------------------- role="region" + aria-labelledby: es un landmark, no un diálogo. SIN aria-modal, SIN overlay, SIN focus trap, SIN body{overflow:hidden}: el wizard de atrás tiene que seguir usable. No lleva botón de cerrar — descartar sin elegir es un estado ambiguo y las salidas son las tres del primer nivel. ========================================================================== */ /* ⚠️ z-index 8000, DEBAJO del overlay del wizard (9000 en intake-wizard.css). Hasta el 27-ago-2026 esto decía 9000, o sea EMPATE — y con empate el orden lo decide la posición en el DOM, no el CSS. Funcionaba de casualidad: el banner se inserta como primer hijo del body y el overlay del wizard entra después, así que el wizard pintaba encima. Cualquiera que moviera el punto de inserción daba vuelta la relación sin tocar una sola línea de CSS, y el banner habría tapado el formulario en el borde inferior: justo donde vive el botón de enviar. Ahora la relación está declarada donde se lee. */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:8000; background:var(--gd);color:#fff;font-family:var(--f); border-top:1px solid rgba(224,190,122,.28); box-shadow:0 -8px 32px rgba(0,0,0,.28); max-height:62vh;overflow-y:auto; animation:ck-up .28s var(--ez) both} @keyframes ck-up{from{transform:translateY(100%)}to{transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.ck{animation:none}} /* iOS Safari: la barra del navegador y el área segura del home indicator se comen el borde inferior de un elemento fixed. El padding extra sólo aparece donde el navegador declara inset; en el resto env() resuelve a 0px. ⚠️ NO verificado en un iPhone real — todo lo medido fue Chromium. La prueba en iOS es manual y está declarada como pendiente. */ .ck__inner{max-width:1160px;margin:0 auto; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); display:flex;flex-direction:column;gap:14px} .ck__copy{min-width:0} /* --- Rótulo + título ------------------------------------------------------ La palabra "cookies" salió del título y vive acá arriba, en la mono del sitio. El dorado se mudó con ella: el título bajó a blanco para que el acento quede reservado al rótulo y no haya dos cosas doradas discutiendo entre sí. ⚠️ EL RÓTULO ES UN ELEMENTO HERMANO, NO UN ADENTRO DEL TÍTULO, y no es una preferencia de maquetación: `applyTexts()` en app.js hace `el.textContent = text` sobre cada elemento con data-t —preserva sólo .field__ast y svg—, así que cualquier markup metido adentro del título desaparecería en el primer cambio de idioma, en silencio y sólo para quien cambia de idioma. Separado, cada uno tiene su propia clave y la traducción no puede romper nada. Lo cubre tests/cookies.test.js. El tracking generoso es lo que convierte una palabra suelta en un rótulo; sin él, a este cuerpo y en mayúsculas, se lee como un título chico y compite con el de abajo. --au (#D4A853) sobre --gd da 6.09:1 medido, por encima del 4.5:1 que WCAG 1.4.3 pide para texto normal. */ .ck__kicker{font-family:var(--fm);font-size:.84rem;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--au); line-height:1;margin:0 0 8px} .ck__title{font-family:var(--fh);font-size:.98rem;font-weight:700; color:#fff;margin:0 0 4px;letter-spacing:-.01em} .ck__text{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.78);margin:0} .ck__policy{display:inline-block;margin-top:6px;font-size:.78rem; color:var(--aul);text-decoration:underline;text-underline-offset:2px; background:none;border:1px solid transparent;padding:2px 4px;cursor:pointer; font-family:var(--f)} .ck__policy:hover{color:#fff} /* --- Acciones ------------------------------------------------------------- TRES botones, no dos y un link. Mismo tamaño, misma altura, misma tipografía; lo único que los separa es el color. "Configurar" fue un link terciario hasta el 29-ago-2026 y ahora pesa lo mismo que los otros dos. ⚠️ LO QUE MANTIENE LOS TRES IGUALES EN FILA ES `flex:1 1 0`, no el flex-wrap. Con flex-basis 0 los items nunca superan el ancho de la línea, así que la línea no puede partirse. Se dio vuelta `nowrap` a `wrap` a propósito y el layout NO cambió en ninguno de los anchos medidos; recién cambiando también la base (`flex:1 1 auto` + min-width) el grupo se parte. Si alguien "limpia" esto, lo intocable es `flex:1 1 0`. La altura común sale de align-items:stretch (default) + min-height:46px. ⚠️ POR QUÉ EN COLUMNA DEBAJO DE 620 Y NO EN FILA: medido con getBoundingClientRect(), la etiqueta más larga del grupo necesita 166px para entrar en UNA línea (128 de texto + 38 de padding y bordes). Tres iguales piden 518px de ancho útil, y eso recién existe desde ~555px de viewport. En 360/390/412/480 la etiqueta envuelve a dos líneas y los TRES crecen JUNTOS a ~59px — o sea que "los tres miden lo mismo" sigue siendo CIERTO con el layout roto, y una aserción de altura pareja no lo distingue: el invariante relativo necesita un absoluto que lo ancle, y acá es "ninguno pasa de una línea". Apilados entran en una línea a cualquier ancho sin tocar el texto — que es requisito, no comodidad: el copy es el mismo en desktop y en mobile. Sin `order` y sin column-reverse: el orden visual y el del DOM tienen que coincidir en TODOS los anchos o el foco salta (WCAG 2.4.3). Orden único, en columna y en fila: Configurar, Sólo las necesarias, Aceptar todas. --------------------------------------------------------------------------- */ .ck__grupo{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch} .ck__grupo>.ck__btn{flex:1 1 0;min-width:0} .ck__btn{display:inline-flex;align-items:center;justify-content:center; min-height:46px;padding:11px 18px;border-radius:9px;border:1px solid transparent; font-family:var(--fh);font-weight:700;font-size:.87rem;line-height:1.25; text-align:center;cursor:pointer;transition:background .15s var(--ez), border-color .15s var(--ez),color .15s var(--ez)} /* Los tres se distinguen SÓLO por color: mismo tamaño, mismo peso de fuente, misma forma, mismo radio. Y `--sec` no puede leerse como menos botón que `--pri` — un rechazo que parece un link es un patrón oscuro por accidente, aunque nadie lo haya buscado. Por eso el borde blanco casi sólido y el relleno tenue: lo empareja con el dorado sin subir el volumen de ninguno de los dos. */ .ck__btn--pri{background:var(--au);color:var(--gd)} .ck__btn--pri:hover{background:var(--aul)} .ck__btn--sec{background:rgba(255,255,255,.10);color:#fff; border-color:rgba(255,255,255,.86)} .ck__btn--sec:hover{background:rgba(255,255,255,.18);border-color:#fff} /* ⚠️ El borde de `--ter` NO puede bajar de rgba(255,255,255,.38): medido en el navegador compuesto sobre --gd (#1E332B) da 3.29:1, apenas encima del 3:1 que WCAG 1.4.11 pide para el borde que identifica un componente —el piso real ronda .35—. Un gris más tenue "queda más prolijo" y deja el botón sin contorno perceptible para baja visión. Los otros dos, medidos igual: el borde de `--sec` da 10.34:1 y el relleno de `--pri` 6.09:1, o sea que el rechazo NO se lee más débil que el aceptar. */ .ck__btn--ter{background:transparent;color:rgba(255,255,255,.88); border-color:rgba(255,255,255,.38)} .ck__btn--ter:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.72);color:#fff} /* Los breakpoints del BANNER van scopeados con `.ck `: .ck__grupo y .ck__btn se reusan en el pie del panel, y sin el scope el max-width y el min-width se le colaban al pie y le dejaban el grupo más angosto que el primario. */ @media(max-width:619px){ .ck .ck__grupo{flex-direction:column} .ck .ck__grupo>.ck__btn{flex:0 0 auto} } /* ⚠️ `width:100%` NO es redundante con el stretch del flex: sin él, el `margin-left:auto` desactiva el estirado en el eje transversal y el grupo se encoge a su ancho de contenido (431px medidos). Con flex:1 1 0 eso reparte 137px por botón — por debajo de los 166 que pide la etiqueta larga— y los tres envuelven a dos líneas a la vez. Con el ancho declarado, el auto margin sólo actúa cuando el max-width deja espacio libre, que es para lo que está. */ @media(min-width:620px){ .ck .ck__grupo{justify-content:flex-end;width:100%;max-width:620px;margin-left:auto} } @media(min-width:900px){ .ck .ck__inner{flex-direction:row;align-items:center;gap:28px;padding:18px 24px; padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))} .ck .ck__copy{flex:1 1 auto} /* ⚠️ ANCHO DECLARADO EN EL GRUPO, y los botones repartiendo con `flex:1 1 0`. La tentación es `flex:0 0 auto` + `min-width` por botón, y funciona —hasta que una etiqueta pasa el mínimo—: ahí el ancho lo decide el CONTENIDO y los tres dejan de ser iguales, en silencio. Es la pregunta de siempre: `min-width:170px` no afirma "los tres miden lo mismo", afirma "ninguno baja de 170", que hoy equivale porque la etiqueta más larga pide 166. Medido con la webfont Y con los fallbacks: Plus Jakarta 166, Arial 168, Inter 169, system-ui 159 — así que durante el swap de la fuente, o si Google Fonts no carga, el `min-width` se queda corto y aparece un botón más ancho que los otros dos. Con `1 1 0` la igualdad no depende de ninguna etiqueta. 560px = 3×180 + 20 de gaps: 11px de aire sobre el peor fallback medido. */ .ck .ck__grupo{flex:0 0 auto;width:560px;max-width:100%;margin-left:0} } /* ========================================================================== 2) PANEL — sí es diálogo modal ========================================================================== */ /* 9200: por ENCIMA de todo lo del wizard —su overlay es 9000 y sus diálogos internos 9010 y 9020—. El panel y la política son diálogos que el usuario abrió a propósito, así que tienen que quedar arriba de lo que haya. Antes eran 9100, que alcanzaba por poco y sin decir contra qué. */ .ckp{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9200; background:rgba(30,51,43,.62);display:flex;align-items:flex-end; justify-content:center;font-family:var(--f)} .ckp__dialog{background:var(--w);color:var(--t1);width:100%;max-width:540px; max-height:92vh;display:flex;flex-direction:column; border-radius:16px 16px 0 0;box-shadow:0 -12px 48px rgba(0,0,0,.32); animation:ck-up .24s var(--ez) both} @media(prefers-reduced-motion:reduce){.ckp__dialog{animation:none}} @media(min-width:560px){ .ckp{align-items:center;padding:24px} .ckp__dialog{border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35)} } .ckp__head{display:flex;align-items:flex-start;gap:12px; padding:20px 16px 12px;border-bottom:1px solid var(--bdl)} @media(min-width:560px){.ckp__head{padding:22px 24px 14px}} .ckp__htxt{flex:1 1 auto;min-width:0} .ckp__title{font-family:var(--fh);font-size:1.08rem;font-weight:800; color:var(--t1);margin:0 0 4px;letter-spacing:-.02em} .ckp__intro{font-size:.8rem;line-height:1.55;color:var(--t3);margin:0} /* ✕ por ::before: si fuera un nodo hijo, applyTexts() lo borraría al traducir. Borde en --t3 y no --bd: es un CONTROL, y --bd da 1.37:1 contra el blanco, por debajo del 3:1 de WCAG 1.4.11. */ .ckp__x{flex:0 0 auto;width:38px;height:38px;border-radius:9px; border:1px solid var(--t3);background:var(--w);cursor:pointer; position:relative;color:var(--t3)} .ckp__x::before{content:'\2715';font-size:.9rem;line-height:1; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} .ckp__x:hover{background:var(--bg);color:var(--t1);border-color:var(--t1)} .ckp__body{overflow-y:auto;padding:6px 16px 4px;-webkit-overflow-scrolling:touch} @media(min-width:560px){.ckp__body{padding:6px 24px 4px}} /* --- Fila de categoría ---------------------------------------------------- flex-wrap + flex-basis en el texto: cuando el ancho no alcanza, el control baja SOLO a un renglón propio alineado a la derecha. Nunca se solapa con el texto de al lado, en ningún ancho, sin media query. --------------------------------------------------------------------------- */ .ckp__row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px; padding:16px 0;border-bottom:1px solid var(--bdl)} .ckp__row:last-child{border-bottom:none} .ckp__txt{flex:1 1 200px;min-width:0} .ckp__ctl{flex:0 0 auto;margin-left:auto} .ckp__cat{font-family:var(--fh);font-size:.87rem;font-weight:700; color:var(--t1);margin:0 0 3px} .ckp__desc{font-size:.76rem;line-height:1.5;color:var(--t3);margin:0} /* Necesarias: informativa y fija. NO es un checkbox deshabilitado —eso se lee como "roto"—: es una etiqueta de estado, sin control asociado. El estado lo dice el TEXTO (5.38:1), así que el borde del chip es decorativo. */ .ckp__fixed{display:inline-flex;align-items:center;gap:6px; padding:7px 12px 7px 10px;border-radius:999px; background:var(--okbg);border:1px solid rgba(27,155,90,.28); font-family:var(--fm);font-size:.68rem;font-weight:600;color:#137444; white-space:nowrap} .ckp__fixed::before{content:'\2713';font-size:.8rem;line-height:1} /* --- Toggle: