/* ============================================================
   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 para poder centrar la caja,
   pero no intercepta el ratón: el hueco que queda a los lados
   sigue siendo página, y ahí se puede seguir pulsando. */

.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:center;
  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;
}

.cookies-caja{
  pointer-events:auto;
  width:100%; max-width:860px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:16px 20px;
  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{flex:1 1 300px; min-width:0}

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

.cookies-mas{margin-top:6px}
.cookies-mas a{
  display:inline-block; padding:4px 0;
  font-size:14px; color:var(--green, #0A7C5A);
}
.cookies-mas a:hover{text-decoration:underline}

/* ---------- 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)}

.cookies-acciones{display:flex; align-items:center; gap:10px; flex:0 0 auto}

/* 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}

/* ---------- Sitio para el asistente ----------
   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.

   El salto es instantáneo y no está animado a propósito: recorrer
   180 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. */

/* Valor de arranque: el JS lo sustituye por el alto real en cuanto mide. */
html.js body:has(#cookies){--cookies-hueco:180px}
html.js body:has(#cookies) .chat-fab{bottom:calc(var(--cookies-hueco) + 8px)}
/* El panel abierto también. Subía el botón flotante pero no el panel, así que
   al abrir el asistente con la lámina puesta el chat quedaba por debajo y no se
   podía escribir. Y se le recorta el alto lo mismo que sube, para que no se
   salga por arriba. */
html.js body:has(#cookies) .chat-panel{
  bottom:calc(var(--cookies-hueco) + 76px);
  max-height:calc(100vh - var(--cookies-hueco) - 110px);
}

/* Que el foco del teclado no aterrice detrás de la lámina cuando el
   navegador desplaza un campo para enseñarlo. No mueve nada: sólo
   cambia dónde se detiene el scroll. */
html:has(#cookies){scroll-padding-bottom:200px}

/* ---------- Móvil ----------
   Ocupa el ancho y los botones se reparten la fila a partes iguales:
   dos dianas grandes, del mismo tamaño, una al lado de la otra. */

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

  .cookies-caja{
    flex-direction:column; align-items:stretch; gap:14px;
    padding:16px;
    border-radius:var(--radius, 18px);
  }

  .cookies-texto{flex:0 0 auto}
  .cookies-texto p{font-size:14.5px}

  .cookies-acciones .cookies-btn{flex:1 1 0; padding:0 12px}

  html.js body:has(#cookies){--cookies-hueco:290px}
  html:has(#cookies){scroll-padding-bottom:310px}
}

/* ---------- 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-mas a{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)}
}

/* ---------- 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 en pantallas bajas ----------
   El aviso tiene que nombrar de qué va la web para que el consentimiento
   valga (art. 9), así que el texto no se puede recortar. Pero en un móvil
   apaisado o en una pantalla corta esa lámina se comía media página, 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: los dos botones siguen siempre a la vista. */
.cookies-caja{max-height:min(58vh, 420px);overflow-y:auto;overscroll-behavior:contain}
@media (max-height:520px){
  .cookies-caja{max-height:74vh}
}