/* ── PARCHE S7 · DEFECTO DE INTEGRACION (el CMP salia MARRON) ─────────────── Esta hoja traia los colores del Nest ESCRITOS A MANO en 7 sitios: `#5C2A1F` (su `--sun`), `#C9794D` (su `--atlantic-1`) y `#E6D6BA` (su `--sand`). No es un detalle: el banner de cookies es LO PRIMERO que ve todo visitante, y salia en terracota de Zanzibar sobre una web azul de Vietnam — medido en la captura de la home a 1440 px. Es exactamente el hallazgo del §5 del informe de S1 —«cambiar los seis colores NO basta para repintar la web»— repetido en territorio de S4, donde S1 no podia mirar: ella ato las cinco reglas escapadas de `nest.css` y estas siete viven en una hoja de componente que no existia cuando ella midio. Atadas a token con el hex del Nest como RESPALDO, que es el patron que ya usan `motor.css` y `reservar-modal.css`: si la hoja se sirve sin `belhamy.css` delante, se ve; con ella, manda el token. ────────────────────────────────────────────────────────────────────────── */ /* ── CAMBIO 2026-09-01 · LOS RADIOS DE ESTA HOJA PASAN A TOKEN ────────────── Encargo de Borja, trasladado por Antonio: «nada de esquinas […] dame aunque sea 5px de reborde curvado». Eso deroga el pilar «radio 0 estricto» de la dirección `CAL` firmada el 2026-08-25, y con él la posición rara de esta hoja: durante nueve dias el consentimiento fue LA UNICA pieza redondeada de una web a esquina viva, porque sus radios estaban escritos a mano y no los gobernaba `sistema/direccion/activa.js`. Ahora que se redondea todo, el consentimiento deja de ser la anomalia y pasa a ser el peldaño de referencia — pero eso solo vale si usa LA MISMA ESCALA. Cuatro radios propios en una hoja de componente son exactamente lo que prohibe la regla con nombre de `DESIGN.md`: «NO MEZCLES ESQUINA VIVA Y ESQUINA REDONDEADA EN LA MISMA VISTA». Con cuatro valores distintos y ajenos a la escala, la mezcla vuelve por la otra puerta. ⚠️ EL TOKEN LLEVA RESPALDO A PROPOSITO, y el respaldo es el valor que esta hoja pintaba ANTES de este cambio — no el del token. Es el patron que ya usan `motor.css` y `reservar-modal.css` y el que usa la propia hoja para los colores desde el parche S7: servida sin bloque de direccion delante (una pagina de prueba, el CMP aislado), el consentimiento sigue viendose como hoy; con el bloque delante, manda el token y la escala es una sola. ⚠️ ESTO NO SE PODIA HACER SI LA HOJA VIVIERA AISLADA, y se comprobo antes de tocarla: `sistema/plantillas/head-seo.js` la enlaza como TERCERA hoja del , detras de `cadena.css`, y `consent.js` cuelga el banner y el panel de `document.body` — ni shadow DOM ni iframe. Verificado ademas sobre lo SERVIDO: las tres unicas hojas de la home son `fonts.css`, `cadena.css` y `consent.css`, en ese orden. Los `var()` resuelven contra el `:root` que emite el modulo de direccion. LO QUE NO SE TOCA: los dos `50%` (el disco del icono y la bolita del interruptor). Son circulos por definicion geometrica, no radios de la escala. ────────────────────────────────────────────────────────────────────────── */ /* MONEA Royal Monica · Consent Manager UI · estilo bubble Sol collection Paleta: crema + negro Monea + acento sun terracota */ /* ===== BUBBLE bottom-left ===== */ .cmp-banner{ position:fixed; left:24px; bottom:24px; /* default: pegada abajo */ z-index:9998; width:min(380px, calc(100vw - 48px)); background:#F5F3E9; color:#1D1D1B; /* --radius-md: la burbuja es superficie de contenedor, no control. */ border-radius:var(--radius-md,12px); box-shadow:0 20px 60px rgba(29,29,27,.18), 0 6px 20px rgba(29,29,27,.10); border:1px solid rgba(29,29,27,.08); overflow:hidden; transform:translateY(20px) scale(.96); opacity:0; transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .35s ease, bottom .35s cubic-bezier(.2,.7,.2,1); font-family:'Inter',-apple-system,sans-serif; } .cmp-banner.is-visible{ transform:translateY(0) scale(1); opacity:1; } /* Cuando la book-sticky es visible → bubble sube para no taparla */ .cmp-banner.cmp-banner--lifted{ bottom:96px; } /* Línea acento sun arriba */ .cmp-banner:before{ content:""; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg, var(--sun,#5C2A1F) 0%, var(--atlantic-1,#C9794D) 50%, var(--sand,#E6D6BA) 100%); } .cmp-banner__inner{ padding:1.5rem 1.6rem 1.3rem; position:relative; } .cmp-banner__icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; /* D4 · LA OCTAVA FUGA, que el parche de S7 no vio porque no busca hex: es un `rgba()`. `rgba(200,118,60,.10)` es el terracota del Nest escrito a mano y sin token, así que el disco del icono del banner seguía saliendo marrón sobre una web azul. Mismo patrón que las otras siete: token con el valor del Nest de respaldo. `--sun-rgb` lo emite `derivar.js` justo para esto. */ background:rgba(var(--sun-rgb,200,118,60),.10); margin-bottom:.9rem; } .cmp-banner__icon svg{ display:block; width:20px; height:20px; } .cmp-banner__title{ font-family:'Libre Caslon Text', Georgia, serif; font-size:1.35rem; font-weight:400; line-height:1.15; margin:0 0 .55rem; color:#1D1D1B; letter-spacing:-.005em; } .cmp-banner__title em{ font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:400; color:var(--sun,#5C2A1F); } .cmp-banner__text{ margin:0 0 1.2rem; font-size:.84rem; line-height:1.55; color:rgba(29,29,27,.72); } .cmp-banner__text a{ color:#1D1D1B; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .cmp-banner__text a:hover{ color:var(--sun,#5C2A1F); } .cmp-banner__actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; align-items:stretch; } .cmp-banner__actions .cmp-btn{ width:100%; text-align:center; } /* Botones */ .cmp-btn{ font-family:inherit; font-size:.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; /* D4 · 44 px de alto. Medido a 390 px, los dos botones del banner daban 159×40: son los PRIMEROS controles que toca todo visitante, y estaban por debajo del listón táctil. El relleno sube lo justo; el tipo no se toca (12,48 px, ya por encima del suelo). */ padding:.9rem 1.1rem; min-height:44px; /* --radius-sm: control. Es el peldaño chico de la escala, el mismo que llevan los campos y las cajitas de detalle de esta hoja. */ border-radius:var(--radius-sm,6px); cursor:pointer; border:1px solid #1D1D1B; background:transparent; color:#1D1D1B; transition:background .18s ease, color .18s ease, transform .12s ease; white-space:nowrap; } .cmp-btn:hover{ background:#1D1D1B; color:#F5F3E9; } .cmp-btn:active{ transform:translateY(1px); } .cmp-btn--primary{ background:#1D1D1B; color:#F5F3E9; } .cmp-btn--primary:hover{ background:#000; color:#F5F3E9; } .cmp-btn--ghost{ background:transparent; } .cmp-btn--text{ border:0; background:transparent; padding:.72rem .4rem; font-weight:500; letter-spacing:.04em; text-transform:none; font-size:.8rem; text-decoration:underline; text-underline-offset:3px; color:rgba(29,29,27,.7); } .cmp-btn--text:hover{ color:#1D1D1B; background:transparent; } .cmp-btn--block{ flex:1 1 100%; } /* ===== PANEL modal (configurar) ===== */ .cmp-panel{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; font-family:'Inter',-apple-system,sans-serif; } .cmp-panel.is-visible{ opacity:1; pointer-events:auto; } .cmp-panel__backdrop{ position:absolute; inset:0; background:rgba(29,29,27,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .cmp-panel__sheet{ position:relative; background:#F5F3E9; color:#1D1D1B; width:min(620px, calc(100% - 2rem)); max-height:calc(100vh - 2rem); overflow:hidden; /* --radius-md: el panel es la misma clase de superficie que la burbuja, y antes de este cambio llevaba DOS puntos más de radio que ella sin motivo. El respaldo conserva el que pintaba, para que la hoja servida sola se vea como hasta hoy. */ border-radius:var(--radius-md,14px); box-shadow:0 30px 80px rgba(29,29,27,.45); display:flex; flex-direction:column; } .cmp-panel__sheet:before{ content:""; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg, var(--sun,#5C2A1F) 0%, var(--atlantic-1,#C9794D) 50%, var(--sand,#E6D6BA) 100%); } .cmp-panel__header{ display:flex; justify-content:space-between; align-items:flex-start; padding:1.6rem 1.8rem 1.2rem; border-bottom:1px solid rgba(29,29,27,.08); } .cmp-panel__header h2{ margin:0; font-family:'Libre Caslon Text', Georgia, serif; font-size:1.5rem; font-weight:400; letter-spacing:-.005em; line-height:1.2; } .cmp-panel__header h2 em{ font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; color:var(--sun,#5C2A1F); } .cmp-panel__close{ background:transparent; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:rgba(29,29,27,.6); padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:color .15s ease; } .cmp-panel__close:hover{ color:#1D1D1B; } .cmp-panel__body{ padding:1.4rem 1.8rem; overflow:auto; } .cmp-panel__intro{ font-size:.85rem; color:rgba(29,29,27,.72); margin:0 0 1.4rem; line-height:1.6; } .cmp-panel__foot{ display:flex; gap:.6rem; flex-wrap:wrap; padding:1.2rem 1.8rem; border-top:1px solid rgba(29,29,27,.08); background:rgba(29,29,27,.025); } .cmp-panel__foot .cmp-btn{ flex:1 1 auto; } /* Filas categoria */ .cmp-row{ padding:1rem 0; border-top:1px solid rgba(29,29,27,.08); } .cmp-row:first-child{ border-top:0; padding-top:.4rem; } .cmp-row__head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; } .cmp-row__head strong{ font-size:.95rem; font-weight:500; letter-spacing:.005em; } .cmp-row__desc{ margin:.5rem 0 0; font-size:.8rem; color:rgba(29,29,27,.7); line-height:1.55; } .cmp-row__state{ font-size:.68rem; color:rgba(29,29,27,.55); text-transform:uppercase; letter-spacing:.08em; font-weight:500; } .cmp-row__state--locked{ padding:.25rem .55rem; border:1px solid rgba(29,29,27,.18); /* --radius-sm: caja pequeña, mismo peldaño que los botones. */ border-radius:var(--radius-sm,4px); background:rgba(29,29,27,.03); } /* Switch */ .cmp-switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; } .cmp-switch input{ opacity:0; width:0; height:0; } .cmp-switch span{ position:absolute; inset:0; cursor:pointer; background:rgba(29,29,27,.16); transition:background .2s; /* --radius-pill: capsula. La nota del ORQ del 24-08 decia que esto no era un valor de direccion porque la escala de entonces no tenia rol de pastilla — por eso se escribio a mano. Desde el 2026-09-01 SI lo tiene (`pill`), asi que el interruptor pasa a leerlo como todo lo demas y el respaldo mantiene la capsula exacta si el token falta. */ border-radius:var(--radius-pill,100vmax); } .cmp-switch span:before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#F5F3E9; transition:transform .22s cubic-bezier(.2,.7,.2,1); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); } .cmp-switch input:checked + span{ background:var(--sun,#5C2A1F); } .cmp-switch input:checked + span:before{ transform:translateX(18px); } .cmp-switch input:focus-visible + span{ outline:2px solid var(--sun,#5C2A1F); outline-offset:2px; } body.cmp-lock{ overflow:hidden; } /* ===== Responsive ===== */ @media (max-width: 720px){ .cmp-banner{ left:12px; right:12px; bottom:24px; /* default pegado abajo (con margen 24 para que respire) */ width:auto; } /* En mobile la book-sticky es la pildora "Reservar ahora" (~75px alto) */ .cmp-banner.cmp-banner--lifted{ bottom:88px; } .cmp-banner__inner{ padding:1.2rem 1.2rem 1rem; } .cmp-banner__title{ font-size:1.15rem; } /* Aceptar / Rechazar siguen en grid 2 cols, NO se apilan */ .cmp-panel__foot{ flex-direction:column-reverse; } .cmp-panel__foot .cmp-btn{ width:100%; } /* Hoja movil: conserva su forma de SOLO-ARRIBA (abajo pega al borde de la pantalla, y una esquina redondeada contra el borde no se ve: se ve un hueco). Lo que cambia es de donde sale el numero: --radius-md, el mismo de la version de escritorio. */ .cmp-panel__sheet{ border-radius:var(--radius-md,14px) var(--radius-md,14px) 0 0; max-height:90vh; } .cmp-panel{ align-items:flex-end; } }