/* ==========================================================================
   Sistema de Mobilização — tema

   A paleta vem do styles.xml da MOBILIZACAO.xlsx, para o sistema e o Excel
   exportado parecerem a mesma coisa:

     navy #1F3864 · azul claro #D6E0F0 · zebra #F4F7FC
     azul #2E5090 · verde #1F6B3B · cinza #8A8A8A
   ========================================================================== */

:root {
    --navy: #1F3864;
    --navy-claro: #2E5090;
    --azul-claro: #D6E0F0;
    --zebra: #F4F7FC;
    --verde: #1F6B3B;
    --cinza: #8A8A8A;
    --sub-navy: #B9C6E0;

    --bs-primary: var(--navy);
    --bs-primary-rgb: 31, 56, 100;
    --bs-link-color: var(--navy-claro);
    --bs-link-hover-color: var(--navy);

    --superficie: #ffffff;
    --superficie-2: var(--zebra);
    --borda: #e3e8f0;
    --texto-suave: #5c6b7f;
    --largura-menu: 250px;
}

[data-bs-theme="dark"] {
    --navy: #4a6fa5;
    --navy-claro: #6d94c7;
    --azul-claro: #22304a;
    --zebra: #171d28;
    --verde: #4caf7d;
    --cinza: #8a94a6;
    --sub-navy: #9db3d4;

    --superficie: #1a212e;
    --superficie-2: #151b26;
    --borda: #2c3648;
    --texto-suave: #9aa7ba;

    --bs-link-color: var(--navy-claro);
    --bs-link-hover-color: #a8c4e8;
}

body {
    background: var(--superficie-2);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Estrutura: menu lateral fixo no desktop, gaveta no celular
   -------------------------------------------------------------------------- */
.menu-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--largura-menu);
    background: var(--navy);
    color: #fff;
    overflow-y: auto;
    z-index: 1040;
    transition: transform .2s ease;
}

.menu-lateral .marca {
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.menu-lateral .nav-link {
    color: var(--sub-navy);
    padding: .55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-left: 3px solid transparent;
}

.menu-lateral .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.menu-lateral .nav-link.ativo {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-left-color: #fff;
    font-weight: 600;
}

.menu-lateral .secao {
    padding: 1rem 1.25rem .35rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
}

.area-conteudo {
    margin-left: var(--largura-menu);
    min-height: 100vh;
}

.barra-topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: .6rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.conteudo {
    padding: 1.25rem;
}

@media (max-width: 991.98px) {
    .menu-lateral { transform: translateX(-100%); }
    .menu-lateral.aberto { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .area-conteudo { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Cabeçalho de página e cartões
   -------------------------------------------------------------------------- */
.cabecalho-pagina {
    background: var(--navy);
    color: #fff;
    border-radius: .5rem;
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.25rem;
}

.cabecalho-pagina h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.cabecalho-pagina .subtitulo {
    color: var(--sub-navy);
    font-size: .875rem;
    margin-top: .15rem;
}

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: .5rem;
}

.cartao-titulo {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--borda);
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   Indicadores (§14) — o total de pessoas é o número dominante
   -------------------------------------------------------------------------- */
.grade-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.kpi {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: .5rem;
    padding: .85rem 1rem;
}

.kpi .rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    font-weight: 600;
}

.kpi .valor {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.kpi .nota {
    font-size: .75rem;
    color: var(--texto-suave);
}

.kpi-destaque {
    background: var(--azul-claro);
    border-color: transparent;
}

.kpi-destaque .valor {
    font-size: 2.75rem;
    color: var(--navy);
}

[data-bs-theme="dark"] .kpi-destaque .valor,
[data-bs-theme="dark"] .kpi-destaque .rotulo { color: #dce8fb; }

.kpi-verde .valor { color: var(--verde); }

/* --------------------------------------------------------------------------
   Tabela de pontos — o `rowspan` reproduz as células mescladas da planilha
   -------------------------------------------------------------------------- */
.tabela-planilha {
    font-size: .875rem;
    margin: 0;
}

.tabela-planilha > thead th {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    vertical-align: middle;
    padding: .6rem .5rem;
    white-space: nowrap;
}

.tabela-planilha > tbody td {
    vertical-align: middle;
    padding: .5rem;
    border-color: var(--borda);
}

.tabela-planilha > tbody tr:nth-child(even) > td { background: var(--zebra); }

/* Grade de cadastro: onde cada bloco de suplente começa.

   É a leitura das células mescladas da planilha (`C11:C14`) sem abrir mão de
   editar linha a linha — a borda separa os blocos, e o select continua lá. */
#tabelaGrade > tbody > tr.inicio-bloco > td {
    border-top: 2px solid var(--navy);
}

#tabelaGrade > tbody > tr.inicio-bloco:first-child > td {
    border-top-width: 0;
}

/* Numa linha que repete o suplente do bloco, só a célula do suplente recua:
   está lá para ser corrigida, mas não compete com o que mudou. */
#tabelaGrade > tbody > tr:not(.inicio-bloco) > td:nth-child(2) {
    opacity: .5;
}

#tabelaGrade > tbody > tr:not(.inicio-bloco):hover > td:nth-child(2),
#tabelaGrade > tbody > tr:not(.inicio-bloco):focus-within > td:nth-child(2) {
    opacity: 1;
}

.grade-orientacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .75rem .85rem;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--verde);
    border-radius: .5rem;
    background: var(--superficie-2);
}

.grade-orientacao-titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--navy);
    font-weight: 700;
    white-space: nowrap;
}

.grade-passos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: wrap;
}

.grade-passos span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .5rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .78rem;
    font-weight: 600;
}

.grade-passos strong {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
}

.grade-passos .bi { color: var(--texto-suave); font-size: .75rem; }

.grade-scroll {
    border: 1px solid var(--borda);
    border-radius: .5rem;
    background: var(--superficie-2);
    padding: .35rem;
}

.tabela-grade-cadastro {
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0 .45rem;
}

.tabela-grade-cadastro > thead th {
    border: 0;
}

.tabela-grade-cadastro > thead .cabecalho-grupo th {
    background: var(--navy);
    color: #fff;
    font-size: .78rem;
    text-align: left;
    padding: .7rem .65rem;
}

.tabela-grade-cadastro > thead .cabecalho-grupo th:first-child {
    border-radius: .4rem 0 0 0;
    text-align: center;
}

.tabela-grade-cadastro > thead .cabecalho-grupo th:last-child {
    border-radius: 0 .4rem 0 0;
}

.tabela-grade-cadastro > thead .cabecalho-grupo .bi {
    margin-right: .35rem;
    color: var(--sub-navy);
}

.tabela-grade-cadastro > thead tr:not(.cabecalho-grupo) th {
    background: var(--azul-claro);
    color: var(--navy);
    border-top: 1px solid rgba(31, 56, 100, .08);
    padding: .5rem .55rem;
}

.tabela-grade-cadastro > tbody > tr > td {
    background: var(--superficie) !important;
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    padding: .65rem .55rem;
}

.tabela-grade-cadastro > tbody > tr > td:first-child {
    border-left: 1px solid var(--borda);
    border-radius: .45rem 0 0 .45rem;
}

.tabela-grade-cadastro > tbody > tr > td:last-child {
    border-right: 1px solid var(--borda);
    border-radius: 0 .45rem .45rem 0;
}

.tabela-grade-cadastro > tbody > tr.inicio-bloco > td {
    border-top: 1px solid var(--borda);
}

.tabela-grade-cadastro > tbody > tr.inicio-bloco > td:first-child {
    border-left: 4px solid var(--navy);
}

.tabela-grade-cadastro > tbody > tr:hover > td,
.tabela-grade-cadastro > tbody > tr:focus-within > td {
    border-top-color: var(--navy-claro);
    border-bottom-color: var(--navy-claro);
}

.tabela-grade-cadastro > tbody > tr:hover > td:first-child,
.tabela-grade-cadastro > tbody > tr:focus-within > td:first-child {
    border-left-color: var(--navy-claro);
}

.tabela-grade-cadastro > tbody > tr:hover > td:last-child,
.tabela-grade-cadastro > tbody > tr:focus-within > td:last-child {
    border-right-color: var(--navy-claro);
}

.tabela-grade-cadastro .celula-numero span[data-numero] {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--azul-claro);
    color: var(--navy);
    font-weight: 700;
}

/* A linha é resumo: o que foi escolhido em texto, e a edição no modal. */
.tabela-grade-cadastro .celula-resumo {
    min-width: 0;
    font-size: .84rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tabela-grade-cadastro .celula-resumo [data-resumo] {
    display: block;
    color: var(--texto);
}

.tabela-grade-cadastro .resumo-forte { font-weight: 600; }

.tabela-grade-cadastro .resumo-numero {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* "calculado" / "fixado" logo abaixo do número de ônibus. */
.tabela-grade-cadastro .resumo-nota {
    display: block;
    color: var(--texto-suave);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tabela-grade-cadastro .resumo-nota:empty {
    display: none;
}

/* Valor ausente ainda é informação: fica claro que falta preencher. */
.tabela-grade-cadastro .celula-resumo [data-resumo]:empty::after,
.tabela-grade-cadastro .celula-resumo [data-resumo-vazio] {
    color: var(--texto-suave);
}

.tabela-grade-cadastro .celula-endereco { min-width: 17rem; }
.tabela-grade-cadastro .celula-contato { min-width: 8.5rem; font-weight: 600; }
.tabela-grade-cadastro .celula-pessoas-grade,
.tabela-grade-cadastro .celula-onibus,
.tabela-grade-cadastro .celula-horario { min-width: 6.25rem; }

/* As linhas de erro do servidor, logo abaixo da linha recusada. */
.tabela-grade-cadastro > tbody > tr.linha-erros > td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.tabela-grade-cadastro .campo-etiqueta {
    display: none;
    margin-bottom: .25rem;
    color: var(--texto-suave);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Select pesquisável dentro de um grupo de input: sem isto o Tom Select não
   encolhe e empurra o botão "+" para fora. Vale onde quer que o par apareça —
   no modal de ponto e no endereço da saída. */
.input-group > .ts-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.input-group > .ts-wrapper .ts-control {
    border-radius: .25rem 0 0 .25rem;
}

.tabela-grade-cadastro .celula-acoes .btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.tabela-grade-cadastro .celula-acoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

#tabelaGrade.tabela-grade-cadastro > tbody > tr.inicio-bloco > td,
#tabelaGrade.tabela-grade-cadastro > tbody > tr.inicio-bloco:first-child > td {
    border-top: 1px solid var(--borda);
}

#tabelaGrade.tabela-grade-cadastro > tbody > tr.inicio-bloco > td:first-child {
    border-left: 4px solid var(--navy);
}

[data-bs-theme="dark"] .tabela-grade-cadastro > thead tr:not(.cabecalho-grupo) th {
    color: #dce8fb;
}

.cartao-grade-principal {
    overflow: hidden;
}

.cartao-grade-principal .cartao-titulo {
    background: var(--superficie);
    border-bottom-color: var(--borda);
}

.cartao-grade-principal .cartao-titulo .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Grade principal da ação: linhas inline, sem arrastar lateralmente. */
#tabelaGrade.tabela-grade-cadastro {
    display: block;
    width: 100%;
    min-width: 0;
    border-spacing: 0;
}

.grade-lista-wrapper {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
}

#tabelaGrade > thead {
    display: none;
}

#tabelaGrade > tbody {
    display: grid;
    gap: .85rem;
}

#tabelaGrade > tbody > tr.linha-grade {
    display: grid;
    grid-template-columns:
        2.75rem
        minmax(150px, .95fr)
        minmax(170px, 1fr)
        minmax(92px, .55fr)
        minmax(220px, 1.35fr)
        minmax(150px, .9fr)
        minmax(92px, .45fr)
        minmax(78px, .38fr)
        minmax(82px, .38fr)
        minmax(126px, .65fr)
        2.35rem;
    grid-template-areas: "numero suplente responsavel contato local destino horario onibus pessoas transporte remover";
    gap: .65rem;
    align-items: start;
    padding: .8rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 4px solid transparent;
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#tabelaGrade > tbody > tr.inicio-bloco {
    border-left-color: var(--navy);
}

#tabelaGrade > tbody > tr.linha-grade:hover,
#tabelaGrade > tbody > tr.linha-grade:focus-within {
    border-color: var(--navy-claro);
    box-shadow: 0 8px 22px rgba(31, 56, 100, .08);
}

#tabelaGrade > tbody > tr:not(.inicio-bloco) > td:nth-child(2),
#tabelaGrade > tbody > tr:not(.inicio-bloco):hover > td:nth-child(2),
#tabelaGrade > tbody > tr:not(.inicio-bloco):focus-within > td:nth-child(2) {
    opacity: 1;
}

#tabelaGrade > tbody > tr.linha-grade > td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#tabelaGrade > tbody > tr.linha-grade > td:nth-child(1) { grid-area: numero; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(2) { grid-area: suplente; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(3) { grid-area: responsavel; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(4) { grid-area: contato; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(5) { grid-area: local; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(6) { grid-area: destino; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(7) { grid-area: horario; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(8) { grid-area: onibus; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(9) { grid-area: pessoas; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(10) { grid-area: transporte; }
#tabelaGrade > tbody > tr.linha-grade > td:nth-child(11) { grid-area: remover; }

#tabelaGrade .campo-etiqueta {
    display: block;
    letter-spacing: .04em;
}

#tabelaGrade .celula-numero {
    align-self: stretch;
    display: grid !important;
    align-content: center;
    justify-items: center;
}

#tabelaGrade .celula-numero .campo-etiqueta {
    margin-bottom: .35rem;
}

#tabelaGrade .celula-contato {
    overflow: hidden;
    font-weight: 600;
}

#tabelaGrade [data-resumo="contato"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tabelaGrade .celula-acoes {
    align-self: center;
    display: flex !important;
    justify-content: center;
}

#tabelaGrade .celula-resumo,
#tabelaGrade .celula-endereco,
#tabelaGrade .celula-contato,
#tabelaGrade .celula-pessoas-grade,
#tabelaGrade .celula-onibus,
#tabelaGrade .celula-horario {
    min-width: 0;
}

/* O tbody é um grid: a linha de erro precisa ocupar a faixa inteira. */
#tabelaGrade > tbody > tr.linha-erros,
#tabelaPontosSaida > tbody > tr.linha-erros {
    display: block;
    margin-top: -.5rem;
}

@media (max-width: 1499.98px) {
    #tabelaGrade > tbody > tr.linha-grade {
        grid-template-columns: 2.75rem repeat(6, minmax(0, 1fr)) 2.35rem;
        grid-template-areas:
            "numero suplente suplente responsavel responsavel contato contato remover"
            "numero local local local destino destino horario remover"
            "numero onibus pessoas transporte transporte transporte transporte remover";
    }
}

@media (max-width: 767.98px) {
    .grade-lista-wrapper {
        padding: .45rem;
    }

    #tabelaGrade > tbody > tr.linha-grade {
        grid-template-columns: minmax(0, 1fr) 2.35rem;
        grid-template-areas:
            "numero remover"
            "suplente suplente"
            "responsavel responsavel"
            "contato contato"
            "local local"
            "destino destino"
            "horario onibus"
            "pessoas transporte";
        padding: .75rem;
    }

    #tabelaGrade .celula-numero {
        align-content: start;
        justify-items: start;
    }

    #tabelaGrade .celula-numero .campo-etiqueta {
        display: inline;
        margin: 0 .35rem 0 0;
    }

    #tabelaGrade .celula-numero span[data-numero] {
        width: 1.55rem;
        height: 1.55rem;
    }
}

.saida-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(220px, 1fr) 8rem minmax(220px, 1fr);
    gap: .85rem;
    align-items: start;
}

.saida-campo {
    border: 1px solid var(--borda);
    border-radius: .45rem;
    background: var(--superficie-2);
    padding: .75rem;
}

.saida-campo-principal {
    background: var(--superficie);
    border-left: 4px solid var(--navy);
}

.saida-campo-observacoes {
    grid-column: 1 / -1;
}

.saida-grid-grade {
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .95fr) 8rem minmax(180px, .9fr);
}

.campo-etiqueta-visivel {
    margin-bottom: .35rem;
    color: var(--texto-suave);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pista-local {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    color: var(--texto-suave);
    font-size: .82rem;
}

.pista-local strong {
    color: var(--navy);
}

.tabela-pontos-saida {
    display: block;
    width: 100%;
    min-width: 0;
    border-spacing: 0;
}

#tabelaPontosSaida > thead {
    display: none;
}

#tabelaPontosSaida > tbody {
    display: grid;
    gap: .85rem;
}

#tabelaPontosSaida > tbody > tr.linha-ponto {
    display: grid;
    grid-template-columns:
        2.75rem
        minmax(140px, .85fr)
        minmax(160px, 1fr)
        minmax(92px, .5fr)
        minmax(180px, 1.1fr)
        minmax(80px, .38fr)
        minmax(120px, .6fr)
        minmax(130px, .65fr)
        2.35rem;
    grid-template-areas:
        "numero suplente responsavel contato local pessoas transporte grupo acoes";
    gap: .65rem;
    align-items: start;
    padding: .8rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--navy);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#tabelaPontosSaida > tbody > tr.linha-ponto:hover,
#tabelaPontosSaida > tbody > tr.linha-ponto:focus-within {
    border-color: var(--navy-claro);
    box-shadow: 0 8px 22px rgba(31, 56, 100, .08);
}

#tabelaPontosSaida > tbody > tr.linha-ponto > td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(1) { grid-area: numero; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(2) { grid-area: suplente; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(3) { grid-area: responsavel; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(4) { grid-area: contato; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(5) { grid-area: local; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(6) { grid-area: pessoas; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(7) { grid-area: transporte; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(8) { grid-area: grupo; }
#tabelaPontosSaida > tbody > tr.linha-ponto > td:nth-child(9) { grid-area: acoes; }

/* O cabeçalho da tabela está oculto nesta largura: a etiqueta de cada célula
   é o que diz o que o valor significa. */
#tabelaPontosSaida .campo-etiqueta {
    display: block;
    letter-spacing: .04em;
}

#tabelaPontosSaida .celula-numero {
    align-self: stretch;
    display: grid !important;
    align-content: center;
    justify-items: center;
}

#tabelaPontosSaida .celula-acoes {
    align-self: center;
    display: flex !important;
    justify-content: center;
}

@media (max-width: 1499.98px) {
    #tabelaPontosSaida > tbody > tr.linha-ponto {
        grid-template-columns: 2.75rem repeat(4, minmax(0, 1fr)) 2.35rem;
        grid-template-areas:
            "numero suplente suplente responsavel responsavel acoes"
            "numero contato local local local acoes"
            "numero pessoas transporte grupo grupo acoes";
    }
}

@media (max-width: 767.98px) {
    #tabelaPontosSaida > tbody > tr.linha-ponto {
        grid-template-columns: minmax(0, 1fr) 2.35rem;
        grid-template-areas:
            "numero acoes"
            "suplente suplente"
            "responsavel responsavel"
            "contato contato"
            "local local"
            "pessoas transporte"
            "grupo grupo";
        padding: .75rem;
    }

    #tabelaPontosSaida .celula-numero {
        align-content: start;
        justify-items: start;
    }

    #tabelaPontosSaida .celula-numero .campo-etiqueta {
        display: inline;
        margin: 0 .35rem 0 0;
    }
}

@media (max-width: 1199.98px) {
    .grade-orientacao { align-items: flex-start; flex-direction: column; }
    .grade-passos { justify-content: flex-start; }
    .tabela-grade-cadastro .campo-etiqueta { display: block; }
    .saida-grid { grid-template-columns: 1fr 1fr; }
    .saida-campo-principal,
    .saida-campo-observacoes { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .saida-grid { grid-template-columns: 1fr; }
    .saida-campo-principal,
    .saida-campo-observacoes { grid-column: auto; }
}

.celula-suplente {
    background: var(--azul-claro) !important;
    color: var(--navy);
    font-weight: 700;
    text-align: center;
    vertical-align: middle !important;
    font-size: .8rem;
}

[data-bs-theme="dark"] .celula-suplente { color: #dce8fb; }

.col-ordem { color: var(--cinza); text-align: center; width: 3rem; }
.col-onibus { color: var(--navy-claro); font-weight: 700; text-align: center; }
.col-pessoas { color: var(--verde); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.linha-total > td {
    background: var(--navy) !important;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.tabela-rolavel { overflow-x: auto; }

/* Edição rápida na própria tabela (§42) */
.campo-inline {
    width: 4.5rem;
    text-align: center;
    border: 1px solid transparent;
    background: transparent;
    border-radius: .25rem;
    font-weight: 700;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.campo-inline:hover { border-color: var(--borda); background: var(--superficie); }
.campo-inline:focus { border-color: var(--navy-claro); background: var(--superficie); outline: 0; }
.campo-inline.salvando { opacity: .5; }
.campo-inline.salvo { border-color: var(--verde); }

/* --------------------------------------------------------------------------
   Diversos
   -------------------------------------------------------------------------- */
.badge-ocupacao { font-size: .68rem; font-weight: 600; }

.barra-preenchimento {
    height: .4rem;
    border-radius: 1rem;
    background: var(--borda);
    overflow: hidden;
}

/* Os gráficos rodam com `maintainAspectRatio: false` para preencher a largura
   do cartão; sem uma altura definida aqui o canvas cresceria a cada `resize`. */
.area-grafico {
    position: relative;
    height: 240px;
}

.area-grafico-alta { height: 300px; }

@media (max-width: 575.98px) {
    .area-grafico,
    .area-grafico-alta { height: 220px; }
}

/* Faixa fina dentro da tabela: a série de um responsável, balde a balde. */
.mini-barra {
    display: block;
    height: 2.2rem;
    width: 100%;
    background: var(--borda);
    border-radius: .2rem;
    position: relative;
    overflow: hidden;
}

.mini-barra > span {
    position: absolute;
    inset: auto 0 0 0;
    background: var(--verde);
}

.mini-barra.vazia { opacity: .45; }

/* Uma coluna por balde: estreitas, para caber muitas antes de rolar. */
.tabela-serie th,
.tabela-serie td {
    min-width: 3.4rem;
    border-color: transparent;
}

/* Número grande dos cartões de destaque — mesma família dos KPIs. */
.valor-destaque {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--verde);
    line-height: 1.2;
    margin-top: .15rem;
}

.barra-preenchimento > span {
    display: block;
    height: 100%;
    background: var(--verde);
}

.botoes-contato .btn {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .75rem;
}

.dia-calendario {
    min-height: 6.5rem;
    border: 1px solid var(--borda);
    padding: .35rem;
    background: var(--superficie);
    vertical-align: top;
}

.dia-calendario.fora-do-mes { background: var(--superficie-2); opacity: .55; }
.dia-calendario.e-hoje { border: 2px solid var(--navy-claro); }
.dia-calendario .numero { font-size: .8rem; font-weight: 600; color: var(--texto-suave); }

.evento-agenda {
    display: block;
    font-size: .72rem;
    padding: .15rem .35rem;
    border-radius: .25rem;
    margin-top: .2rem;
    background: var(--azul-claro);
    color: var(--navy);
    text-decoration: none;
    border-left: 3px solid var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="dark"] .evento-agenda { color: #dce8fb; }

.medalha { font-size: 1.1rem; }

.vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-suave);
}

.vazio .bi { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .5rem; }

.resultado-busca {
    display: flex;
    gap: .75rem;
    padding: .6rem .85rem;
    border: 1px solid var(--borda);
    border-radius: .4rem;
    background: var(--superficie);
    text-decoration: none;
    color: inherit;
    margin-bottom: .4rem;
}

.resultado-busca:hover { border-color: var(--navy-claro); }

/* Tom Select alinhado ao tema */
.ts-wrapper.form-select { padding: 0; }
[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-control { background: var(--superficie); color: inherit; }

/* Em telas pequenas, tabelas viram cartões (§26) */
@media (max-width: 767.98px) {
    .tabela-cartoes > thead { display: none; }
    .tabela-cartoes > tbody > tr {
        display: block;
        border: 1px solid var(--borda);
        border-radius: .4rem;
        margin-bottom: .6rem;
        padding: .5rem;
        background: var(--superficie);
    }
    .tabela-cartoes > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: .25rem 0;
        background: transparent !important;
        text-align: right;
    }
    .tabela-cartoes > tbody > tr > td::before {
        content: attr(data-rotulo);
        font-weight: 600;
        font-size: .72rem;
        text-transform: uppercase;
        color: var(--texto-suave);
        text-align: left;
    }
}