/* Componente banner-cookies (shell, #53): el banner de Complianz con los
 * tokens del tema. Solo tokens de style.css; sin tocar el plugin.
 *
 * Complianz pinta sus colores y tamaños con variables --cmplz_* en :root
 * (uploads/complianz/css/banner-N-optin.css). Aquí se redefinen en sus tres
 * contenedores, que es donde se leen: así siguen al tema activo (sistema,
 * elegido o forzado) y el resto de reglas del plugin las usa sin más. Lo que
 * las variables no alcanzan (tipografía, objetivos de 44px, interruptores,
 * foco) va con sus clases, con un id delante para ganar a sus reglas.
 *
 * Los tres contenedores: el banner, la pestaña «Gestionar consentimiento» y
 * las categorías que Complianz pinta dentro de la política de cookies
 * (#cmplz-manage-consent-container, #113 y #114). Las categorías del banner y
 * las del documento llevan la misma piel.
 *
 * Decisiones (#53, RGPD): «Aceptar» y «Denegar» llevan exactamente el mismo
 * estilo (relleno verde); «Ver preferencias» y «Guardar preferencias», el del
 * botón secundario. Textos ≥ 14px y objetivos ≥ 44px. */

#cmplz-cookiebanner-container,
#cmplz-manage-consent,
#cmplz-manage-consent-container {
    --cmplz_banner_width: 34rem;
    --cmplz_banner_background_color: var(--pf-color-surface-raised);
    --cmplz_banner_border_color: var(--pf-color-border);
    --cmplz_banner_border_width: 1px;
    --cmplz_banner_border_radius: var(--pf-radius-xl);
    --cmplz_banner_margin: var(--pf-space-xs);
    --cmplz_title_font_size: var(--pf-text-md);
    --cmplz_text_color: var(--pf-color-text);
    --cmplz_text_font_size: var(--pf-text-sm);
    --cmplz_text_line_height: var(--pf-leading-normal);
    --cmplz_hyperlink_color: var(--pf-color-link);
    --cmplz_link_font_size: var(--pf-text-sm);
    --cmplz_category_body_font_size: var(--pf-text-sm);
    --cmplz_category_header_title_font_size: var(--pf-text-base);
    --cmplz_category_header_active_font_size: var(--pf-text-sm);
    --cmplz_category_header_always_active_color: var(--pf-color-success);
    --cmplz_button_accept_background_color: var(--pf-color-accent);
    --cmplz_button_accept_border_color: var(--pf-color-accent);
    --cmplz_button_accept_text_color: var(--pf-color-on-accent);
    --cmplz_button_deny_background_color: var(--pf-color-accent);
    --cmplz_button_deny_border_color: var(--pf-color-accent);
    --cmplz_button_deny_text_color: var(--pf-color-on-accent);
    --cmplz_button_settings_background_color: transparent;
    --cmplz_button_settings_border_color: var(--pf-color-brand-strong);
    --cmplz_button_settings_text_color: var(--pf-color-heading);
    --cmplz_button_border_radius: var(--pf-radius-control);
    --cmplz_button_font_size: var(--pf-text-base);
    --cmplz_slider_active_color: var(--pf-color-accent);
    --cmplz_slider_inactive_color: var(--pf-color-border-control);
    --cmplz_slider_bullet_color: var(--pf-color-surface);
}

/* Caja: fuente de la web, sombra de capa flotante. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
    padding: var(--pf-space-md);
    font-family: var(--pf-font-sans);
    color: var(--pf-color-text);
    box-shadow: var(--pf-shadow-xl);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
    margin-inline: calc(-1 * var(--pf-space-md));
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
    margin-bottom: 0;
}

/* Cerrar: 44 × 44, con el icono a 20px. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: calc(-1 * var(--pf-space-xs)) calc(-1 * var(--pf-space-xs)) 0 0;
    color: var(--pf-color-heading);
    border-radius: var(--pf-radius-control);
    transition: background-color var(--pf-transition);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover {
    font-size: inherit;
    line-height: 1;
    background-color: var(--pf-color-brand-soft);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Botones: 44px, fuente de la web. Aceptar = Denegar (variables de arriba). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    min-height: 2.75rem;
    padding: var(--pf-space-xs) var(--pf-space-md);
    font-family: var(--pf-font-sans);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    transition: background-color var(--pf-transition), border-color var(--pf-transition), color var(--pf-transition);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny):hover {
    background-color: var(--pf-color-accent-hover);
    border-color: var(--pf-color-accent-hover);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options):hover {
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
}

/* Enlaces a los documentos (cookies, privacidad, aviso legal): 14px, 44px de alto. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul {
    flex-wrap: wrap;
    gap: 0 var(--pf-space-md);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-underline-offset: var(--pf-underline-offset);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
    color: var(--pf-color-link-hover);
    text-decoration-thickness: 2px;
}

/* Categorías: en el banner (al ver las preferencias) y en la política de
 * cookies (#cmplz-manage-consent-container, #113 y #114), con la misma piel.
 *
 * En el documento solo vale document.css del plugin: grises fijos
 * (rgba(239, 239, 239, …), ilegibles en oscuro), «Siempre activo» a 12px y
 * casillas nativas de 13px. Las reglas del interruptor del banner tampoco
 * llegan allí: por eso las de abajo lo dibujan entero (posición, contenido y
 * colores de las --cmplz_*), que en el banner da lo mismo que antes.
 *
 * Especificidad: :is() toma la de su argumento más fuerte, (1,1,0) en los dos,
 * que es la del prefijo de Complianz en el documento
 * (#cmplz-manage-consent-container.cmplz-manage-consent-container). A igual
 * cadena, ganan estas por orden: core imprime las hojas del tema después de
 * las de los plugins (pf_acanda_core_order_styles, PLANTILLAS §9.5). */
:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category {
    background-color: var(--pf-color-bg-alt);
    border-radius: var(--pf-radius-md);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header {
    grid-template-columns: 1fr auto 2.75rem;
    padding: var(--pf-space-2xs) var(--pf-space-xs);
    background-color: transparent;
}

/* «Funcional» está siempre activa: sin interruptor (el plugin lo esconde y la
 * regla del interruptor de abajo no debe volver a enseñarlo). */
:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active .cmplz-banner-checkbox {
    display: none;
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
    font-size: var(--cmplz_category_header_title_font_size);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--pf-color-heading);
    border-radius: var(--pf-radius-control);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-description {
    padding: 0 var(--pf-space-xs) var(--pf-space-xs);
    font-size: var(--cmplz_category_body_font_size);
    line-height: var(--pf-leading-normal);
    color: var(--cmplz_text_color);
}

/* Interruptor: 40 × 24 a la vista; la casilla invisible de encima, 44 × 44. */
:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox {
    position: relative;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before,
:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
    position: absolute;
    display: block;
    box-sizing: border-box;
    content: "";
    transition: background-color var(--pf-transition), left var(--pf-transition);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before {
    top: 0;
    left: 0;
    width: 2.5rem;
    height: 1.5rem;
    padding: 0;
    background-color: var(--cmplz_slider_inactive_color);
    border-radius: var(--pf-radius-pill);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
    top: 0.25rem;
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--cmplz_slider_bullet_color);
    border-radius: var(--pf-radius-round);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
    background-color: var(--cmplz_slider_active_color);
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after {
    left: 1.25rem;
}

/* Foco: el anillo común (el del plugin es azul y sale también con el ratón). */
:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before {
    box-shadow: none;
}

:is(#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-manage-consent-container.cmplz-manage-consent-container) .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner :is(.cmplz-close, .cmplz-btn, .cmplz-link, .cmplz-category-toggle):focus-visible,
#cmplz-manage-consent-container .cmplz-category-toggle:focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

/* Tablas de cookies por servicio en la política (#cmplz-document .cmplz-dropdown).
 * Complianz las añade en «Cookies usadas» cuando su escaneo encuentra cookies.
 * Su document.css usa blancos y grises fijos (#fff, #f7f7f7, #dadada,
 * rgba(239, 239, 239, …)) y un chevron en imagen oscura: en oscuro, el texto
 * claro del tema quedaría sobre blanco. Aquí van a tokens, con la caja de las
 * categorías. La clase .cmplz-dropdown-cookiepolicy (siempre en su plantilla,
 * templates/cookiepolicy/services.php) da la especificidad justa para ganar a
 * sus reglas, también a las de sus media queries. */
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy {
    margin-bottom: var(--pf-space-2xs);
    background-color: var(--pf-color-bg-alt);
    border-radius: var(--pf-radius-md);
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary {
    margin: 0;
    padding: var(--pf-space-2xs) var(--pf-space-xs);
    background-color: transparent;
    border-radius: var(--pf-radius-md);
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
    grid-template-columns: 1fr auto 0 auto 1.5rem;
    column-gap: var(--pf-space-xs);
    min-height: 2.75rem;
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary h3 {
    padding: 0;
    font-size: var(--pf-text-base);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
}

/* Chevron con bordes en currentColor, en lugar de la imagen del plugin. */
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div::after {
    justify-self: center;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0 0.25rem;
    color: var(--pf-color-heading);
    background: none;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy[open] summary div::after {
    margin: 0.25rem 0 0;
    transform: rotate(225deg);
}

/* Casilla de consentimiento por servicio. Sin esa opción de Complianz, la
 * plantilla le pone .cmplz-hidden, que el plugin no oculta en el front. */
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary input.cmplz-accept-service {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pf-color-accent);
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary input.cmplz-accept-service.cmplz-hidden {
    display: none;
}

/* Tabla de cada finalidad: los filetes son el hueco de 1px de su rejilla. */
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
    margin: 0 var(--pf-space-xs) var(--pf-space-xs);
    background-color: var(--pf-color-border);
    border-color: var(--pf-color-border);
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose div {
    padding: var(--pf-space-xs);
    background-color: var(--pf-color-surface);
}

#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose div:is(.name-header, .retention-header, .function-header) {
    background-color: var(--pf-color-bg-alt);
}

/* En estrecho, Complianz pone las etiquetas en una columna de 100px y
 * «Caducidad» se parte; la columna mide lo que su etiqueta más larga. */
@media only screen and (max-width: 600px) {
    #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

/* «Gestionar consentimiento» (la pestaña que queda tras elegir). */
#cmplz-manage-consent .cmplz-manage-consent {
    min-height: 2.75rem;
    padding: var(--pf-space-2xs) var(--pf-space-sm);
    font-family: var(--pf-font-sans);
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
    box-shadow: var(--pf-shadow-lg);
}

#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}