/* ============================================================
   SAMNA · lámina de consentimiento

   Una lámina apoyada abajo, con el cristal y las esquinas del
   resto del sistema. No es un modal: no hay velo, no oscurece
   nada y no bloquea el scroll.

   Tres cosas que no se tocan:

   1. Los dos botones son EL MISMO botón con distinta palabra.
      Misma clase, mismo tamaño, mismo color, mismo peso. Poner
      "Rechazar" un punto más claro es la infracción de cookies
      más sancionada en España, y además es mentirle a alguien
      que ha venido a leer sobre su salud.
   2. Movimiento mínimo: 12 px de recorrido y 240 ms, una sola
      vez. Nada que rebote, nada que lata. Con motion reducido,
      aparece y ya está.
   3. Sin JS la lámina no se pinta (display:none hasta que html
      lleva la clase 'js'). Los botones no funcionarían y se
      quedaría tapando la página para siempre.

   Sólo se usan las variables que ya existen en samna.css, con
   valor de reserva por si este fichero se cargara solo.
   ============================================================ */

/* ---------- Colocación ----------
   El contenedor ocupa todo el ancho, pero no intercepta el ratón: el
   hueco que queda al lado sigue siendo página, y ahí se puede seguir
   pulsando.

   En pantalla ancha la caja es una tarjeta abajo a la IZQUIERDA. Centrada
   y a lo ancho tapaba el botón de reservar de la portada, que va en el
   centro; a la izquierda no lo toca, y deja libre la esquina derecha, que
   es la del asistente: ya no hay que subirle el botón. */

.cookies{
  display:none;   /* sin JS no hay cookie que consentir: no se enseña */
  position:fixed; z-index:200;   /* por encima del asistente (120), por debajo del salto al contenido (300) */
  left:0; right:0; bottom:0;
  justify-content:flex-start;
  padding:0 16px 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}

html.js .cookies{
  display:flex;

  /* Estado de partida. visibility (y no sólo opacity) para que, si el
     JS no llegara a arrancar, la lámina invisible no siga capturando
     toques ni la lea un lector de pantalla. */
  visibility:hidden;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 240ms var(--ease, cubic-bezier(.4,0,.2,1)),
             transform 240ms var(--ease, cubic-bezier(.4,0,.2,1)),
             visibility 0s linear 240ms;
}

html.js .cookies.dentro{
  visibility:visible;
  opacity:1;
  transform:none;
  transition:opacity 240ms var(--ease, cubic-bezier(.4,0,.2,1)),
             transform 240ms var(--ease, cubic-bezier(.4,0,.2,1)),
             visibility 0s linear 0s;
}

/* Rejilla de dos filas —texto arriba, botones abajo— y no flex con
   flex-wrap: en columna y con techo de altura, el wrap mandaba los botones a
   una SEGUNDA COLUMNA, fuera de la caja y de la pantalla (320 px de ancho, o
   un móvil con la letra grande). El que cede es el texto, que se desplaza
   por dentro; la fila de los botones no encoge nunca. */
.cookies-caja{
  pointer-events:auto;
  width:100%; max-width:440px;
  display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px;
  padding:16px 18px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius, 18px);
  box-shadow:0 12px 44px rgba(0,0,0,.14);
}

/* Sin cristal, el texto se leería encima de la página. Ahí el fondo
   pasa a ser casi opaco: primero se lee, luego se decora. */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .cookies-caja{background:rgba(255,255,255,.985)}
}

/* ---------- Texto ---------- */

.cookies-texto{min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain}

.cookies-texto p{
  font-size:15px; line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ink-2, #515154);
  text-wrap:pretty;
}
.cookies-largo p{margin-top:8px}

/* "Más información" despliega aquí mismo el texto largo: irse a otra página
   para leerlo es perder la landing. Va al final de la frase, en línea, para
   no gastar una fila entera; la política completa, junto a los botones. Los
   dos, subrayados y en verde. */
.cookies-desplegar,
.cookies-politica{
  font:inherit; font-size:14px; line-height:inherit;
  color:var(--green, #0A7C5A);
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.cookies-desplegar::after{content:'\00a0+'}
.cookies-desplegar[aria-expanded=true]::after{content:'\00a0\2212'}
.cookies-politica{flex:0 0 auto; padding:12px 0; white-space:nowrap}
/* El de desplegar va en línea con el texto y no puede crecer sin mover las
   líneas: la zona que responde al dedo se amplía por fuera, invisible. */
.cookies-desplegar{position:relative}
.cookies-desplegar::before{content:''; position:absolute; inset:-12px -6px}

/* ---------- Los dos botones ----------
   Una sola regla para los dos, a propósito: así no hay forma de
   cambiarle el peso a uno sin cambiárselo al otro.

   Van en tinta y no en verde porque el verde es el color con el que
   esta web pide una plaza. El aviso de cookies no compite con eso:
   informa, no vende. En tinta los dos quedan idénticos, calmados y
   con 16:1 de contraste. */

.cookies-btn{
  font-family:inherit; font-size:15px; font-weight:500;
  letter-spacing:-.012em;
  min-height:44px;   /* el pulgar necesita 44 px, tanto en móvil como fuera de él */
  padding:0 24px;
  border:1px solid transparent;
  border-radius:980px;
  background:var(--ink, #1D1D1F);
  color:#fff;
  cursor:pointer; white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background var(--t-micro, 180ms) var(--ease, cubic-bezier(.4,0,.2,1)),
             transform 120ms var(--ease, cubic-bezier(.4,0,.2,1));
}
.cookies-btn:hover{background:var(--black, #000)}
.cookies-btn:active{transform:scale(.97)}

/* Los dos se reparten la fila a partes iguales, con el ancho que haya, y
   el enlace a la política se queda a su lado. Si no cabe (320 px, letra
   grande), el enlace baja a otra fila: los botones no se mueven de sitio ni
   se salen nunca de la caja. */
.cookies-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.cookies-acciones .cookies-btn{flex:1 1 0; padding:0 8px}

/* El foco lo pinta la regla global de samna.css (anillo verde). Aquí
   sólo se asegura que el anillo no se recorte contra el borde de la
   caja. */
.cookies-btn:focus-visible{outline-offset:3px}

/* ---------- Lo que queda debajo de la lámina ----------
   El alto lo mide consentimiento.js y lo deja en --cookies-hueco sobre
   <html>; aquí sólo hay un valor de arranque para el primer fotograma.

   Mientras está puesta:
   · el body gana ese mismo aire por abajo, para que el final de la página
     (el pie, 'Acceso') se pueda subir por encima de ella;
   · el scroll que hace el navegador al llevar el foco a un campo se detiene
     por encima de la lámina, con el alto real y no con uno a ojo (antes
     eran 310 px fijos para una lámina de 352: el foco caía detrás). */
html.js:has(#cookies){--cookies-hueco:220px}
html.js body:has(#cookies){padding-bottom:var(--cookies-hueco)}
html:has(#cookies){scroll-padding-bottom:calc(var(--cookies-hueco, 220px) + 16px)}

/* ---------- Móvil ----------
   Ocupa el ancho y es COMPACTA: la frase con "Más información" al final,
   y debajo los dos botones y el enlace a la política. 147 px en un móvil de
   390x844 (antes 352, el 42 % de la pantalla, con el botón de reservar de
   la portada debajo). Los botones se reparten la fila a partes iguales:
   dos dianas grandes, del mismo tamaño. */

@media (max-width:760px){
  .cookies{padding:0 8px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}

  .cookies-caja{
    max-width:none;
    gap:10px;
    padding:12px 14px;
    border-radius:var(--radius, 18px);
  }

  .cookies-texto p{font-size:14px; line-height:1.4}

  html.js:has(#cookies){--cookies-hueco:150px}

  /* ---------- Sitio para el asistente ----------
     Aquí la lámina se apoya justo donde vive el botón del chat. Mientras
     esté puesta, el botón sube: dejarlo debajo sería esconder una parte de
     la web hasta que decida sobre cookies, que es justo lo que no se puede
     hacer.

     Sube lo justo para montarse en la esquina de la lámina, con la mitad
     fuera: entero por encima flotaba sobre el contenido (el final del
     titular a 320 px, la entradilla a 375, las preguntas al tabular). Va por
     encima de la lámina (z-index) y la primera línea del aviso le deja sitio
     (el hueco de .cookies-texto, abajo). El scroll que sigue al foco se
     detiene también por encima de la media burbuja que asoma.

     El salto es instantáneo y no está animado a propósito: recorrer
     150 px con una transición es exactamente el movimiento que este
     público no tolera. Reposicionar un botón flotante de golpe, en
     cambio, no molesta a quien está leyendo.

     Se mide con :has() sobre la presencia del elemento (no sobre la
     clase 'dentro') para que la posición sea correcta ya en el primer
     fotograma, antes de que el JS lo enseñe. */
  html.js body:has(#cookies) .chat-fab{bottom:calc(var(--cookies-hueco) - 28px); z-index:205}
  html.js body:has(#chat-fab) .cookies-texto::before{
    content:''; float:right; width:58px; height:16px;
  }
  html:has(#cookies):has(#chat-fab){scroll-padding-bottom:calc(var(--cookies-hueco, 150px) + 40px)}

  /* El panel abierto va encima del botón, que está sobre la lámina.
     Antes se le recortaba el alto lo mismo que subía, y en un móvil bajo
     (375x667, 360x640) se quedaba en una tira de 150-200 px sin cabecera
     ni botón de cerrar. Ahora tiene 420 px garantizados: si encima de la
     lámina no caben, el panel baja y la tapa (por eso el z-index), y en
     cuanto se cierra la lámina vuelve a estar ahí. */
  html.js body:has(#cookies) .chat-panel{
    --alto-vista:100vh;
    --chat-suelo:max(12px, min(calc(var(--cookies-hueco) + 40px), calc(var(--alto-vista) - 432px)));
    z-index:210;
    bottom:var(--chat-suelo);
    max-height:min(620px, calc(var(--alto-vista) - var(--chat-suelo) - 12px));
  }
  /* En el móvil 100vh es la pantalla SIN la barra del navegador. Con dvh,
     donde exista, el panel cuenta con la barra que se ve de verdad. Va por
     @supports porque en una variable no sirve el truco de declarar dos
     veces: la segunda gana siempre, valga o no. */
  @supports (height:100dvh){
    html.js body:has(#cookies) .chat-panel{--alto-vista:100dvh}
  }
}

/* ---------- Oscuro ----------
   La web no tiene modo oscuro: en oscuro sigue siendo blanca. Así que
   aquí no se inventa una paleta nueva — la lámina se pone la piel que
   el sistema YA tiene para sus secciones oscuras (.sec-ink) y el botón
   claro sobre negro que ya usa .btn-ink. Sobre una página clara se lee
   como una bandeja del sistema, que es lo que es. */

@media (prefers-color-scheme:dark){
  .cookies-caja{
    background:rgba(0,0,0,.82);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 12px 44px rgba(0,0,0,.45);
  }
  @supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
    .cookies-caja{background:rgba(0,0,0,.96)}
  }

  .cookies-texto p{color:var(--on-black, #F5F5F7)}
  .cookies-desplegar,
  .cookies-politica{color:var(--green-on-black, #34D399)}

  .cookies-btn{background:var(--on-black, #F5F5F7); color:var(--ink, #1D1D1F)}
  .cookies-btn:hover{background:#fff}

  /* El anillo verde oscuro no se ve sobre negro; sobre negro el verde
     de la casa es el claro, igual que en .sec-ink. */
  .cookies :focus-visible{outline-color:var(--green-on-black, #34D399)}
}
/* En el móvil la burbuja se monta en la esquina de la lámina, y en oscuro su
   mitad de abajo (verde oscuro) se fundía con el negro: un filo claro la
   recorta. */
@media (prefers-color-scheme:dark) and (max-width:760px){
  html.js body:has(#cookies) .chat-fab{box-shadow:0 0 0 1.5px rgba(245,245,247,.4), 0 6px 22px rgba(0,0,0,.4)}
}

/* ---------- Movimiento reducido ----------
   samna.css ya recorta todas las duraciones, pero la lámina también
   tiene que dejar de desplazarse: aquí aparece y desaparece sin
   recorrido ninguno. */

@media (prefers-reduced-motion:reduce){
  html.js .cookies{
    transform:none;
    transition:opacity .01ms linear, visibility 0s linear .01ms;
  }
  html.js .cookies.dentro{
    transform:none;
    transition:opacity .01ms linear, visibility 0s linear 0s;
  }
  .cookies-btn{transition:none}
  .cookies-btn:active{transform:none}
}

/* En papel no hay nada que consentir. */
@media print{
  .cookies{display:none!important}
}

/* ---------- Los mismos dos botones, en la página de cookies ----------
   Aquí viven fuera de la lámina, dentro de un formulario normal, para
   poder cambiar de idea sin JavaScript. Comparten .cookies-btn con el
   banner a propósito: si algún día alguien cambia el peso visual de
   uno de los dos, lo cambia en los dos sitios a la vez. */
.cookies-preferencias{
  display:flex;flex-wrap:wrap;gap:12px;
  margin:20px 0 24px;
}
.cookies-preferencias .cookies-btn{flex:0 0 auto;min-width:160px}
@media (max-width:520px){
  .cookies-preferencias{flex-direction:column}
  .cookies-preferencias .cookies-btn{width:100%}
}

/* ---------- Tope de altura ----------
   El aviso tiene que nombrar de qué va la web para que el consentimiento
   valga (art. 9). Plegado ya es corto, pero desplegado, en un móvil
   apaisado o con la letra grande, se comería la pantalla, y una lámina que
   tapa el contenido hasta que decides se parece demasiado a un muro de
   cookies. Se le pone techo y, si no cabe, el texto se desplaza dentro
   (ver .cookies-texto): los dos botones siguen siempre a la vista. */
.cookies-caja{max-height:min(70vh, 480px);overflow:hidden}
@media (max-height:520px){
  .cookies-caja{max-height:80vh}
}