#cck-banner-backdrop { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
#cck-banner-backdrop.cck-visible { opacity: 1; pointer-events: all; }
.cck-banner { position: fixed; bottom: 20px; left: 50%; width: calc(100% - 40px); max-width: 500px; background: var(--cck-bg-color); color: var(--cck-text-color); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow: hidden; transform: translate(-50%, 150%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding: 24px; }
.cck-banner.cck-visible { transform: translate(-50%, 0); }
.cck-header { margin-bottom: 24px; }
.cck-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--cck-text-color); }
.cck-message { font-size: 14px; line-height: 1.5; margin: 0; color: var(--cck-text-color); }
.cck-message a { color: var(--cck-primary-btn-bg, #000); text-decoration: underline; }
.cck-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.cck-actions-main { justify-content: flex-start; }
.cck-actions:not(.cck-actions-main) { justify-content: flex-end; }
/* Estilo unificado para todos los botones */
.cck-btn { padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s; background: var(--cck-primary-btn-bg); color: var(--cck-primary-btn-text); }
/* Estilo específico para botones secundarios (como 'Volver') */
.cck-btn.cck-btn-secondary { background: transparent; color: var(--cck-text-color); border-color: var(--cck-text-color); }
.cck-link-btn { background: transparent; border: none; color: var(--cck-text-color); padding: 0; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.cck-link-btn:focus-visible, .cck-link-btn:hover { text-decoration: underline; }
.cck-settings-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.cck-options { display: flex; flex-direction: column; gap: 8px; }
.cck-option { padding: 12px; border: 1px solid #eee; border-radius: 8px; }
.cck-option-main { display: flex; justify-content: space-between; align-items: center; }
.cck-option-label { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.cck-option-label label { font-weight: 500; font-size: 14px; }
.cck-option-label strong { margin-right: 4px; }
.cck-option-label span { font-size: 13px; color: #666; }
/* Estilo del botón para desplegar */
.cck-option-toggle { width: 28px; height: 28px; border: none; background: #f0f0f0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.cck-option-toggle.expanded { transform: rotate(180deg); }
.cck-option-toggle svg { color: #555; }
.cck-option-toggle-placeholder { width: 28px; height: 28px; }
.cck-option-description { font-size: 13px; color: #333; line-height: 1.5; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, margin-top 0.3s ease-out; }
.cck-option-description[style*="max-height"] { margin-top: 12px; }
.cck-switch { position: relative; display: inline-block; width: 44px; height: 24px; margin-left: 16px; }
.cck-switch input { opacity: 0; width: 0; height: 0; }
.cck-slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.cck-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .cck-slider { background-color: var(--cck-primary-btn-bg); }
input:checked + .cck-slider:before { transform: translateX(20px); }
#cck-reopen-trigger { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; background-color: #ffffff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; z-index: 9997; display: flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
#cck-reopen-trigger:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.cck-reopen-arrow { font-size: 24px; line-height: 1; color: var(--cck-text-color, #333); }