/* ========================================================= COOKIE CONSENT - WCAG + Dark Mode ========================================================= */ /* Theme tokens */ :root { --cc-bg: #ffffff; --cc-text: #222222; --cc-muted: #555555; --cc-border: #e5e5e5; --cc-shadow: 0 10px 35px rgba(0,0,0,0.12); --cc-overlay: rgba(0,0,0,0.45); --cc-primary-bg: #111111; --cc-primary-text: #ffffff; --cc-secondary-bg: #ffffff; --cc-secondary-text: #111111; --cc-link: #000000; --cc-table-head: #f7f7f7; --cc-table-row: #f0f0f0; --cc-focus: 2px solid #2563eb; /* azul accesible */ --cc-radius: 14px; } /* Dark mode (auto) */ @media (prefers-color-scheme: dark) { :root { --cc-bg: #111315; --cc-text: #f1f5f9; --cc-muted: #cbd5e1; --cc-border: #2a2f35; --cc-shadow: 0 20px 60px rgba(0,0,0,0.55); --cc-overlay: rgba(0,0,0,0.65); --cc-primary-bg: #f1f5f9; --cc-primary-text: #0b0f14; --cc-secondary-bg: #111315; --cc-secondary-text: #f1f5f9; --cc-link: #f1f5f9; --cc-table-head: #1b1f24; --cc-table-row: #242a31; --cc-focus: 2px solid #60a5fa; } } /* Optional override if you want to force theme: ... */ html[data-cc-theme="dark"] { --cc-bg: #111315; --cc-text: #f1f5f9; --cc-muted: #cbd5e1; --cc-border: #2a2f35; --cc-shadow: 0 20px 60px rgba(0,0,0,0.55); --cc-overlay: rgba(0,0,0,0.65); --cc-primary-bg: #f1f5f9; --cc-primary-text: #0b0f14; --cc-secondary-bg: #111315; --cc-secondary-text: #f1f5f9; --cc-link: #f1f5f9; --cc-table-head: #1b1f24; --cc-table-row: #242a31; --cc-focus: 2px solid #60a5fa; } body.cc-modal-open { overflow: hidden; } /* Focus visible (WCAG) */ .cc-banner a:focus-visible, .cc-btn:focus-visible, .cc-link-btn:focus-visible, .cc-modal-card:focus-visible, .cc-floating-btn:focus-visible, .cc-category input[type="checkbox"]:focus-visible { outline: var(--cc-focus); outline-offset: 2px; } /* ========================================================= Banner ========================================================= */ .cc-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 920px; margin: 0 auto; background: var(--cc-bg); color: var(--cc-text); border: 1px solid var(--cc-border); border-radius: var(--cc-radius) !important; padding: 18px; box-shadow: var(--cc-shadow); z-index: 999999; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .cc-banner p { color: var(--cc-text);font-size: 13px;line-height: 20px;margin: 10px 0; } .cc-banner a { color: var(--cc-link); } .cc-banner-content { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .cc-banner-text { flex: 1 1 420px; font-size: 14px; line-height: 1.45; } .cc-banner-text strong { display: block; font-size: 16px; margin-bottom: 6px; } .cc-banner-text a { color: var(--cc-link); text-decoration: underline; } .cc-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ========================================================= Buttons ========================================================= */ .cc-btn { border-radius: 10px !important; padding: 10px 14px; border: 1px solid var(--cc-border); font-weight: 600; font-size: 14px; cursor: pointer; min-width: 130px; transition: transform .15s ease, background .15s ease, opacity .15s ease; } .cc-btn-primary { background: var(--cc-primary-bg); color: var(--cc-primary-text); border-color: var(--cc-primary-bg); } .cc-btn-secondary { background: var(--cc-secondary-bg); color: var(--cc-secondary-text); border-color: var(--cc-border); } .cc-btn:hover { opacity: 0.95; transform: translateY(-1px); } .cc-link-btn { border: none; background: transparent; text-decoration: underline; font-size: 14px; cursor: pointer; padding: 8px; color: var(--cc-link); } /* ========================================================= Modal ========================================================= */ .cc-modal-overlay { position: fixed; inset: 0; background: var(--cc-overlay); z-index: 1000000; display: flex; align-items: center; justify-content: center; padding: 20px; } .cc-modal-card { width: min(760px, 100%); max-height: 90vh; overflow-y: auto; background: var(--cc-bg); color: var(--cc-text); border: 1px solid var(--cc-border); border-radius: 16px !important; padding: 22px; box-shadow: var(--cc-shadow); } .cc-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 18px; } .cc-modal-desc { margin-bottom: 14px; font-size: 14px; } .cc-modal-desc a { color: var(--cc-link); text-decoration: underline; } .cc-modal-body { margin-bottom: 20px; } .cc-modal-body p { color: var(--cc-text); margin: 0 0 10px; } .cc-modal-footer { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } /* ========================================================= Categories ========================================================= */ .cc-category { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--cc-border); } .cc-category:first-child { border-top: none; } .cc-category-text { flex: 1; font-size: 14px; } .cc-category-text label { cursor: pointer; } .cc-category-text strong { display: block; margin-bottom: 4px; font-size: 15px; } .cc-category-text p { margin: 0 0 8px 0; color: var(--cc-muted); font-size: 13px; } .cc-category-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; margin-top: 4px; } /* ========================================================= Cookie Table ========================================================= */ .cc-cookie-table { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: 12px; } .cc-cookie-table th, .cc-cookie-table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--cc-border); } .cc-cookie-table thead { background: var(--cc-table-head); font-weight: 700; } /* ========================================================= Floating Button ========================================================= */ .cc-floating-btn { position: fixed; bottom: 20px; right: 20px; z-index: 999998; background: var(--cc-primary-bg); color: var(--cc-primary-text); border: none; border-radius: 999px !important; padding: 10px 18px; font-size: 14px; cursor: pointer; box-shadow: var(--cc-shadow); transition: transform .15s ease, opacity .15s ease; } .cc-floating-btn:hover { opacity: 0.95; transform: translateY(-1px); } /* ========================================================= Reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .cc-btn, .cc-floating-btn { transition: none; } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 640px) { .cc-banner { bottom: 0; left: 0; right: 0; border-radius: 14px 14px 0 0 !important; } .cc-banner-content { flex-direction: column; } .cc-banner-actions { justify-content: flex-start; } .cc-modal-card { padding: 18px; } .cc-category { flex-direction: column; } .cc-floating-btn { bottom: 16px; right: 16px; } } /* YouTube container */ .yt-consent { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px !important; overflow: hidden; } .yt-iframe { width: 100%; height: 100%; border: 0; } .yt-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; color: #fff; text-align: center; padding: 20px; } .yt-load-btn { background: #ff0000; color: #fff; border: none; padding: 10px 18px; border-radius: 999px !important; cursor: pointer; margin-bottom: 12px; } .yt-load-btn:hover { opacity: 0.9; } /* Facebook container */ .fb-consent { position: relative; width: 100%; min-height: 300px; background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: 12px !important; overflow: hidden; } .fb-iframe { width: 100%; height: 100%; border: 0; } /* Twitter/X container */ .tw-consent { position: relative; width: 100%; min-height: 200px; background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: 12px !important; overflow: hidden; } /* Social media placeholder (común para Facebook y Twitter) */ .social-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cc-bg); color: var(--cc-text); text-align: center; padding: 20px; } .social-load-btn { background: var(--cc-primary-bg); color: var(--cc-primary-text); border: none; padding: 10px 18px; border-radius: 999px !important; cursor: pointer; margin-bottom: 12px; font-weight: 600; } .social-load-btn:hover { opacity: 0.9; } .social-placeholder p { margin: 0; font-size: 14px; color: var(--cc-muted); } #cc-floating-btn {display:none}