/*
 * Banner y panel de consentimiento de cookies (LWW-01). Marcado en Pages/Shared/_CookieConsent.cshtml.
 *
 * Los valores visuales salen de los tokens de cada tema: `--si-*` (Silicon, _Layout) y `--bs-*`
 * (Bootstrap de /ins, _LayoutFormulario). Los botones son los `btn btn-primary` del propio sitio, asi
 * que cogen el color de marca de cada layout. El ultimo valor de cada cadena solo actua en paginas sin
 * ninguno de los dos temas (/descarga-app, `.mu-cc-standalone`).
 */
.mu-cc {
    --mu-cc-bg: var(--si-white, var(--bs-white, #fff));
    --mu-cc-fg: var(--si-gray-900, var(--bs-gray-dark, #343a40));
    --mu-cc-muted: var(--si-gray-700, var(--bs-gray, #6c757d));
    --mu-cc-border: var(--si-gray-300, var(--bs-gray, #6c757d));
    --mu-cc-accent: var(--si-primary, var(--bs-primary, #7dbf5b));
    --mu-cc-radius: var(--si-border-radius-lg, 0.5rem);
    --mu-cc-shadow: var(--si-box-shadow-lg, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15));
    --mu-cc-backdrop: rgba(var(--si-dark-rgb, 33, 37, 41), 0.55);
    --mu-cc-gap: 0.75rem;
    --mu-cc-pad: 1.25rem;
}

.mu-cc__banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: var(--mu-cc-gap);
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--mu-cc-pad);
    color: var(--mu-cc-fg);
    background: var(--mu-cc-bg);
    border: 1px solid var(--mu-cc-border);
    border-radius: var(--mu-cc-radius);
    box-shadow: var(--mu-cc-shadow);
}

.mu-cc__banner[hidden] {
    display: none;
}

.mu-cc__title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mu-cc-fg);
}

.mu-cc__text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mu-cc-muted);
}

.mu-cc__text a {
    color: inherit;
    text-decoration: underline;
}

/* Tres botones del mismo peso (AEPD: rechazar tan facil como aceptar). */
.mu-cc__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .mu-cc__actions {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mu-cc__btn {
    width: 100%;
    white-space: nowrap;
}

.mu-cc__panel {
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: var(--mu-cc-pad);
    color: var(--mu-cc-fg);
    background: var(--mu-cc-bg);
    border: 1px solid var(--mu-cc-border);
    border-radius: var(--mu-cc-radius);
    box-shadow: var(--mu-cc-shadow);
}

.mu-cc__panel::backdrop {
    background: var(--mu-cc-backdrop);
}

.mu-cc__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mu-cc-gap);
}

.mu-cc__close {
    padding: 0 0.25rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mu-cc-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.mu-cc__categories {
    margin: var(--mu-cc-pad) 0;
    padding: 0;
    list-style: none;
}

.mu-cc__category {
    padding: var(--mu-cc-gap) 0;
    border-top: 1px solid var(--mu-cc-border);
}

.mu-cc__switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
}

.mu-cc__switch input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--mu-cc-accent);
}

.mu-cc__switch input:disabled {
    cursor: not-allowed;
}

.mu-cc__category-name {
    font-weight: 600;
}

.mu-cc__category-text {
    margin: 0.25rem 0 0 1.6rem;
    font-size: 0.85rem;
    color: var(--mu-cc-muted);
}

/* Paginas sin Bootstrap (layout propio): el boton se dibuja con los tokens del componente. */
.mu-cc-standalone .mu-cc__btn {
    padding: 0.6rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--mu-cc-bg);
    background: var(--mu-cc-accent);
    border: 1px solid var(--mu-cc-accent);
    border-radius: var(--mu-cc-radius);
    cursor: pointer;
}

.mu-cc-standalone .mu-cc__btn:focus-visible,
.mu-cc__close:focus-visible {
    outline: 2px solid var(--mu-cc-accent);
    outline-offset: 2px;
}