:root {
    /* 🎨 Paleta Olinda (alinhada a /eventos e gemini-olinda-style) */
    --t-color-primary: #0072BC;
    --t-color-primary-strong: #005a9c;
    --t-color-secondary: #0A4C6A;
    --t-color-accent: #2DCCD3;
    --t-color-success: #8DC63F;
    --t-color-warning: #FDB913;
    --t-color-warning-strong: #c4920a;
    --t-color-danger: #F15A24;
    --t-color-danger-strong: #c2410c;
    --t-color-neutral-900: #1f2430;
    --t-color-neutral-700: #3f4759;
    --t-color-neutral-500: #6c798f;
    --t-color-neutral-300: #c2c8d5;
    --t-color-neutral-100: #f5f7fb;
    --t-surface-page: #F7F5E9;
    --t-surface-card: #ffffff;
    --t-border-color: #e3e7ef;
    --t-olinda-amarelo: #FDB913;
    --t-olinda-frevo: #F15A24;
    --t-olinda-areia: #F7F5E9;
    --t-olinda-marinho: #0A4C6A;

    /* ✍️ Tipografia municipal */
    --t-font-sans: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    --t-font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif;

    /* 📏 Espaçamento (escala x4) */
    --t-space-1: 4px;
    --t-space-2: 8px;
    --t-space-3: 12px;
    --t-space-4: 16px;
    --t-space-5: 20px;
    --t-space-6: 24px;
    --t-space-7: 32px;
    --t-space-8: 40px;

    /* 🟦 Raios & sombras */
    --t-radius-sm: 6px;
    --t-radius-md: 12px;
    --t-radius-lg: 18px;
    --t-radius-pill: 999px;
    --t-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
    --t-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.12);

    /* ⚡ Transições */
    --t-transition-fast: 150ms ease;
    --t-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 🔖 Badges padrão */
    --t-badge-ok-bg: #e8f8f5;
    --t-badge-record-bg: #fff4e0;
    --t-badge-warn-bg: #fff8e1;
    --t-badge-critical-bg: #fdecea;
    --t-badge-offline-bg: #f2f4f7;
}

body {
    font-family: var(--t-font-sans);
    background: var(--t-surface-page);
    color: var(--t-color-neutral-900);
    line-height: 1.5;
}

.tarta-card {
    background: var(--t-surface-card);
    border-radius: var(--t-radius-md);
    padding: var(--t-space-6);
    box-shadow: var(--t-shadow-sm);
    border: 1px solid var(--t-border-color);
}

.tarta-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(226,232,240,0.65), rgba(241,245,249,0.95), rgba(226,232,240,0.65));
    background-size: 200% 100%;
    animation: tarta-shimmer 1.6s infinite;
    border-radius: 12px;
}
.tarta-skeleton--line { height: 14px; margin-bottom: 8px; }
.tarta-skeleton--chip { width: 80px; height: 24px; border-radius: var(--t-radius-pill); }
.tarta-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }

@keyframes tarta-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.tarta-btn {
    font-family: inherit;
    border: none;
    border-radius: var(--t-radius-pill);
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-transition-fast), box-shadow var(--t-transition-fast);
}

.tarta-btn--primary {
    background: var(--t-color-primary);
    color: #fff;
    box-shadow: 0 6px 12px rgba(0, 114, 188, 0.25);
}
.tarta-btn--primary:hover {
    background: var(--t-color-primary-strong);
}

.tarta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--t-radius-pill);
    font-size: 0.85em;
    font-weight: 600;
    background: var(--t-badge-offline-bg);
    color: var(--t-color-neutral-700);
}

.tarta-input {
    border-radius: var(--t-radius-sm);
    border: 1px solid var(--t-border-color);
    padding: 10px 12px;
    font-family: inherit;
    transition: border var(--t-transition-fast), box-shadow var(--t-transition-fast);
}
.tarta-input:focus {
    outline: none;
    border-color: var(--t-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 114, 188, 0.18);
}

/* Utilitários de espaçamento */
.tarta-stack-md > * + * {
    margin-top: var(--t-space-4);
}

.tarta-grid-gap-md {
    gap: var(--t-space-5);
}


/* ========== Override login (HTML em cache) — casa Olinda ========== */
body:has(.login-container) {
    background:
        radial-gradient(circle at 15% 80%, rgba(253, 185, 19, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 85% 20%, rgba(0, 114, 188, 0.14) 0%, transparent 50%),
        linear-gradient(145deg, #F7F5E9 0%, #eef4f8 45%, #e4e8d9 100%) !important;
    background-attachment: scroll !important;
}
body:has(.login-container)::before {
    display: none !important;
}
body:has(.login-container) .login-card::before {
    background: linear-gradient(90deg, #0A4C6A, #0072BC, #FDB913, #F15A24) !important;
}
body:has(.login-container) .login-btn {
    background: linear-gradient(135deg, #0072BC, #0A4C6A) !important;
    box-shadow: 0 8px 20px rgba(0, 114, 188, 0.28) !important;
}
body:has(.login-container) .login-title {
    color: #0A4C6A !important;
    font-family: Nunito, Segoe UI, sans-serif !important;
}
body:has(.login-container) .form-input:focus {
    border-color: #0072BC !important;
    box-shadow: 0 0 0 3px rgba(0, 114, 188, 0.18) !important;
}
body:has(.login-container) .error-message {
    border-left-color: #F15A24 !important;
}

/* Dual face: login + nav Eventos da estação */
body:has(.login-container) .login-subtitle {
    color: #4a5560 !important;
}
body:has(.login-container) .login-meta a {
    color: #0072BC !important;
    font-weight: 700 !important;
}
body:has(.login-container) .footer-text strong {
    color: #0A4C6A !important;
}

.nav-eventos-season {
    position: relative;
}
.nav-season-pill {
    display: inline-block;
    margin-left: 0.28rem;
    padding: 0.08rem 0.42rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: #0A4C6A;
    background: rgba(253, 185, 19, 0.92);
    border: 1px solid rgba(241, 90, 36, 0.35);
}
.nav-eventos-season.active .nav-season-pill,
.nav-eventos-season:hover .nav-season-pill {
    background: #FDB913;
}