/* Aviso de consentimiento de analitica. Ver docs/PLAN_CONSENTIMIENTO.md

   Solo existe en el portfolio: el juego hereda la decision sin dibujar nada
   (game/index.html pasa showBanner: false), asi que este archivo no se carga
   alli y no tiene que convivir con el sistema comic.

   No bloquea la navegacion a proposito. No es un modal: se puede seguir
   leyendo el sitio con el aviso abierto, y por eso el JS lo marca como
   role="region" y no atrapa el foco.

   Usa los tokens del portfolio en vez de colores propios —--ctrl-surface para
   la superficie, --color-acento para el foco, la escala --type-*— para no introducir
   un tercer lenguaje visual. */

.analytics-consent {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: min(400px, calc(100% - 48px));
  padding: 22px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: var(--ctrl-surface, #F9FAFB);
  color: #111827;
  box-shadow: var(--ctrl-sombra-hover, 0 2px 5px rgba(15, 23, 42, 0.16));
  font-family: var(--font-body);
}

.analytics-consent h2 {
  margin: 0 0 10px;
  font-size: var(--type-h3);
  line-height: var(--type-h3-line);
  font-weight: var(--type-title-weight);
  letter-spacing: -0.015em;
}

.analytics-consent p {
  margin: 0 0 12px;
  color: #4B5563;
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-line);
}

.analytics-consent__question {
  color: #111827;
  font-weight: var(--type-title-weight);
}

.analytics-consent__privacy {
  color: #4B5563;
  font-size: var(--type-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.analytics-consent__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.analytics-consent button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  font-size: var(--type-body-sm);
  font-weight: var(--type-title-weight);
  cursor: pointer;
}

/* Los botones usan el mismo par que el resto del sitio -primario en acento,
   secundario fantasma- en vez de un navy propio. Antes el "Claro que si"
   salia #111827 y no se parecia a ningun otro boton del portfolio. */
.analytics-consent__later {
  border: 1px solid #D1D5DB;
  background: transparent;
  color: #374151;
}

.analytics-consent__accept {
  border: 1px solid var(--color-acento);
  background: var(--color-acento);
  color: #fff;
}
.analytics-consent__accept:hover {
  border-color: var(--color-acento-hover);
  background: var(--color-acento-hover);
}
.analytics-consent__later:hover { background: #F3F4F6; }

/* Misma convencion de foco que el resto del portfolio
   (styles.css: .rutas-chip, .pila-nodo). */
.analytics-consent button:focus-visible,
.analytics-consent a:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* ---- Temas oscuros ---- */

html[data-theme="dark"] .analytics-consent,
html[data-theme="night"] .analytics-consent {
  border-color: #3F3F46;
  color: #F9FAFB;
}

html[data-theme="dark"] .analytics-consent p,
html[data-theme="night"] .analytics-consent p,
html[data-theme="dark"] .analytics-consent__privacy,
html[data-theme="night"] .analytics-consent__privacy {
  color: #D1D5DB;
}

html[data-theme="dark"] .analytics-consent__question,
html[data-theme="night"] .analytics-consent__question {
  color: #F9FAFB;
}

html[data-theme="dark"] .analytics-consent__later,
html[data-theme="night"] .analytics-consent__later {
  border-color: #52525B;
  color: #F9FAFB;
}

html[data-theme="dark"] .analytics-consent__accept,
html[data-theme="night"] .analytics-consent__accept {
  border-color: #F9FAFB;
  background: #F9FAFB;
  color: #111827;
}

/* ---- Mobile ---- */

@media (max-width: 600px) {
  .analytics-consent {
    right: 12px;
    /* Por encima del menu flotante, que vive en la misma esquina inferior:
       `.mobile-app-nav` va en bottom calc(10px + safe-area) y mide unos 68px.
       Sin esto el aviso lo tapaba justo cuando aparece, que es la primera
       visita — el peor momento para esconder la navegacion. */
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    padding: 18px;
  }
  .analytics-consent__actions { flex-direction: column-reverse; }
  .analytics-consent button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-consent { transition: none; }
}