/*
  YogaDesk theme, on top of Bootstrap 5.3 (wwwroot/lib/bootstrap).
  Use the Bootstrap classes in the pages (https://getbootstrap.com/docs/5.3/); this file only holds the brand colours,
  the app's structure (sidebar and top bar) and its own components (number cards, timetable, printing).
  Dark mode is automatic (follows the system; see the start of _Layout.cshtml).
*/

/* ---------- Colours and typography ---------- */

:root,
[data-bs-theme=light] {
    --app-primaria: #357a5e;
    --app-primaria-escura: #2c6650;
    --app-primaria-suave: #e7f2ed;
    --app-sobre-primaria: #fff;
    --app-fundo: #f4f6f5;
    --app-lateral: #1e2b27;
    --app-lateral-texto: #b8c7c1;
    --app-lateral-ativo: #2a3c36;

    --bs-primary: var(--app-primaria);
    --bs-primary-rgb: 53, 122, 94;
    --bs-primary-bg-subtle: var(--app-primaria-suave);
    --bs-primary-border-subtle: #b9d9cb;
    --bs-primary-text-emphasis: #1f4a39;
    --bs-link-color: var(--app-primaria);
    --bs-link-color-rgb: 53, 122, 94;
    --bs-link-hover-color: var(--app-primaria-escura);
    --bs-link-hover-color-rgb: 44, 102, 80;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
    --bs-focus-ring-color: rgba(53, 122, 94, .25);
}

[data-bs-theme=dark] {
    --app-primaria: #5fb48f;
    --app-primaria-escura: #74c39f;
    --app-primaria-suave: #1a2e26;
    --app-sobre-primaria: #0f1f18;
    --app-fundo: #151a1c;
    --app-lateral: #101416;
    --app-lateral-texto: #9fb0aa;
    --app-lateral-ativo: #1d2a26;

    --bs-body-bg: #1d2326;
    --bs-body-bg-rgb: 29, 35, 38;
    --bs-tertiary-bg: #232a2d;
    --bs-border-color: #2e373b;
    --bs-primary: var(--app-primaria);
    --bs-primary-rgb: 95, 180, 143;
    --bs-primary-bg-subtle: var(--app-primaria-suave);
    --bs-primary-border-subtle: #2c4a3d;
    --bs-primary-text-emphasis: #9fd6bd;
    --bs-link-color: var(--app-primaria);
    --bs-link-color-rgb: 95, 180, 143;
    --bs-link-hover-color: var(--app-primaria-escura);
    --bs-link-hover-color-rgb: 116, 195, 159;
    --bs-focus-ring-color: rgba(95, 180, 143, .25);
}

body {
    background-color: var(--app-fundo);
}

/* Links without underline; underlined on hover (except buttons, menus and cards). */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn-link,
.btn:hover,
.list-group-item:hover,
.sidebar-link:hover,
.sidebar-marca:hover,
.dropdown-item:hover,
.card:hover,
.alert:hover,
.segmentos a:hover,
.slot:hover,
.dia-cel:hover,
.cal-head .th:hover {
    text-decoration: none;
}

/* Buttons and fields in the brand colour (Bootstrap doesn't tie them to --bs-primary). */
.btn-primary {
    --bs-btn-color: var(--app-sobre-primaria);
    --bs-btn-bg: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-color: var(--app-sobre-primaria);
    --bs-btn-hover-bg: var(--app-primaria-escura);
    --bs-btn-hover-border-color: var(--app-primaria-escura);
    --bs-btn-active-color: var(--app-sobre-primaria);
    --bs-btn-active-bg: var(--app-primaria-escura);
    --bs-btn-active-border-color: var(--app-primaria-escura);
    --bs-btn-disabled-bg: var(--app-primaria);
    --bs-btn-disabled-border-color: var(--app-primaria);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-color: var(--app-sobre-primaria);
    --bs-btn-hover-bg: var(--app-primaria);
    --bs-btn-hover-border-color: var(--app-primaria);
    --bs-btn-active-color: var(--app-sobre-primaria);
    --bs-btn-active-bg: var(--app-primaria);
    --bs-btn-active-border-color: var(--app-primaria);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-primaria);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--app-primaria);
    border-color: var(--app-primaria);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--app-primaria);
    color: var(--app-sobre-primaria);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.25em;
}

.btn .icon {
    margin-right: .35rem;
}

.btn-icon .icon {
    margin-right: 0;
}

/* Icon-only button, the same height as normal buttons. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(1.5em + .75rem + 2px);
    height: calc(1.5em + .75rem + 2px);
    padding: 0;
}

.btn-sm.btn-icon {
    width: calc(1.5em + .5rem + 2px);
    height: calc(1.5em + .5rem + 2px);
}

/* A wrong checkbox or switch: the message comes after its label, not between the box and the label
   (FieldErrorTagHelper writes it right after the input). */
.form-check:has(> .is-invalid) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Bootstrap floats the box into the left padding; in a flex row the extra margin keeps the label where it was. */
.form-check:has(> .is-invalid) > .form-check-input {
    margin-right: .5em;
}

.form-check:has(> .is-invalid) > .form-check-label {
    flex: 1;
}

.form-check > .invalid-feedback {
    order: 1;
    flex-basis: 100%;
}

/* ---------- Structure: sidebar + content ---------- */

.app {
    display: flex;
    min-height: 100vh;
}

.app-conteudo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar {
    --bs-offcanvas-width: 264px;
    color: var(--app-lateral-texto);
}

.sidebar-interior {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--app-lateral);
}

@media (min-width: 992px) {
    /* The sidebar's dark background goes to the end of the page, even on long pages. */
    .app {
        background: linear-gradient(to right, var(--app-lateral) 248px, transparent 248px);
    }

    .sidebar {
        width: 248px;
        flex-shrink: 0;
    }

    .sidebar-interior {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.sidebar-marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

.sidebar-marca:hover {
    color: #fff;
}

.sidebar-marca img.brand-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border-radius: .625rem;
}

.sidebar-marca img {
    height: 36px;
    max-width: 72px;
    object-fit: contain;
    border-radius: .375rem;
    background: #fff;
    padding: 2px;
}

.marca-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: .625rem;
    background: var(--app-primaria);
    color: var(--app-sobre-primaria);
    font-weight: 800;
    flex-shrink: 0;
}

.sidebar-nav {
    padding: .5rem .75rem 1.5rem;
}

.sidebar-titulo {
    margin: 1.25rem .75rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: .5rem;
    color: var(--app-lateral-texto);
    text-decoration: none;
    font-weight: 500;
}

.sidebar-link:hover {
    color: #fff;
    background-color: var(--app-lateral-ativo);
}

.sidebar-link.active {
    color: #fff;
    background-color: var(--app-lateral-ativo);
    box-shadow: inset 3px 0 0 var(--app-primaria);
}

.sidebar .btn-close {
    filter: invert(1);
}

.topo {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 60px;
    padding: .5rem 1rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

@media (min-width: 992px) {
    .topo {
        padding: .5rem 2rem;
    }
}

.seletor-ano {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.seletor-ano .form-select {
    width: auto;
    font-weight: 600;
}

.btn-utilizador {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 0;
    background: none;
    color: inherit;
    padding: .25rem;
    border-radius: .5rem;
    text-align: left;
    line-height: 1.2;
}

.btn-utilizador:hover {
    background-color: var(--bs-tertiary-bg);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.pagina {
    width: 100%;
    max-width: 1280px;
    padding: 1.5rem 1rem 3rem;
}

@media (min-width: 992px) {
    .pagina {
        padding: 2rem 2rem 3rem;
    }
}

.aviso-subscricao,
.feedback-alert {
    margin: 1rem 1rem 0;
}

@media (min-width: 992px) {
    .aviso-subscricao,
    .feedback-alert {
        margin: 1.5rem 2rem 0;
    }
}

/* Screenshot preview in the feedback window, and the screenshot in the backoffice. */
.feedback-preview {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.feedback-preview img {
    max-width: 60%;
    max-height: 180px;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

.feedback-screenshot {
    max-width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

/* Backoffice: unread feedback stands out with a bar in the brand colour and bold text. */
.feedback-unread > td:first-child {
    box-shadow: inset 3px 0 0 var(--app-primaria);
}

.feedback-unread .feedback-summary {
    font-weight: 600;
}

/* Keeps the client's line breaks. */
.feedback-message {
    white-space: pre-wrap;
}

/* Entry pages (login, sign-up, password), without a sidebar. */
.pagina-entrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.entrada {
    width: 100%;
    max-width: 440px;
}

.entrada-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
}

.entrada .card-body {
    padding: 2rem;
}

.entrada h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* Terms and privacy policy (Pages/Legal): a readable column of text. */
.pagina-legal {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.legal-topo {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.legal-topo .entrada-marca {
    justify-content: flex-start;
}

/* YogaDesk logo: the light version by default, the dark one in dark mode. */
.brand-logo {
    display: block;
    height: 52px;
    width: auto;
}

.brand-logo-dark,
[data-bs-theme="dark"] .brand-logo-light {
    display: none;
}

[data-bs-theme="dark"] .brand-logo-dark {
    display: block;
}

.legal-topo .brand-logo {
    height: 36px;
}

.legal-texto {
    line-height: 1.65;
}

.legal-texto h1 {
    font-size: 1.75rem;
    font-weight: 700;
}

.legal-texto h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2rem;
}

.legal-texto h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
}

.legal-rodape,
.links-legais {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    font-size: .85rem;
}

.legal-rodape {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.links-legais {
    justify-content: center;
    margin-top: 1rem;
}

.links-legais a,
.legal-rodape a {
    color: var(--bs-secondary-color);
}

/* At the bottom of the sidebar. */
.sidebar-legal {
    margin-top: auto;
    padding: 1rem 1.5rem;
    font-size: .75rem;
}

.sidebar-legal a {
    color: var(--app-lateral-texto);
    opacity: .7;
    margin-right: .75rem;
}

/* ---------- Components ---------- */

/* Subtle notices: card background and a coloured stripe on the left. */
.alert {
    --bs-alert-bg: var(--bs-body-bg);
    --bs-alert-border-color: var(--bs-border-color);
    border-left-width: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.alert-info,
.alert-success {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
    border-left-color: var(--app-primaria);
}

.alert-danger {
    border-left-color: var(--bs-danger);
}

.alert-warning {
    border-left-color: var(--bs-warning);
}

a.alert:hover {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

a.alert-info:hover,
a.alert-success:hover {
    border-left-color: var(--app-primaria);
}

a.alert-danger:hover {
    border-left-color: var(--bs-danger);
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-pretitle {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-cap-bg: transparent;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.secao-titulo {
    margin: 1.5rem 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Card with a number (home dashboard, payments, backoffice). */
.card-numero .card-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.numero-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: .625rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    flex-shrink: 0;
}

.numero-icone.perigo {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.numero-rotulo {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.numero-valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .card-numero .card-body {
        flex-direction: column;
        gap: .5rem;
        padding: .85rem;
    }

    .numero-icone {
        width: 34px;
        height: 34px;
    }

    .numero-valor {
        font-size: 1.15rem;
    }
}

.numero-nota {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

a.card-numero {
    color: inherit;
    text-decoration: none;
}

a.card-numero:hover {
    border-color: var(--app-primaria);
}

/* Choice buttons (e.g. Ativos / Inativos / Todos; Dia / Semana / Mês). */
.segmentos {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: .625rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.segmentos a {
    padding: .3rem .8rem;
    border-radius: .45rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
}

.segmentos a:hover {
    color: var(--bs-body-color);
}

.segmentos a.active {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

/* Navigation between months / weeks: ‹ outubro de 2026 › */
.navegador {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.navegador-titulo {
    min-width: 10rem;
    text-align: center;
    font-weight: 600;
}

.navegador-titulo::first-letter {
    text-transform: uppercase;
}

.barra-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.lista-vazia {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.texto-mensagem {
    white-space: pre-wrap;
    background-color: var(--bs-tertiary-bg);
    border-radius: .5rem;
    padding: .75rem 1rem;
}

.inativo {
    opacity: .6;
}

.logo-grande {
    height: 64px;
    max-width: 200px;
    object-fit: contain;
}

.table > :not(caption) > * > * {
    padding: .7rem 1rem;
}

.table-numeros td:not(:first-child),
.table-numeros th:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.table thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}

.card > .table-responsive > .table,
.card > .table {
    margin-bottom: 0;
}

tr.total td {
    font-weight: 700;
}

.list-group-item-action .icon-seta {
    color: var(--bs-secondary-color);
}

details > summary {
    cursor: pointer;
    color: var(--bs-link-color);
    font-weight: 500;
}

/* ---------- Timetable (calendar with blocks) ---------- */

.cal-scroll {
    overflow-x: auto;
}

.cal-grid.semana {
    min-width: 680px;
}

.cal-head,
.cal-body {
    display: grid;
    grid-template-columns: 48px repeat(var(--cols), 1fr);
}

.cal-head {
    border-bottom: 1px solid var(--bs-border-color);
}

.cal-head .th {
    padding: .5rem 0;
    text-align: center;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--bs-secondary-color);
    text-decoration: none;
    text-transform: uppercase;
}

.cal-head .th b {
    display: block;
    font-size: 1.15rem;
    color: var(--bs-body-color);
    text-transform: none;
}

.cal-head .th.hj b {
    display: flex;
    margin: .1rem auto 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--app-primaria);
    color: var(--app-sobre-primaria);
}

.cal-horas div {
    height: 48px;
    padding-right: .5rem;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    text-align: right;
    transform: translateY(-.5em);
}

.cal-col {
    position: relative;
    border-left: 1px solid var(--bs-border-color);
    background: repeating-linear-gradient(var(--bs-border-color) 0 1px, transparent 1px 48px);
}

.slot {
    position: absolute;
    overflow: hidden;
    padding: .2rem .4rem;
    border-left: 3px solid var(--app-primaria);
    border-radius: .375rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .75rem;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--bs-body-bg);
}

.slot:hover {
    filter: brightness(.97);
    color: var(--bs-primary-text-emphasis);
}

.mes-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color);
}

.mes-grid .dow {
    padding: .5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.mes-grid .vazio,
.dia-cel {
    min-height: 96px;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.dia-cel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: .35rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .8rem;
}

.dia-cel:hover {
    background-color: var(--bs-tertiary-bg);
}

.dia-cel .numero-dia {
    font-weight: 600;
}

.dia-cel.hj .numero-dia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--app-primaria);
    color: var(--app-sobre-primaria);
}

.ev {
    display: block;
    overflow: hidden;
    padding: 1px 4px;
    border-radius: .25rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .mes-grid .vazio,
    .dia-cel {
        min-height: 64px;
    }

    .ev {
        font-size: 0;
        height: 6px;
        padding: 0;
    }
}

/* ---------- Printing (attendance list) ---------- */

.print-table td,
.print-table th {
    border: 1px solid var(--bs-border-color);
    height: 28px;
    min-width: 44px;
}

@media print {
    .sidebar,
    .topo,
    .no-print,
    .aviso-subscricao {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .app {
        background: none;
    }

    .card {
        border: 0;
        box-shadow: none;
    }

    .card-body {
        padding: 0;
    }

    .pagina {
        max-width: none;
        padding: 0;
    }

    .print-table td,
    .print-table th {
        border: 1px solid #000;
    }
}

.min-w-0 {
    min-width: 0;
}

/* ---------- A client's dashboard (backoffice): received per month ---------- */

.barra-mes {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
}

.barra-mes-rotulo {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.barra-mes-trilho {
    position: relative;
    height: 10px;
    border-radius: 4px;
    background-color: var(--bs-tertiary-bg);
}

.barra-mes-faturado,
.barra-mes-recebido {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
}

.barra-mes-faturado {
    background-color: var(--app-primaria);
    opacity: .35;
}

.barra-mes-recebido {
    background-color: var(--app-primaria);
}

.barra-mes-valor {
    min-width: 9rem;
    text-align: right;
    font-size: .85rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .barra-mes-valor {
        min-width: 0;
    }
}

/* ---------- Plan comparison table ---------- */

.tabela-planos th:not(:first-child),
.tabela-planos td:not(:first-child) {
    min-width: 7rem;
}

.tabela-planos .plano-atual {
    --bs-table-bg: var(--bs-primary-bg-subtle);
}

/* ---------- "Not in your plan" (window and page, see _UpgradePrompt.cshtml) ---------- */

.upgrade-modal {
    overflow: hidden;
    border: 0;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .2);
}

.upgrade-pagina {
    max-width: 520px;
    overflow: hidden;
}

.upgrade-topo {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 1.25rem;
    background: radial-gradient(120% 140% at 50% 0%, var(--app-primaria-suave) 0%, transparent 70%);
}

.upgrade-topo .btn-close {
    position: absolute;
    top: .875rem;
    right: .875rem;
}

.upgrade-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--app-primaria);
    color: var(--app-sobre-primaria);
    box-shadow: 0 0 0 .5rem var(--app-primaria-suave);
}

.upgrade-icone .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.upgrade-corpo {
    padding: 0 1.75rem 1.5rem;
    text-align: center;
}

.upgrade-titulo {
    font-size: 1.25rem;
    font-weight: 650;
    margin-bottom: .375rem;
    text-wrap: balance;
}

.upgrade-plano {
    margin: 1.25rem 0 0;
    padding: 1rem 1.125rem;
    text-align: left;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-tertiary-bg);
}

.upgrade-plano-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.upgrade-preco {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--app-primaria);
    white-space: nowrap;
}

.upgrade-preco small {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.upgrade-tambem {
    margin-top: .875rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.upgrade-lista {
    display: grid;
    gap: .375rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.upgrade-lista li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.upgrade-lista .icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: .2rem;
    color: var(--app-primaria);
}

.upgrade-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem;
}

.upgrade-nota {
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* ---------- Two-factor authentication (MinhaConta/TwoFactor, Account/LoginTwoFactor) ---------- */

.otp-input {
    letter-spacing: .35em;
}

.two-factor-steps {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.two-factor-steps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.5rem 2.75rem;
}

.two-factor-steps > li:last-child {
    padding-bottom: 0;
}

.two-factor-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -.15rem;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .875rem;
    background: var(--app-primaria-suave);
    color: var(--app-primaria);
}

.two-factor-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: .75rem;
}

/* Always dark on white, also in dark mode: some apps can't read an inverted QR code. */
.qr-code {
    width: 184px;
    padding: 8px;
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.qr-code svg {
    display: block;
    width: 100%;
    height: auto;
}

.two-factor-status {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.two-factor-status-on {
    background: var(--app-primaria-suave);
    color: var(--app-primaria);
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .5rem 1.5rem;
    padding: 1rem 1rem 1rem 2.75rem;
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
    font-size: 1rem;
}