/* =============================================================================
   GTM Ecommerce — Banner de cookies (Panda / Letras Corpóreas)
   Colores alineados con el tema: azul oscuro barra, acento #f2c340 (custom.css)
   ============================================================================= */

.gtmecommerce-consent-banner,
.gtmecommerce-consent-banner * {
    box-sizing: border-box;
}

.gtmecommerce-consent-banner {
    /* Paleta tipo Panda (breadcrumb / cabecera oscura + amarillo marca) */
    --gtme-banner-bg: #132f4a;
    --gtme-banner-bg-2: #0f2740;
    --gtme-text: #c8dff4;
    --gtme-yellow: #f2c340;
    --gtme-yellow-hover: #e6b535;

    position: fixed;
    z-index: 99999;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0.875rem max(0.75rem, env(safe-area-inset-right)) max(0.875rem, env(safe-area-inset-bottom))
        max(0.75rem, env(safe-area-inset-left));
    background: linear-gradient(180deg, var(--gtme-banner-bg-2) 0%, var(--gtme-banner-bg) 100%);
    border-top: 3px solid var(--gtme-yellow);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--gtme-text);
    isolation: isolate;
}

.gtmecommerce-consent-inner {
    width: 100%;
    max-width: min(1200px, 100%);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem 1rem;
}

.gtmecommerce-consent-text {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--gtme-text);
    font-size: inherit;
}

.gtmecommerce-consent-text a {
    color: #dff4ff;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.gtmecommerce-consent-text a:hover,
.gtmecommerce-consent-text a:focus {
    color: #ffffff;
}

.gtmecommerce-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: min(100%, 280px);
}

/* Botones propios (evita conflictos con .btn-primary / .btn-secondary del tema) */
.gtmecommerce-consent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    margin: 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.gtmecommerce-consent-btn:focus-visible {
    outline: 2px solid var(--gtme-yellow);
    outline-offset: 2px;
}

.gtmecommerce-consent-btn:active {
    transform: scale(0.98);
}

/*
 * Jerarquía: «Aceptar todo» = CTA principal (relleno amarillo).
 * «Solo esenciales» = secundario (contorno suave, mismo tono que el texto del banner).
 */
.gtmecommerce-consent-btn--essential {
    background-color: transparent;
    color: var(--gtme-text);
    border-color: rgba(200, 223, 244, 0.45);
    font-weight: 500;
}

.gtmecommerce-consent-btn--essential:hover,
.gtmecommerce-consent-btn--essential:focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(223, 244, 255, 0.65);
    color: #ffffff;
}

/* CTA principal: amarillo sólido + sombra suave */
.gtmecommerce-consent-btn--all {
    background-color: var(--gtme-yellow);
    color: var(--gtme-banner-bg-2);
    border-color: var(--gtme-yellow);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.gtmecommerce-consent-btn--all:hover,
.gtmecommerce-consent-btn--all:focus {
    background-color: var(--gtme-yellow-hover);
    border-color: var(--gtme-yellow-hover);
    color: var(--gtme-banner-bg-2);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------
   Responsive: ancho completo, botones a ancho completo en móvil
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .gtmecommerce-consent-banner {
        padding: 0.75rem max(0.65rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom))
            max(0.65rem, env(safe-area-inset-left));
        font-size: 0.875rem;
    }

    .gtmecommerce-consent-inner {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
        gap: 0.75rem;
    }

    .gtmecommerce-consent-text {
        flex: 1 1 auto;
        width: 100%;
    }

    .gtmecommerce-consent-actions {
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    /* Principal arriba en móvil; en escritorio el orden del HTML sigue: esenciales | aceptar */
    .gtmecommerce-consent-btn--all {
        order: -1;
    }

    .gtmecommerce-consent-btn--essential {
        order: 1;
    }

    .gtmecommerce-consent-btn {
        width: 100%;
        flex: 1 1 auto;
    }
}

@media (max-width: 380px) {
    .gtmecommerce-consent-btn {
        font-size: 0.8125rem;
        padding: 0.45rem 0.75rem;
    }
}