/* =============================================================================
   Aviso de cookies (consentimiento) · tarjeta flotante horizontal, anclada
   abajo a la izquierda.
   Se muestra en pantallas públicas que cargan Google Tag Manager.
   Ver: resources/views/home/cookie_consent.blade.php
   ============================================================================= */

.cc-consent {
    position: fixed;
    right: 128px;
    bottom: 24px;
    left: 104px;
    z-index: 1150;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    padding: 14px 16px;
    overflow-y: auto;
    color: var(--first-color, #1e3c6a);
    font-size: 13px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

/* El atributo hidden debe ganarle a los display de abajo. */
.cc-consent[hidden],
.cc-consent__prefs[hidden] {
    display: none !important;
}

/* Texto a la izquierda y botones a la derecha, en una sola fila. */
.cc-consent__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: center;
}

.cc-consent__text {
    flex: 1 1 240px;
    min-width: 180px;
}

.cc-consent__desc {
    margin: 0;
    color: #3c4b5f;
    line-height: 1.4;
}

.cc-consent__title {
    margin-right: 4px;
    color: var(--first-color, #1e3c6a);
    font-weight: 700;
}

/* Enlace y botón "Configurar": el azul de marca #1c8df3 sobre blanco da 3.41:1
   y no alcanza el 4.5:1 para texto pequeño; se usa el azul oscuro del tema. */
.cc-consent__desc a {
    color: var(--third-color, #2366ac);
    text-decoration: underline;
}

.cc-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.cc-consent__btn {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Blanco sobre #0f6fce = 5.02:1 (antes #1c8df3 = 3.41:1) */
.cc-consent__btn--primary {
    color: #fff;
    background-color: #0f6fce;
}

.cc-consent__btn--primary:hover {
    color: #fff;
    background-color: #0a5aa9;
}

.cc-consent__btn--ghost {
    color: var(--first-color, #1e3c6a);
    background-color: #fff;
    border-color: #c8d3e0;
}

.cc-consent__btn--ghost:hover {
    color: var(--first-color, #1e3c6a);
    background-color: #f2f6fb;
}

.cc-consent__btn--link {
    min-height: 32px;
    padding: 6px 4px;
    color: var(--third-color, #2366ac);
    background: none;
    border: 0;
    text-decoration: underline;
}

.cc-consent__btn--link:hover {
    color: #0b4b92;
}

.cc-consent__btn:focus-visible,
.cc-consent__switch:focus-visible {
    outline: 3px solid var(--second-color, #1c8df3);
    outline-offset: 2px;
}

.cc-consent__prefs {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e3e9f1;
}

.cc-consent__prefs-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
}

.cc-consent__prefs-list {
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.cc-consent__pref {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.cc-consent__pref-name {
    display: block;
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
}

.cc-consent__pref-desc {
    margin: 0;
    color: #5a6b80;
    font-size: 12px;
    line-height: 1.4;
}

.cc-consent__switch {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--second-color, #1c8df3);
}

/* Enlace "Preferencias de cookies" del footer (es un <button> con aspecto de link). */
.cc-consent-link {
    padding: 0;
    color: #fff;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Nota: el aviso no se cruza con los botones flotantes de los costados.
   En escritorio arranca en left:104px (los iconos de la izquierda ocupan
   hasta 88px) y termina 128px antes del borde derecho. En móvil el aviso sí
   ocupa el ancho completo, así que los lanzadores se mueven hacia arriba
   (ver media query de abajo) en lugar de ocultarse. */

@media (max-width: 768px) {
    .cc-consent {
        right: 12px;
        bottom: 12px;
        left: 12px;
        max-width: none;
        max-height: 50vh;
    }

    .cc-consent__text {
        flex: 1 1 100%;
    }

    .cc-consent__actions {
        width: 100%;
        margin-left: 0;
    }

    .cc-consent__btn--primary,
    .cc-consent__btn--ghost {
        flex: 1 1 0;
    }

    .cc-consent__btn--link {
        flex: 1 1 100%;
        text-align: center;
    }

    /* En móvil el aviso ocupa el ancho completo, así que los lanzadores de
       redes se mueven un poco hacia arriba mientras la persona no haya
       elegido (nunca se ocultan). */
    #floatingButtonsRight,
    #floatingButtonsLeft {
        transition: top .25s ease;
    }

    .cc-consent-pending #floatingButtonsRight,
    .cc-consent-pending #floatingButtonsLeft {
        top: 34%;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

    #floatingButtonsRight,
    #floatingButtonsLeft {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-consent__btn {
        transition: none;
    }
}