html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Login enhanced layout additions --- */
.login-grid {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 0;
    min-height: clamp(500px, 60vh, 700px);
}

@media (max-width: 1200px) {
    .login-grid {
        grid-template-columns: 1fr 440px;
    }
}

@media (max-width: 992px) {
    .login-grid {
        grid-template-columns: 1fr;
    }

    .login-side {
        display: none !important;
    }
}

.login-main {
    position: relative;
    z-index: 2;
}

.login-heading {
    font-weight: 300;
    letter-spacing: .5px;
}

.login-sub {
    font-size: 1.05rem;
    opacity: .9;
    margin-top: -.35rem;
    margin-bottom: .75rem;
}

.login-field {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .login-field + .login-field {
        margin-top: .35rem;
    }

.field-val {
    font-size: .75rem;
    margin-top: 2px;
    color: #ffc9c9 !important;
}

.pw-toggle {
    position: absolute;
    right: calc(50% - min(420px,90%) / 2 + 8px);
    top: 10px;
    background: rgba(0,0,0,.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    padding: 4px 10px;
    font-size: .7rem;
    border-radius: 14px;
    cursor: pointer;
    transition: background .2s;
}

    .pw-toggle:hover {
        background: rgba(0,0,0,.6);
    }

.caps-hint {
    position: absolute;
    bottom: -18px;
    right: calc(50% - min(420px,90%) / 2);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    background: #dc3545;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

.login-side {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border-left: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: stretch;
}

    .login-side:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(800px 480px at 20% 20%, rgba(255,255,255,.18), transparent 70%), radial-gradient(600px 420px at 90% 80%, rgba(255,255,255,.12), transparent 75%);
        pointer-events: none;
    }

.side-content {
    padding: clamp(1.6rem, 3vh, 2.1rem) 1.8rem 1.1rem;
    gap: .9rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    justify-content: flex-start;
}

.side-title {
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.25;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.side-sub {
    font-size: 1rem;
    line-height: 1.4;
    opacity: .95;
    margin-bottom: .25rem;
}

.metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.metric-pill {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .75rem;
    min-width: 120px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px -2px rgba(0,0,0,.4);
}

    .metric-pill strong {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: .5px;
    }

    .metric-pill span {
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        opacity: .85;
    }

.vp-points {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .9rem;
}

    .vp-points li {
        padding-left: 1.1rem;
        position: relative;
        line-height: 1.3;
    }

        .vp-points li:before {
            content: "";
            position: absolute;
            left: 0;
            top: .5rem;
            width: .55rem;
            height: .55rem;
            border-radius: 50%;
            background: linear-gradient(135deg, #2fbf71, #46d784);
            box-shadow: 0 0 0 2px rgba(255,255,255,.25);
        }

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
}

.badge-pill {
    background: rgba(0,0,0,.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    font-size: .65rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.legal {
    display: block;
    margin-top: .85rem;
    font-size: .65rem;
    letter-spacing: .04em;
    opacity: .75;
}

/* focus ring improvement */
.login-input:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 0 4px rgba(0,0,0,.4);
}

/* --- compact login adjustments --- */
.login-grid {
    min-height: clamp(500px, 60vh, 700px);
}

.side-content {
    padding: clamp(1.6rem, 3vh, 2.1rem) 1.8rem 1.1rem;
    gap: .9rem;
}

.login-logo {
    height: 200px;
}

@media (max-width: 768px) {
    .login-logo {
        height: 82px;
    }
}

.metrics-panel {
    gap: .85rem .9rem;
}

.metric-block {
    min-height: 118px;
    padding: .7rem .8rem .6rem;
}

    .metric-block .metric-header {
        margin-bottom: .25rem;
    }

.nps-body {
    gap: .5rem;
    margin-bottom: .3rem;
}

.metric-main {
    font-size: 2rem;
    margin-top: .1rem;
    margin-bottom: .25rem;
}

.vp-bullets {
    margin-top: .9rem;
}

    .vp-bullets li {
        line-height: 1.2;
    }

.side-sub {
    margin-bottom: .25rem;
}

.wrapper {
    min-height: clamp(500px, 60vh, 700px);
}

/* existing file below */
/* ---- Roles Admin table layout fixes ---- */
.roles-admin .brand-table.compact {
    table-layout: fixed;
}

.roles-admin .user-col {
    width: 28%;
    max-width: 0; /* enable flex shrink for ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roles-admin .email-col {
    width: 14rem; /* fixed width so it won't be overlapped */
    white-space: nowrap;
}

.roles-admin .roles-col {
    width: auto;
}

.roles-admin .addrole-col {
    width: 28%;
}

@media (max-width: 992px) {
    .roles-admin .user-col {
        width: 40%;
    }

    .roles-admin .email-col {
        width: 8.5rem;
    }

    .roles-admin .addrole-col {
        width: 40%;
    }
}

@media (max-width: 768px) {
    /* stacked mode already handled by existing responsive rules */
    .roles-admin .user-col,
    .roles-admin .email-col,
    .roles-admin .roles-col,
    .roles-admin .addrole-col {
        width: 100%;
        max-width: none;
    }
}

/* Flex utilities */
.flex {
    display: flex
}

.flex-row {
    display: flex;
    flex-direction: row
}

.flex-col {
    display: flex;
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-1 {
    flex: 1 1 auto
}

.items-center {
    align-items: center
}

.items-end {
    align-items: flex-end
}

.justify-between {
    justify-content: space-between
}

.justify-end {
    justify-content: flex-end
}

.gap-0 {
    gap: 0
}

.gap-xs {
    gap: .25rem
}

.gap-sm {
    gap: .5rem
}

/* Brand look */
:root {
    --brand-bg1: #c9a995;
    --brand-bg2: #8a4b3a;
    --brand-card1: #805241;
    --brand-card2: #5a2f24;
    --brand-accent: #d62828; /* barras */
    /* Header gradient defaults */
    --header-grad1: var(--brand-bg1);
    --header-grad2: #d0b1a0;
    --summary-header2: #cfb29f;
}

/* Page-level theme overrides */
.nps-page {
    --header-grad2: var(--brand-bg2);
}

    /* Keep the NPS overview card away from the right edge */
    .nps-page .nps-overview {
        margin-inline: 3rem;
    }

.processos-page {
    --summary-header2: var(--brand-bg2);
}

body {
    background: linear-gradient(180deg,var(--brand-bg1),#b88f7a) fixed;
}

/* Global header look */
.brand-header {
    background: linear-gradient(180deg,var(--header-grad1),var(--header-grad2));
    border-bottom: 1px solid rgba(0,0,0,.1);
    /* full-bleed: ocupar 100% da viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

    /* Zera gutter apenas dentro do header */
    .brand-header > .container-fluid {
        --bs-gutter-x: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Espaço vertical padronizado do conteúdo do header */
    .brand-header .summary-row {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

.brand-logo {
    height: 64px;
    width: auto
}

.brand-title {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: .5px
}

.brand-subtitle {
    font-size: 1.25rem;
    opacity: .9
}

.brand-header .brand-title, .brand-header .brand-subtitle {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* Header action button with icon and text on top (single canonical definition) */
.header-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: .6rem;
    padding: .35rem .5rem
}

.header-action .action-text {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1
}

.header-action .action-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: none !important;
}

.header-action:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border-color: rgba(255, 255, 255, .55)
}

/* let progress bar grow */
.overview-card {
    display: flex;
    align-items: center;
    gap: .75rem
}

.overview-card .progress-pipe {
        flex: 1 1 420px;
        min-width: 260px;
    }

.progress-pipe.pill {
    height: 32px
}

.progress-pipe .seg {
    font-size: 1.05rem
}

.card-warm {
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,.08), transparent 50%), radial-gradient(900px 600px at 90% 30%, rgba(255,255,255,.06), transparent 55%), linear-gradient(180deg, var(--brand-card1), var(--brand-card2));
    color: #fff;
    border: 0;
}

.brand-section {
    font-weight: 700
}

.chart-box {
    position: relative;
    width: 100%;
    height: 320px
}

    .chart-box.tall {
        height: 520px
    }

/* --- Primary buttons branding (unify across cards, lists and clear buttons) --- */
/* Use same appearance for primary actions in warm cards and content cards */
.card-warm .btn-primary,
.content-card .btn-primary,
.responses-panel .btn-primary,
/* also use the same look for any clear button, including those styled as brand-ghost */
.clear-btn,
.brand-ghost.btn.clear-btn {
    background: var(--brand-card2) !important;
    border-color: rgba(255,255,255,.35) !important;
    color: #fff !important;
}

.card-warm .btn-primary:hover,
.content-card .btn-primary:hover,
.responses-panel .btn-primary:hover,
.clear-btn:hover,
.brand-ghost.btn.clear-btn:hover {
    background: var(--brand-card1) !important;
    color: #fff !important;
}

.responses-panel {
    max-height: 550px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .5rem;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
}

.resp-item {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.25)
}

.resp-meta {
    font-size: .85rem;
    opacity: .9
}

.resp-text {
    font-size: 1.12rem;
    line-height: 1.35
}

.brand-list {
    columns: 2
}

.scroll-panel {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .375rem;
    background: rgba(0,0,0,.05)
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2
}

scroll-panel table {
    margin-bottom: 0
}

.scroll-panel tbody tr td {
    vertical-align: top
}

:root {
    --bar-color: var(--brand-accent)
}

.brand-table {
    color: #fff
}

    .brand-table thead {
        background: rgba(255,255,255,.08)
    }

    .brand-table th {
        font-weight: 700
    }

    .brand-table td, .brand-table th {
        border-color: rgba(255,255,255,.15) !important
    }

    .brand-table tr.resp-item {
        border-bottom: 1px solid rgba(255,255,255,.25)
    }

    .brand-table.compact th, .brand-table.compact td {
        padding: .5rem .75rem
    }

    .brand-table.compact {
        border-collapse: separate;
        border-spacing: 0 10px
    }

        .brand-table.compact tbody tr td:first-child {
            border-radius: .6rem 0 0 .6rem;
            border-right: 1px solid rgba(255,255,255,.12)
        }

        .brand-table.compact tbody tr td:last-child {
            border-radius: 0 .6rem .6rem 0
        }

        .brand-table.compact tbody tr:hover td {
            background: rgba(255,255,255,.085)
        }

.info-grid {
    display: flex;
    flex-direction: column;
    row-gap: .35rem
}

.info-tile {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 1px 0 rgba(0,0,0,.15) inset;
    border-radius: .5rem;
    padding: .35rem .6rem
}

.tile-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .85;
    margin-bottom: .15rem
}

.tile-value {
    font-weight: 700
}

.chip {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff
}

.brand-table.compact thead th {
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(2px);
    position: sticky;
    top: 0;
    z-index: 2
}

.brand-table, .brand-table th, .brand-table td, .brand-table .resp-text, .brand-table .meta-col, .brand-table .tile-label, .brand-table .tile-value {
    color: #fff !important;
}

.chip {
    color: #fff !important;
}

.responses-panel {
    max-height: 526px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .5rem;
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
}

.brand-table.compact {
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: fixed;
    width: 100%;
}

    .brand-table.compact th:first-child, .brand-table .meta-col {
        width: 170px;
        min-width: 150px;
    }

    .brand-table.compact td:nth-child(2) {
        width: auto;
    }

.brand-table .resp-text {
    font-size: 1.12rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.brand-table.compact tbody tr td {
    background: rgba(255,255,255,.05);
    transition: background-color .15s ease;
}

    .brand-table.compact tbody tr td:first-child {
        border-radius: .6rem 0 0 .6rem;
        border-right: 1px solid rgba(255,255,255,.12);
    }

    .brand-table.compact tbody tr td:last-child {
        border-radius: 0 0 .6rem .6rem;
    }

.brand-table.compact tbody tr:hover td {
    background: rgba(255,255,255,.085)
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .6rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.2)
}

.chip {
    padding: .25rem .6rem;
    font-size: .85rem;
    border-radius: 999px
}

.date-controls .date-input {
    min-width: 9.5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff
}

    .date-controls .date-input::-webkit-calendar-picker-indicator {
        filter: invert(1)
    }

.date-controls .date-sep {
    color: #fff;
    opacity: .85;
    padding: 0 .3rem
}

.date-controls .clear-btn {
    white-space: nowrap;
    border-color: rgba(255,255,255,.5)
}

    .date-controls .clear-btn:hover {
        background: rgba(255,255,255,.15)
    }

.filters-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem
}

.date-controls {
    gap: .25rem
}

    .date-controls select.form-select {
        min-width: 6.2rem;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.25);
        color: #fff
    }

    .date-controls .segmented .btn {
        padding: .25rem .55rem;
        border-color: rgba(255,255,255,.45)
    }

        .date-controls .segmented .btn.active, .date-controls .segmented .btn:hover {
            background: rgba(255,255,255,.18);
            color: #fff;
            border-color: rgba(255,255,255,.7)
        }

.period-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: .5rem;
    padding: .35rem .5rem
}

    .period-toolbar .ptb-label {
        font-size: .85rem;
        opacity: .95;
        color: #fff
    }

    .period-toolbar select.form-select {
        min-width: 6.2rem;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.25);
        color: #fff
    }

    .period-toolbar .segmented .btn {
        padding: .25rem .55rem;
        border-color: rgba(255,255,255,.45)
    }

        .period-toolbar .segmented .btn.active, .period-toolbar .segmented .btn:hover {
            background: rgba(255,255,255,.18);
            color: #fff;
            border-color: rgba(255,255,255,.7)
        }

.card .card-title.brand-section {
    letter-spacing: .2px
}

canvas {
    image-rendering: auto
}

.card .btn-toolbar.ms-1, .date-controls.ms-1 {
    margin-left: .25rem
}

.card .clear-btn {
    margin-left: auto
}

/* --- Processos page: Topic tiles --- */
.topic-stack {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.info-tile.tile-title {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28)
}

    .info-tile.tile-title .tile-value {
        font-size: 1.05rem;
        letter-spacing: .2px
    }

.info-tile.tile-desc {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18)
}

.desc-text {
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
}

/* Compact table visual polish for 3-column layout */
.brand-table.compact thead th {
    border-bottom: 1px solid rgba(255,255,255,.2)
}

.brand-table.compact tbody tr td + td {
    border-left: 1px solid rgba(255,255,255,.1)
}

@media (max-width: 992px) {
    .brand-table.compact th[style*="width:220px"], .brand-table .meta-col {
        width: 180px;
        min-width: 160px
    }

    .brand-table.compact td:nth-child(3) {
        width: 45%
    }
}

@media (max-width: 768px) {
    .brand-table.compact {
        table-layout: auto
    }

        .brand-table.compact thead {
            display: none
        }

        .brand-table.compact tbody tr td {
            display: block;
            width: 100%;
            border-left: 0 !important
        }

            .brand-table.compact tbody tr td:first-child {
                border-radius: .6rem .6rem 0 0;
                border-right: 0
            }

            .brand-table.compact tbody tr td:last-child {
                border-radius: 0 0 .6rem .6rem
            }
}

.summary-header {
    background: linear-gradient(180deg,var(--header-grad1),var(--summary-header2));
    border-bottom: 1px solid rgba(0,0,0,.12)
}

.summary-row {
    min-height: 86px
}

.overview-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .8rem;
    padding: .5rem .65rem
}

.legend .leg-dot {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.5)
}

.legend .leg-label {
    font-size: .85rem;
    opacity: .95;
    margin-right: .35rem
}

.progress-pipe.pill {
    display: flex;
    align-items: stretch;
    width: 460px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25)
}

.progress-pipe .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    text-shadow: 0 1px 0 rgba(0,0,0,.25)
}

    .progress-pipe .seg span {
        padding: 0 .25rem
    }

.progress-pipe .seg-open {
    background: #DC3545;
    color: #fff
}

.progress-pipe .seg-inprog {
    background: #FFC107;
    color: #111
}

.progress-pipe .seg-done {
    background: #198754;
    color: #fff
}

.totals .tot-label {
    opacity: .9
}

.totals .tot-value {
    font-weight: 800
}

.summary-link {
    white-space: nowrap
}

/* NPS header overview meter */
.nps-overview {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .8rem;
    padding: .5rem .75rem
}

.nps-gauge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 72px;
    height: auto;
    max-height: none
}

.c-chart-gauge__needle-base, .c-chart-gauge__needle {
    fill: #ff3f3f
}

.c-chart-gauge__gradient-stop1 {
    stop-color: #DC3545
}

.c-chart-gauge__gradient-stop2 {
    stop-color: #FFC107
}

.c-chart-gauge__gradient-stop3 {
    stop-color: #FFC107
}

.c-chart-gauge__gradient-stop4 {
    stop-color: #198754
}

.c-chart-gauge__value {
    fill: #fff;
    font: bold 16px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    text-shadow: 0 1px 0 rgba(0,0,0,.25)
}

.nps-overview .legend .leg-label {
    font-size: .9rem
}

/* Force text to white inside the NPS overview card */
.nps-overview, .nps-overview .legend .leg-label, .nps-overview .totals, .nps-overview .totals .totals .tot-label, .nps-overview .totals .tot-value {
    color: #fff !important;
}

.info-help {
    position: relative;
    border: 0;
    background: transparent;
    color: #fff;
    line-height: 1;
    padding: .15rem .25rem;
    border-radius: .35rem
}

    .info-help .i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.45);
        font-weight: 900
    }

    .info-help .help-popover {
        position: absolute;
        right: 0;
        top: calc(100% + .35rem);
        min-width: 320px;
        max-width: 520px;
        z-index: 20;
        background: rgba(20,20,20,.9);
        color: #fff;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: .5rem;
        padding: .65rem .75rem;
        box-shadow: 0 8px 20px rgba(0,0,0,.35);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: all .15s ease
    }

    .info-help:hover .help-popover {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0)
    }

.help-popover .pop-title {
    font-weight: 800;
    margin-bottom: .35rem
}

.help-popover .pop-body {
    font-size: .9rem;
    line-height: 1.35
}

.help-popover ul {
    margin: .35rem 0 0 .9rem
}

.summary-header .legend .leg-label, .summary-header .totals, .summary-header .totals .tot-label, .summary-header .totals .tot-value {
    color: #fff
}

.brand-header .brand-title, .brand-header .brand-subtitle {
    color: #fff
}

.nps_overview .legend .leg-label, .nps_overview .totals, .nps_overview .totals .tot-label, .nps_overview .totals .tot-value {
    color: #fff
}

.progress-pipe .seg {
    color: #fff
}

.period-inline select.form-select {
    min-width: 6rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff
}

.period-inline .ptb-label {
    font-size: .85rem;
    opacity: .95;
    color: #fff
}

.period-inline .segmented .btn {
    padding: .25rem .55rem;
    border-color: rgba(255,255,255,.45)
}

    .period-inline .segmented .btn.active, .period-inline .segmented .btn:hover {
        background: rgba(255,255,255,.18);
        color: #fff;
        border-color: rgba(255,255,255,.7)
    }

.tools {
    gap: .75rem
}

    .tools .period-controls {
        gap: .6rem
    }

        .tools .period-controls .ptb-label {
            margin: 0 .25rem;
            color: #fff;
            opacity: .95
        }

        .tools .period-controls .segmented .btn {
            padding: .25rem .6rem;
            border-color: rgba(255,255,255,.45)
        }

        .tools .period-controls select.form-select {
            min-width: 6rem;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.25);
            color: #fff
        }

.nps-pop {
    max-width: 560px
}

    .nps-pop .pop-title {
        font-weight: 900;
        margin-bottom: .35rem
    }

    .nps-pop .pop-body {
        display: flex;
        flex-direction: column;
        gap: .5rem
    }

    .nps-pop .legend-row {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin: .15rem 0 .25rem
    }

    .nps-pop .legend-item {
        display: flex;
        align-items: center;
        gap: .4rem;
        color: #fff
    }

    .nps-pop .dot {
        display: inline-block;
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.6)
    }

    .nps-pop .dot-success-2 {
        background: linear-gradient(90deg,#0f9d58,#2fbf71)
    }

    .nps-pop .pill-success {
        background: #198754
    }

    .nps-pop .pill-warning {
        background: #FFC107;
        color: #1a1a1a;
        border-color: rgba(0,0,0,.15)
    }

    .nps-pop .pill-danger {
        background: #DC3545
    }

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap');

:root {
    --login-prim: #2fbf71;
    --login-grad1: var(--brand-card1);
    --login-grad2: var(--brand-card2);
}

.login-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wrapper {
    background: linear-gradient(to bottom right, var(--login-grad1), var(--login-grad2));
    position: relative;
    width: 100%;
    max-width: 1100px;
    /* ocupar melhor a tela: altura responsiva em vez de fixa */
    min-height: clamp(500px, 60vh, 700px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}

    .wrapper.form-success .container h1 {
        transform: translateY(85px);
    }

    .wrapper .container {
        max-width: 680px;
        margin: 0 auto;
        /* mais respiro no topo e base, e não grudar links no rodapé */
        padding: clamp(56px, 6vh, 96px) 0 28px;
        /* preencher a altura do wrapper e centralizar verticalmente */
        height: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        text-align: center;
        color: #fff;
        font-family: 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }

        .wrapper .container h1 {
            font-size: clamp(40px, 5vw, 56px);
            font-weight: 200;
            transition: transform 1s ease-in-out;
            text-shadow: 0 1px 0 rgba(0,0,0,.25);
        }

/* Login page logo styling */
.login-logo {
    height: 200px;
    width: auto;
    margin-bottom: .75rem;
    /* Aumenta brilho, contraste e saturação para melhorar legibilidade sobre o fundo escuro */
    filter: brightness(1.35) contrast(1.15) saturate(1.4) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

@media (max-width: 768px) {
    .login-logo {
        height: 82px;
    }
}

.form {
    position: relative;
    z-index: 2;
    padding: 12px 0 0;
    min-width: -webkit-fill-available;
}

.login-input {
    display: block;
    width: min(420px, 90%);
    margin: 0 auto 10px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.2);
    color: #fff;
    text-align: center;
    font-size: 18px;
    transition: all .25s ease;
}

    .login-input:hover {
        background: rgba(255,255,255,.35);
    }

    .login-input:focus {
        outline: none;
        background: #fff;
        color: #111; /* texto preto ao digitar */
        caret-color: #111; /* cursor visível em fundo branco */
        width: min(460px, 95%);
    }

#login-button {
    display: inline-block;
    appearance: none;
    outline: 0;
    background: #000;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    border-radius: 10px;
    width: min(420px, 90%);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .25s ease;
}

    #login-button[disabled] {
        opacity: .65;
        cursor: not-allowed;
    }

    #login-button:hover:not([disabled]) {
        background: #111;
    }

.login-links {
    margin-top: 1.1rem; /* afasta um pouco da base do container */
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    align-items: center;
    justify-content: center;
    color: #fff;
}

    .login-links a {
        color: #fff;
        text-decoration: underline;
    }

    .login-links .remember {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        margin-right: .5rem;
    }

.bg-bubbles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .bg-bubbles li {
        position: absolute;
        list-style: none;
        display: block;
        width: 40px;
        height: 40px;
        background-color: rgba(255,255,255,.15);
        bottom: -160px;
        animation: square 25s linear infinite;
        border-radius: 6px;
    }

        .bg-bubbles li:nth-child(1) {
            left: 10%;
        }

        .bg-bubbles li:nth-child(2) {
            left: 20%;
            width: 80px;
            height: 80px;
            animation-delay: 2s;
            animation-duration: 17s;
        }

        .bg-bubbles li:nth-child(3) {
            left: 25%;
            animation-delay: 4s;
        }

        .bg-bubbles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-duration: 22s;
            background-color: rgba(255,255,255,.25);
        }

        .bg-bubbles li:nth-child(5) {
            left: 70%;
        }

        .bg-bubbles li:nth-child(6) {
            left: 80%;
            width: 120px;
            height: 120px;
            animation-delay: 3s;
            background-color: rgba(255,255,255,.20);
        }

        .bg-bubbles li:nth-child(7) {
            left: 32%;
            width: 160px;
            height: 160px;
            animation-delay: 7s;
        }

        .bg-bubbles li:nth-child(8) {
            left: 55%;
            width: 20px;
            height: 20px;
            animation-delay: 15s;
            animation-duration: 40s;
        }

        .bg-bubbles li:nth-child(9) {
            left: 25%;
            width: 10px;
            height: 10px;
            animation-delay: 2s;
            animation-duration: 40s;
            background-color: rgba(255,255,255,.30);
        }

        .bg-bubbles li:nth-child(10) {
            left: 90%;
            width: 160px;
            height: 160px;
            animation-delay: 11s;
        }

@keyframes square {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-700px) rotate(600deg);
    }
}
/* --- Manage (Account) area theme --- */
.manage-header .brand-title, .manage-header .brand-subtitle {
    color: #fff
}

.manage-header-container {
    padding-left: 56px
}
/* room for hamburger */

.manage-menu {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: .6rem;
}

.manage-nav {
    list-style: none;
    margin: 0;
    padding: .25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.manage-link {
    display: block;
    padding: .5rem .75rem;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: .5rem;
    color: #fff;
    background: rgba(255,255,255,.08);
    text-decoration: none
}

    .manage-link:hover {
        background: rgba(255,255,255,.14);
        color: #fff
    }

    .manage-link.active {
        background: rgba(255,255,255,.2);
        border-color: rgba(255,255,255,.55);
        color: #fff
    }

.content-card {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: .6rem;
}

    .content-card h3, .content-card h2, .content-card label, .content-card p, .content-card .text-danger {
        color: #fff
    }

    .content-card .form-control, .content-card .form-select {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.25);
        color: #fff
    }

        .content-card .form-control:focus, .content-card .form-select:focus {
            box-shadow: 0 0 0 .1rem rgba(255,255,255,.2)
        }

    .content-card .btn-primary {
        background: var(--brand-card2);
        border-color: rgba(255,255,255,.35)
    }

        .content-card .btn-primary:hover {
            background: var(--brand-card1)
        }
/* Force-hide Blazor error banner (avoid intrusive message). Remove if you want default banner. */
#blazor-error-ui {
    display: none !important;
}

    #blazor-error-ui .reload, #blazor-error-ui .dismiss {
        display: none !important;
    }

.responses-panel .form-control, .responses-panel .form-select {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff
}

    .responses-panel .form-control::placeholder {
        color: rgba(255,255,255,.8)
    }

.responses-panel .btn-outline-primary, .responses-panel .btn-outline-success {
    color: #fff;
    border-color: rgba(255,255,255,.45)
}

    .responses-panel .btn-outline-primary:hover, .responses-panel .btn-outline-success:hover {
        background: rgba(255,255,255,.18);
        color: #fff;
        border-color: rgba(255,255,255,.7)
    }

.responses-panel .badge.text-bg-secondary {
    background-color: rgba(255,255,255,.28) !important;
    color: #fff
}

/* Fix: ensure select dropdown options are readable on dark theme */
.responses-panel .form-select option,
.content-card .form-select option,
.period-toolbar select.form-select option,
.date-controls select.form-select option,
.period-inline select.form-select option,
.tools .period-controls select.form-select option {
    color: #111 !important; /* dark text for options list */
    background-color: #fff !important; /* keep dropdown list background white */
}

    /* Highlighted/selected option contrast */
    .responses-panel .form-select option:checked,
    .content-card .form-select option:checked,
    .period-toolbar select.form-select option:checked,
    .date-controls select.form-select option:checked,
    .period-inline select.form-select option:checked,
    .tools .period-controls select.form-select option:checked {
        color: #fff !important;
        background-color: #6c757d !important; /* Bootstrap secondary tone */
    }

.content-card input:-webkit-autofill,
.content-card input:-webkit-autofill:hover,
.content-card input:-webkit-autofill:focus,
.content-card input:autofill,
.content-card textarea:-webkit-autofill,
.content-card select:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s; /* prevent yellow flash */
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.08) inset !important;
    box-shadow: 0 0 0px 1000px rgba(255,255,255,.08) inset !important;
}

/* Prevent automatic selection / focus ring on header titles */
.brand-header .brand-title,
.manage-area .brand-title,
.login-wrap h1 {
    user-select: none;
    -webkit-user-select: none;
}

    .brand-header .brand-title:focus,
    .brand-header .brand-title:focus-visible,
    .manage-area .brand-title:focus,
    .manage-area .brand-title:focus-visible,
    .login-wrap h1:focus,
    .login-wrap h1:focus-visible {
        outline: none !important;
    }
/* --- custom metric enhancements (login) --- */
.metric-pill.metric-nps {
    min-width: 200px;
    padding: .65rem .8rem;
}

.metric-pill.metric-proc {
    min-width: 170px;
}

.metric-pill .nps-line {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .5px;
    flex-wrap: wrap;
}

.metric-pill .nps-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(255,255,255,.18);
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}

.metric-pill .nps-value {
    font-size: 1.15rem;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.metric-pill .nps-arrow {
    opacity: .65;
    font-size: .9rem;
}

.metric-pill .nps-delta {
    margin-top: .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 999px;
    display: inline-block;
    background: rgba(255,255,255,.15);
}

.metric-pill .nps-caption {
    margin-top: .2rem;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .75;
    font-weight: 600;
}

.metric-pill .nps-delta.delta-pos {
    background: linear-gradient(135deg,#1e824c,#2fbf71);
    color: #fff;
}

.metric-pill .nps-delta.delta-neg {
    background: linear-gradient(135deg,#b31217,#e52d27);
    color: #fff;
}

.metric-pill .nps-delta.delta-zero {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* prevent wrapping cut */
.metric-pill span {
    white-space: nowrap;
}
.metric-pill.metric-nps {
    min-width: 200px;
    padding: .65rem .8rem;
}

.metric-pill.metric-proc {
    min-width: 170px;
}

.metric-pill .nps-line {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .5px;
    flex-wrap: wrap;
}

.metric-pill .nps-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(255,255,255,.18);
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}

.metric-pill .nps-value {
    font-size: 1.15rem;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.metric-pill .nps-arrow {
    opacity: .65;
    font-size: .9rem;
}

.metric-pill .nps-delta {
    margin-top: .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 999px;
    display: inline-block;
    background: rgba(255,255,255,.15);
}

.metric-pill .nps-caption {
    margin-top: .2rem;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .75;
    font-weight: 600;
}

.metric-pill .nps-delta.delta-pos {
    background: linear-gradient(135deg,#1e824c,#2fbf71);
    color: #fff;
}

.metric-pill .nps-delta.delta-neg {
    background: linear-gradient(135deg,#b31217,#e52d27);
    color: #fff;
}

.metric-pill .nps-delta.delta-zero {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* prevent wrapping cut */
.metric-pill span {
    white-space: nowrap;
}
.metric-pill.metric-nps {
    min-width: 200px;
    padding: .65rem .8rem;
}

.metric-pill.metric-proc {
    min-width: 170px;
}

.metric-pill .nps-line {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .5px;
    flex-wrap: wrap;
}

.metric-pill .nps-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(255,255,255,.18);
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}

.metric-pill .nps-value {
    font-size: 1.15rem;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.metric-pill .nps-arrow {
    opacity: .65;
    font-size: .9rem;
}

.metric-pill .nps-delta {
    margin-top: .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 999px;
    display: inline-block;
    background: rgba(255,255,255,.15);
}

.metric-pill .nps-caption {
    margin-top: .2rem;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .75;
    font-weight: 600;
}

.metric-pill .nps-delta.delta-pos {
    background: linear-gradient(135deg,#1e824c,#2fbf71);
    color: #fff;
}

.metric-pill .nps-delta.delta-neg {
    background: linear-gradient(135deg,#b31217,#e52d27);
    color: #fff;
}

.metric-pill .nps-delta.delta-zero {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* prevent wrapping cut */
.metric-pill span {
    white-space: nowrap;
}
/* login metrics panel refined */
.metrics-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 1rem 1.1rem;
    width: 100%;
}

.metric-block {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .85rem .95rem .75rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: .9rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px -4px rgba(0,0,0,.35);
    backdrop-filter: blur(4px) saturate(120%);
    min-height: 136px;
}

    .metric-block .metric-header {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        opacity: .85;
        margin-bottom: .35rem;
    }

    .metric-block .metric-foot {
        margin-top: auto;
        font-size: .58rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        opacity: .65;
        font-weight: 600;
    }

    .metric-block .metric-loading {
        font-size: .75rem;
        opacity: .8;
    }

.nps-body {
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

    .nps-body .pair {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }

    .nps-body .lbl {
        font-size: .55rem;
        font-weight: 700;
        letter-spacing: .08em;
        opacity: .75;
        text-transform: uppercase;
        background: rgba(255,255,255,.18);
        padding: 2px 6px;
        border-radius: 6px;
    }

    .nps-body .val {
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }

    .nps-body .arrow {
        font-size: 1.1rem;
        font-weight: 600;
        opacity: .6;
        align-self: center;
    }

    .nps-body .delta {
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .09em;
        margin-left: auto;
        align-self: flex-start;
    }

.metric-main {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    margin-top: .2rem;
    margin-bottom: .35rem;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.metric-block.delta-pos .metric-main {
    color: #2fbf71;
}

.delta-pos {
    background: linear-gradient(135deg,#1e824c,#2fbf71) !important;
    color: #fff !important;
}

.delta-neg {
    background: linear-gradient(135deg,#b31217,#e52d27) !important;
    color: #fff !important;
}

.delta-zero {
    background: rgba(255,255,255,.25) !important;
    color: #fff !important;
}

/* bullet list spacing tweak */
.vp-bullets {
    margin-top: 1.25rem;
}

    .vp-bullets li {
        padding-left: 1rem;
    }

/* Inserted custom overrides for login layout tweaks */
.remember-standalone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: min(420px,90%);
    margin: .15rem auto .65rem;
    font-size: .85rem;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

    .remember-standalone input[type=checkbox] {
        cursor: pointer;
    }

.login-links-secondary {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: min(480px,95%);
    margin-top: .85rem;
}

    .login-links-secondary a {
        font-size: .78rem;
        white-space: nowrap;
    }
/* Horizontal layout for secondary links */
.login-links-secondary {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: min(480px,95%);
    margin-top: .85rem;
}

    .login-links-secondary a {
        font-size: .78rem;
        white-space: nowrap;
    }
        /* Optional separators (accessible) */
        .login-links-secondary a + a:before {
            content: "•";
            color: rgba(255,255,255,.55);
            margin-right: .85rem;
            font-size: .6rem;
            vertical-align: middle;
        }

        .login-links-secondary a + a {
            margin-left: .2rem;
        }
/* Softer blended logo plate */
.logo-plate {
    position: relative;
    padding: .9rem 1.4rem;
    border-radius: 1.25rem;
    background: rgba(20,15,15,.42);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px -12px rgba(0,0,0,.65), 0 4px 14px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22);
    overflow: hidden;
}

    .logo-plate:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%), radial-gradient(circle at 70% 75%, rgba(255,255,255,.12), rgba(255,255,255,0) 65%), linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%);
        mix-blend-mode: screen;
        pointer-events: none;
        opacity: .85;
    }

    .logo-plate:after {
        content: "";
        position: absolute;
        inset: -18%;
        background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
        filter: blur(22px);
        opacity: .55;
        pointer-events: none;
        z-index: -1;
    }

    .logo-plate .login-logo {
        height: 180px;
        filter: brightness(1.6) contrast(1.55) saturate(1.55) drop-shadow(0 3px 10px rgba(0,0,0,.75));
        transition: filter .3s;
    }

    .logo-plate:hover .login-logo {
        filter: brightness(1.68) contrast(1.6) saturate(1.65) drop-shadow(0 4px 12px rgba(0,0,0,.8));
    }

@media (max-width: 768px) {
    .logo-plate .login-logo {
        height: 98px;
    }
}

/* Horizontal secondary links with uniform spacing and dot separators */
.login-links-secondary {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.25rem; /* uniform gap */
    justify-content: center;
    align-items: center;
    width: min(520px,96%);
    margin-top: .95rem;
    padding: .15rem 0 0;
}

    .login-links-secondary a {
        display: inline-flex;
        align-items: center;
        font-size: .78rem;
        line-height: 1;
        padding: 0 .15rem;
        white-space: nowrap;
        position: relative;
        text-decoration: underline;
        opacity: .9;
        transition: opacity .2s;
    }

        .login-links-secondary a:hover {
            opacity: 1;
        }

        .login-links-secondary a:not(:first-child)::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
            box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 4px rgba(255,255,255,.45);
            margin-right: .55rem;
        }

        /* Remove earlier bullet styling side-effects */
        .login-links-secondary a + a:before {
            content: none;
        }

        .login-links-secondary a + a {
            margin-left: 0;
        }

        /* --- Overrides (login adjustments v4) --- */
        /* Remove any bullet/separator pseudo styles */
        .login-links-secondary a:not(:first-child)::before {
            display: none !important;
            content: none !important;
        }

.login-links-secondary {
    gap: 1.15rem;
}
.register-link {
    position: relative;
    background: linear-gradient(135deg,#2fbf71,#199354);
    color: #fff !important;
    padding: .4rem .9rem;
    border-radius: .7rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.18) inset;
    transition: background .25s, transform .15s, box-shadow .25s;
    line-height: 1.05;
}

    .register-link:hover {
        background: linear-gradient(135deg,#32c777,#21a261);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px -6px rgba(0,0,0,.6), 0 4px 10px -4px rgba(0,0,0,.55);
    }

    .register-link:active {
        transform: translateY(0);
    }
/* Keep other links simple */
.login-links-secondary a {
    text-decoration: underline;
}

    .login-links-secondary a.register-link {
        text-decoration: none;
    }
/* --- Overrides (login adjustments v5 register link) --- */
.register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-card1) 0%, var(--brand-accent) 95%);
    color: #fff !important;
    padding: .55rem 1.15rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .25px;
    text-decoration: none !important;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
    border: 1px solid rgba(255,255,255,.22);
    line-height: 1.1;
    min-width: 110px;
    transition: background .3s, transform .18s, box-shadow .3s;
}

    .register-link:hover {
        background: linear-gradient(135deg, var(--brand-card2) 0%, #bf1f1f 95%);
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -10px rgba(0,0,0,.7), 0 4px 10px -4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
    }

    .register-link:active {
        transform: translateY(0);
        box-shadow: 0 4px 10px -4px rgba(0,0,0,.6) inset;
    }
/* --- Overrides (login adjustments v6 logo clarity) --- */
.logo-plate .login-logo {
    /* Base state now equal or stronger than antigo hover */
    filter: brightness(1.78) contrast(1.7) saturate(1.8) drop-shadow(0 4px 12px rgba(0,0,0,.85)) !important;
}

.logo-plate:hover .login-logo {
    /* Pequeno incremento sutil */
    filter: brightness(1.84) contrast(1.75) saturate(1.9) drop-shadow(0 5px 14px rgba(0,0,0,.9)) !important;
}

/* --- Overrides (metric value highlight v2: remove glow, keep shadow) --- */
.nps-block .val {
    text-shadow: 0 3px 8px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.55) !important;
}

    .nps-block .val::before {
        display: none !important;
    }

.proc-block .metric-main {
    text-shadow: 0 4px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.55) !important;
}

    .proc-block .metric-main::before {
        display: none !important;
    }
/* --- Auth buttons (login primary/secondary unified) --- */
.auth-buttons {
    display: flex;
    gap: .9rem;
    width: min(420px,90%);
    margin: .25rem auto .35rem;
}

.auth-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: .9rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .25px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .25s, box-shadow .25s, transform .18s;
    position: relative;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}

    .auth-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .auth-btn.auth-primary {
        background: #000;
        color: #fff;
    }

        .auth-btn.auth-primary:hover:not([disabled]) {
            background: #111;
        }

    .auth-btn.auth-secondary {
        /* remove gradient, use neutral outline style */
        background: rgba(255,255,255,.15) !important;
        color: #fff;
        border: 1px solid rgba(255,255,255,.35);
}

    .auth-btn.auth-secondary:hover {
        background: rgba(255,255,255,.25) !important;
        transform: translateY(-2px);
    }

    .auth-btn:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px -6px rgba(0,0,0,.6) inset, 0 1px 2px rgba(0,0,0,.4);
    }

    .auth-btn[disabled] {
        opacity: .65;
        cursor: not-allowed;
    }

.auth-support {
    width: min(420px,90%);
    margin: .25rem auto 0;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

    .auth-support .forgot-link {
        font-size: .78rem;
        color: #fff;
        text-decoration: underline;
        opacity: .9;
    }

        .auth-support .forgot-link:hover {
            opacity: 1;
        }
/* Remove antigo bloco secundário */
.login-links-secondary {
    display: none;
}

/* --- Overrides (login width expansion) --- */
/* Aumentar largura dos campos de texto e grupo de botões sem alterar restante do layout */
.login-input {
    width: min(600px,95%) !important;
}

    .login-input:focus {
        width: min(640px,97%) !important;
    }

.auth-buttons {
    width: min(600px,95%) !important;
}
.auth-support {
    width: min(600px,95%) !important;
    justify-content: center !important;
    text-align: center !important;
}

    .auth-support .forgot-link {
        margin: 0 auto;
        display: inline-block;
    }
/* Ajustar toggle de mostrar senha e hint de caps para nova largura */
.pw-toggle {
    right: calc(50% - min(600px,95%) / 2 + 8px) !important;
}

.caps-hint {
    right: calc(50% - min(600px,95%) / 2) !important;
}
/* Opcional: harmonizar largura do botão de submit isolado (#login-button) caso usado fora de .auth-buttons */
#login-button {
    width: 100%;
}

/* --- Login input color overrides (definitive) --- */
/* Garante branco em texto, placeholder, foco e autofill apenas na tela de login */
.login-wrap .login-input {
    color: #fff !important;
}

.login-wrap .login-input::placeholder,
.login-wrap .login-input::-webkit-input-placeholder,
.login-wrap .login-input::-moz-placeholder,
.login-wrap .login-input:-ms-input-placeholder,
.login-wrap .login-input::-ms-input-placeholder {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important; /* Firefox */
}

/* Mantém branco ao focar e remove inversão para fundo branco */
.login-wrap .login-input:focus {
    background: rgba(255,255,255,.28) !important;
    color: #fff !important;
    caret-color: #fff !important;
}

/* Ajusta autofill do navegador (Chrome/Edge/WebKit) para não amarelar e manter texto branco) */
.login-wrap .login-input:-webkit-autofill,
.login-wrap .login-input:-webkit-autofill:hover,
.login-wrap .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 9999s ease-in-out 0s !important; /* evita flash amarelo */
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.20) inset !important;
            box-shadow: 0 0 0px 1000px rgba(255,255,255,.20) inset !important;
    background-clip: content-box !important;
}