/* ************************************************************ */
/* ************ Klaro Cookie & Consent Management ************* */
/* ************************************************************ */

/* ******************** TOGGLES O SWITCHES ******************** */
/* Coor base (Desactivado / Off) */
.klaro .cm-switch .slider {
    background-color: #f2f2f2 !important; /* Gris */
}

/* Estado ACTIVADO (Rojo Vítor) */
/* Buscamos cuando el checkbox real está marcado o cuando Klaro añade 'active' al slider de forma dinámica */
.klaro .cm-purpose:has(input:checked) .slider,
.klaro .cm-service:has(input:checked) .slider,
.klaro .cm-toggle-all:has(input:checked) .slider {
    background-color: #d22020 !important; /* Rojo Vítor */
}

/* Estado PARCIAL (Rojo Vítor) */
.klaro .cm-purpose:has(input.half-checked) .slider,
.klaro .cm-toggle-all:has(input.half-checked) .slider {
    background-color: #d22020 !important; /* Rojo Vítor */
}

/* REGLA DE ORO: Si el input NO está marcado, forzamos el GRIS */
/* Esto anula cualquier clase 'active' que Klaro deje puesta por error */
.klaro .cm-purpose:has(input:not(:checked):not(.half-checked)) .slider,
.klaro .cm-service:has(input:not(:checked)) .slider {
    background-color: #f2f2f2 !important;
}

/* Borde de enfoque (Focus) */
.klaro .cm-purpose:has(input.cm-list-input:focus) .cm-switch .slider,
.klaro .cm-service:has(input.cm-list-input:focus) .cm-switch .slider,
.klaro .cm-toggle-all div:has(input.cm-list-input:focus) .cm-switch .slider {
    outline: 2px solid #d22020 !important;
}
/* ************************************************************ */

/* Botones */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success-var {
    background-color: #d22020 !important; /* Rojo Vítor */
    border-color: #d22020 !important; /* Rojo Vítor */
    color: #ffffff !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-success-var:hover {
    background-color: #4d4d4d !important; /* Gris Aluminio */
    border-color: #4d4d4d !important; /* Gris Aluminio */
    color: #ffffff !important;
}
.klaro .cm-btn:focus {
    outline: 2px solid #d22020 !important;
}

/* Link en el diálogo de notificación que abre el diálogo modal de consentimiento */
/* IMPORTANTE: DESCOMENTAR SÓLO SI SE ACTIVA LA OPCION "Display link as a button" */
.klaro .cookie-notice:not(.cookie-modal-notice) a.cm-link.cn-learn-more {
    background-color: #d22020 !important;
    border-color: #d22020 !important;
    color: #ffffff !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) a.cm-link.cn-learn-more:hover {
    background-color: #4d4d4d !important;
    border-color: #4d4d4d !important;
    color: #ffffff !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) a.cm-link.cn-learn-more:focus {
    outline: 2px solid #d22020 !important;
}
/* ****************************************************************************** */

/* Enlaces */
.klaro a,
.klaro .cm-link {
    color: #d22020 !important; /* Rojo Vítor */
}
.klaro a:hover,
.klaro .cm-link:hover {
    color: #385e9d !important; /* Azul Centenario */
    font-weight: normal !important;
}

/* Cabecera del diálogo modal de consentimiento */
.klaro .cm-header p {
    line-height: 1.3 !important; /* 1.4 es el estándar */
}

/* Cabecera desplegable de servicios */
.klaro .cm-caret {
    font-size: small !important;
}

/* Descripción de categorías y servicios */
.klaro .cm-list-description {
    /* Reduce el espacio entre líneas para una mejor visualización */
    line-height: 1.3 !important; /* 1.4 es el estándar */
}

/* Lista de propósitos de una cookie */
.klaro .purposes {
    /* Reduce el espacio entre líneas para mejor visualización en móviles */
    line-height: 1.3 !important; /* 1.4 es el estándar */
    margin-top: 5px !important;
}

/* Estilo botón flotante o widget */
button.klaro_toggle_dialog_override:hover {
    transform: scale(1.1) !important; /* Efecto zoom */
}