/* ============================================================
   SONRISA VIVA — COOKIE CONSENT (LSSI/RGPD)
   Banner + modal de configuración + integración con dark theme
   ============================================================ */

/* Tokens del consent — siguen el tema global (pages.css define :root[data-theme]).
   Si pages.css no se cargara, los fallbacks aplican un look dark estable. */
.sv-cc, .sv-cc-modal{
  --cc-bg:        var(--surface-elev,  #0E1220);
  --cc-bg-elev:   var(--surface-card,  #161A2A);
  --cc-bg-card:   var(--surface-card,  #1F2438);
  --cc-text:      var(--text,          #F0F1F5);
  --cc-text-muted:var(--text-muted,    #B8BDD0);
  --cc-text-soft: var(--text-light,    #8B92A8);
  --cc-border:    var(--hairline,        rgba(255,255,255,0.10));
  --cc-border-2:  var(--hairline-strong, rgba(255,255,255,0.18));
  --cc-accent:    var(--accent,        #C9A86C);
  --cc-accent-hover:var(--accent-light,#E6CC8F);
  --cc-accent-contrast: var(--on-accent, #07080F);
  --cc-ghost-bg:  rgba(127,127,127,0.06);
  --cc-ghost-bg-h:rgba(127,127,127,0.12);
}
:root[data-theme="light"] .sv-cc,
:root[data-theme="light"] .sv-cc-modal{
  --cc-ghost-bg:  rgba(14,18,32,0.04);
  --cc-ghost-bg-h:rgba(14,18,32,0.08);
}

/* ─────────── BANNER (fixed bottom) ─────────── */
.sv-cc{
  position:fixed;
  inset:auto 0 0 0;
  z-index:9999;
  display:none;
  padding:1rem 1.25rem;
  background:var(--cc-bg);
  /* Sutil opacidad para el efecto glass; en light queda blanco translúcido,
     en dark queda casi opaco. */
  background:color-mix(in srgb, var(--cc-bg) 94%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--cc-border);
  box-shadow:0 -8px 28px rgba(0,0,0,0.18);
  font-family:'Geist',system-ui,sans-serif;
  color:var(--cc-text);
}
.sv-cc.is-visible{display:block;animation:sv-cc-in .3s ease-out}
@keyframes sv-cc-in{
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.sv-cc-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  gap:1.25rem;
  align-items:center;
  flex-wrap:wrap;
}
.sv-cc-text{flex:1;min-width:240px}
.sv-cc-title{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.05rem;
  font-weight:400;
  margin:0 0 .3rem;
  color:var(--cc-text);
  letter-spacing:-.005em;
}
.sv-cc-desc{
  font-size:.82rem;
  color:var(--cc-text-muted);
  line-height:1.55;
  margin:0;
}
.sv-cc-desc a{color:var(--cc-accent);text-decoration:underline}
.sv-cc-actions{
  display:flex;
  gap:.55rem;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sv-cc-btn{
  font-family:inherit;
  font-size:.82rem;
  font-weight:500;
  padding:10px 18px;
  border-radius:6px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
  line-height:1;
}
.sv-cc-btn-primary{
  background:var(--cc-accent);
  color:var(--cc-accent-contrast);
  font-weight:600;
}
.sv-cc-btn-primary:hover{background:var(--cc-accent-hover)}
.sv-cc-btn-line{
  background:transparent;
  color:var(--cc-text);
  border-color:var(--cc-border-2);
}
.sv-cc-btn-line:hover{background:var(--cc-ghost-bg-h)}
.sv-cc-btn-link{
  background:transparent;
  color:var(--cc-text-muted);
  border:none;
  padding:10px 6px;
  text-decoration:underline;
}
.sv-cc-btn-link:hover{color:var(--cc-text)}

/* Footer button para reabrir preferencias */
.sv-cc-footer-trigger{
  background:none;
  border:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:0;
}
.sv-cc-footer-trigger:hover{text-decoration:underline}

/* Mobile */
@media(max-width:680px){
  .sv-cc{padding:1rem .9rem 1.1rem}
  .sv-cc-inner{flex-direction:column;align-items:stretch;gap:.9rem}
  .sv-cc-actions{justify-content:stretch;gap:.45rem}
  .sv-cc-actions > *{flex:1}
  .sv-cc-btn-link{flex:0 0 100%;text-align:center;order:1;margin-top:.3rem}
  .sv-cc-title{font-size:.98rem}
  .sv-cc-desc{font-size:.78rem}
}

/* ─────────── MODAL de configuración ─────────── */
.sv-cc-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(7,8,15,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:1.5rem;
  font-family:'Geist',system-ui,sans-serif;
  color:var(--cc-text);
}
:root[data-theme="light"] .sv-cc-modal{
  background:rgba(14,18,32,.42);
}
.sv-cc-modal.is-visible{display:flex;animation:sv-cc-fade .25s ease-out}
@keyframes sv-cc-fade{
  from{opacity:0}
  to{opacity:1}
}
.sv-cc-modal-card{
  max-width:560px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  background:var(--cc-bg);
  border:1px solid var(--cc-border-2);
  border-radius:14px;
  padding:1.75rem;
  box-shadow:0 32px 80px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .sv-cc-modal-card{
  background:linear-gradient(180deg,#0E1220,#07080F);
}
.sv-cc-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.5rem;
  margin-bottom:1.25rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--cc-border);
}
.sv-cc-modal-title{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.3rem;
  font-weight:400;
  margin:0;
  letter-spacing:-.01em;
}
.sv-cc-modal-close{
  background:var(--cc-ghost-bg);
  border:none;
  color:var(--cc-text-muted);
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,color .15s;
}
.sv-cc-modal-close:hover{background:var(--cc-ghost-bg-h);color:var(--cc-text)}

.sv-cc-category{
  background:var(--cc-bg-card);
  border:1px solid var(--cc-border);
  border-radius:8px;
  padding:1rem 1.1rem;
  margin-bottom:.75rem;
}
.sv-cc-category-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.4rem;
}
.sv-cc-category-name{
  font-size:.92rem;
  font-weight:500;
  color:var(--cc-text);
  margin:0;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.sv-cc-category-locked{
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cc-text-soft);
  background:var(--cc-ghost-bg);
  padding:3px 9px;
  border-radius:11px;
}
.sv-cc-category-desc{
  font-size:.78rem;
  color:var(--cc-text-muted);
  margin:0;
  line-height:1.5;
}

/* Toggle switch */
.sv-cc-switch{
  position:relative;
  display:inline-block;
  width:38px;
  height:22px;
  flex-shrink:0;
}
.sv-cc-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.sv-cc-switch-slider{
  position:absolute;
  inset:0;
  background:var(--cc-bg-elev);
  border:1px solid var(--cc-border-2);
  border-radius:22px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.sv-cc-switch-slider::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:var(--cc-text-soft);
  border-radius:50%;
  transition:transform .2s,background .2s;
}
.sv-cc-switch input:checked + .sv-cc-switch-slider{
  background:var(--cc-accent);
  border-color:var(--cc-accent);
}
.sv-cc-switch input:checked + .sv-cc-switch-slider::before{
  transform:translateX(16px);
  background:var(--cc-accent-contrast);
}
.sv-cc-switch input:disabled + .sv-cc-switch-slider{
  opacity:.55;
  cursor:not-allowed;
}

.sv-cc-modal-footer{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid var(--cc-border);
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.sv-cc-modal-footer .sv-cc-btn{
  width:100%;
}
.sv-cc-modal-link{
  text-align:center;
  font-size:.74rem;
  color:var(--cc-text-soft);
  margin:.4rem 0 0;
}
.sv-cc-modal-link a{color:var(--cc-accent);text-decoration:underline}

@media(max-width:500px){
  .sv-cc-modal{padding:.75rem}
  .sv-cc-modal-card{padding:1.4rem 1.1rem}
  .sv-cc-modal-title{font-size:1.15rem}
}