/* =====================================================================
   EL AVISO DE COOKIES
   El mismo que la app (src/components/CookieConsent.tsx): tarjeta abajo a
   la derecha en sobremesa, pegada abajo en el movil, y las tres opciones
   --configurar, rechazar, aceptar-- al mismo nivel, del mismo tamano y del
   mismo color, como pide la guia de cookies de la AEPD. No lleva aspa: un
   aviso que se cierra sin decidir es un aviso que decide por ti.

   Va por encima del aviso de descarga (z-index 120) porque si salen los dos
   manda este, y el otro espera a que se decida (ver pag.js).
   ===================================================================== */
.cc{
  position:fixed;z-index:140;left:12px;right:12px;bottom:12px;
  max-height:84vh;overflow-y:auto;
  background:#120d09;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  box-shadow:0 36px 70px -24px #000;
  padding:16px;color:#e9e3dc;
  font:400 13px/1.55 var(--sans,"Archivo",system-ui,sans-serif);
}
@media (min-width:760px){
  .cc{left:auto;width:25rem;right:16px;bottom:16px;}
}
.cc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.cc h2{
  margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;
}
.cc p{margin:10px 0 0;color:#bdb4ab;}
.cc a{color:#fdba74;text-decoration:underline;text-underline-offset:2px;}
.cc a:hover{color:#f97316;}
/* los tres botones, iguales: ninguno tiene que llamar mas que los otros */
.cc-bot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.cc button{
  font:700 12.5px/1 var(--sans,"Archivo",system-ui,sans-serif);
  color:#fff;background:#231c16;border:1px solid rgba(255,255,255,.18);
  border-radius:9px;padding:11px 8px;cursor:pointer;
}
.cc button:hover{background:#30261e;}
.cc button:focus-visible{outline:2px solid #f97316;outline-offset:2px;}
.cc-x{
  flex:none;margin:-4px -4px 0 0;padding:4px 8px!important;
  background:none!important;border:0!important;color:#9c9289!important;font-size:15px!important;
}
.cc-x:hover{color:#fff!important;}
/* cada grupo de cookies, en su cajita */
.cc-grupo{
  display:block;margin-top:12px;padding:12px;
  border:1px solid rgba(255,255,255,.14);border-radius:11px;
}
.cc-grupo p{margin:6px 0 0;font-size:12px;color:#9c9289;}
.cc-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cc-fila b{font-size:13.5px;font-weight:700;color:#fff;}
.cc-fila span{flex:none;font-size:11.5px;color:#9c9289;}
label.cc-grupo{cursor:pointer;}
label.cc-grupo .cc-fila input{
  flex:none;width:20px;height:20px;accent-color:#f97316;cursor:pointer;margin:0;
}
.cc-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;}
.cc-pie a{font-size:12px;}
.cc-pie button{padding-left:18px;padding-right:18px;}
/* "Configurar cookies" dentro de un texto legal: es una accion, no un enlace,
   pero tiene que leerse como los enlaces que lo rodean */
.prose button[data-cookies]{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--accent-soft,#fdba74);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(253,186,116,.45);
}
.prose button[data-cookies]:hover{color:var(--accent,#f97316);text-decoration-color:var(--accent,#f97316);}
/* "Configurar cookies" del pie de pagina: es un boton, pero tiene que
   parecerse a los enlaces que lo rodean */
button.footlink{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;
}
@media (prefers-reduced-motion:no-preference){
  .cc{animation:cc-entra .28s cubic-bezier(.2,.7,.2,1) both;}
}
@keyframes cc-entra{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}