/*
  La barra de cookies y el pie legal que la vuelve a abrir (`layouts/_partials/cookies.html`).

  Es una hoja aparte porque eso es: una pieza de interfaz que no es del theme ni de ninguna página
  en particular —va en todas—, y así `emeyeme.css` sigue siendo «los ajustes propios sobre el
  theme» y no una lista de todo. Se carga en todas las páginas (ver `head.html`).

  Los colores son los papeles de `emeyeme.css` (`--em-tinta`, `--em-crema`, `--em-acento`,
  `--em-acento-texto`, `--em-rotulo`) y las líneas, la salvia por su nombre.
*/

/* --- la barra de cookies ------------------------------------------------------------ */
/* El aviso de la barra (`cookies.html`) y el pie legal que lo vuelve a abrir. El bloque es una
   tarjeta fija abajo a la derecha: en el tema claro, la tarjeta blanca sobre el papel crema (igual
   que las otras tarjetas de la portada); en el oscuro, la tinta con la lectura en crema, que ya
   tiene su borde. Va con `z-index` alto porque el panel lateral (`site-panel`) es fijo y, sin eso,
   la barra quedaría debajo de la banda. */
body .cookies {
  position: fixed;
  z-index: 40;
  inset-inline: auto clamp(12px, 2vw, 28px);
  inset-block: auto clamp(12px, 2vw, 28px);
  max-inline-size: min(30rem, calc(100vw - 2rem));
}

body .cookies-caja {
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--em-tinta);
  color: var(--em-crema);
  border: 1px solid rgba(var(--em-salvia-rgb), 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  font-size: 0.86rem;
  line-height: 1.5;
}

:root:root[data-theme="light"] body .cookies-caja {
  background: var(--em-blanco);
  color: var(--em-tinta);
}

body .cookies-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--em-rotulo);
}

body .cookies-texto p {
  margin: 0 0 0.5rem;
}

body .cookies-texto a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body .cookies-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.9rem;
}

body .cookies-boton {
  padding: 0.55em 1em;
  border: 1px solid rgba(var(--em-salvia-rgb), 0.5);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

body .cookies-boton:hover,
body .cookies-boton:focus-visible {
  border-color: var(--em-acento-texto);
  color: var(--em-acento-texto);
}

body .cookies-boton-principal {
  border-color: var(--em-acento);
  background: var(--em-acento);
  color: var(--em-tinta);
}

body .cookies-boton-principal:hover,
body .cookies-boton-principal:focus-visible {
  background: transparent;
  color: var(--em-acento-texto);
}

body .cookies-panel {
  margin-block-start: 1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.35);
}

body .cookies-opcion {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-block-end: 0.7rem;
}

body .cookies-opcion input {
  margin-block-start: 0.25rem;
  flex: none;
}

body .cookies-opcion .icono-linea {
  flex: none;
  margin-block-start: 0.15rem;
  color: var(--em-rotulo);
}

body .cookies-panel .cookies-boton-principal {
  margin-block-start: 0.4rem;
}

/* El pie legal: los dos enlaces van juntos, en el mismo renglón de la firma. */
body .sitio-pie-legal {
  display: inline-flex;
  gap: 1.1rem;
}