/* ==================================================================== *
 * Podemos Progresar — Barra de consentimiento de cookies (scoped)
 * Todo vive bajo .pp-cc para no filtrar estilos al sitio.
 * Acento configurable vía --pp-accent (default lime #8DC63F).
 * ==================================================================== */

.pp-cc {
  /* Tokens locales — se pueden sobreescribir desde el sitio. */
  --pp-accent: #8DC63F;          /* lime — override-able */
  --pp-accent-on: #14121a;       /* texto sobre acento (AA: ~8.5:1) */
  --pp-ink: #1a1a2e;
  --pp-muted: #4a4f5c;           /* AA sobre blanco: 8.3:1 */
  --pp-surface: #ffffff;
  --pp-border: #d7d9e0;
  --pp-focus: #6b2c6f;           /* anillo de foco (morado marca) */
  --pp-radius: 12px;
  --pp-shadow: 0 -2px 24px rgba(20, 18, 26, 0.18);
  --pp-z: 2147483000;            /* por encima de todo, debajo de max */

  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--pp-ink);
}

/* Bloqueo de scroll del fondo cuando el diálogo está abierto. */
.pp-cc-lock { overflow: hidden; }

/* -------------------------------------------------------------------- *
 * Capa 1 — Barra inferior fija, NO bloquea el contenido.
 * -------------------------------------------------------------------- */
.pp-cc__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pp-z);
  background: var(--pp-surface);
  border-top: 3px solid var(--pp-accent);
  box-shadow: var(--pp-shadow);
  padding: clamp(14px, 2.5vw, 20px);
  animation: pp-cc-slide-up 0.28s ease;
}

.pp-cc__bar-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.pp-cc__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  flex: 0 0 100%;
  line-height: 1.2;
}

.pp-cc__body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--pp-muted);
  margin: 0;
  flex: 1 1 320px;
  min-width: 260px;
}

.pp-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

.pp-cc__actions--panel {
  margin-top: 18px;
  justify-content: flex-end;
}

/* -------------------------------------------------------------------- *
 * Botones — "Aceptar" y "Rechazar no esenciales" comparten .--primary
 * (mismo tamaño, color y contraste → sin dark patterns).
 * -------------------------------------------------------------------- */
.pp-cc__btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  min-height: 44px;              /* objetivo táctil AA */
}

.pp-cc__btn--primary {
  background: var(--pp-accent);
  color: var(--pp-accent-on);
  border-color: var(--pp-accent);
}
.pp-cc__btn--primary:hover {
  background: #7cb62f;
  border-color: #7cb62f;
}

.pp-cc__btn--ghost {
  background: transparent;
  color: var(--pp-ink);
  border-color: var(--pp-border);
}
.pp-cc__btn--ghost:hover {
  border-color: var(--pp-focus);
  color: var(--pp-focus);
}

.pp-cc__btn:focus-visible,
.pp-cc__close:focus-visible,
.pp-cc__switch:focus-visible,
.pp-cc a:focus-visible {
  outline: 3px solid var(--pp-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- *
 * Capa 2 — Panel modal (dialog)
 * -------------------------------------------------------------------- */
.pp-cc__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--pp-z) + 1);
  background: rgba(20, 18, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pp-cc-fade 0.2s ease;
}

.pp-cc__panel {
  background: var(--pp-surface);
  border-radius: var(--pp-radius);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 20px 60px rgba(20, 18, 26, 0.35);
  animation: pp-cc-pop 0.22s ease;
}

.pp-cc__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pp-cc__close {
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  background: transparent;
  border: 0;
  color: var(--pp-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  min-height: 44px;
  min-width: 44px;
}
.pp-cc__close:hover { color: var(--pp-ink); }

.pp-cc__intro {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--pp-muted);
  margin: 8px 0 20px;
}

/* Categorías con switch */
.pp-cc__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--pp-border);
}
.pp-cc__cat:last-of-type { border-bottom: 1px solid var(--pp-border); }

.pp-cc__cat-label {
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.pp-cc__switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #c2c5cf;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.18s ease;
}
.pp-cc__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.pp-cc__switch:checked { background: var(--pp-accent); }
.pp-cc__switch:checked::after { transform: translateX(20px); }
.pp-cc__switch:disabled {
  background: var(--pp-accent);
  opacity: 0.55;
  cursor: not-allowed;
}

.pp-cc__arco {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--pp-muted);
  margin: 18px 0 10px;
}

.pp-cc__links {
  font-size: 0.85rem;
  margin: 0;
}
.pp-cc__links a {
  color: var(--pp-focus);
  text-decoration: underline;
  font-weight: 600;
}

/* -------------------------------------------------------------------- *
 * Responsive — en móvil los botones ocupan el ancho para tap cómodo.
 * -------------------------------------------------------------------- */
@media (max-width: 620px) {
  .pp-cc__actions { width: 100%; }
  .pp-cc__btn { flex: 1 1 auto; text-align: center; }
  .pp-cc__actions--panel { flex-direction: column-reverse; }
  .pp-cc__actions--panel .pp-cc__btn { width: 100%; }
}

/* -------------------------------------------------------------------- *
 * Movimiento reducido — sin animaciones.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pp-cc__bar,
  .pp-cc__overlay,
  .pp-cc__panel { animation: none; }
  .pp-cc__btn,
  .pp-cc__switch,
  .pp-cc__switch::after { transition: none; }
}
.pp-cc[data-reduced-motion] .pp-cc__bar,
.pp-cc[data-reduced-motion] .pp-cc__overlay,
.pp-cc[data-reduced-motion] .pp-cc__panel { animation: none; }

@keyframes pp-cc-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes pp-cc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pp-cc-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}