/* BF Consent — banner, modal de configuración y documentos legales. La visibilidad del banner la controla la clase de que fija el bootstrap inline (html.bfc-show-banner): sin flash y compatible con el HTML único que cachea Cache Enabler. */ :root { --bfc-accent: var(--bf-primary, #026580); --bfc-bg: #ffffff; --bfc-text: #1a1a1a; --bfc-muted: #555555; --bfc-border: #e0e0e0; --bfc-radius: 8px; --bfc-shadow: 0 4px 18px rgba(0, 0, 0, 0.16); --bfc-font: inherit; --bfc-z-banner: 99990; --bfc-z-modal: 99999; } /* ── Banner ─────────────────────────────────────────────────────────────── */ .bfc-banner { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--bfc-z-banner); background: var(--bfc-bg); border-top: 1px solid var(--bfc-border); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.10); font-family: var(--bfc-font); color: var(--bfc-text); } html.bfc-show-banner .bfc-banner { display: block; } .bfc-banner-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .bfc-banner-text { flex: 1 1 420px; margin: 0; font-size: 0.92em; line-height: 1.45; color: var(--bfc-text); } .bfc-banner-text a { color: var(--bfc-accent); } .bfc-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ── Botones (misma jerarquía visual aceptar/rechazar: exigencia AEPD) ───── */ .bfc-btn { font-family: var(--bfc-font); font-size: 0.9em; font-weight: 600; padding: 9px 18px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bfc-btn-primary { background: var(--bfc-accent); color: #ffffff; border-color: var(--bfc-accent); } .bfc-btn-primary:hover { filter: brightness(1.12); } .bfc-btn-secondary { background: transparent; color: var(--bfc-text); border-color: #9e9e9e; } .bfc-btn-secondary:hover { border-color: var(--bfc-text); } .bfc-btn-ghost { background: transparent; color: var(--bfc-accent); border-color: transparent; text-decoration: underline; } .bfc-btn-ghost:hover { color: var(--bfc-text); } /* ── Modal ──────────────────────────────────────────────────────────────── */ .bfc-modal[hidden] { display: none; } .bfc-modal { position: fixed; inset: 0; z-index: var(--bfc-z-modal); display: flex; align-items: center; justify-content: center; font-family: var(--bfc-font); } .bfc-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .bfc-modal-panel { position: relative; background: var(--bfc-bg); color: var(--bfc-text); border-radius: var(--bfc-radius); box-shadow: var(--bfc-shadow); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; padding: 22px 24px; box-sizing: border-box; } .bfc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bfc-modal-title { margin: 0; font-size: 1.15em; color: var(--bfc-text); } .bfc-modal-x { background: none; border: none; font-size: 1.5em; line-height: 1; cursor: pointer; color: var(--bfc-muted); padding: 4px 8px; } .bfc-modal-x:hover { color: var(--bfc-text); } .bfc-modal-intro { color: var(--bfc-muted); font-size: 0.9em; margin: 10px 0 16px; } .bfc-cat { border: 1px solid var(--bfc-border); border-radius: var(--bfc-radius); padding: 12px 14px; margin-bottom: 10px; } .bfc-cat-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; } .bfc-cat-label input { width: 18px; height: 18px; accent-color: var(--bfc-accent); } .bfc-cat-always { font-weight: 400; font-size: 0.8em; color: var(--bfc-muted); margin-left: auto; } .bfc-cat-desc { margin: 6px 0 0 28px; font-size: 0.85em; color: var(--bfc-muted); } .bfc-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .bfc-modal-legal { margin: 14px 0 0; font-size: 0.85em; } .bfc-modal-legal a { color: var(--bfc-accent); } /* ── Documentos legales ─────────────────────────────────────────────────── */ .bfc-legal { line-height: 1.65; } .bfc-legal h2 { margin-top: 1.6em; font-size: 1.25em; } .bfc-legal-updated { color: var(--bfc-muted); font-size: 0.9em; font-style: italic; } .bfc-admin-warning { background: #fff3cd; border: 1px solid #ffe69c; border-radius: var(--bfc-radius); padding: 10px 14px; font-size: 0.9em; } /* Tablas del inventario de cookies */ .bfc-cookie-cat { margin-top: 1.4em; font-size: 1.05em; } .bfc-table-scroll { overflow-x: auto; } .bfc-cookies-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .bfc-cookies-table th, .bfc-cookies-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--bfc-border); vertical-align: top; } .bfc-cookies-table th { background: #f2f2f2; } .bfc-cookies-table code { font-size: 0.92em; } /* Bloque de estado del consentimiento */ .bfc-state { margin-top: 1.6em; border: 1px solid var(--bfc-border); border-radius: var(--bfc-radius); padding: 16px 18px; background: #f9f9f9; } .bfc-state-list { margin: 0 0 12px; padding-left: 20px; } .bfc-state-on { color: var(--bf-buy-text, #1C7D45); font-weight: 600; } .bfc-state-off { color: #6c757d; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .bfc-banner-inner { padding: 12px 14px; gap: 12px; } .bfc-banner-actions { width: 100%; } .bfc-banner-actions .bfc-btn { flex: 1 1 auto; text-align: center; } .bfc-modal-panel { padding: 18px 16px; } .bfc-modal-actions .bfc-btn { flex: 1 1 100%; } }