:root{ --bg:#0b0f13; --fg:#e5e7eb; --muted:#9ca3af; --accent:#f59e0b; --border:#374151; } /* === Banner flotante centrado abajo === */ .bf-cookie-bar{ position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); background: rgba(11,15,19,.98); color: var(--fg); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; z-index: 9999; width: min(960px, calc(100% - 24px)); box-shadow: 0 12px 30px rgba(0,0,0,.35); } /* Layout texto izq / botones dcha */ .bf-wrap{ display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; row-gap: 10px; } .bf-text{ font:14px/1.5 system-ui,Segoe UI,Roboto,Arial; color: var(--fg); max-width: 72ch; } .bf-actions{ display: flex; gap: 8px; justify-content: flex-end; margin-left: auto; } /* Botones centrados verticalmente */ .bf-btn{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#111827; color:var(--fg); height:40px; padding:0 14px; border-radius:10px; cursor:pointer; line-height:1; white-space:nowrap; transition:transform .06s ease, border-color .12s ease; } .bf-btn:hover{ border-color:#4b5563; } .bf-btn:active{ transform:translateY(1px); } .bf-btn.primary{ background:var(--accent); color:#111827; border-color:#a16207; } /* Orden: Rechazar | Aceptar */ #bf-reject{ order:1; } #bf-accept{ order:2; } /* Oculta botón “Preferencias” del banner */ #bf-open-prefs-2{ display:none !important; } .bf-link{ color:#93c5fd; text-decoration:none; } .bf-chip{ font-size:12px; border:1px solid var(--border); border-radius:999px; padding:2px 8px; color:var(--muted); } /* === Modal de preferencias === */ .bf-modal{ position:fixed; inset:0; display:none; z-index:10000; background: rgba(0,0,0,.25); } .bf-modal.open{ display:grid; place-items:center; } .bf-card{ background:var(--bg); border:1px solid var(--border); border-radius:12px; max-width:720px; width:92%; padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.25); } .bf-row{ display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); border-radius:10px; padding:10px; margin:8px 0; } /* Toggle */ .bf-switch{ appearance:none; width:44px; height:24px; border:1px solid var(--border); border-radius:24px; position:relative; cursor:pointer; background:#111827; } .bf-switch:checked{ background:var(--accent); border-color:#a16207; } .bf-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#e5e7eb; transition:transform .15s; } .bf-switch:checked::after{ transform:translateX(20px); } .bf-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } /* Animación modal */ @media (prefers-reduced-motion:no-preference){ .bf-modal.open .bf-card{ animation:bf-pop .12s ease-out; } } @keyframes bf-pop{ from{transform:scale(.98);opacity:.8} to{transform:scale(1);opacity:1} } /* === Overlay más claro en páginas legales === */ /* Añade class="legal" al de politica-privacidad y politica-cookies */ body.legal .bf-modal{ background: rgba(0,0,0,.10) !important; } @media (prefers-color-scheme: light){ body.legal .bf-modal{ background: rgba(0,0,0,.08) !important; } } /* === Responsive === */ @media (max-width: 640px){ .bf-cookie-bar{ width: min(560px, calc(100% - 16px)); padding: 12px; border-radius: 14px; } .bf-wrap{ grid-template-columns: 1fr; } .bf-actions{ width:100%; justify-content:flex-end; } }