/**
 * Estilos personalizados para Klaro Cookie Consent
 * Sobrescribe los estilos de la librería sin modificar archivos de terceros
 */

#cookieScreen.cookie-modal {
    position: fixed !important;
    top: auto !important;
    bottom: 0.5rem !important;
    left: 0.5rem !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    z-index: 9999 !important;
}

/* El boton flotante de Klaro comparte esquina con el disparador de creditos
   de propiedad intelectual, que va pegado al borde inferior izquierdo del
   recurso (36px de alto, 44px en movil). Los 72px lo dejan por encima. */
.klaro_toggle_dialog {
    left: 25px;
    bottom: 72px;
}

#cookieScreen .cm-bg {
    background: none !important;
}

#klaro-cookie-notice.cookie-notice {
    background-color: #E62E2D !important;
    color: #ffffff !important;
    padding: 2rem !important;
    max-width: 600px !important;
    border-radius: 0 !important;
    position: relative !important;
    margin: 0 !important;
}

#klaro-cookie-notice .cn-body h2 {
    /* Título del modal */
    color: #ffffff !important;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

#klaro-cookie-notice .cn-body p {
    /* Texto del aviso */
    color: #ffffff !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    text-align: justify !important;
}

/* Estilos para el enlace de purposes */
#klaro-cookie-notice .cn-body p a,
#klaro-cookie-notice .cn-body p .cn-learn-more,
#klaro-cookie-notice .cn-body p strong {
    color: #ffffff !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

#klaro-cookie-notice .cn-body p a:hover,
#klaro-cookie-notice .cn-body p .cn-learn-more:hover,
#klaro-cookie-notice .cn-body p strong:hover {
    text-decoration: underline !important;
    opacity: 0.9 !important;
}

/* Botones */
#klaro-cookie-notice .cn-ok {
    /* Contenedor de botones */
    display: flex !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#klaro-cookie-notice .cm-btn,
#klaro-cookie-notice .cn-decline,
#klaro-cookie-notice .cm-btn-success,
#klaro-cookie-notice .cm-btn-lern-more {
    /* Estilos base para todos los botones */
    padding: 10px 30px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: 2px solid #ffffff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
}

#klaro-cookie-notice .cm-btn-lern-more {
    /* Botón "PREFERENCIAS" */
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


#klaro-cookie-notice .cm-btn-success {
    /* Botón "ACEPTAR" */
    background-color: #ffffff !important;
    color: #E62E2D !important;
    border-color: #ffffff !important;
}

#klaro-cookie-notice .cm-btn-success:hover {
    background-color: #f0f0f0 !important;
}

#klaro-cookie-notice .cn-decline {
    /* Botón "RECHAZAR" */
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

#klaro-cookie-notice .cn-decline:hover {
    background-color: #ffffff !important;
    color: #E62E2D !important;
}

#klaro-cookie-notice .klaro-close {
    display: none !important;
}

/* Animación wiggle */
.wiggle .cookie-notice .cn-body {
    animation: shake 0.4s;
    animation-iteration-count: 1;
}

.cn-buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* Responsive - ajustes para móviles */
@media (max-width: 767px) {
    #klaro-cookie-notice.cookie-notice {
        /* Ajustes para pantallas pequeñas */
        max-width: 95% !important;
        padding: 1.5rem !important;
    }

    #klaro-cookie-notice .cn-ok {
        /* Botones en mobile */
        flex-direction: column !important;
    }

    #klaro-cookie-notice .cm-btn,
    #klaro-cookie-notice .cn-decline,
    #klaro-cookie-notice .cm-btn-success,
    #klaro-cookie-notice .cm-btn-lern-more {
        width: 100% !important;
    }

    .cn-buttons {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
}

/* Modal de preferencias de cookies */
.cm-modal.cm-klaro {
    background-color: #E62E2D !important;
    color: #ffffff !important;
    max-width: 800px !important;
    max-height: 90vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.cm-modal.cm-klaro .cm-header {
    background-color: #E62E2D !important;
    padding: 2rem !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

.cm-modal.cm-klaro .cm-header h1.title {
    color: #ffffff !important;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    font-size: 1.5rem !important;
}

.cm-modal.cm-klaro .cm-header p {
    color: #ffffff !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 0 !important;
}

.cm-modal.cm-klaro .cm-header p a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

.cm-modal.cm-klaro .cm-header p a:hover {
    opacity: 0.9 !important;
}

.cm-modal.cm-klaro .cm-body {
    background-color: #ffffff !important;
    padding: 2rem !important;
    flex: 1 1 auto !important;
    overflow-y: visible !important;
}

.cm-modal.cm-klaro .cm-switch .slider {
    background-color: #ffffff !important;
    border: 2px solid #cccccc !important;
}

.cm-modal.cm-klaro .cm-switch .slider.active {
    background-color: #E62E2D !important;
    border-color: #E62E2D !important;
}

/* Switch desactivado - cuando el input no está checked */
.cm-modal.cm-klaro input:not(:checked)~.cm-list-label .cm-switch .slider {
    background-color: #ffffff !important;
    border: 2px solid #cccccc !important;
}

/* Switch activado - cuando el input está checked */
.cm-modal.cm-klaro input:checked~.cm-list-label .cm-switch .slider {
    background-color: #E62E2D !important;
    border-color: #E62E2D !important;
}

/* Footer del modal */
.cm-modal.cm-klaro .cm-footer {
    background-color: #E62E2D !important;
    padding: 1.5rem 2rem !important;
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

.cm-modal.cm-klaro .cm-footer-buttons {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.cm-modal.cm-klaro .cm-btn {
    padding: 10px 30px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: 2px solid #ffffff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
}

.cm-modal.cm-klaro .cm-btn-decline {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.cm-modal.cm-klaro .cm-btn-decline:hover {
    background-color: #ffffff !important;
    color: #E62E2D !important;
}

.cm-modal.cm-klaro .cm-btn-success {
    background-color: #ffffff !important;
    color: #E62E2D !important;
    border-color: #ffffff !important;
}

.cm-modal.cm-klaro .cm-btn-success:hover {
    background-color: #f0f0f0 !important;
}

.cm-modal.cm-klaro .klaro-close {
    display: none !important;
}

/* Responsive para el modal de preferencias */
@media (max-width: 767px) {
    .cm-modal.cm-klaro {
        max-width: 95% !important;
        max-height: 95vh !important;
    }

    .cm-modal.cm-klaro .cm-header,
    .cm-modal.cm-klaro .cm-body,
    .cm-modal.cm-klaro .cm-footer {
        padding: 1.5rem !important;
    }

    .cm-modal.cm-klaro .cm-footer-buttons {
        flex-direction: column !important;
    }

    .cm-modal.cm-klaro .cm-btn {
        width: 100% !important;
    }
}

.cm-modal.cm-klaro:focus,
.cm-modal.cm-klaro:focus-visible,
.context-notice:focus,
.context-notice:focus-visible,
.cookie-notice:focus,
.cookie-notice:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Modal de preferencias - esquina inferior izquierda */
.klaro .cookie-modal .cm-modal.cm-klaro {
    position: fixed !important;
    top: auto !important;
    left: 0.5rem !important;
    right: auto !important;
    bottom: 0.5rem !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 10000 !important;
}

/* Fondo oscuro del modal de preferencias */
.klaro .cookie-modal.cm-as-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0.5rem !important;
    z-index: 10000 !important;
}

.klaro .cookie-modal.cm-as-modal .cm-bg {
    background: rgba(0, 0, 0, 0.5) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}