/* El aviso de cookies. Una sola hoja para las cinco paginas: los estilos de
   cada pagina viven dentro de su <style>, y copiar esto cinco veces seria la
   sexta casa del mismo dato.

   Habla con los tokens de la capa 2 (--ground, --ground-2, --ink-a, --hot,
   --soft-lift), que desde el 15-09-2026 viven en /css/tokens.css junto con la
   paleta. No inventa ni un color.

   z-index 50 y no 30: cada pagina dibuja un borde fijo con `body::after` en
   z-index 40, y por debajo de el el aviso quedaria recortado en los bordes.

   Esta hoja solo se carga cuando hay algo que consentir: la emite el marcador
   `<!--dc:medicion-->`, que no sale si `sitio.json` no trae un ID. */

.dcc {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2.4rem);
  /* Sin respaldo a mano: hasta el 15-09-2026 esto decia `var(--ground-2,
     #1b1917)` y en la 404 ——la unica plantilla que no declaraba ese token——
     el aviso se pintaba con el respaldo, no con el token. Coincidian, asi que
     nadie lo vio. Ahora los ocho tokens de la capa 2 viven en /css/tokens.css
     y las cinco paginas los tienen. */
  background: var(--ground-2);
  color: var(--ink-a);
  border-top: 2px solid var(--hot);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.5;
  /* Sin `display:none`: el aviso se quita del DOM al decidir. Un aviso
     escondido sigue siendo un aviso que el lector de pantalla puede encontrar. */
}

.dcc__caja {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.8rem, 2.5vw, 1.6rem);
  align-items: center;
  justify-content: space-between;
}

.dcc__texto { margin: 0; flex: 1 1 22rem; max-width: 58ch; }
.dcc__texto a { color: var(--hot); text-decoration: underline; text-underline-offset: .18em; }

.dcc__botones { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Aceptar y rechazar tienen el MISMO peso visual. Un «aceptar» grande al lado
   de un «rechazar» gris no es una eleccion, y es justo lo que la norma no
   admite. La unica diferencia entre los dos es el color del trazo. */
.dcc__btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .95rem;
  letter-spacing: .02em;
  line-height: 1.2;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.15rem;
  min-height: 44px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-a);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink-a) 55%, transparent);
  /* Al SOLTAR. Pulsar y soltar no duran lo mismo a proposito: el hundido tiene
     que ser inmediato (es la respuesta al dedo) y la vuelta puede respirar. */
  transition: opacity .12s ease-out, transform .16s ease-out;
}
.dcc__btn:active { opacity: .7; transform: scale(.98); transition-duration: .06s, .06s; }
.dcc__btn:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .dcc__btn:hover { box-shadow: inset 0 0 0 2px var(--hot); color: var(--hot); }
}
.dcc__btn--si { box-shadow: inset 0 0 0 2px var(--soft-lift); }
.dcc__btn--no { box-shadow: inset 0 0 0 2px var(--soft-lift); }
.dcc__btn--mas {
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: .2em;
  padding-inline: .4rem;
}

/* El detalle, cuando pide elegir. */
.dcc__detalle { flex: 1 1 100%; margin: 0; padding: 0; border: 0; }
.dcc__detalle[hidden] { display: none; }
.dcc__fila {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .7rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink-a) 18%, transparent);
}
/* 24px es el suelo de WCAG 2.2 para un objetivo de puntero, y `flex: none` no
   es adorno: sin el, a 390 px la fila apretaba el cuadrado a 9 px de ancho
   ——alto 24, ancho 9—— mientras la hoja seguia diciendo 24x24. Las dos cosas se
   ven midiendo la pantalla pintada, nunca leyendo el CSS. La etiqueta tambien
   alcanza (lleva `for`), pero el cuadrado en si tiene que poderse tocar. */
.dcc__fila input { margin: .2rem 0 0; flex: none; width: 24px; height: 24px; accent-color: var(--hot); }
.dcc__fila input:disabled { opacity: .55; }
/* Sin esto la casilla se quedaba con el anillo de fabrica de Chrome ——1px
   `rgb(16,16,16)`—— sobre un panel casi negro: invisible. Se ve mandando Tab de
   verdad; un `.focus()` programatico ni siquiera dispara `:focus-visible`. */
.dcc__fila input:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
.dcc__fila label { font-weight: 600; }
.dcc__fila p { margin: .15rem 0 0; font-size: .88rem; color: color-mix(in srgb, var(--ink-a) 72%, transparent); }

@media (max-width: 620px) {
  .dcc__botones { width: 100%; }
  .dcc__btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* «Reducido» no es «ninguno»: se va el movimiento y se queda la opacidad. Con
     `transition: none` y sin `transform`, pulsar no contestaba nada. */
  .dcc__btn { transition: opacity .12s ease-out; }
  .dcc__btn:active { transform: none; transition-duration: .12s; }
}