/** * LV Cookies Banner — Lorena Velázquez LV * Estilos del banner de consentimiento de cookies * * USO: Incluir en el de cada página HTML estática. * * * INTEGRACIÓN WORDPRESS: Encolar con wp_enqueue_style() en functions.php del tema. */ /* ── Banner principal ─────────────────────────────────────────── */ #lv-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: #ffffff; border-top: 3px solid #C9A227; box-shadow: 0 -4px 32px rgba(57,55,55,.15); padding: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; color: #4a4848; transform: translateY(100%); opacity: 0; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease; max-height: 90vh; overflow-y: auto; } #lv-cookie-banner.lv-cb-visible { transform: translateY(0); opacity: 1; } #lv-cookie-banner.lv-cb-closing { transform: translateY(100%); opacity: 0; } .lv-cb-inner { max-width: 900px; margin: 0 auto; padding: 20px 24px 18px; } /* ── Encabezado ── */ .lv-cb-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .lv-cb-icon { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; } .lv-cb-text { flex: 1; } .lv-cb-title { font-size: 16px; font-weight: 700; color: #393737; margin: 0 0 6px; } .lv-cb-desc { font-size: 13px; line-height: 1.6; margin: 0 0 6px; color: #6a6868; } .lv-cb-desc a { color: #C9A227; text-decoration: none; font-weight: 600; } .lv-cb-desc a:hover { text-decoration: underline; } /* ── Panel de personalización ── */ .lv-cb-custom { border-top: 1px solid #F0E9E9; border-bottom: 1px solid #F0E9E9; margin: 0 0 14px; padding: 14px 0; } .lv-cb-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #F0E9E9; } .lv-cb-toggle-row:last-child { border-bottom: none; } .lv-cb-toggle-info { flex: 1; } .lv-cb-toggle-name { display: block; font-size: 13px; font-weight: 600; color: #393737; margin-bottom: 3px; } .lv-cb-toggle-desc { font-size: 12px; color: #8a8888; line-height: 1.4; } /* ── Toggle switch ── */ .lv-cb-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; } .lv-cb-switch.lv-cb-disabled { cursor: not-allowed; opacity: .6; } .lv-cb-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .lv-cb-slider { position: absolute; inset: 0; background: #C4CBCA; border-radius: 26px; transition: background .2s; } .lv-cb-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; } .lv-cb-switch input:checked + .lv-cb-slider { background: #C9A227; } .lv-cb-switch input:checked + .lv-cb-slider::before { transform: translateX(20px); } .lv-cb-switch input:focus-visible + .lv-cb-slider { outline: 2px solid #C9A227; outline-offset: 2px; } /* ── Botones de acción ── */ .lv-cb-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .lv-cb-save-row { margin-top: 12px; } .lv-cb-btn { font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .5px; padding: 10px 22px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all .2s; white-space: nowrap; } .lv-cb-btn-full { width: 100%; text-align: center; } /* Aceptar — primario (dorado) */ .lv-cb-btn-primary { background: #C9A227; color: #ffffff; border-color: #C9A227; } .lv-cb-btn-primary:hover { background: #b08c20; border-color: #b08c20; } /* Rechazar — secundario (oscuro) */ .lv-cb-btn-secondary { background: #393737; color: #ffffff; border-color: #393737; } .lv-cb-btn-secondary:hover { background: #555252; border-color: #555252; } /* Personalizar — outline */ .lv-cb-btn-outline { background: transparent; color: #393737; border-color: #C4CBCA; } .lv-cb-btn-outline:hover { border-color: #393737; background: #F0E9E9; } /* ── Botón flotante (FAB) ── */ #lv-cookie-fab { position: fixed; bottom: 20px; left: 20px; z-index: 99998; width: 44px; height: 44px; border-radius: 50%; background: #393737; border: 2px solid #C9A227; color: white; font-size: 20px; cursor: pointer; box-shadow: 0 2px 12px rgba(57,55,55,.25); transition: transform .2s, box-shadow .2s; display: flex; align-items: center; justify-content: center; padding: 0; } #lv-cookie-fab:hover { transform: scale(1.12); box-shadow: 0 4px 18px rgba(57,55,55,.35); } #lv-cookie-fab:focus-visible { outline: 2px solid #C9A227; outline-offset: 3px; } /* ── Responsive ── */ @media (max-width: 600px) { .lv-cb-inner { padding: 16px; } .lv-cb-top { gap: 10px; } .lv-cb-icon { font-size: 22px; } .lv-cb-title { font-size: 15px; } .lv-cb-actions { flex-direction: column-reverse; align-items: stretch; } .lv-cb-btn { width: 100%; text-align: center; } #lv-cookie-fab { bottom: 16px; left: 16px; width: 40px; height: 40px; font-size: 18px; } }