/* ============================================================================
   SiteRegional — direção C “Arco”.

   Uma folha só, em cima do Bootstrap 5 que o layout já carrega. Tokens e
   componentes vêm do canvas de telas (quadro “Sistema visual”) e de
   docs/telas-e-navegacao.md, seção 1 — mudança de cor, raio ou tamanho começa
   lá, não aqui.

   CELULAR PRIMEIRO: o que vale sem media query é o celular. A partir de
   992 px (o “lg” do Bootstrap) entra o desktop: menu na faixa azul em vez das
   abas embaixo, folhas viram diálogos.

   Os nomes de classe antigos (.sr-card, .sr-lista, .sr-tabela, .sr-badge…)
   continuam valendo — as views não precisaram mudar para pegar o visual novo.
   ========================================================================= */

:root {
    --sr-azul: #144A97;
    --sr-azul-escuro: #0B2F63;
    --sr-azul-claro: #E3ECF8;
    --sr-azul-hover: #0B2F63;

    /* O dourado do arco do logo. Uma ação de destaque por tela (Pagar,
       Credencial, Entrar) — se tudo for dourado, nada é. Texto sobre ele é
       quase preto: branco no dourado não passa contraste. */
    --sr-dourado: #F5B21B;
    --sr-dourado-texto: #1D2939;

    --sr-verde: #067647;
    --sr-verde-fundo: #DCFAE6;
    --sr-ambar: #93370D;
    --sr-ambar-fundo: #FEF0C7;
    --sr-vermelho: #B42318;
    --sr-vermelho-fundo: #FEE4E2;
    --sr-cinza: #344054;
    --sr-cinza-fundo: #F2F4F7;

    --sr-texto: #101828;
    --sr-texto-suave: #475467;
    --sr-borda: #EAECF0;
    --sr-borda-campo: #D0D5DD;
    --sr-fundo: #F5F7FB;
    --sr-superficie: #FFFFFF;
    --sr-noite: #0B1626;

    --sr-raio: 20px;
    --sr-raio-botao: 14px;
    --sr-raio-campo: 12px;
    --sr-sombra: 0 1px 2px rgba(16, 24, 40, .05);
    --sr-sombra-alta: 0 16px 36px -16px rgba(16, 24, 40, .28);

    --sr-fonte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Altura das abas fixas do celular — o corpo reserva este espaço embaixo
       para o último item da tela não ficar atrás delas. */
    --sr-abas-altura: 78px;

    /* Medidas do controle pequeno: .btn-sm e .sr-badge-controle aparecem lado
       a lado e precisam ser iguais. */
    --sr-controle-raio: 10px;
    --sr-controle-borda: 1px;
    --sr-controle-linha: 1.4;
    --sr-controle-sm-pad-y: .45rem;
    --sr-controle-sm-pad-x: .85rem;
    --sr-controle-sm-fonte: .875rem;
}

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    background: var(--sr-fundo);
    color: var(--sr-texto);
    font-family: var(--sr-fonte);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

a { color: var(--sr-azul); }
a:hover { color: var(--sr-azul-escuro); }

h1, h2, h3, h4, h5 { font-weight: 700; }

.text-muted { color: var(--sr-texto-suave) !important; }

/* ══════════════════════════════ Botões ══════════════════════════════
     .btn-primary            → a ação principal (azul)
     .sr-btn-destaque        → a UMA ação de destaque da tela (dourado)
     .btn-outline-secondary  → tudo o mais
     .btn-outline-danger     → destrutivo ou irreversível
   ═══════════════════════════════════════════════════════════════════ */

.btn {
    --bs-btn-border-radius: var(--sr-raio-botao);
    --bs-btn-border-width: var(--sr-controle-borda);
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-font-family: var(--sr-fonte);
    line-height: var(--sr-controle-linha);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-sm {
    --bs-btn-border-radius: var(--sr-controle-raio);
    --bs-btn-padding-x: var(--sr-controle-sm-pad-x);
    --bs-btn-padding-y: var(--sr-controle-sm-pad-y);
    --bs-btn-font-size: var(--sr-controle-sm-fonte);
}

.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-font-size: 1.05rem; }

.btn-primary {
    --bs-btn-bg: var(--sr-azul);
    --bs-btn-border-color: var(--sr-azul);
    --bs-btn-hover-bg: var(--sr-azul-escuro);
    --bs-btn-hover-border-color: var(--sr-azul-escuro);
    --bs-btn-active-bg: var(--sr-azul-escuro);
    --bs-btn-active-border-color: var(--sr-azul-escuro);
    --bs-btn-disabled-bg: var(--sr-azul);
    --bs-btn-disabled-border-color: var(--sr-azul);
}

.sr-btn-destaque {
    --bs-btn-color: var(--sr-dourado-texto);
    --bs-btn-bg: var(--sr-dourado);
    --bs-btn-border-color: var(--sr-dourado);
    --bs-btn-hover-color: var(--sr-dourado-texto);
    --bs-btn-hover-bg: #E3A10F;
    --bs-btn-hover-border-color: #E3A10F;
    --bs-btn-active-color: var(--sr-dourado-texto);
    --bs-btn-active-bg: #E3A10F;
    --bs-btn-active-border-color: #E3A10F;
    --bs-btn-font-weight: 800;
}

.btn-outline-secondary {
    --bs-btn-color: var(--sr-texto);
    --bs-btn-border-color: var(--sr-borda-campo);
    --bs-btn-bg: var(--sr-superficie);
    --bs-btn-hover-color: var(--sr-azul);
    --bs-btn-hover-bg: var(--sr-azul-claro);
    --bs-btn-hover-border-color: var(--sr-azul);
    --bs-btn-active-color: var(--sr-azul);
    --bs-btn-active-bg: var(--sr-azul-claro);
    --bs-btn-active-border-color: var(--sr-azul);
}

.btn-outline-danger {
    --bs-btn-color: var(--sr-vermelho);
    --bs-btn-border-color: #FECDCA;
    --bs-btn-bg: var(--sr-superficie);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sr-vermelho);
    --bs-btn-hover-border-color: var(--sr-vermelho);
    --bs-btn-active-bg: var(--sr-vermelho);
    --bs-btn-active-border-color: var(--sr-vermelho);
}

.btn-link { --bs-btn-color: var(--sr-azul); --bs-btn-font-weight: 700; }

.btn:focus-visible, .btn:active:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(20, 74, 151, .25);
    border-color: var(--sr-azul);
}

/* Ícones de traço, nunca emoji: herdam a cor do texto. */
.sr-icone {
    width: 1.15em;
    height: 1.15em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    vertical-align: -.2em;
}

/* ═════════════════════════════ Campos ═════════════════════════════ */

.form-control, .form-select {
    border-radius: var(--sr-raio-campo);
    border-color: var(--sr-borda-campo);
    min-height: 48px;
    font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom no campo */
}

textarea.form-control { min-height: 96px; }

.form-control-sm, .form-select-sm { min-height: 40px; font-size: .9rem; border-radius: 10px; }
.form-control-lg { min-height: 52px; }

.form-label { font-weight: 600; color: #344054; font-size: .9rem; }

.form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; }
.form-check-input:checked { background-color: var(--sr-azul); border-color: var(--sr-azul); }

/* ═════════════════════════════ Avisos ═════════════════════════════ */

.alert {
    border-radius: 14px;
    border-width: 1px;
    font-size: .95rem;
}

.alert-success { background: #ECFDF3; border-color: #ABEFC6; color: var(--sr-verde); }
.alert-warning { background: #FFFAEB; border-color: #FEDF89; color: var(--sr-ambar); }
.alert-danger  { background: #FEF3F2; border-color: #FECDCA; color: var(--sr-vermelho); }
.alert-info    { background: var(--sr-azul-claro); border-color: #B2CCEE; color: var(--sr-azul-escuro); }
.alert-secondary { background: var(--sr-cinza-fundo); border-color: var(--sr-borda-campo); color: var(--sr-cinza); }

/* Avisos pós-redirect (_Layout): flutuam no topo, acima da faixa, dos cartões
   que sobem sobre ela e das abas — no fluxo da página eles ficavam por trás
   do primeiro cartão. Centralizados, com a largura de um cartão. */
.sr-avisos {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + .75rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 2rem));
    z-index: 1095;
    display: grid;
    gap: .5rem;
    pointer-events: none;
}
.sr-avisos .alert {
    pointer-events: auto;
    margin: 0;
    box-shadow: var(--sr-sombra-alta);
}

/* ══════════════════════════ A FAIXA (topo) ══════════════════════════
   Azul, terminando no ARCO DOURADO do logo como horizonte (quadro G-04,
   opção A). É o topo das três áreas; o que muda de área para área é o que
   vai dentro (menu, ação, título).

   ★ O ARCO NUNCA PASSA POR TRÁS DE TEXTO, BOTÃO OU AVATAR. A faixa reserva
   --sr-horizonte de altura embaixo e a curva mora só ali: nada do conteúdo
   chega nessa faixa de baixo. Cartão que sobe sobre a faixa
   (.sr-sobre-faixa) passa por CIMA da curva — de propósito.
   ═══════════════════════════════════════════════════════════════════ */

.sr-faixa {
    --sr-horizonte: 32px;
    position: relative;
    background: var(--sr-azul);
    color: #fff;
    padding-bottom: var(--sr-horizonte);
}

.sr-faixa-horizonte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: calc(var(--sr-horizonte) + 1px);
    display: block;
    pointer-events: none;
}

.sr-horizonte-fundo { fill: var(--sr-fundo); }

.sr-horizonte-fio {
    fill: none;
    stroke: var(--sr-dourado);
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

@media (min-width: 992px) {
    .sr-faixa { --sr-horizonte: 52px; }
}

/* Telas de entrada (login): o arco grande atrás do cartão branco — o fundo
   azul é inteiro e só o cartão fica por cima. */
.sr-faixa-arco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sr-faixa-arco path {
    fill: none;
    stroke: var(--sr-dourado);
    stroke-width: 12;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.sr-faixa > .container { position: relative; }

.sr-faixa-linha {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 72px;
}

.sr-faixa-marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    min-height: 44px;
}

.sr-faixa-marca:hover { color: #fff; }
.sr-faixa-marca img { height: 26px; width: auto; display: block; }
.sr-faixa-marca span { display: none; }

.sr-faixa-area {
    display: none;
    font-weight: 600;
    padding-left: .75rem;
    margin-left: .1rem;
    border-left: 1px solid rgba(255, 255, 255, .3);
    white-space: nowrap;
}

/* Botão de voltar (telas de 2º nível no celular) e botões só-ícone da faixa. */
.sr-faixa-icone {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    display: inline-grid;
    place-items: center;
    flex: none;
    text-decoration: none;
}

.sr-faixa-icone:hover, .sr-faixa-icone:focus-visible { background: rgba(255, 255, 255, .26); color: #fff; }
.sr-faixa-icone .sr-icone { width: 22px; height: 22px; }

.sr-faixa-menu { display: none; }

.sr-faixa-direita {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Ação de troca/entrada: “Credencial”, “Entrar” (dourado) e “Minha área”
   (contorno). No celular do cliente a Credencial mora nas abas, não aqui. */
.sr-faixa-acao {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    background: var(--sr-dourado);
    color: var(--sr-dourado-texto);
}

.sr-faixa-acao:hover { background: #E3A10F; color: var(--sr-dourado-texto); }

.sr-faixa-acao.contorno {
    background: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.sr-faixa-acao.contorno:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Avatar com as iniciais — abre o menu Conta. */
.sr-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: inline-grid;
    place-items: center;
    flex: none;
}

.sr-avatar:hover, .sr-avatar:focus-visible, .sr-avatar[aria-expanded="true"] { background: rgba(255, 255, 255, .28); }

.sr-avatar-claro {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sr-azul-claro);
    color: var(--sr-azul);
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    flex: none;
}

/* O conteúdo que a VIEW põe dentro da faixa (@section Faixa): saudação do
   painel, título de subtela. Sem a seção, a faixa é só a linha de cima. */
.sr-faixa-conteudo { padding: .75rem 0 1.5rem; }
.sr-faixa-conteudo.sobreposta { padding-bottom: 4.5rem; }

.sr-faixa-titulo {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
    line-height: 1.15;
}

.sr-faixa-sub {
    margin: .3rem 0 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .92);
}

.sr-faixa-migalhas { font-size: .85rem; margin-bottom: .35rem; color: rgba(255, 255, 255, .85); }
.sr-faixa-migalhas a { color: #fff; text-decoration: none; font-weight: 600; }
.sr-faixa-migalhas a:hover { text-decoration: underline; color: #fff; }

/* Bloco que “sobe” sobre a faixa — o resumo do painel. Vale para um cartão
   ou para uma linha inteira (no desktop, resumo e atalhos sobem juntos). */
.sr-sobre-faixa {
    position: relative;
    margin-top: -3.5rem;
}

.sr-elevado { box-shadow: var(--sr-sombra-alta) !important; }

/* Faixa do admin: barra fina, sem o arco, com o fio dourado embaixo — os
   módulos moram no menu lateral, e as tabelas precisam da altura. */
.sr-faixa-admin { --sr-horizonte: 0px; border-bottom: 3px solid var(--sr-dourado); }
.sr-faixa-admin .sr-faixa-linha { min-height: 60px; }
.sr-faixa-admin .sr-faixa-area { display: inline-block; }
.sr-faixa-admin .sr-faixa-acao { min-height: 40px; }
.sr-faixa-admin .sr-avatar { width: 40px; height: 40px; }

/* ═══════════════════ Menu lateral do admin (desktop) ═══════════════════
   _MenuLateral.cshtml. Recolhido (html.sr-menu-recolhido, site.js) fica só
   com os ícones; o nome aparece no title. No celular não existe: lá ficam a
   folha "Módulos" e os chips de cada módulo (_AbasModulo). */
.sr-admin { display: flex; align-items: stretch; flex: 1 0 auto; }
.sr-admin-conteudo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sr-admin-pagina { max-width: 1440px; }

/* A coluna estica até o fim da página (fundo e borda); o miolo
   (.sr-menu-fixo) gruda no topo ao rolar e rola por dentro se não couber. */
.sr-menu-lateral {
    flex: 0 0 248px;
    width: 248px;
    background: var(--sr-superficie);
    border-right: 1px solid var(--sr-borda);
}
.sr-menu-fixo {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 100vh;
    /* "Recolher menu" no pé da janela (a barra de cima tem 63px). */
    min-height: calc(100vh - 63px);
    overflow-y: auto;
    padding: 1.25rem .75rem;
}
.sr-menu-lista { display: flex; flex-direction: column; gap: 2px; }
.sr-menu-grupo {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sr-texto-suave); padding: 1rem .75rem .35rem;
}
.sr-menu-item, .sr-menu-recolher {
    display: flex; align-items: center; gap: .75rem;
    min-height: 42px; padding: 0 .75rem; border-radius: 10px;
    color: var(--sr-cinza); font-weight: 500; font-size: .95rem; text-decoration: none;
    white-space: nowrap;
}
.sr-menu-item .sr-icone, .sr-menu-recolher .sr-icone { width: 20px; height: 20px; }
.sr-menu-item:hover { background: var(--sr-cinza-fundo); color: var(--sr-texto); }
.sr-menu-item.ativo { background: var(--sr-azul-claro); color: var(--sr-azul); font-weight: 600; }
/* Módulo aberto: o realce vai para a tela de dentro. */
.sr-menu-item.ativo.aberto { background: transparent; }
.sr-menu-filhos {
    display: flex; flex-direction: column; gap: 2px;
    margin: 2px 0 6px 1.3rem; padding-left: .75rem;
    border-left: 1.5px solid var(--sr-borda);
}
.sr-menu-subgrupo { font-size: .72rem; font-weight: 700; color: var(--sr-texto-suave); padding: .5rem .75rem .15rem; }
.sr-menu-filho {
    display: flex; align-items: center; min-height: 36px; padding: 0 .75rem; border-radius: 8px;
    color: var(--sr-cinza); font-size: .9rem; text-decoration: none;
}
.sr-menu-filho:hover { background: var(--sr-cinza-fundo); color: var(--sr-texto); }
.sr-menu-filho.ativo { background: var(--sr-azul-claro); color: var(--sr-azul); font-weight: 600; }
.sr-menu-recolher {
    margin-top: auto; border: 0; background: transparent; width: 100%;
    color: var(--sr-texto-suave); font-family: inherit; font-size: .875rem; text-align: left;
}
.sr-menu-recolher:hover { background: var(--sr-cinza-fundo); color: var(--sr-texto); }

html.sr-menu-recolhido .sr-menu-lateral { flex-basis: 72px; width: 72px; }
html.sr-menu-recolhido .sr-menu-fixo { padding-inline: .6rem; }
html.sr-menu-recolhido .sr-menu-rotulo,
html.sr-menu-recolhido .sr-menu-filhos { display: none; }
html.sr-menu-recolhido .sr-menu-grupo { font-size: 0; padding: .5rem 0; margin: .25rem .5rem; border-top: 1px solid var(--sr-borda); }
html.sr-menu-recolhido .sr-menu-item, html.sr-menu-recolhido .sr-menu-recolher { justify-content: center; padding: 0; }
html.sr-menu-recolhido .sr-menu-item.ativo.aberto { background: var(--sr-azul-claro); }
html.sr-menu-recolhido .sr-menu-recolher .sr-icone { transform: rotate(180deg); }

/* Balão do menu recolhido: o nome do módulo e as telas dele, ao lado do
   ícone. FIXO na janela (a coluna rola por dentro e cortaria um absoluto);
   site.js põe o "top" na altura do ícone. Começa colado na coluna (sem vão
   para o mouse cair) e o recuo visual fica no padding. */
.sr-menu-balao { display: none; }
html.sr-menu-recolhido .sr-menu-modulo:hover > .sr-menu-balao,
html.sr-menu-recolhido .sr-menu-modulo:focus-within > .sr-menu-balao {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    left: 72px;
    z-index: 1040;
    min-width: 210px;
    padding: .4rem .4rem .4rem .9rem;
    background: transparent;
}
html.sr-menu-recolhido .sr-menu-balao::before {
    content: "";
    position: absolute;
    inset: 0 0 0 .5rem;
    z-index: -1;
    background: var(--sr-superficie);
    border: 1px solid var(--sr-borda);
    border-radius: 12px;
    box-shadow: var(--sr-sombra-alta);
}
.sr-menu-balao-titulo {
    display: flex; align-items: center; min-height: 36px; padding: 0 .75rem; border-radius: 8px;
    color: var(--sr-texto); font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.sr-menu-balao-titulo:hover { background: var(--sr-cinza-fundo); color: var(--sr-texto); }
.sr-menu-balao-titulo.ativo { background: var(--sr-azul-claro); color: var(--sr-azul); }
.sr-menu-balao .sr-menu-filho { white-space: nowrap; }

@media (min-width: 992px) {
    .sr-faixa-linha { min-height: 76px; gap: 1rem; }
    .sr-faixa-marca span { display: inline; }
    .sr-faixa-admin .sr-faixa-marca span { display: none; }

    .sr-faixa-menu {
        display: flex;
        gap: .25rem;
        margin: 0 0 0 1rem;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
    }

    .sr-faixa-menu a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 .95rem;
        border-radius: 999px;
        color: #fff;
        opacity: .86;
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
    }

    .sr-faixa-menu a:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
    .sr-faixa-menu a.ativo { opacity: 1; background: rgba(255, 255, 255, .16); font-weight: 700; }

    .sr-faixa-titulo { font-size: 2.4rem; }
    .sr-faixa-conteudo { padding: 1.5rem 0 2.25rem; }
    .sr-faixa-conteudo.sobreposta { padding-bottom: 5.5rem; }
    .sr-sobre-faixa { margin-top: -4.5rem; }
}

/* ══════════════════ Abas fixas do cliente (celular) ══════════════════
   Início · Família · ◉ Credencial · Inscrições · Pagamentos. A credencial é
   o botão dourado do meio, um pouco acima da barra. A partir de 992 px as
   abas somem e o menu vai para a faixa.
   ═══════════════════════════════════════════════════════════════════ */

.sr-abas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--sr-superficie);
    border-top: 1px solid var(--sr-borda);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--sr-abas-altura) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    margin: 0;
    list-style: none;
}

.sr-aba {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #667085;
    font-size: .75rem;
    font-weight: 600;
    min-height: 44px;
    background: none;
    border: 0;
    width: 100%;
    height: 100%;
}

.sr-aba .sr-icone { width: 24px; height: 24px; }
.sr-aba:hover { color: var(--sr-azul); }
.sr-aba.ativo { color: var(--sr-azul); font-weight: 700; }

.sr-aba-credencial { color: var(--sr-azul); font-weight: 700; justify-content: flex-start; }

.sr-aba-credencial-botao {
    width: 58px;
    height: 58px;
    margin-top: -22px;
    border-radius: 50%;
    background: var(--sr-dourado);
    color: var(--sr-dourado-texto);
    display: grid;
    place-items: center;
    border: 4px solid var(--sr-superficie);
    box-shadow: 0 8px 18px -6px rgba(245, 178, 27, .7);
}

body.sr-com-abas { padding-bottom: calc(var(--sr-abas-altura) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 992px) {
    .sr-abas { display: none; }
    body.sr-com-abas { padding-bottom: 0; }
}

/* ═══════════════════ Folha inferior (celular) ═══════════════════
   O offcanvas-bottom do Bootstrap com a cara da direção C: cantos de 28,
   puxador, altura pelo conteúdo. Usada no menu Conta e no menu Módulos do
   admin. No desktop o menu Conta é um dropdown na faixa.
   ═══════════════════════════════════════════════════════════════ */

.sr-folha.offcanvas-bottom {
    height: auto;
    max-height: 88vh;
    border-radius: 28px 28px 0 0;
    border: 0;
}

.sr-folha .offcanvas-header { padding: .6rem 1.25rem .25rem; flex-direction: column; align-items: stretch; }

.sr-folha-puxador {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--sr-borda-campo);
    margin: 0 auto .75rem;
}

.sr-folha .offcanvas-body { padding: 0 1.25rem 1.5rem; }

.sr-folha-pessoa {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sr-borda);
}

.sr-folha-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 56px;
    color: var(--sr-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--sr-cinza-fundo);
}

.sr-folha-item:last-child { border-bottom: 0; }
/* "Sair" é um botão de formulário (logout por POST): mesmo visual do link. */
button.sr-folha-item { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--sr-cinza-fundo); padding: 0; text-align: left; font-family: inherit; }
form:last-child > button.sr-folha-item { border-bottom: 0; }
.sr-folha-item .sr-icone { width: 22px; height: 22px; color: var(--sr-azul); }
.sr-folha-item:hover { color: var(--sr-azul); }
.sr-folha-item.ativo { color: var(--sr-azul); font-weight: 800; }
.sr-folha-item.perigo, .sr-folha-item.perigo .sr-icone { color: var(--sr-vermelho); font-weight: 700; }

/* Dropdown da conta no desktop. */
.sr-faixa .dropdown-menu {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 40px -12px rgba(16, 24, 40, .28);
    padding: .5rem;
    min-width: 260px;
    margin-top: .5rem !important;
}

.sr-faixa .dropdown-item {
    border-radius: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.sr-faixa .dropdown-item:active { background: var(--sr-azul-claro); color: var(--sr-azul); }

/* ═════════════════════════ Cabeçalho de página ═════════════════════════ */

.sr-pagina-topo { margin-bottom: 1.5rem; }

.sr-pagina-topo h1 {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

.sr-pagina-topo .sr-sub {
    color: var(--sr-texto-suave);
    margin: .3rem 0 0;
}

@media (min-width: 992px) {
    .sr-pagina-topo h1 { font-size: 1.9rem; }
}

/* Migalha: onde estou DENTRO da área. A área em si é a faixa. */
.sr-migalhas {
    font-size: .875rem;
    color: var(--sr-texto-suave);
    margin-bottom: .4rem;
}

.sr-migalhas a { text-decoration: none; font-weight: 600; }
.sr-migalhas a:hover { text-decoration: underline; }

/* ══════════════════════════════  Cartões  ══════════════════════════════ */

.sr-card {
    background: var(--sr-superficie);
    border: 0;
    border-radius: var(--sr-raio);
    box-shadow: var(--sr-sombra);
}

.sr-card-corpo { padding: 1.25rem; }

@media (min-width: 992px) {
    .sr-card-corpo { padding: 1.5rem; }
}

/* Cartão de convite (ex.: “Quer ser cliente?”): azul claro, sem sombra. */
.sr-card-destaque { background: var(--sr-azul-claro); box-shadow: none; }

/* Cartão que pede atenção (credencial vencida do dependente). */
.sr-card.vencida { box-shadow: inset 0 0 0 2px var(--sr-dourado); }

.sr-card-titulo {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--sr-texto-suave);
    margin-bottom: .75rem;
}

/* ══════════════════════════  Atalhos (tiles)  ══════════════════════════ */

.sr-atalhos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.sr-atalho {
    position: relative;
    background: var(--sr-superficie);
    border-radius: var(--sr-raio);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    color: var(--sr-texto);
    text-decoration: none;
    box-shadow: var(--sr-sombra);
    transition: box-shadow .12s ease;
}

.sr-atalho:hover { color: var(--sr-texto); box-shadow: var(--sr-sombra-alta); }

.sr-atalho-icone {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--sr-azul-claro);
    color: var(--sr-azul);
    display: grid;
    place-items: center;
    flex: none;
}

.sr-atalho-icone .sr-icone { width: 22px; height: 22px; }
.sr-atalho-nome { display: block; font-weight: 700; font-size: 1.05rem; }
.sr-atalho-desc { display: block; font-size: .85rem; color: var(--sr-texto-suave); }

@media (min-width: 992px) {
    .sr-atalho { flex-direction: row; align-items: center; padding: 1.1rem 1.25rem; }
}

/* ═══════════════════ Lista de itens acionáveis ═══════════════════ */

.sr-lista {
    background: var(--sr-superficie);
    border-radius: 18px;
    box-shadow: var(--sr-sombra);
    overflow: hidden;
}

.sr-lista-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 56px;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--sr-cinza-fundo);
    color: inherit;
    text-decoration: none;
    transition: background .12s ease;
}

.sr-lista-item:last-child { border-bottom: 0; }
.sr-lista-item:hover { background: #F9FAFB; color: inherit; }

.sr-lista-texto { flex: 1 1 auto; min-width: 0; }
.sr-lista-titulo { font-weight: 600; }
.sr-lista-desc { color: var(--sr-texto-suave); font-size: .875rem; }

.sr-lista-seta {
    flex: none;
    color: #98A2B3;
    transition: transform .12s ease, color .12s ease;
}

.sr-lista-item:hover .sr-lista-seta { transform: translateX(2px); color: var(--sr-azul); }

/* Item que exige ação: ponto colorido antes do texto (vermelho = agora,
   âmbar = vai precisar). */
.sr-lista-item.atencao::before,
.sr-lista-item.urgente::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--sr-dourado);
}

.sr-lista-item.urgente::before { background: #D92D20; }

/* KPI (admin) */
.sr-kpi {
    background: var(--sr-superficie);
    border-radius: 18px;
    padding: 1.1rem 1.25rem;
    box-shadow: var(--sr-sombra);
    height: 100%;
    display: block;
    color: inherit;
    text-decoration: none;
}

a.sr-kpi:hover { color: inherit; box-shadow: var(--sr-sombra-alta); }

.sr-kpi-valor { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sr-kpi-rotulo { color: var(--sr-texto-suave); font-size: .85rem; }
.sr-kpi.alerta .sr-kpi-valor { color: var(--sr-ambar); }
.sr-kpi.ok .sr-kpi-valor { color: var(--sr-verde); }

/* ══════════════════════════════  Selos  ══════════════════════════════ */

.sr-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    white-space: nowrap;
}

.sr-badge-suave { background: var(--sr-azul-claro); color: var(--sr-azul); }
.sr-selo-ok      { background: var(--sr-verde-fundo); color: var(--sr-verde); }
.sr-selo-atencao { background: var(--sr-ambar-fundo); color: var(--sr-ambar); }
.sr-selo-erro    { background: var(--sr-vermelho-fundo); color: var(--sr-vermelho); }
.sr-selo-neutro  { background: var(--sr-cinza-fundo); color: var(--sr-cinza); }
.sr-selo-azul    { background: var(--sr-azul); color: #fff; }

/* Valor em dinheiro: peso alto e números da mesma largura, para as colunas
   de valor alinharem. */
.sr-valor { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Chips de filtro (abas de status do admin, troca de pessoa): rolam na
   horizontal no celular em vez de quebrar linha. */
.sr-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0 0 .25rem;
    scrollbar-width: none;
}

.sr-chips::-webkit-scrollbar { display: none; }

.sr-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: 0 .95rem;
    border-radius: 999px;
    border: 1px solid var(--sr-borda-campo);
    background: var(--sr-superficie);
    color: var(--sr-texto);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}

.sr-chip:hover { border-color: var(--sr-azul); color: var(--sr-azul); }
.sr-chip.ativo { background: var(--sr-azul); border-color: var(--sr-azul); color: #fff; }
/* Segundo nível (telas de um grupo, ex.: Relatórios › Clientes): menor e,
   ativo, em azul-claro — o azul cheio fica para o grupo. */
.sr-chips-sub .sr-chip { min-height: 34px; padding: 0 .8rem; font-size: .875rem; }
.sr-chips-sub .sr-chip.ativo { background: var(--sr-azul-claro); border-color: var(--sr-azul); color: var(--sr-azul); }

.sr-badge-controle {
    padding: var(--sr-controle-sm-pad-y) var(--sr-controle-sm-pad-x);
    border: var(--sr-controle-borda) solid transparent;
    border-radius: var(--sr-controle-raio);
    font-size: var(--sr-controle-sm-fonte);
    font-weight: 700;
    line-height: var(--sr-controle-linha);
}

/* ═════════════════════════  Tabelas de listagem  ═════════════════════════
   No celular, uma tabela com .sr-responsiva vira um cartão por linha: o
   cabeçalho some e cada célula mostra o próprio rótulo (data-rotulo). Sem a
   classe, a tabela rola na horizontal dentro do .table-responsive.
   ═════════════════════════════════════════════════════════════════════ */

.sr-tabela {
    width: 100%;
    background: var(--sr-superficie);
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: var(--sr-sombra);
}

.sr-tabela thead th {
    background: #F9FAFB;
    color: var(--sr-texto-suave);
    font-size: .8rem;
    font-weight: 700;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sr-borda);
    white-space: nowrap;
}

.sr-tabela tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--sr-borda);
    vertical-align: middle;
}

.sr-tabela tbody tr:last-child td { border-bottom: 0; }

/* Tons alternados nas listas: branco e um cinza bem claro, para o olho não
   perder a linha nas tabelas largas. O hover fica um tom acima dos dois.
   No celular cada linha é um cartão e a regra da .sr-responsiva abaixo
   devolve o branco. */
.sr-tabela tbody tr:nth-child(even) { background: #F9FAFB; }
.sr-tabela tbody tr:hover { background: var(--sr-cinza-fundo); }

@media (max-width: 767.98px) {
    .sr-tabela.sr-responsiva { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .sr-tabela.sr-responsiva thead { display: none; }
    .sr-tabela.sr-responsiva tbody { display: flex; flex-direction: column; gap: .75rem; }

    .sr-tabela.sr-responsiva tbody tr {
        display: block;
        background: var(--sr-superficie);
        border-radius: 18px;
        box-shadow: var(--sr-sombra);
        padding: .5rem 1rem;
    }

    .sr-tabela.sr-responsiva tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .55rem 0;
        border-bottom: 1px solid var(--sr-cinza-fundo);
        text-align: right;
    }

    .sr-tabela.sr-responsiva tbody td::before {
        content: attr(data-rotulo);
        font-size: .8rem;
        font-weight: 700;
        color: var(--sr-texto-suave);
        text-align: left;
    }

    .sr-tabela.sr-responsiva tbody td:last-child { border-bottom: 0; }

    /* A célula principal (título da linha) vai inteira, sem rótulo. */
    .sr-tabela.sr-responsiva tbody td.sr-celula-titulo { display: block; text-align: left; font-size: 1.05rem; }
    .sr-tabela.sr-responsiva tbody td.sr-celula-titulo::before { content: none; }

    /* As ações vão no rodapé do cartão, em largura cheia. */
    .sr-tabela.sr-responsiva tbody td.sr-celula-acoes { justify-content: flex-start; flex-wrap: wrap; }
    .sr-tabela.sr-responsiva tbody td.sr-celula-acoes::before { content: none; }
}

/* Grade de permissões (módulo × ação) na edição de usuário. */
.sr-tabela-permissoes thead th { font-size: .75rem; padding: .55rem .45rem; }
.sr-tabela-permissoes tbody td { padding: .6rem .45rem; }
.sr-tabela-permissoes tbody td:first-child { padding-left: 1rem; }
.sr-tabela-permissoes .form-check-input { margin: 0; float: none; }

/* ═════════════════════════════  Estado vazio  ═════════════════════════════ */

.sr-vazio {
    background: var(--sr-superficie);
    border-radius: var(--sr-raio);
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: var(--sr-texto-suave);
    box-shadow: var(--sr-sombra);
}

.sr-vazio strong { display: block; color: var(--sr-texto); margin-bottom: .35rem; font-size: 1.05rem; }

/* ═══════════════════════  Tela limpa (login, cadastro)  ═══════════════════════
   Fundo azul com o arco grande; cartão branco no centro. */

.sr-login-fundo {
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    padding: 2.5rem 1rem;
    background: var(--sr-azul);
}

.sr-login-fundo > .sr-faixa-arco path { stroke-width: 18; }

.sr-login-caixa {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
    padding: 2rem 1.5rem;
}

@media (min-width: 576px) {
    .sr-login-caixa { padding: 2.25rem 2.25rem; }
}

/* ═════════════════════  Credencial virtual  ═════════════════════
   A credencial é a IMAGEM pronta da retaguarda, em retrato. O modal é
   escuro, em tela cheia no celular, para a imagem ser o que se vê. */

/* O modal É a credencial: cartão grande, e embaixo só o selo e "Baixar". */
.sr-credencial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: .25rem 0 .75rem;
}

.sr-credencial-imagem {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}

.sr-credencial-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1rem;
    text-align: center;
}

.sr-modal-credencial .modal-content {
    background: var(--sr-noite);
    color: #fff;
    border: 0;
}

.sr-modal-credencial .modal-header { border-bottom: 0; }

/* Celular: tela cheia, com o cartão no meio da altura. */
@media (max-width: 575.98px) {
    .sr-modal-credencial .modal-body { display: flex; flex-direction: column; justify-content: center; }
}
.sr-modal-credencial .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.sr-modal-credencial .text-muted { color: #C2CCDA !important; }
.sr-modal-credencial .sr-vazio { background: rgba(255, 255, 255, .06); color: #C2CCDA; box-shadow: none; }
.sr-modal-credencial .sr-vazio strong { color: #fff; }
.sr-modal-credencial .btn-outline-secondary { --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, .35); }

@media (min-width: 992px) {
    .sr-modal-credencial .modal-content { border-radius: 24px; }
}

/* Foto e rótulos de DADOS do cadastro (Meus dados, análise no admin). */
.sr-credencial-foto {
    width: 96px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--sr-cinza-fundo);
}

.sr-credencial-foto-vazia {
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sr-azul);
    background: var(--sr-azul-claro);
}

.sr-credencial-nome { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.sr-credencial-rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sr-texto-suave); font-weight: 600; }
.sr-credencial-valor { font-weight: 600; }

@media print {
    .sr-faixa, .sr-abas, .sr-rodape, .sr-nao-imprime { display: none !important; }
    body { background: #fff; padding: 0 !important; }
}

/* ═════════════════════════════  Rodapé  ═════════════════════════════ */

.sr-rodape {
    flex-shrink: 0;
    color: var(--sr-texto-suave);
    font-size: .875rem;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.sr-rodape-link { color: var(--sr-texto-suave); text-decoration: none; font-weight: 600; }
.sr-rodape-link:hover, .sr-rodape-link:focus { color: var(--sr-azul); text-decoration: underline; }

/* Herdado do scaffold — usado pelas views de formulário do credenciamento. */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Bolinha de cor da ÁREA (listas do admin). */
.sr-ponto-cor {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .12);
}

/* ───────────── Termo de adesão no admin (Termo/Form, Termo/Historico) ───────────── */

/* Editor visual (js/termo-editor.js): barra + área editável com a cara de campo. */
.sr-editor {
    border: 1px solid var(--sr-borda-campo);
    border-radius: var(--sr-raio-campo);
    background: var(--sr-superficie);
    overflow: hidden;
}

.sr-editor:focus-within { border-color: var(--sr-azul); box-shadow: 0 0 0 .2rem rgba(20, 74, 151, .15); }

.sr-editor-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .4rem;
    border-bottom: 1px solid var(--sr-borda);
    background: var(--sr-cinza-fundo);
    position: sticky;
    top: 0;
    z-index: 1;
}

.sr-editor-barra .btn { min-width: 2.25rem; }
.sr-editor-barra .btn.active { background: var(--sr-azul-claro); color: var(--sr-azul); border-color: var(--sr-azul); }
.sr-editor-sep { width: 1px; align-self: stretch; margin: 0 .2rem; background: var(--sr-borda-campo); }

.sr-editor-area {
    min-height: 22rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: .9rem 1rem;
    outline: none;
}

.sr-editor-area:empty::before { content: "Declaro estar ciente de que..."; color: var(--sr-texto-suave); }
.sr-editor + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }

/* A prévia acompanha a rolagem no desktop: o campo é longo, e ela tem de
   continuar à vista enquanto se escreve. */
@media (min-width: 1200px) {
    .sr-termo-previa { position: sticky; top: calc(var(--sr-abas-altura) + 1rem); }
}

/* Blocos que o site preenche: mais apagados que o texto do termo, para ficar
   claro de relance qual parte é de quem escreve. */
.sr-termo-secao-fixa { opacity: .62; }

/* Comparação de versões (Services/DiffTexto.cs). pre-wrap: os parágrafos vêm
   como quebra de linha no próprio texto. */
.sr-diff { white-space: pre-wrap; line-height: 1.7; }
.sr-diff-del { background: var(--sr-vermelho-fundo); color: var(--sr-vermelho); text-decoration: line-through; }
.sr-diff-ins { background: var(--sr-verde-fundo); color: var(--sr-verde); text-decoration: none; border-bottom: 2px solid var(--sr-verde); }

details.sr-card > summary { cursor: pointer; list-style-position: inside; }

/* ───────────── Quem vai se inscrever (página da atividade) ───────────── */
.sr-candidatos { display: flex; flex-direction: column; gap: .65rem; }

.sr-candidato {
    border: 1px solid var(--sr-borda);
    border-radius: 16px;
    padding: .85rem;
}

.sr-candidato-bloqueado { background: #F9FAFB; border-style: dashed; }
.sr-candidato-valor { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ───────────── O termo, dentro do modal ───────────── */
.sr-termo-secao {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--sr-borda);
}

.sr-termo-secao:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sr-termo-titulo { font-weight: 700; margin-bottom: .6rem; }
.sr-termo-texto p { margin-bottom: .8rem; }
.sr-termo-texto ul, .sr-termo-texto ol { margin-bottom: .8rem; padding-left: 1.4rem; }
.sr-termo-texto :last-child { margin-bottom: 0; }

/* Modais em geral: cantos da direção C; no celular, sobem de baixo como
   folha (modal-fullscreen-sm-down fica para o da credencial). */
.modal-content { border: 0; border-radius: 24px; }
.modal-header { border-bottom-color: var(--sr-borda); }
.modal-footer { border-top-color: var(--sr-borda); }

@media (max-width: 575.98px) {
    .modal:not(.sr-modal-credencial) .modal-dialog {
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
    }

    .modal:not(.sr-modal-credencial) .modal-content { border-radius: 28px 28px 0 0; max-height: 92vh; }
}

/* ═══════════════ Cartões das listas antigas (a remover) ═══════════════
   /atividades e /unidades — só por rota direta, ver PLANO.md seção 3. */

.sr-card-vitrine { display: flex; flex-direction: column; height: var(--sr-card-vitrine-altura, 424px); overflow: hidden; }
.sr-card-vitrine-foto { display: block; width: 100%; height: 160px; object-fit: cover; flex: none; }
.sr-card-vitrine-foto-vazia { display: grid; place-items: center; width: 100%; height: 160px; flex: none; background: var(--sr-azul-claro); color: var(--sr-azul); }
.sr-card-vitrine-foto-vazia .sr-icone { width: 34px; height: 34px; stroke-width: 1.4; }
.sr-card-vitrine .sr-card-corpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 1rem 1.15rem; }
.sr-card-vitrine-titulo { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-card-vitrine-desc { flex: 1 1 auto; min-height: 0; margin: 0; color: var(--sr-texto-suave); font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-card-vitrine-rodape { flex: none; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--sr-borda); font-size: .875rem; color: var(--sr-texto-suave); }

@media (max-width: 767.98px) {
    .sr-card-vitrine { height: auto; }
}

/* Ações das pendências de pagamento: <details> cujo <summary> é o botão. */
.sr-acao > summary { list-style: none; }
.sr-acao > summary::-webkit-details-marker { display: none; }
.sr-acao[open] > summary { box-shadow: 0 0 0 .2rem rgba(20, 74, 151, .2); }

/* ═══════════════ Relatórios (/admin/relatorios) ═══════════════
   Gráficos em HTML/CSS puro, desenhados no servidor: sem biblioteca de
   gráfico, sem CDN, e o número está sempre escrito ao lado da barra — o
   desenho ajuda a comparar, não substitui o valor. */

.sr-graf-titulo { font-weight: 700; margin-bottom: .75rem; }

/* Barras horizontais: rótulo | trilho com a barra | valor. */
.sr-barras { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sr-barra { display: grid; grid-template-columns: minmax(7rem, 30%) 1fr auto; align-items: center; gap: .65rem; font-size: .875rem; }
.sr-barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sr-texto); }
.sr-barra-trilho { height: 12px; border-radius: 6px; background: var(--sr-cinza-fundo); overflow: hidden; }
.sr-barra-valor-fill { display: block; height: 100%; border-radius: 6px; background: var(--sr-azul); min-width: 2px; }
.sr-barra-valor-fill.alerta { background: var(--sr-vermelho); }
.sr-barra-valor-fill.ok { background: var(--sr-verde); }
.sr-barra-texto { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }

@media (max-width: 575.98px) {
    .sr-barra { grid-template-columns: 1fr auto; }
    .sr-barra-rotulo { grid-column: 1 / -1; white-space: normal; }
}

/* Colunas (evolução por mês). Rola na horizontal quando há muitos meses. */
.sr-colunas { display: flex; align-items: flex-end; gap: 4px; height: 190px; overflow-x: auto; padding-bottom: 1.6rem; position: relative; }
.sr-coluna { flex: 1 0 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.sr-coluna-fill { width: 100%; max-width: 34px; background: var(--sr-azul); border-radius: 4px 4px 0 0; min-height: 2px; }
.sr-coluna:hover .sr-coluna-fill { background: var(--sr-azul-escuro); }
.sr-coluna-rotulo { position: absolute; bottom: -1.5rem; font-size: .7rem; color: var(--sr-texto-suave); white-space: nowrap; }

/* Rosca: conic-gradient com o furo por máscara. --p é a fatia principal (0–100). */
.sr-rosca-bloco { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.sr-rosca {
    --p: 0;
    --cor-a: var(--sr-azul);
    --cor-b: var(--sr-vermelho);
    width: 140px; height: 140px; flex: none; border-radius: 50%; position: relative;
    background: conic-gradient(var(--cor-a) calc(var(--p) * 1%), var(--cor-b) 0);
}
.sr-rosca::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--sr-superficie); }
.sr-rosca-centro { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.sr-rosca-centro small { display: block; font-weight: 500; font-size: .7rem; color: var(--sr-texto-suave); }
.sr-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .875rem; }
.sr-legenda li { display: flex; align-items: center; gap: .5rem; }
.sr-legenda i { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* Árvore de ocupação: linha por nível, recolhida por padrão (JS da tela). */
.sr-arvore { font-size: .85rem; }
.sr-arvore td, .sr-arvore th { white-space: nowrap; }
.sr-arvore td.num, .sr-arvore th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-arvore tr[data-nivel="1"] td { background: var(--sr-azul); color: #fff; font-weight: 700; }
.sr-arvore tr[data-nivel="2"] td { background: #DBE3F5; font-weight: 700; }
.sr-arvore tr[data-nivel="3"] td { background: #EEF2FB; }
.sr-arvore tr[data-nivel="4"] td { background: #F7F9FD; }
.sr-arvore tr.sr-oculta { display: none; }
/* Turmas: tons alternados dentro de cada grupo (marcados no servidor — as
   linhas recolhidas tirariam o :nth-child do compasso). */
.sr-arvore tr.sr-alt td { background: #F9FAFB; }
.sr-arvore-nome { min-width: 320px; }
.sr-arvore-nome button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.sr-arvore-nome button:focus-visible { outline: 2px solid var(--sr-dourado); outline-offset: 2px; border-radius: 4px; }
.sr-arvore-seta { display: inline-block; width: 1em; transition: transform .15s; }
.sr-arvore tr.aberto .sr-arvore-seta { transform: rotate(90deg); }

/* Empresas: o "Mês a mês" de cada empresa, aberto dentro da célula. */
.sr-empresa-meses summary { cursor: pointer; color: var(--sr-azul); }
.sr-empresa-meses table { max-width: 22rem; background: transparent; }
.sr-empresa-meses td, .sr-empresa-meses th { padding: .15rem .4rem; background: transparent; }

/* ═══════════════════ Modo painel (relatórios) ═══════════════════
   Uma tela só, com cara de painel de decisão: o cabeçalho numa linha, os
   filtros numa linha, os números grandes no topo e os quadros num grid que
   ocupa O RESTO DA ALTURA DA JANELA — a página não rola, cada quadro rola
   por dentro. Só no desktop com altura suficiente; no celular e em telas
   baixas tudo volta a empilhar e rolar normalmente.
   Liga com ViewData["Painel"] = true (Views/Shared/_Layout.cshtml).
   ═══════════════════════════════════════════════════════════════ */

.sr-painel-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .6rem;
}
.sr-painel-nome { display: flex; align-items: center; gap: .4rem; }
.sr-painel-nome h1 { font-size: 1.25rem; margin: 0; white-space: nowrap; }
.sr-painel-direita { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; }
.sr-ajuda {
    display: inline-grid; place-items: center;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    border: 1px solid var(--sr-borda-campo); color: var(--sr-texto-suave);
    font-size: .75rem; font-weight: 700; cursor: help;
}
.sr-painel-cabecalho nav { margin: 0 !important; display: flex; flex-wrap: wrap; gap: .4rem; }
.sr-painel-cabecalho nav .sr-chips { margin: 0 !important; }
.sr-painel-cabecalho .sr-chip { min-height: 32px; padding: 0 .75rem; font-size: .85rem; }
.sr-painel-cabecalho .sr-retrato { margin: 0; }

/* Filtros numa linha, compactos. */
.sr-modo-painel .sr-filtros { margin-bottom: .6rem !important; }
.sr-modo-painel .sr-filtros .sr-card-corpo { padding: .5rem .75rem; }
.sr-modo-painel .sr-filtros .form-label { font-size: .72rem; margin-bottom: .1rem; color: var(--sr-texto-suave); }
.sr-modo-painel .sr-filtros .form-select,
.sr-modo-painel .sr-filtros .form-control,
.sr-modo-painel .sr-filtros .btn { padding-top: .25rem; padding-bottom: .25rem; font-size: .875rem; min-height: 0; }
.sr-modo-painel .sr-filtros .row { --bs-gutter-y: .5rem; --bs-gutter-x: .5rem; }

@media (min-width: 992px) {
    .sr-modo-painel .sr-filtros .sr-card-corpo { align-items: center !important; }
    .sr-modo-painel .sr-filtros form > div { display: flex; align-items: center; gap: .35rem; }
    .sr-modo-painel .sr-filtros form > div > .form-label { margin: 0; white-space: nowrap; }
    .sr-modo-painel .sr-filtros form { align-items: center !important; }
    /* _Filtros: o formulário e as ações lado a lado, na mesma linha. */
    .sr-modo-painel details.sr-filtros[open] { display: flex; align-items: center; flex-wrap: wrap; }
    .sr-modo-painel details.sr-filtros > form { flex: 1 1 auto; }
    .sr-modo-painel .sr-filtros-acoes { padding: .5rem .75rem; margin-left: auto; }
    .sr-modo-painel .sr-filtros .row > [class*="col"] { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; width: auto; }
    .sr-modo-painel .sr-filtros .row > [class*="col"] > .form-label { margin: 0; white-space: nowrap; }
}

/* Números grandes: uma faixa de cartões baixos. */
.sr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .55rem; }
.sr-kpis .sr-kpi { padding: .5rem .75rem; border-radius: 12px; }
.sr-kpis .sr-kpi-valor { font-size: 1.4rem; }
.sr-kpis .sr-kpi-rotulo { font-size: .74rem; line-height: 1.2; }
.sr-kpis .sr-kpi.periodo { box-shadow: var(--sr-sombra), inset 0 3px 0 var(--sr-dourado); }

/* Quadro: cartão com título fixo e corpo que rola. */
.sr-quadro {
    background: var(--sr-superficie);
    border-radius: 14px;
    box-shadow: var(--sr-sombra);
    padding: .65rem .85rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sr-quadro-titulo {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    font-weight: 700; font-size: .9rem; margin-bottom: .45rem;
}
.sr-quadro-titulo a, .sr-quadro-titulo .sr-quadro-extra { font-weight: 500; font-size: .78rem; }
.sr-quadro-corpo { min-height: 0; }
.sr-quadro-rodape { font-size: .74rem; color: var(--sr-texto-suave); margin-top: .35rem; }
.sr-quadro .sr-barras { gap: .3rem; }
.sr-quadro .sr-barra { font-size: .8rem; gap: .5rem; }
.sr-quadro .sr-barra-trilho { height: 9px; }
.sr-quadro .sr-rosca { width: 104px; height: 104px; }
.sr-quadro .sr-rosca-centro { font-size: 1rem; }
.sr-quadro .sr-legenda { font-size: .8rem; }
.sr-quadro .sr-colunas { height: 100%; min-height: 120px; padding-bottom: 1.3rem; }

/* Tabela compacta dentro de quadro, com cabeçalho preso ao rolar. */
.sr-tabela-compacta { width: 100%; font-size: .8rem; border-collapse: separate; border-spacing: 0; }
.sr-tabela-compacta th {
    position: sticky; top: 0; z-index: 1;
    background: var(--sr-superficie); color: var(--sr-texto-suave);
    font-size: .72rem; font-weight: 700; padding: .3rem .45rem; border-bottom: 1px solid var(--sr-borda);
    white-space: nowrap;
}
.sr-tabela-compacta td { padding: .2rem .45rem; border-bottom: 1px solid var(--sr-borda); vertical-align: top; }
.sr-tabela-compacta tbody tr:nth-child(even) td { background: #F9FAFB; }
.sr-tabela-compacta .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Abas dentro de um quadro (ranking: atendente / unidade / município). */
.sr-quadro-abas { display: flex; gap: .25rem; }
.sr-quadro-abas button {
    border: 1px solid var(--sr-borda-campo); background: var(--sr-superficie); color: var(--sr-texto-suave);
    border-radius: 999px; font-size: .72rem; padding: .1rem .55rem;
}
.sr-quadro-abas button[aria-selected="true"] { background: var(--sr-azul-claro); border-color: var(--sr-azul); color: var(--sr-azul); }

.sr-painel { display: flex; flex-direction: column; gap: .75rem; }

@media (min-width: 992px) and (min-height: 600px) {
    body.sr-modo-painel { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
    body.sr-modo-painel main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.sr-modo-painel main > .container-fluid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    /* Admin: a coluna do conteúdo ocupa a altura que sobra; o menu lateral rola por dentro. */
    body.sr-modo-painel > .sr-admin { flex: 1 1 auto; min-height: 0; }
    body.sr-modo-painel .sr-admin-conteudo { min-height: 0; }
    body.sr-modo-painel .sr-menu-lateral { min-height: 0; overflow-y: auto; }
    body.sr-modo-painel .sr-menu-fixo { position: static; max-height: none; min-height: 100%; }
    body.sr-modo-painel .sr-rodape { display: none; }
    body.sr-modo-painel .sr-faixa:not(.sr-faixa-admin) { --sr-horizonte: 14px; }

    .sr-painel { flex: 1 1 auto; min-height: 0; display: grid; gap: .75rem; }
    .sr-painel > * { min-height: 0; }
    .sr-quadro { overflow: hidden; }
    .sr-quadro-corpo { flex: 1 1 auto; overflow: auto; }

    /* Clientes — visão geral */
    .sr-painel-clientes {
        grid-template-columns: 1fr 1fr 1fr 1.7fr;
        grid-template-rows: auto minmax(0, .75fr) minmax(0, 1.25fr);
        grid-template-areas: "kpis kpis kpis kpis" "ocup canais cancel mensal" "rank rank idade horas";
    }
    /* Novas e revalidadas */
    .sr-painel-captacao {
        grid-template-columns: 1.25fr 1fr 1fr;
        grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "kpis kpis kpis" "mensal unidade atendente" "categoria municipio empresa";
    }
    /* Empresas */
    .sr-painel-empresas { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "kpis" "tabela"; }
    /* Participação */
    .sr-painel-participacao {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "kpis kpis kpis" "categoria unidade idade" "programa programa empresa";
    }
    /* Indicadores de turmas */
    .sr-painel-turmas {
        grid-template-columns: 1fr 1fr 1.3fr;
        grid-template-rows: auto minmax(0, .8fr) minmax(0, 1.2fr);
        grid-template-areas: "kpis kpis kpis" "ocup publico ociosas" "unidade mapa programa";
    }
    /* Ocupação de turmas */
    .sr-painel-ocupacao { grid-template-rows: minmax(0, 1fr); grid-template-areas: "arvore"; }
    /* Inadimplência */
    .sr-painel-inadimplencia {
        grid-template-columns: 1fr 1.3fr 1.3fr;
        grid-template-rows: auto minmax(0, .8fr) minmax(0, 1.2fr);
        grid-template-areas: "kpis kpis kpis" "aging evolucao unidade" "lista lista lista";
    }

    /* Em tela cheia, a faixa do site sai: o painel fica com a tela inteira. */
    html.sr-tela-cheia body.sr-modo-painel > header.sr-faixa,
    html.sr-tela-cheia body.sr-modo-painel .sr-menu-lateral { display: none !important; }
}

/* Áreas (fora do grid, viram blocos empilhados). */
.sr-area-kpis { grid-area: kpis; }
.sr-area-ocup { grid-area: ocup; }
.sr-area-canais { grid-area: canais; }
.sr-area-cancel { grid-area: cancel; }
.sr-area-mensal { grid-area: mensal; }
.sr-area-rank { grid-area: rank; }
.sr-area-idade { grid-area: idade; }
.sr-area-horas { grid-area: horas; }
.sr-area-unidade { grid-area: unidade; }
.sr-area-atendente { grid-area: atendente; }
.sr-area-categoria { grid-area: categoria; }
.sr-area-municipio { grid-area: municipio; }
.sr-area-empresa { grid-area: empresa; }
.sr-area-tabela { grid-area: tabela; }
.sr-area-publico { grid-area: publico; }
.sr-area-ociosas { grid-area: ociosas; }
.sr-area-mapa { grid-area: mapa; }
.sr-area-programa { grid-area: programa; }
.sr-area-arvore { grid-area: arvore; }
.sr-area-aging { grid-area: aging; }
.sr-area-evolucao { grid-area: evolucao; }
.sr-area-lista { grid-area: lista; }

/* A árvore de Ocupação dentro do quadro: cabeçalho e Total presos ao rolar. */
.sr-quadro .sr-arvore thead th { position: sticky; top: 0; z-index: 2; background: var(--sr-superficie); }

/* Muitas colunas (ex.: 24 meses): um rótulo sim, um não — o mês continua no título da coluna. */
.sr-colunas-muitas .sr-coluna:nth-child(2n) .sr-coluna-rotulo { visibility: hidden; }
.sr-quadro .sr-coluna-rotulo { font-size: .65rem; }
.sr-filtros .sr-painel-direita { margin-left: auto; }