/* =========================================================
   Aviso de cookies / almacenamiento del navegador
   Usa las mismas variables de color de css/style.css (:root),
   así que style.css debe cargarse antes que este archivo.
   ========================================================= */

/* z-index deliberadamente por DEBAJO de las capas del modo editor
   (.ed-topbar 2500, .ed-overlay 3000, el visor de fotos ampliadas
   3900-4000): así, si alguien todavía no ha decidido sobre las cookies y
   abre un modal del editor (o el visor de fotos), ese modal queda por
   encima y el banner no le tapa ningún botón. En cuanto se cierra el
   modal, el banner sigue ahí (no ha desaparecido, solo estaba detrás). */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:2000;
  background:var(--white); color:var(--ink);
  border-top:1px solid rgba(36,28,20,.14);
  box-shadow:0 -14px 34px -20px rgba(28,20,13,.4);
  padding:1.2rem 1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem 1.6rem;
  align-items:center; justify-content:space-between;
  font-family:var(--font-body);
}
.cookie-banner p{
  margin:0; max-width:64ch; flex:1 1 320px;
  color:var(--ink-soft); font-size:.86rem; line-height:1.55;
}
.cookie-banner a{ color:var(--jade-700); text-decoration:underline; }
.cookie-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-actions .btn{ padding:.7em 1.3em; font-size:.82rem; }

@media(max-width:640px){
  .cookie-banner{ padding:1.1rem 1.1rem 1.3rem; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1 1 auto; }
}

/* ---------- Modal de preferencias ---------- */
.cookie-modal-backdrop{
  position:fixed; inset:0; z-index:2001;
  background:rgba(28,20,13,.55);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.cookie-modal{
  position:relative;
  background:var(--white); color:var(--ink);
  border-radius:20px; max-width:480px; width:100%;
  padding:2.2rem 2rem 1.8rem;
  box-shadow:var(--shadow);
  max-height:85vh; overflow-y:auto;
  font-family:var(--font-body);
}
.cookie-modal h3{
  font-family:var(--font-display); color:var(--jade-900);
  margin:0 0 .7rem; font-size:1.5rem;
}
.cookie-modal-close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(36,28,20,.15); background:transparent;
  color:var(--ink-soft); cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.cookie-modal-close:hover{ background:var(--paper-dark); color:var(--ink); }
.cookie-modal .muted{ color:var(--ink-soft); font-size:.86rem; line-height:1.5; }
.cookie-cat{
  display:flex; gap:1.2rem; align-items:flex-start; justify-content:space-between;
  padding:1.1rem 0; border-top:1px solid rgba(36,28,20,.1);
}
.cookie-cat:first-of-type{ border-top:none; }
.cookie-cat h4{ margin:0 0 .3rem; font-size:.94rem; color:var(--ink); }
.cookie-cat p{ margin:0; font-size:.82rem; color:var(--ink-soft); line-height:1.5; }

.cookie-toggle{
  position:relative; flex:0 0 auto; width:44px; height:26px;
  display:inline-block; cursor:pointer;
}
.cookie-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cookie-toggle span{
  position:absolute; inset:0; border-radius:999px;
  background:rgba(36,28,20,.2); transition:.25s;
}
.cookie-toggle span::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--white); transition:.25s; box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.cookie-toggle input:checked + span{ background:var(--jade-700); }
.cookie-toggle input:checked + span::before{ transform:translateX(18px); }
.cookie-toggle.disabled{ cursor:not-allowed; opacity:.65; }
.cookie-toggle.disabled input{ cursor:not-allowed; }

.cookie-modal-actions{
  display:flex; gap:.7rem; justify-content:flex-end; flex-wrap:wrap;
  margin-top:1.5rem;
}
.cookie-modal-actions .btn{ padding:.7em 1.3em; font-size:.82rem; }

/* Enlace del pie para reabrir las preferencias en cualquier momento */
.footer-legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  padding-top:1rem; margin-top:1rem;
  border-top:1px solid rgba(246,240,227,.1);
  font-size:.78rem;
}
.footer-legal a, .footer-legal button{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-body); font-size:.78rem;
  color:rgba(246,240,227,.55);
  text-decoration:none;
}
.footer-legal a:hover, .footer-legal button:hover{ color:var(--gold-soft); text-decoration:underline; }