/* Aviso de cookies · Biblioteca CREE-A (siempre-incluido/cookies)
   Para adaptarlo a la marca del cliente basta cambiar las variables de :root. */
:root {
  --ci-fondo: #ffffff;
  --ci-texto: #1b1f23;
  --ci-texto-2: #4a5056;
  --ci-boton: #1b1f23;        /* color de marca oscuro del cliente */
  --ci-boton-hover: #3a4148;
  --ci-boton-texto: #ffffff;
  --ci-foco: #2f6fdf;
  --ci-radio: 18px;
  --ci-fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ci-aviso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
  max-width: 760px; margin: 0 auto; padding: 20px 22px;
  background: var(--ci-fondo); color: var(--ci-texto); border-radius: var(--ci-radio);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06);
  font: 500 14px/1.55 var(--ci-fuente);
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
}
.ci-aviso p { margin: 0; flex: 1 1 320px; color: var(--ci-texto-2); }
.ci-aviso a, .ci-panel a { color: var(--ci-texto); text-decoration: none; font-weight: 600; }

.ci-acciones { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 300px; justify-content: flex-end; }
/* Aceptar y Rechazar llevan el MISMO estilo: la ley y la SIC piden que rechazar sea tan fácil como aceptar. */
.ci-b {
  flex: 1 1 auto; min-height: 44px; padding: 11px 20px; border-radius: 999px; cursor: pointer;
  border: 0; background: var(--ci-boton); color: var(--ci-boton-texto);
  font: 600 14px var(--ci-fuente);
}
.ci-b:hover { background: var(--ci-boton-hover); }
.ci-b.ci-sec { background: transparent; color: var(--ci-texto); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.ci-b.ci-sec:hover { background: rgba(0,0,0,.05); }
.ci-b:focus-visible, .ci-x:focus-visible, .ci-op input:focus-visible,
.ci-aviso a:focus-visible, .ci-panel a:focus-visible { outline: 3px solid var(--ci-foco); outline-offset: 2px; }

.ci-fondo {
  position: fixed; inset: 0; z-index: 910; background: rgba(0,0,0,.55);
  display: grid; place-items: center; padding: 16px; overflow: auto;
}
.ci-panel {
  position: relative; width: min(560px, 100%); padding: 26px;
  background: var(--ci-fondo); color: var(--ci-texto); border-radius: calc(var(--ci-radio) + 2px);
  font: 500 14px/1.6 var(--ci-fuente); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
}
.ci-panel h2 { font: 700 21px/1.2 var(--ci-fuente); margin: 0 0 6px; }
.ci-panel > p { margin: 0 0 12px; color: var(--ci-texto-2); }
.ci-op { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(0,0,0,.08); }
.ci-op input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ci-boton); cursor: pointer; }
.ci-op label { cursor: pointer; }
.ci-op strong { display: block; font-weight: 600; }
.ci-op span { color: var(--ci-texto-2); font-size: 13.5px; }
.ci-panel .ci-acciones { margin-top: 16px; justify-content: stretch; }
.ci-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 999px;
  border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); background: transparent; color: var(--ci-texto);
  font-size: 18px; cursor: pointer;
}

@media (max-width: 520px) {
  .ci-aviso { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .ci-b { flex: 1 1 100%; }
}
@media print { .ci-aviso, .ci-fondo { display: none !important; } }