:root {
    --color-primary: #356b66;
    --color-primary-rgb: 53, 107, 102;
    --color-secondary: #263b35;
    --color-secondary-rgb: 38, 59, 53;
    --color-terciary: #dcebe5;
    --color-terciary-rgb: 220, 235, 229;
    --color-terciary-hover: #cce1d8;
    --color-accent: #b9572e;
    --color-accent-rgb: 185, 87, 46;
    --color-accent-hover: #a64a27;
    --color-white: #fff;
    --color-white-rgb: 255, 255, 255;
    --color-on-primary: var(--color-white);

    /* Alias mantenido para las vistas existentes que usan la nomenclatura anterior. */
    --color-primary-2: var(--color-secondary);
    --color-primary-2-rgb: var(--color-secondary-rgb);
    --color-dark: #293a38;
    --color-dark-rgb: 41, 58, 56;
    --color-surface: #fbfaf7;
    --color-muted: #667774;
    --color-border: #e2e9e5;
    --button-radius: 5px;

    /* Tokens de superficie y decoración de la portada. */
    --home-cream: #f8faf8;
    --home-sage: #e5efea;
    --home-lavender: #ece8f1;
    --home-muted: var(--color-muted);
    --home-hero-gradient: linear-gradient(118deg, #f9fbf9 0%, #edf4f0 58%, #f0edf4 100%);
    --home-decoration-gradient: linear-gradient(145deg, #e5efea 5%, #ece8f1 100%);
    --home-accent-gradient: linear-gradient(115deg, var(--color-primary), #477b73);
    --home-highlight-surface: #f1eef5;
    --home-shadow-rgb: 43, 57, 48;
    --home-modal-shadow-rgb: 35, 46, 38;
}

.color-muted {
    color: var(--color-muted);
}

.auth-google-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--button-radius);
    background: var(--color-white);
    box-shadow: none;
    color: var(--color-dark);
    text-transform: none;
}

.auth-google-button:hover,
.auth-google-button:focus-visible {
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(var(--color-dark-rgb), .08);
    color: var(--color-dark);
}

.auth-reset-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 8px 28px rgba(var(--color-dark-rgb), .06);
}

.NavTop__Actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.NavTop .dropdown-content li a {
    color: var(--color-dark);
    opacity: 1;
}

body.modal-open {
    overflow: hidden !important;
    padding-right: var(--modal-scrollbar-width, 0px);
}

.modal {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: hidden !important;
}

.modal .modal-content {
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-rgb), .32) transparent;
}

.modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal .modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal .modal-content::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(var(--color-primary-rgb), .32);
    background-clip: padding-box;
}

.cookie-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: flex-end;
    background: rgba(35, 46, 38, .42);
}

.cookie-backdrop[hidden] {
    display: none;
}

.cookie-banner {
    width: 100%;
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 -8px 28px rgba(var(--color-dark-rgb), .12);
}

.cookie-banner__content,
.cookie-banner__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.cookie-banner__content h2 {
    margin: 0 0 .25rem;
    color: var(--color-dark);
    font-size: 1.15rem;
}

.cookie-banner__content p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.cookie-banner__content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.cookie-banner__actions {
    flex-shrink: 0;
}

.cookie-config-modal {
    width: min(94vw, 560px);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}

.cookie-config-modal .modal-content {
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    padding: 2rem !important;
}

.cookie-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cookie-category p {
    margin: .2rem 0 0;
    color: var(--color-muted);
    line-height: 1.4;
}

.cookie-config-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.5rem;
}

.ui-button {
    display: inline-flex;
    min-height: 44px;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .72rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    color: var(--color-white);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
    text-transform: none;
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), .14);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    cursor: pointer;
}

.ui-button:hover,
.ui-button:focus-visible {
    color: var(--color-white);
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), .18);
    transform: translateY(-1px);
}

.ui-button:focus-visible {
    outline: 3px solid rgba(var(--color-secondary-rgb), .3);
    outline-offset: 2px;
}

.ui-button--primary,
.ui-button--primary:hover,
.ui-button--primary:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
}

.ui-button--secondary,
.ui-button--secondary:hover,
.ui-button--secondary:focus-visible {
    background: var(--color-secondary);
    color: var(--color-white);
}

.ui-button--terciary,
.ui-button--terciary:hover,
.ui-button--terciary:focus-visible {
    border-color: var(--color-terciary);
    background: var(--color-terciary);
    color: var(--color-dark);
    box-shadow: none;
}

.ui-button--accent,
.ui-button--accent:hover,
.ui-button--accent:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-white);
    box-shadow: none;
}

.ui-button--accent:hover,
.ui-button--accent:focus-visible {
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
}

.ui-button--outline,
.ui-button--outline:hover,
.ui-button--outline:focus-visible {
    border-color: var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
}

.ui-button--outline:hover,
.ui-button--outline:focus-visible {
    background: rgba(var(--color-primary-rgb), .07);
}

.ui-button[disabled],
.ui-button[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
    transform: none;
}

.auth-modal {
    width: min(94vw, 480px);
    height: auto;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: hidden !important;
    border-radius: 12px;
}

.auth-modal .modal-content {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: 2rem !important;
}

.auth-modal .auth-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: var(--button-radius);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.auth-modal .auth-close:hover {
    background: var(--color-terciary);
}

.auth-modal .auth-tabs-wrap {
    margin: .75rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.auth-modal .auth-tabs {
    display: flex;
    background: transparent;
}

.auth-modal .auth-tabs .tab {
    flex: 1 1 50%;
}

.auth-modal .auth-tabs .tab a {
    color: var(--color-muted);
    font-weight: 600;
    text-transform: none;
}

.auth-modal .auth-tabs .tab a:hover,
.auth-modal .auth-tabs .tab a.active {
    color: var(--color-primary);
}

.auth-modal .auth-tabs .indicator {
    background-color: var(--color-primary);
}

.auth-modal .auth-tab-panel {
    padding: 0;
}

@media (max-width: 600px) {
    .auth-modal {
        width: 100% !important;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .auth-modal .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 1.5rem !important;
    }

    .cookie-banner__content,
    .cookie-banner__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cookie-banner__actions .ui-button {
        width: 100%;
    }

    .cookie-config-modal {
        width: 100% !important;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .cookie-config-modal .modal-content {
        max-height: calc(100vh - 6rem);
        max-height: calc(100dvh - 6rem);
        padding: 1.5rem !important;
    }
}