/* ============================================================ Publisima Cookie Consent — Styles Powered by Publisima (publisima.com) Compatible con RGPD (UE) + LSSI (España) ============================================================ PERSONALIZACION: Cambia las variables abajo para adaptar los colores a la identidad corporativa de tu cliente. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --pcc-primary: #2563eb; --pcc-bg: #ffffff; --pcc-text: #1a1a2e; --pcc-radius: 16px; --pcc-font: 'Inter', system-ui, -apple-system, sans-serif; --pcc-shadow: 0 8px 32px rgba(0,0,0,.15); --pcc-overlay: rgba(0,0,0,.55); } /* DARK MODE (usa .pcc-dark en o ) */ .pcc-dark { --pcc-bg: #1a1a2e; --pcc-text: #e8e8e8; --pcc-shadow: 0 8px 32px rgba(0,0,0,.4); } /* ============================================================ BANNER (esquina inferior izquierda) ============================================================ */ .pcc-banner { position: fixed; z-index: 999999; left: 24px; bottom: 24px; max-width: 440px; width: calc(100% - 48px); border-radius: var(--pcc-radius); background: var(--pcc-bg); color: var(--pcc-text); box-shadow: var(--pcc-shadow); font-family: var(--pcc-font); line-height: 1.5; box-sizing: border-box; display: none; } .pcc-banner *, .pcc-banner *::before, .pcc-banner *::after { box-sizing: inherit; } .pcc-inner { padding: 24px; } /* Header */ .pcc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pcc-header h3 { margin: 0; font-size: 18px; font-weight: 700; } /* Descripcion */ .pcc-desc { font-size: 13px; margin: 0 0 16px; opacity: .85; line-height: 1.6; } .pcc-desc a { color: var(--pcc-primary); text-decoration: underline; } /* Botones */ .pcc-actions { display: flex; gap: 8px; flex-wrap: wrap; } .pcc-btn { flex: 1; min-width: 100px; padding: 10px 18px; border-radius: 10px; border: 2px solid; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; } .pcc-btn-accept { background: var(--pcc-primary); border-color: var(--pcc-primary); color: #fff; } .pcc-btn-accept:hover { opacity: .9; transform: translateY(-1px); } .pcc-btn-reject { background: transparent; border-color: var(--pcc-primary); color: var(--pcc-primary); } .pcc-btn-reject:hover { background: color-mix(in srgb, var(--pcc-primary) 6%, transparent); transform: translateY(-1px); } .pcc-btn-customize { background: transparent; border-color: transparent; color: inherit; opacity: .7; flex: 0 0 auto; } .pcc-btn-customize:hover { opacity: 1; text-decoration: underline; } /* Brand footer */ .pcc-brand { text-align: center; margin-top: 14px; font-size: 11px; opacity: .45; } .pcc-brand a { color: inherit; text-decoration: none; } /* ============================================================ MODAL ============================================================ */ .pcc-overlay { position: fixed; inset: 0; z-index: 1000000; background: var(--pcc-overlay); display: none; align-items: center; justify-content: center; padding: 24px; font-family: var(--pcc-font); line-height: 1.5; box-sizing: border-box; } .pcc-overlay.active { display: flex; } .pcc-overlay * { box-sizing: inherit; } .pcc-modal { background: var(--pcc-bg); border-radius: 20px; max-width: 680px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.25); animation: pccFadeIn .3s ease; color: var(--pcc-text); } @keyframes pccFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .pcc-modal__header { display: flex; align-items: center; gap: 10px; padding: 24px 24px 0; flex-shrink: 0; } .pcc-modal__header h3 { margin: 0; font-size: 20px; font-weight: 700; } .pcc-modal__body { padding: 16px 24px; overflow-y: auto; flex: 1; } .pcc-intro { font-size: 13px; opacity: .85; line-height: 1.7; margin: 0 0 20px; } .pcc-intro a { color: var(--pcc-primary); text-decoration: underline; } /* ============================================================ CATEGORIA ACCORDION ============================================================ */ .pcc-cat { border: 1px solid; border-radius: 12px; margin-bottom: 12px; overflow: hidden; border-color: #e2e8f0; } .pcc-dark .pcc-cat { border-color: rgba(255,255,255,.15); } .pcc-cat__header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; transition: background .2s; } .pcc-cat__header:hover { background: #f8fafc; } .pcc-dark .pcc-cat__header:hover { background: rgba(255,255,255,.05); } .pcc-cat__arrow { flex-shrink: 0; transition: transform .25s; width: 20px; height: 20px; opacity: .5; } .pcc-cat__arrow.open { transform: rotate(90deg); } .pcc-cat__toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .pcc-cat__toggle input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--pcc-primary); cursor: pointer; flex-shrink: 0; } .pcc-cat__toggle input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; } .pcc-cat__label { font-size: 14px; font-weight: 600; white-space: nowrap; } .pcc-cat__badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; background: #e2e8f0; color: #475569; } .pcc-dark .pcc-cat__badge { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); } .pcc-cat__body { display: none; padding: 0 16px 16px; } .pcc-cat__body.open { display: block; } .pcc-cat__desc { font-size: 13px; opacity: .8; line-height: 1.7; margin: 0 0 14px; } /* ============================================================ TABLA DE COOKIES DETECTADAS ============================================================ */ .pcc-table { width: 100%; border-collapse: collapse; font-size: 12px; } .pcc-table th { text-align: left; padding: 8px 10px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .6; } .pcc-table td { padding: 8px 10px; border-top: 1px solid #e2e8f0; vertical-align: top; } .pcc-dark .pcc-table td { border-color: rgba(255,255,255,.1); } .pcc-table td:first-child { font-weight: 500; white-space: nowrap; } .pcc-table td:last-child { opacity: .75; font-size: 11px; } .pcc-badge-detected { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; background: #dbeafe; color: #1d4ed8; } .pcc-dark .pcc-badge-detected { background: rgba(59,130,246,.2); color: #93c5fd; } .pcc-nocookies { font-size: 13px; opacity: .6; font-style: italic; } /* ============================================================ MODAL FOOTER ============================================================ */ .pcc-modal__footer { display: flex; gap: 10px; padding: 16px 24px 24px; flex-shrink: 0; flex-wrap: wrap; } .pcc-modal__footer .pcc-btn { padding: 11px 20px; font-size: 14px; min-width: auto; flex: 1; } .pcc-modal__footer .pcc-btn-accept { background: var(--pcc-primary); border-color: var(--pcc-primary); color: #fff; } .pcc-modal__footer .pcc-btn-reject { background: transparent; border-color: var(--pcc-primary); color: var(--pcc-primary); } .pcc-modal__footer .pcc-btn-reject:hover { background: color-mix(in srgb, var(--pcc-primary) 6%, transparent); } .pcc-btn-save { background: var(--pcc-primary); border-color: var(--pcc-primary); color: #fff; } .pcc-btn-save:hover { opacity: .9; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 480px) { .pcc-banner { left: 12px; right: 12px; bottom: 12px; max-width: 100%; width: auto; } .pcc-inner { padding: 16px; } .pcc-btn { min-width: 80px; padding: 8px 14px; font-size: 11px; } .pcc-overlay { padding: 12px; } .pcc-modal { max-height: 95vh; border-radius: 14px; } .pcc-modal__header { padding: 16px 16px 0; } .pcc-modal__header h3 { font-size: 17px; } .pcc-modal__body { padding: 12px 16px; } .pcc-modal__footer { padding: 12px 16px 16px; } .pcc-modal__footer .pcc-btn { font-size: 13px; padding: 9px 14px; } .pcc-table th, .pcc-table td { padding: 6px 8px; } }