/* Pequenauta — el banner de cookies.

   Lo pinta comun/js/consentimiento.js al final del body de todas las páginas.
   Es un cartel al pie, no una ventana modal: no oscurece nada, no bloquea
   nada y la página se usa entera con él puesto. Un niño de siete años que se
   encuentra la pantalla tapada por un texto legal se va.

   Se ve y se esconde por la clase `oculta`, nunca solo por la animación:
   prefers-reduced-motion las anula todas con !important y un banner que solo
   apareciera animándose no se vería jamás. `oculta` la definen sitio.css y
   tesoro-tablas/css/base.css, así que existe en todas las páginas. */

.consentimiento {
  position: fixed;
  left: var(--e2);
  right: var(--e2);
  bottom: var(--e2);
  z-index: var(--z-consentimiento);
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--e4) var(--e7) var(--e4) var(--e4);
  border-radius: var(--radio-g);
  /* Vidrio sobre un fondo opaco: el vidrio solo no garantiza contraste sobre
     cualquier página, y este texto lo tiene que leer un adulto con prisa. */
  background-color: var(--mar-profundo);
  background-image: linear-gradient(var(--vidrio), var(--vidrio));
  border: 0.0625rem solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
  color: var(--texto);
  font-family: var(--tipo-texto);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

.consentimiento p {
  margin: 0 0 var(--e3);
}

.consentimiento a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consentimiento a:hover {
  color: var(--oro-claro);
}

/* Los dos botones miden lo mismo y pesan lo mismo: rechazar tiene que costar
   exactamente igual que aceptar. En un teléfono estrecho se apilan. */
.consentimiento-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.consentimiento-botones .boton-sitio {
  flex: 1 1 10rem;
}

/* La X cierra sin decidir: no es aceptar ni rechazar, y el banner vuelve en
   la siguiente visita. Objetivo de 44 px, como todo lo que se pulsa. */
.consentimiento-cerrar {
  position: absolute;
  top: var(--e1);
  right: var(--e1);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: var(--radio-g);
  background: transparent;
  color: var(--apagado);
  font-family: var(--tipo-titulo);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.consentimiento-cerrar:hover {
  color: var(--texto);
  background: var(--vidrio);
}

@keyframes subir-consentimiento {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.consentimiento:not(.oculta) {
  animation: subir-consentimiento var(--medio) ease-out;
}

/* Sin movimiento, el banner aparece igual: la visibilidad ya la da la clase. */
@media (prefers-reduced-motion: reduce) {
  .consentimiento {
    animation: none !important;
  }
}