/* ==========================================================================
   MF · Aviso de cookies (GDPR Cookie Consent de WebToffee)
   --------------------------------------------------------------------------
   Estilo neutro y reutilizable. Cada web lo adapta redefiniendo las variables
   --mfcc-* (ver README.md). No depende del tema.

   Nota sobre !important: el plugin aplica colores, anchos, márgenes y posición
   en línea (atributos style y JavaScript, desde sus ajustes). Solo esas
   propiedades llevan !important; el resto usa la especificidad normal.

   ÍNDICE
     1. Variables
     2. Aviso (recuadro flotante)
     3. Botones del aviso
     4. Pestaña para reabrir el aviso
     5. Ventana de preferencias (modal)
     6. Tablas de cookies (política y ventana de configuración)
     7. Responsive
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
    /* Colores */
    --mfcc-bg: #ffffff;
    --mfcc-text: #1f2328;
    --mfcc-muted: #59636e;
    --mfcc-border: rgba(31, 35, 40, .12);
    --mfcc-surface: #f6f7f8;              /* cabeceras de categorías en el modal */
    --mfcc-accent: #1f2328;               /* botones principales e interruptores activos */
    --mfcc-accent-text: #ffffff;
    --mfcc-accent-hover: #3a4048;
    --mfcc-link: var(--mfcc-text);
    --mfcc-focus: #2f6feb;
    --mfcc-overlay: rgba(15, 17, 20, .55);

    /* Tipografía */
    --mfcc-font: inherit;
    --mfcc-font-size: 14px;
    --mfcc-line-height: 1.55;
    --mfcc-button-font-size: 14px;
    --mfcc-button-weight: 600;
    --mfcc-button-transform: none;
    --mfcc-button-letter-spacing: normal;

    /* Forma */
    --mfcc-radius: 12px;
    --mfcc-button-radius: 8px;
    --mfcc-shadow: 0 12px 40px rgba(15, 17, 20, .18), 0 2px 6px rgba(15, 17, 20, .08);
    --mfcc-width: 420px;
    --mfcc-offset: 24px;                  /* distancia al borde de la pantalla */
    --mfcc-padding: 24px;
    --mfcc-z: 99999;

    /* Icono de cookie (máscara SVG: toma el color de --mfcc-icon-color). Se puede sustituir por otro SVG. */
    --mfcc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.4A9 9 0 1 1 11.6 3a3 3 0 0 0 3.4 3.6 3 3 0 0 0 2.9 2.9 3 3 0 0 0 3.1 2.9Z'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.5' cy='15.2' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='9.3' cy='15.6' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='12.6' cy='11.6' r='.7' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    --mfcc-icon-color: var(--mfcc-text);
    --mfcc-icon-size: 28px;
}

/* 2. Aviso (recuadro flotante) -------------------------------------------- */
/* visibility: si el tema carga esta hoja en diferido y oculta el aviso hasta entonces (para que no salte de
   sitio al recibir los estilos), aquí se vuelve visible. Sin esa ocultación no tiene efecto. */
#cookie-law-info-bar.wt-cli-cookie-bar {
    visibility: visible;
    width: min(var(--mfcc-width), calc(100vw - 2 * var(--mfcc-offset))) !important;
    max-width: none;
    bottom: var(--mfcc-offset) !important;
    padding: var(--mfcc-padding) !important;
    background: var(--mfcc-bg) !important;
    color: var(--mfcc-text) !important;
    border: 1px solid var(--mfcc-border) !important;
    border-radius: var(--mfcc-radius);
    box-shadow: var(--mfcc-shadow) !important;
    font-family: var(--mfcc-font) !important;
    font-size: var(--mfcc-font-size);
    line-height: var(--mfcc-line-height);
    text-align: left !important;
    z-index: var(--mfcc-z);
}
#cookie-law-info-bar .cli-wrapper { max-width: none; padding: 0; display: block; }
#cookie-law-info-bar #wt-cli-cookie-banner { display: block; color: inherit; }
#cookie-law-info-bar #wt-cli-cookie-banner::before {
    content: '';
    display: block;
    width: var(--mfcc-icon-size);
    height: var(--mfcc-icon-size);
    margin-bottom: 14px;
    background-color: var(--mfcc-icon-color);
    -webkit-mask: var(--mfcc-icon) center / contain no-repeat;
    mask: var(--mfcc-icon) center / contain no-repeat;
}
/* Los <br> que añade el editor del plugin se sustituyen por espaciado propio. */
#cookie-law-info-bar #wt-cli-cookie-banner > br { display: none; }
#cookie-law-info-bar #wt-cli-cookie-banner > a:not(.cli-plugin-button) {
    display: block;
    width: fit-content;
    margin-top: 10px;
    color: var(--mfcc-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#cookie-law-info-bar #wt-cli-cookie-banner > a:not(.cli-plugin-button):hover { text-decoration-thickness: 2px; }

/* 3. Botones del aviso ---------------------------------------------------- */
/* "Aceptar" y "Denegar" con el mismo peso visual (rechazar debe ser tan fácil
   como aceptar, según la guía de cookies de la AEPD); "Personalizar" como enlace. */
#cookie-law-info-bar .wt-cli-btn-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}
#cookie-law-info-bar .cli-plugin-button {
    margin: 0 !important;
    font-family: inherit;
    font-size: var(--mfcc-button-font-size) !important;
    font-weight: var(--mfcc-button-weight);
    letter-spacing: var(--mfcc-button-letter-spacing);
    text-transform: var(--mfcc-button-transform);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
#cookie-law-info-bar #wt-cli-reject-btn,
#cookie-law-info-bar #wt-cli-accept-all-btn {
    flex: 1 1 0;
    min-width: 120px;
    padding: 12px 18px !important;
    text-align: center;
    background: var(--mfcc-accent) !important;
    color: var(--mfcc-accent-text) !important;
    border: 1px solid var(--mfcc-accent) !important;
    border-radius: var(--mfcc-button-radius) !important;
}
#cookie-law-info-bar #wt-cli-reject-btn:hover,
#cookie-law-info-bar #wt-cli-accept-all-btn:hover {
    background: var(--mfcc-accent-hover) !important;
    border-color: var(--mfcc-accent-hover) !important;
}
#cookie-law-info-bar #wt-cli-settings-btn {
    order: 3;
    flex-basis: 100%;
    padding: 4px 0 !important;
    background: none !important;
    color: var(--mfcc-muted) !important;
    border: 0 !important;
    text-align: center;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 500;
}
#cookie-law-info-bar #wt-cli-settings-btn:hover { color: var(--mfcc-text) !important; }

#cookie-law-info-bar a:focus-visible,
#cookie-law-info-bar .cli-plugin-button:focus-visible,
#cookie-law-info-again:focus-visible,
.cli-modal .cli-modal-close:focus-visible,
.cli-modal a:focus-visible,
.cli-modal .wt-cli-privacy-btn:focus-visible {
    outline: 2px solid var(--mfcc-focus);
    outline-offset: 2px;
}

/* 4. Pestaña para reabrir el aviso ---------------------------------------- */
#cookie-law-info-again {
    visibility: visible;
    bottom: var(--mfcc-offset) !important;
    padding: 8px 14px !important;
    background: var(--mfcc-bg) !important;
    color: var(--mfcc-text) !important;
    border: 1px solid var(--mfcc-border) !important;
    border-radius: 999px;
    box-shadow: var(--mfcc-shadow) !important;
    font-family: var(--mfcc-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    z-index: var(--mfcc-z);
}
#cookie-law-info-again { display: inline-flex; align-items: center; gap: 8px; }
#cookie-law-info-again::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--mfcc-icon) center / contain no-repeat;
    mask: var(--mfcc-icon) center / contain no-repeat;
}
#cookie-law-info-again:hover { color: var(--mfcc-muted) !important; }

/* Separación del borde lateral (el plugin la fija en línea). Clase añadida por mf-cookie-consent.php. */
.mfcc-pos-right #cookie-law-info-bar.wt-cli-cookie-bar,
.mfcc-pos-right #cookie-law-info-again { right: var(--mfcc-offset) !important; left: auto !important; }
.mfcc-pos-left #cookie-law-info-bar.wt-cli-cookie-bar,
.mfcc-pos-left #cookie-law-info-again { left: var(--mfcc-offset) !important; right: auto !important; }

/* 5. Ventana de preferencias (modal) -------------------------------------- */
.cli-modal { z-index: calc(var(--mfcc-z) + 1); font-family: var(--mfcc-font); }
.cli-modal-backdrop.cli-show { background-color: var(--mfcc-overlay); opacity: 1; }
.cli-modal .cli-modal-dialog { max-width: 640px; color: var(--mfcc-text) !important; }
.cli-modal .cli-modal-content {
    background: var(--mfcc-bg) !important;
    border: 0;
    border-radius: var(--mfcc-radius);
    box-shadow: var(--mfcc-shadow);
    overflow: hidden;
}
.cli-modal .cli-modal-body { padding: 28px 28px 8px; }
.cli-modal .cli-modal-close { top: 14px; right: 14px; width: 36px; height: 36px; padding: 8px; border-radius: 50%; }
.cli-modal .cli-modal-close:hover { background: var(--mfcc-surface); }
.cli-modal .cli-modal-close svg { fill: var(--mfcc-text) !important; }

.cli-modal #wt-cli-privacy-title {
    margin: 0 0 12px;
    color: var(--mfcc-text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
.cli-modal .cli-privacy-content-text,
.cli-modal .cli-tab-container p {
    color: var(--mfcc-muted) !important;
    font-size: var(--mfcc-font-size);
    line-height: var(--mfcc-line-height);
}
.cli-modal .cli-privacy-content br { display: none; }
.cli-modal .cli-privacy-content-text a,
.cli-modal .cli-tab-pane a {
    color: var(--mfcc-link) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cli-modal a.cli-privacy-readmore { color: var(--mfcc-text) !important; font-size: 13px; font-weight: 600; text-decoration: underline; }

/* Categorías (acordeón) */
.cli-modal .cli-tab-section { margin: 10px 0 0; border: 1px solid var(--mfcc-border); border-radius: calc(var(--mfcc-radius) - 4px); overflow: hidden; }
.cli-modal .cli-tab-header {
    padding: 14px 16px;
    background: var(--mfcc-surface) !important;
    border-radius: 0;
    color: var(--mfcc-text) !important;
}
.cli-modal .cli-tab-header a.cli-nav-link { color: var(--mfcc-text) !important; font-size: 15px; font-weight: 600; }
.cli-modal .cli-tab-header a:before { border-color: var(--mfcc-text) !important; }
.cli-modal span.cli-necessary-caption { color: var(--mfcc-muted) !important; font-size: 13px; font-weight: 600; }
.cli-modal .cli-tab-content { background: var(--mfcc-bg) !important; }
.cli-modal .cli-tab-pane { padding: 4px 16px 16px; color: var(--mfcc-muted); font-size: 13px; line-height: var(--mfcc-line-height); }

/* Interruptores */
.cli-modal .cli-switch .cli-slider { background-color: var(--mfcc-border) !important; }
.cli-modal .cli-switch input:checked + .cli-slider { background-color: var(--mfcc-accent) !important; }
.cli-modal .cli-switch .cli-slider:before { background-color: #fff !important; }
.cli-modal .cli-switch .cli-slider:after { color: var(--mfcc-muted) !important; font-size: 12px; }

/* Pie con el botón de guardar */
.cli-modal .cli-tab-footer { padding: 16px 28px 24px; display: flex; justify-content: flex-end; gap: 10px; }
.cli-modal .cli-tab-footer .wt-cli-privacy-accept-btn,
.cli-modal .cli-tab-footer .wt-cli-privacy-accept-all-btn {
    margin: 0;
    padding: 12px 22px;
    background: var(--mfcc-accent) !important;
    color: var(--mfcc-accent-text) !important;
    border: 1px solid var(--mfcc-accent);
    border-radius: var(--mfcc-button-radius);
    font-family: inherit;
    font-size: var(--mfcc-button-font-size);
    font-weight: var(--mfcc-button-weight);
    letter-spacing: var(--mfcc-button-letter-spacing);
    text-transform: var(--mfcc-button-transform);
}
.cli-modal .cli-tab-footer .wt-cli-privacy-accept-btn:hover,
.cli-modal .cli-tab-footer .wt-cli-privacy-accept-all-btn:hover { background: var(--mfcc-accent-hover) !important; }

/* 6. Tablas de cookies ([cookie_audit_category] y [cookie_audit]) ---------- */
/* En la política y en la ventana de configuración. Heredan el color del texto:
   funcionan en webs claras y oscuras. */
.wt-cli-element.cookielawinfo-row-cat-table {
    width: 100%;
    margin: 1.5em 0;
    border: 0;
    border-collapse: collapse;
    table-layout: auto;
    background: none;
    color: inherit;
    font-size: 14px;
    line-height: 1.5;
}
.wt-cli-element.cookielawinfo-row-cat-table th,
.wt-cli-element.cookielawinfo-row-cat-table td {
    padding: 12px 14px;
    background: none;
    color: inherit;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    text-align: left;
    vertical-align: top;
}
.wt-cli-element.cookielawinfo-row-cat-table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}
.wt-cli-element.cookielawinfo-row-cat-table .cookielawinfo-row-cat-title-head {
    padding-top: 28px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
}
/* Nombre y duración ajustados a su contenido; la descripción ocupa el resto. */
.wt-cli-element.cookielawinfo-row-cat-table .cookielawinfo-column-1,
.wt-cli-element.cookielawinfo-row-cat-table .cookielawinfo-column-3 { width: 1%; }
.wt-cli-element.cookielawinfo-row-cat-table .cookielawinfo-column-4 { width: auto; }
.wt-cli-element.cookielawinfo-row-cat-table td.cookielawinfo-column-1 { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.wt-cli-element.cookielawinfo-row-cat-table .cookielawinfo-column-3 { white-space: nowrap; }

/* Dentro de la ventana de configuración, algo más compacta. */
.cli-modal .wt-cli-element.cookielawinfo-row-cat-table { margin: 12px 0 0; font-size: 13px; }
.cli-modal .wt-cli-element.cookielawinfo-row-cat-table th,
.cli-modal .wt-cli-element.cookielawinfo-row-cat-table td { padding: 8px 10px 8px 0; }
.cli-modal .wt-cli-element.cookielawinfo-row-cat-table td.cookielawinfo-column-1 { font-size: 12px; }

/* 7. Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
    /* Tabla de la política: cada cookie como bloque apilado. */
    .wt-cli-element.cookielawinfo-row-cat-table thead { display: none; }
    .wt-cli-element.cookielawinfo-row-cat-table tr { display: block; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
    .wt-cli-element.cookielawinfo-row-cat-table th,
    .wt-cli-element.cookielawinfo-row-cat-table td { display: block; width: auto; padding: 2px 0; border: 0; white-space: normal; }
}

@media (max-width: 480px) {
    :root { --mfcc-offset: 12px; --mfcc-padding: 18px; }
    .mfcc-pos-left #cookie-law-info-bar.wt-cli-cookie-bar,
    .mfcc-pos-right #cookie-law-info-bar.wt-cli-cookie-bar { left: var(--mfcc-offset) !important; right: var(--mfcc-offset) !important; width: auto !important; }
    .cli-modal .cli-modal-body { padding: 24px 18px 4px; }
    .cli-modal .cli-tab-footer { padding: 14px 18px 18px; }
    .cli-modal .cli-tab-footer .wt-cli-privacy-btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    #cookie-law-info-bar .cli-plugin-button { transition: none; }
}