/* El banner de las cookies. Del mismo material que el resto de la página
   —tarjeta, borde, radio, los mismos colores—, no una barra gris de sistema.
   Va abajo, sin cruzarse por delante de nada; en el móvil, por encima de la
   barra de secciones, que es donde llega el pulgar. */

.ck-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 95;                 /* por encima de la barra de abajo (80) */
  width: min(680px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 16px 18px;
  background: var(--tarjeta, #fff);
  color: var(--tinta, #1a2040);
  border: 1px solid var(--borde, #d7ddf0);
  border-radius: var(--radio, 16px);
  box-shadow: 0 12px 34px rgba(11, 22, 96, .22);
  animation: ck-entra 260ms cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes ck-entra { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }

.ck-titulo { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--titulo, var(--tinta, #12279c)); }
.ck-texto { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta-suave, #5b6480); }

.ck-botones { display: flex; gap: 10px; margin-top: 14px; }
.ck-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid var(--borde, #d7ddf0);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: transform .12s, border-color .14s, background-color .14s;
}
.ck-btn:active { transform: scale(.98); }
.ck-si {
  background: var(--azul, #12279c);
  border-color: var(--azul, #12279c);
  color: #fff;
}
/* En el tema oscuro --azul se aclara (#5a7dff) para hacer de acento sobre
   negro, y el blanco encima se quedaba en 3,6 de contraste. Encima de esa
   superficie va tinta oscura, la misma que usa el calendario para el día
   elegido: un color es superficie o tinta, no las dos cosas. */
:root[data-tema="oscuro"] .ck-si { color: #0a1130; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] .ck-si { color: #0a1130; }
}
.ck-no {
  background: transparent;
  color: var(--tinta, #1a2040);
}
@media (hover: hover) and (pointer: fine) {
  .ck-no:hover { border-color: var(--azul, #12279c); }
  .ck-si:hover { filter: brightness(1.08); }
}

/* En el móvil, por encima de la barra de secciones (que mide ~64px + el hueco
   del sistema), y a lo ancho de la pantalla. */
@media (max-width: 860px) {
  .ck-banner {
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  @keyframes ck-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .ck-botones { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-banner { animation: none; }
}

/* El enlace "Cookies" del pie de la portada: discreto, del mismo tono que el
   texto del pie, subrayado al pasar. No es un botón importante. */
.pie-cookies {
  margin-top: 2px;
  /* Un dedo no acierta en 19 px de alto: con este relleno pasa de 24. */
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--tinta-suave, #5b6480);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pie-cookies:hover { color: var(--azul, #12279c); }