:root {
    /* ============================================================
       BRAND COLORS
    ============================================================ */
    --re-bg-dark: #071014;
    --re-bg-deep: #0b1217;

    --re-petroleo: #13252b;
    --re-petroleo-soft: #1a3036;

    --re-primary: #2563eb;
    --re-primary-hover: #1d4ed8;
    --re-primary-soft: rgba(37, 99, 235, .14);

    --re-blue: var(--re-primary);
    --re-blue-hover: var(--re-primary-hover);
    --re-blue-soft: var(--re-primary-soft);

    --re-gold: #b8954a;
    --re-gold-light: #d7be84;
    --re-gold-soft: rgba(184, 149, 74, .12);
    --re-gold-border: rgba(184, 149, 74, .24);

    /* ============================================================
       TEXT COLORS
    ============================================================ */
    --re-text: #f8fafc;
    --re-text-soft: #cbd5e1;
    --re-muted: #94a3b8;

    --re-light: #f8fafc;
    --re-light-soft: #eef4fb;
    --re-white: #ffffff;

    /* ============================================================
       SURFACES
    ============================================================ */
    --re-dark-card: rgba(15, 23, 42, .86);
    --re-dark-card-strong: rgba(15, 23, 42, .94);

    --re-surface: linear-gradient(145deg,
            rgba(15, 23, 42, .92),
            rgba(15, 23, 42, .74));

    --re-surface-soft: linear-gradient(145deg,
            rgba(15, 23, 42, .64),
            rgba(15, 23, 42, .34));

    --re-surface-glass: linear-gradient(145deg,
            rgba(15, 23, 42, .56),
            rgba(15, 23, 42, .30));

    --re-surface-inner: linear-gradient(180deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .018));

    --re-surface-gold: linear-gradient(135deg,
            rgba(184, 149, 74, .16),
            rgba(255, 255, 255, .035));

    /* ============================================================
       BORDERS
    ============================================================ */
    --re-border: rgba(255, 255, 255, .12);
    --re-border-light: rgba(255, 255, 255, .09);
    --re-border-soft: rgba(148, 163, 184, .22);
    --re-border-muted: rgba(255, 255, 255, .08);

    /* ============================================================
       SHADOWS
    ============================================================ */
    --re-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    --re-shadow-soft: 0 14px 40px rgba(15, 23, 42, .12);
    --re-shadow-card: 0 24px 70px rgba(0, 0, 0, .26);
    --re-shadow-hover: 0 26px 70px rgba(0, 0, 0, .24);
    --re-shadow-gold: 0 18px 38px rgba(184, 149, 74, .24);
    --re-shadow-blue: 0 18px 40px rgba(37, 99, 235, .36);

    /* ============================================================
       RADIUS
    ============================================================ */
    --re-radius-xs: 10px;
    --re-radius-sm: 14px;
    --re-radius: 20px;
    --re-radius-md: 20px;
    --re-radius-lg: 28px;
    --re-radius-xl: 36px;
    --re-radius-pill: 999px;

    /* ============================================================
       BLUR
    ============================================================ */
    --re-blur-sm: blur(14px);
    --re-blur-md: blur(22px);
    --re-blur-lg: blur(28px);
    --re-blur-xl: blur(32px);

    /* ============================================================
       SPACING SCALE
    ============================================================ */
    --re-space-1: 4px;
    --re-space-2: 8px;
    --re-space-3: 12px;
    --re-space-4: 16px;
    --re-space-5: 20px;
    --re-space-6: 24px;
    --re-space-7: 32px;
    --re-space-8: 40px;
    --re-space-9: 48px;
    --re-space-10: 64px;
    --re-space-11: 72px;

    /* ============================================================
       TYPOGRAPHY
    ============================================================ */
    --re-font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --re-text-xs: .72rem;
    --re-text-sm: .82rem;
    --re-text-md: .92rem;
    --re-text-base: 1rem;
    --re-text-lg: 1.08rem;
    --re-text-xl: 1.28rem;
    --re-text-2xl: 1.7rem;
    --re-text-3xl: 2rem;

    --re-weight-medium: 650;
    --re-weight-bold: 750;
    --re-weight-strong: 850;
    --re-weight-black: 950;

    --re-leading-tight: 1.04;
    --re-leading-base: 1.55;
    --re-leading-relaxed: 1.65;
    --re-leading-loose: 1.7;

    /* ============================================================
       MOTION
    ============================================================ */
    --re-transition-fast: var(--re-transition-fast);
    --re-transition-base: var(--re-transition-base);
    --re-transition-slow: var(--re-transition-slow);

    /* ============================================================
       LAYOUT
    ============================================================ */
    --re-container: 1180px;
    --re-container-wide: 1280px;

    --re-border-strong: rgba(255, 255, 255, .18);
    --re-border-muted: rgba(255, 255, 255, .08);

    --re-surface-hover: linear-gradient(180deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .030));

    --re-shadow-lift: 0 18px 44px rgba(0, 0, 0, .22);
    --re-shadow-subtle: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ============================================================
   RESET
============================================================ */

body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    color: var(--re-text);
    background: var(--re-bg-dark);
    font-family: var(--re-font-main);
}

/* Não existe overlay nas páginas internas */
body::before {
    content: none;
}

/* Apenas login recebe a imagem */
body.has-background-image {
    background:
        url("/static/img/bg-eleitoral-premium4.png") center bottom / cover no-repeat fixed;
}

/* Apenas login recebe o overlay */
body.has-background-image::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(180deg,
            rgba(6, 12, 20, .55),
            rgba(7, 16, 20, .48)),
        radial-gradient(circle at 50% -15%,
            rgba(0, 0, 0, .30),
            transparent 55%),
        radial-gradient(circle at 50% 120%,
            rgba(0, 0, 0, .42),
            transparent 60%),
        radial-gradient(circle at 18% 18%,
            rgba(14, 165, 233, .10),
            transparent 30%),
        radial-gradient(circle at 82% 18%,
            rgba(184, 149, 74, .08),
            transparent 34%);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

/* ============================================================
   APP SHELL
============================================================ */

.re-app-shell {
    min-height: 100vh;
    position: relative;
}

.re-flash-container {
    width: min(var(--re-container), calc(100% - 32px));
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 50;
    transform: translateX(-50%);
}

.re-alert {
    border: 0;
    border-radius: var(--re-radius-sm);
    box-shadow: var(--re-shadow-soft);
}

/* ============================================================
   DESIGN SYSTEM — CONTAINERS
============================================================ */

.ds-container {
    width: min(var(--re-container), calc(100% - 32px));
    margin: 0 auto;
}

.ds-container-wide {
    width: min(var(--re-container-wide), calc(100% - 40px));
    margin: 0 auto;
}

/* ============================================================
   DESIGN SYSTEM — CARDS / SURFACES
============================================================ */

.ds-card {
    border: 1px solid var(--re-border);
    border-radius: var(--re-radius-lg);
    background: var(--re-surface);
    box-shadow: var(--re-shadow);
    backdrop-filter: var(--re-blur-md);
    -webkit-backdrop-filter: var(--re-blur-md);
}

.ds-card-soft {
    border: 1px solid var(--re-border-light);
    border-radius: var(--re-radius-lg);
    background: var(--re-surface-glass);
    box-shadow: var(--re-shadow-card);
    backdrop-filter: var(--re-blur-lg);
    -webkit-backdrop-filter: var(--re-blur-lg);
}

.ds-card-inner {
    border: 1px solid var(--re-border-light);
    border-radius: var(--re-radius-md);
    background: var(--re-surface-inner);
}

.ds-card-hover {
    transition:
        transform var(--re-transition-base),
        box-shadow var(--re-transition-base),
        border-color var(--re-transition-base),
        background var(--re-transition-base);
}

.ds-card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 149, 74, .28);
    box-shadow: var(--re-shadow-hover);
}

/* ============================================================
   DESIGN SYSTEM — BADGES
============================================================ */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--re-space-2);
    width: fit-content;
    padding: 8px 13px;
    border-radius: var(--re-radius-pill);
    color: #bfdbfe;
    background: rgba(37, 99, 235, .16);
    border: 1px solid rgba(96, 165, 250, .20);
    font-size: var(--re-text-sm);
    font-weight: var(--re-weight-strong);
    letter-spacing: .01em;
}

.ds-badge-gold {
    color: var(--re-gold);
    background: var(--re-gold-soft);
    border-color: var(--re-gold-border);
}

.ds-badge-uppercase {
    font-size: var(--re-text-xs);
    font-weight: var(--re-weight-strong);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ============================================================
   DESIGN SYSTEM — TYPOGRAPHY
============================================================ */

.ds-title {
    margin: 0;
    color: var(--re-text);
    font-weight: var(--re-weight-black);
    letter-spacing: -.04em;
    line-height: var(--re-leading-tight);
}

.ds-title-lg {
    font-size: clamp(2.2rem, 4vw, 4.4rem);
}

.ds-title-md {
    font-size: var(--re-text-2xl);
}

.ds-title-sm {
    font-size: var(--re-text-xl);
}

.ds-subtitle {
    margin: 0;
    color: var(--re-text-soft);
    line-height: var(--re-leading-relaxed);
}

.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--re-space-2);
    width: fit-content;
    color: var(--re-gold);
    font-size: var(--re-text-xs);
    font-weight: var(--re-weight-strong);
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

/* ============================================================
   DESIGN SYSTEM — BUTTONS
============================================================ */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--re-radius-sm);
    background: linear-gradient(135deg, var(--re-primary), #3b82f6);
    color: var(--re-white);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .28);
    transition:
        transform var(--re-transition-fast),
        box-shadow var(--re-transition-fast),
        background var(--re-transition-fast),
        color var(--re-transition-fast),
        border-color var(--re-transition-fast);
}

.ds-btn:hover {
    transform: translateY(-1px);
    color: var(--re-white);
    background: linear-gradient(135deg, var(--re-primary-hover), var(--re-primary));
    box-shadow: var(--re-shadow-blue);
}

.ds-btn:active {
    transform: translateY(0);
}

.ds-btn:disabled {
    cursor: not-allowed;
    opacity: .68;
    transform: none;
}

.ds-btn-secondary {
    background: rgba(255, 255, 255, .08);
    color: var(--re-text);
    border: 1px solid var(--re-border);
    box-shadow: none;
}

.ds-btn-secondary:hover {
    color: var(--re-text);
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.ds-btn-gold {
    border: 1px solid rgba(212, 175, 55, .45);
    background: linear-gradient(135deg, #d4af37, #94701e);
    color: #071014;
    box-shadow: 0 14px 30px rgba(212, 175, 55, .16);
}

.ds-btn-gold:hover {
    color: #071014;
    background: linear-gradient(135deg, #e2c45f, #a97d24);
    box-shadow: var(--re-shadow-gold);
}

.ds-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .035);
    color: var(--re-text);
    box-shadow: none;
}

.ds-btn-ghost:hover {
    color: var(--re-gold);
    border-color: rgba(212, 175, 55, .24);
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
}

.ds-btn-sm {
    min-height: 42px;
    padding: 0 16px;
    border-radius: var(--re-radius-sm);
    font-size: var(--re-text-sm);
}

.ds-btn-full {
    width: 100%;
}

/* ============================================================
   DESIGN SYSTEM — FORMS
============================================================ */

.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--re-space-2);
}

.ds-label {
    color: var(--re-text-soft);
    font-size: var(--re-text-md);
    font-weight: var(--re-weight-bold);
}

.ds-input,
.form-control.ds-input,
.form-select.ds-input {

    width: 100%;
    height: 56px;

    padding: 0 16px;

    border: 1px solid var(--re-border-soft);
    border-radius: var(--re-radius-sm);

    background: rgba(255, 255, 255, .96);

    color: #0f172a;

    outline: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    box-shadow: none;

    transition:
        border-color var(--re-transition-fast),
        box-shadow var(--re-transition-fast),
        background var(--re-transition-fast);

}

textarea.ds-input,
textarea.form-control.ds-input {

    min-height: 130px;

    height: auto;

    padding: 16px;

    resize: vertical;

}

.ds-input:focus,
.form-control.ds-input:focus,
.form-select.ds-input:focus {
    background: #ffffff;
    border-color: rgba(59, 130, 246, .72);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .16);
}

.ds-input::placeholder {
    color: #94a3b8;
}

/* ============================================================
   DESIGN SYSTEM — TOOLBAR
============================================================ */

.ds-toolbar {

    display: grid;
    gap: var(--re-space-4);
    align-items: center;

}

.ds-toolbar-search {

    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 56px;

    padding: 0 18px;

    border: 1px solid var(--re-border-soft);
    border-radius: var(--re-radius-sm);

    background: rgba(255, 255, 255, .96);

    transition:
        border-color var(--re-transition-fast),
        box-shadow var(--re-transition-fast),
        background var(--re-transition-fast);

}

.ds-toolbar-search:focus-within {

    background: #fff;

    border-color: rgba(59, 130, 246, .72);

    box-shadow: 0 0 0 4px rgba(59, 130, 246, .16);

}

.ds-toolbar-search .app-icon {

    flex-shrink: 0;

}

.ds-toolbar-search .ds-input {

    flex: 1;

    height: auto;
    min-height: auto;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;

    color: #0f172a;

}

.ds-toolbar-search .ds-input:focus {

    border: 0;

    box-shadow: none;

    background: transparent;

}

.ds-toolbar>.ds-input {

    width: 100%;

}

/* ============================================================
   DESIGN SYSTEM — UTILITIES
============================================================ */

.ds-divider {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .14),
            transparent);
}

.ds-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: var(--re-space-7);
    text-align: center;
    border-radius: var(--re-radius-md);
    border: 1px dashed rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .025);
    color: var(--re-text-soft);
    font-weight: var(--re-weight-bold);
}

.ds-progress-track {
    height: 10px;
    border-radius: var(--re-radius-pill);
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}

.ds-progress-track span {
    display: block;
    height: 100%;
    border-radius: var(--re-radius-pill);
    background: linear-gradient(90deg, var(--re-gold), #ffe38d);
    transition: width .8s ease;
}

/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes dsFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ds-fade-up {
    animation: dsFadeUp .45s ease both;
}

/* ============================================================
   SCROLLBAR
============================================================ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: var(--re-radius-pill);
    background: rgba(184, 149, 74, .35);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 149, 74, .55);
}

/* ============================================================
   RESPONSIVO GLOBAL
============================================================ */

@media (max-width: 991px) {
    body {
        background-attachment: scroll;
        background-position: center bottom;
    }

    .ds-container,
    .ds-container-wide {
        width: min(100% - 28px, var(--re-container));
    }
}

@media (max-width: 576px) {
    body {
        background-size: auto 100%;
        background-position: center bottom;
    }

    .re-flash-container {
        width: calc(100% - 24px);
        top: 12px;
    }

    .ds-btn {
        min-height: 54px;
        border-radius: 15px;
    }

    .ds-empty-state {
        padding: var(--re-space-6);
    }
}

/* ============================================================
   ACESSIBILIDADE
============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   DESIGN SYSTEM — PADRÕES COMPARTILHADOS DE MÓDULOS
============================================================ */

.ds-module-page {
    display: flex;
    flex-direction: column;
    gap: var(--re-space-6);
}

.ds-module-glow {
    position: relative;
    overflow: hidden;
}

.ds-module-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 16%, var(--re-gold-soft), transparent 30%),
        radial-gradient(circle at 88% 16%, var(--re-primary-soft), transparent 32%);
    pointer-events: none;
}

.ds-module-glow>* {
    position: relative;
    z-index: 1;
}

.ds-toolbar {
    display: grid;
    gap: var(--re-space-4);
    align-items: center;
}


.ds-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--re-radius-lg);
    border: 1px solid var(--re-border-light);
    background: var(--re-surface-inner);
}

.ds-data-table {
    width: 100%;
    border-collapse: collapse;
}

.ds-data-table th,
.ds-data-table td {
    padding: 18px;
    vertical-align: top;
}

.ds-data-table th {
    color: var(--re-gold);
    font-size: var(--re-text-xs);
    font-weight: var(--re-weight-black);
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.ds-data-table td {
    border-top: 1px solid var(--re-border-muted);
    color: var(--re-text-soft);
}

.ds-data-table tbody tr {
    transition:
        background var(--re-transition-base),
        transform var(--re-transition-base);
}

.ds-data-table tbody tr:hover {
    background: rgba(255, 255, 255, .04);
}

.ds-data-table td strong,
.ds-data-table td span,
.ds-data-table td small {
    display: block;
}

.ds-data-table td strong {
    color: var(--re-text);
    font-weight: var(--re-weight-black);
}

.ds-data-table td span {
    color: var(--re-text-soft);
    line-height: 1.45;
}

.ds-data-table td small {
    margin-top: 5px;
    color: var(--re-muted);
    font-size: var(--re-text-xs);
    line-height: 1.35;
}

.ds-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: var(--re-space-2);
    padding: 7px 12px;
    border-radius: var(--re-radius-pill);
    color: var(--re-text);
    font-size: var(--re-text-xs);
    font-weight: var(--re-weight-black);
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--re-border-light);
    background: var(--re-surface-inner);
}

.ds-summary-grid {
    display: grid;
    gap: var(--re-space-4);
}

.ds-summary-card {
    display: flex;
    align-items: center;
    gap: var(--re-space-5);
    min-height: 132px;
    padding: var(--re-space-6);
}

.ds-summary-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: var(--re-radius-md);
    background: var(--re-gold-soft);
    border: 1px solid var(--re-gold-border);
}

.ds-summary-content {
    display: flex;
    flex-direction: column;
    gap: var(--re-space-2);
}