/* ============================================================
   LEAL EDUCA — SISTEMA DE GESTÃO V3
   Mobile-first. Tudo que for tocável tem no mínimo 44px.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Marca */
    --azul-marinho: #002B49;
    --dourado:      #F7C948;
    --azul-medio:   #4E7DA0;
    --neutro:       #F5F5F5;

    /* Derivadas */
    --azul-escuro:  #001B2E;
    --azul-claro:   #E8EFF4;
    --dourado-fundo:#FDF6E0;
    --branco:       #FFFFFF;

    /* Texto */
    --texto:        #1B2A35;
    --texto-medio:  #566977;
    --texto-fraco:  #8A98A3;
    --borda:        #E2E8ED;

    /* Cores com significado (status e tipos) */
    --verde:        #2D6A1F;
    --verde-fundo:  #EAF4E6;
    --azul:         #185FA5;
    --azul-fundo:   #E7F0F9;
    --ambar:        #854F0B;
    --ambar-fundo:  #FDF1DC;
    --roxo:         #534AB7;
    --roxo-fundo:   #EDEBFA;
    --coral:        #993C1D;
    --coral-fundo:  #FBEBE4;
    --cinza:        #5A6874;
    --cinza-fundo:  #EEF1F3;

    /* Tipografia */
    --fonte-titulo: 'Fraunces', Georgia, serif;
    --fonte-corpo:  'Syne', system-ui, sans-serif;
    --fonte-apoio:  'Manrope', system-ui, sans-serif;

    /* Estrutura */
    --raio:      14px;
    --raio-mini: 10px;
    --sombra:    0 1px 2px rgba(0, 43, 73, .06), 0 4px 14px rgba(0, 43, 73, .05);
    --sombra-alta: 0 6px 24px rgba(0, 43, 73, .14);
    --toque:     44px;
    --barra-baixo: 68px;

    /* Superfícies que mudam no modo escuro */
    --fundo-pagina: var(--neutro);
    --fundo-card:   var(--branco);
    --fundo-topo:   var(--azul-marinho);
    --fundo-campo:  var(--branco);
}

/* ============================================================
   MODO ESCURO

   Só as variáveis mudam. Como o sistema inteiro usa tokens, não
   foi preciso reescrever nenhum componente.

   Duas decisões que valem explicação:

   1. O azul marinho da marca é escuro e sumiria contra um fundo
      escuro. Por isso o cabeçalho ganha um tom próprio, um pouco
      mais claro que a página, com uma borda sutil separando.

   2. As cores de significado (verde de pago, coral de atrasado)
      foram feitas para fundo claro. No escuro elas ficariam com
      pouco contraste, então ganham versões mais luminosas, e os
      fundos das etiquetas viram tons translúcidos da própria cor.
   ============================================================ */
:root[data-tema="escuro"] {
    --azul-marinho: #DCE8F0;   /* vira cor de TEXTO no escuro */
    --dourado:      #FFD866;
    --azul-medio:   #8FB8D4;

    --azul-escuro:  #0A121A;
    --azul-claro:   #1E2C38;
    --dourado-fundo:#3A3018;
    --branco:       #161E26;

    --texto:        #E8EDF2;
    --texto-medio:  #A9B7C4;
    --texto-fraco:  #7E8C99;
    --borda:        #2A3742;

    --verde:        #7BC96F;
    --verde-fundo:  #1B2E1B;
    --azul:         #6FB3F2;
    --azul-fundo:   #16283C;
    --ambar:        #E0A94A;
    --ambar-fundo:  #322718;
    --roxo:         #A99BF0;
    --roxo-fundo:   #241F3C;
    --coral:        #F0865E;
    --coral-fundo:  #382016;
    --cinza:        #9AA7B3;
    --cinza-fundo:  #222C36;

    --fundo-pagina: #0E151C;
    --fundo-card:   #161E26;
    --fundo-topo:   #16222E;
    --fundo-campo:  #1B242E;

    --sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --sombra-alta: 0 6px 24px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* Quem não escolheu nada segue a configuração do aparelho */
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] {
        --azul-marinho: #DCE8F0;
        --dourado:      #FFD866;
        --azul-medio:   #8FB8D4;

        --azul-escuro:  #0A121A;
        --azul-claro:   #1E2C38;
        --dourado-fundo:#3A3018;
        --branco:       #161E26;

        --texto:        #E8EDF2;
        --texto-medio:  #A9B7C4;
        --texto-fraco:  #7E8C99;
        --borda:        #2A3742;

        --verde:        #7BC96F;
        --verde-fundo:  #1B2E1B;
        --azul:         #6FB3F2;
        --azul-fundo:   #16283C;
        --ambar:        #E0A94A;
        --ambar-fundo:  #322718;
        --roxo:         #A99BF0;
        --roxo-fundo:   #241F3C;
        --coral:        #F0865E;
        --coral-fundo:  #382016;
        --cinza:        #9AA7B3;
        --cinza-fundo:  #222C36;

        --fundo-pagina: #0E151C;
        --fundo-card:   #161E26;
        --fundo-topo:   #16222E;
        --fundo-campo:  #1B242E;

        --sombra:      0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
        --sombra-alta: 0 6px 24px rgba(0, 0, 0, .55);

        color-scheme: dark;
    }
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo-pagina);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--azul-marinho); margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }

a { color: var(--azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, monospace;
    background: var(--azul-claro);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .85em;
}
pre {
    background: var(--azul-escuro); color: #CFE3F0;
    padding: 12px; border-radius: var(--raio-mini);
    overflow-x: auto; font-size: .85rem;
}

.texto-apoio { color: var(--texto-medio); font-family: var(--fonte-apoio); font-size: .9rem; margin: .3em 0 .8em; }
.ajuda { display: block; color: var(--texto-fraco); font-family: var(--fonte-apoio); font-size: .8rem; margin-top: 4px; }
.verde { color: var(--verde); }
.coral { color: var(--coral); }

/* ---------- 3. CABEÇALHO ---------- */
.topo {
    background: var(--fundo-topo);
    position: sticky; top: 0; z-index: 40;
    padding-top: env(safe-area-inset-top);
}
.topo-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; min-height: 56px;
}
.marca { color: #fff; text-decoration: none; flex: 1; }
.marca:hover { text-decoration: none; }
.marca-nome { font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 700; letter-spacing: .2px; }
.marca-nome em { color: var(--dourado); font-style: normal; }
.marca-sub {
    display: block; font-family: var(--fonte-apoio); font-size: .62rem;
    letter-spacing: 1.6px; color: #9DB6C7; text-transform: uppercase;
}

.nav-desktop { display: none; gap: 4px; }
.nav-desktop a {
    color: #C7D8E4; font-family: var(--fonte-apoio); font-weight: 600;
    font-size: .88rem; padding: 8px 12px; border-radius: 8px;
}
.nav-desktop a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.nav-desktop a.ativo { background: rgba(247,201,72,.16); color: var(--dourado); }

/* Botão de cadastrar no topo (só aparece no computador, onde a
   barra de baixo com o botão amarelo fica escondida) */
.nav-desktop .btn-novo-topo {
    /* Cor fixa: no modo escuro o --azul-marinho vira texto claro,
       e texto claro sobre dourado não se lê. */
    background: var(--dourado); color: #002B49;
    font-weight: 700; margin-left: 8px; border-radius: 999px; padding: 9px 16px;
}
.nav-desktop .btn-novo-topo:hover { background: #FFD75E; color: #002B49; }
.nav-desktop .btn-novo-topo.ativo { background: var(--dourado); color: #002B49; }

/* Seletor de perfil */
.perfil-menu { position: relative; }
.perfil-menu summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    min-height: var(--toque); padding: 0 12px;
    background: rgba(255,255,255,.1); border-radius: 999px;
    color: #fff; font-family: var(--fonte-apoio); font-weight: 600; font-size: .85rem;
}
.perfil-menu summary::-webkit-details-marker { display: none; }
.perfil-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-fraco); flex: none; }
.perfil-roney    { background: var(--dourado); }
.perfil-andressa { background: #6FD08C; }
.perfil-empresa  { background: var(--azul-medio); }
.perfil-nome { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.perfil-opcoes {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
    background: var(--fundo-card); border-radius: var(--raio); box-shadow: var(--sombra-alta);
    min-width: 210px; padding: 8px; display: flex; flex-direction: column;
}
.perfil-titulo {
    font-family: var(--fonte-apoio); font-size: .7rem; text-transform: uppercase;
    letter-spacing: 1px; color: var(--texto-fraco); padding: 6px 10px;
}
.perfil-opcoes a {
    padding: 11px 12px; border-radius: var(--raio-mini);
    color: var(--texto); font-family: var(--fonte-apoio); font-weight: 500; font-size: .92rem;
    min-height: var(--toque); display: flex; align-items: center;
}
.perfil-opcoes a:hover { background: var(--neutro); text-decoration: none; }
.perfil-opcoes a.ativo { background: var(--azul-claro); color: var(--azul-marinho); font-weight: 700; }
.perfil-opcoes hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 4px; }
.perfil-opcoes .sair { color: var(--coral); }

/* ---------- 4. CONTEÚDO ---------- */
.conteudo {
    max-width: 1100px; margin: 0 auto;
    padding: 16px 14px calc(var(--barra-baixo) + env(safe-area-inset-bottom) + 20px);
}

.titulo-pagina { margin-bottom: 14px; }
.titulo-pagina h1 { margin-bottom: 2px; }
.titulo-pagina.com-volta { display: flex; align-items: flex-start; gap: 10px; }
.voltar {
    width: var(--toque); height: var(--toque); flex: none;
    display: grid; place-items: center;
    background: var(--fundo-card); border-radius: var(--raio-mini); box-shadow: var(--sombra);
    color: var(--azul-marinho);
}
.voltar .icone { width: 16px; height: 16px; }

.card {
    background: var(--fundo-card); border-radius: var(--raio);
    padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.secao { margin-bottom: 18px; }
.secao-titulo {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.05rem; margin: 20px 0 10px;
}
.contador {
    background: var(--azul-escuro); color: #F5F5F5;
    font-family: var(--fonte-apoio); font-size: .72rem; font-weight: 700;
    min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; display: inline-grid; place-items: center;
}
.secao-vazia { padding: 4px 2px 10px; }
.sub { margin-top: 18px; font-size: .95rem; }

.icone { width: 20px; height: 20px; fill: currentColor; }

/* ---------- 5. BOTÕES ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque); padding: 0 18px;
    border: 0; border-radius: var(--raio-mini); cursor: pointer;
    font-family: var(--fonte-apoio); font-weight: 700; font-size: .93rem;
    text-decoration: none; transition: transform .06s ease, filter .15s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: scale(.98); }

.btn-primario { background: var(--azul-escuro); color: #F5F5F5; }
.btn-dourado  { background: var(--dourado); color: #002B49; }
.btn-suave    { background: var(--azul-claro); color: var(--azul-marinho); }
.btn-perigo   { background: var(--coral-fundo); color: var(--coral); }
.btn-largo    { width: 100%; }

.btn-mini {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 0 14px; border: 1px solid var(--borda);
    background: var(--fundo-card); border-radius: 999px; cursor: pointer;
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .82rem;
    color: var(--texto-medio); text-decoration: none;
}
.btn-mini.ativo { background: var(--azul-escuro); border-color: var(--azul-escuro); color: #F5F5F5; }
.btn-mini:hover { text-decoration: none; }

.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.linha-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.linha-inline input { flex: 1; min-width: 200px; }

.controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.separador { width: 1px; height: 22px; background: var(--borda); }
.rotulo-mini { font-family: var(--fonte-apoio); font-size: .8rem; color: var(--texto-medio); }
.select-mini {
    min-height: 38px; border: 1px solid var(--borda); border-radius: 999px;
    padding: 0 12px; background: var(--fundo-card); font-family: var(--fonte-apoio); font-size: .82rem;
}
.link-limpo {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--azul-medio); font-family: var(--fonte-apoio); font-size: .82rem;
    text-decoration: underline;
}

/* ---------- 6. MENSAGENS ---------- */
.flash {
    padding: 12px 14px; border-radius: var(--raio-mini); margin-bottom: 14px;
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .9rem;
}
.flash-ok   { background: var(--verde-fundo); color: var(--verde); }
.flash-erro { background: var(--coral-fundo); color: var(--coral); }

.aviso {
    display: block; padding: 12px 14px; margin-bottom: 14px;
    background: var(--dourado-fundo); border-left: 4px solid var(--dourado);
    border-radius: var(--raio-mini); color: #6B4E06;
    font-family: var(--fonte-apoio); font-size: .88rem; font-weight: 600;
}
.aviso:hover { text-decoration: none; filter: brightness(.98); }
.aviso-suave {
    padding: 11px 14px; margin-bottom: 14px; background: var(--azul-claro);
    border-radius: var(--raio-mini); color: var(--azul-marinho);
    font-family: var(--fonte-apoio); font-size: .84rem; line-height: 1.55;
}

.toast {
    position: fixed; left: 50%; bottom: calc(var(--barra-baixo) + 16px);
    transform: translate(-50%, 20px);
    background: var(--azul-escuro); color: var(--branco);
    padding: 13px 20px; border-radius: 999px; box-shadow: var(--sombra-alta);
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .88rem;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
    z-index: 90; max-width: 90vw; text-align: center;
}
.toast.aparece { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--coral); }

/* ---------- 7. FORMULÁRIOS ---------- */
label { font-family: var(--fonte-apoio); font-weight: 600; font-size: .85rem; color: var(--texto-medio); }
label small { font-weight: 400; color: var(--texto-fraco); }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], input[type="search"], select, textarea {
    width: 100%; min-height: var(--toque);
    padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-mini);
    background: var(--fundo-campo); color: var(--texto);
    font-family: var(--fonte-corpo); font-size: 16px; /* 16px evita o zoom automático do iPhone */
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--azul-medio);
    box-shadow: 0 0 0 3px rgba(78,125,160,.16);
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-medio) 50%), linear-gradient(135deg, var(--texto-medio) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.form-grade { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.grupo { display: flex; flex-direction: column; gap: 5px; }
.grupo.largo { grid-column: 1 / -1; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; }
.checkbox input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--azul-marinho); }
.checkbox span { font-weight: 600; color: var(--texto); font-size: .92rem; }
.checkbox small { display: block; font-weight: 400; color: var(--texto-fraco); font-size: .8rem; }

.campo-moeda { position: relative; }
.moeda-prefixo {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-family: var(--fonte-apoio); font-weight: 700; color: var(--texto-fraco); pointer-events: none;
}
.campo-moeda input { padding-left: 40px; font-size: 18px; font-weight: 600; }

/* ---------- 8. CADASTRO RÁPIDO ---------- */
.form-rapido .bloco {
    background: var(--fundo-card); border-radius: var(--raio);
    padding: 14px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.rotulo {
    display: block; font-family: var(--fonte-apoio); font-weight: 700;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .8px;
    color: var(--texto-medio); margin-bottom: 9px;
}
.dica { font-family: var(--fonte-apoio); font-size: .82rem; color: var(--azul-medio); margin: 8px 0 0; }
.dica-fixa { font-family: var(--fonte-apoio); font-size: .78rem; color: var(--texto-fraco); margin: 8px 0 0; line-height: 1.45; }
.dica.alerta { color: var(--coral); font-weight: 600; }

/* Chips: um toque, em vez dos dois de um dropdown */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 0 15px;
    background: var(--neutro); border: 1.5px solid var(--borda); border-radius: 999px;
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .88rem; color: var(--texto-medio);
    transition: all .12s ease;
}
.chip input:checked + span {
    background: var(--azul-escuro); border-color: var(--azul-escuro);
    color: #F5F5F5; transform: scale(1.03);
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(78,125,160,.3); }

.chip-verde input:checked + span { background: var(--verde); border-color: var(--verde); }
.chip-azul  input:checked + span { background: var(--azul);  border-color: var(--azul); }
.chip-ambar input:checked + span { background: var(--ambar); border-color: var(--ambar); }
.chip-roxo  input:checked + span { background: var(--roxo);  border-color: var(--roxo); }

.chip-botao {
    min-height: 42px; padding: 0 15px;
    background: var(--neutro); border: 1.5px solid var(--borda); border-radius: 999px;
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .88rem; color: var(--texto-medio);
    cursor: pointer; transition: all .12s ease;
}
.chip-botao.ativo { background: var(--azul-escuro); border-color: var(--azul-escuro); color: #F5F5F5; }
.chips-prazo, .chips-entrada { margin-bottom: 10px; }

.dois-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botao-grande { position: relative; cursor: pointer; }
.botao-grande input { position: absolute; opacity: 0; width: 0; height: 0; }
.botao-grande span {
    display: flex; align-items: center; justify-content: center;
    min-height: 54px; border-radius: var(--raio-mini);
    background: var(--neutro); border: 2px solid var(--borda);
    font-family: var(--fonte-apoio); font-weight: 700; font-size: 1rem; color: var(--texto-medio);
    transition: all .12s ease;
}
.botao-grande input:checked + span {
    background: var(--azul-escuro); border-color: var(--azul-escuro); color: #F5F5F5;
}

/* Autocomplete */
.auto-wrap { position: relative; }
.auto-lista {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
    background: var(--fundo-card); border-radius: var(--raio-mini); box-shadow: var(--sombra-alta);
    max-height: 260px; overflow-y: auto; border: 1px solid var(--borda);
}
.auto-item {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    border-bottom: 1px solid var(--borda); padding: 11px 14px; cursor: pointer; min-height: var(--toque);
}
.auto-item:last-child { border-bottom: 0; }
.auto-item:hover, .auto-item.marcado { background: var(--azul-claro); }
.auto-nome { display: block; font-family: var(--fonte-apoio); font-weight: 700; font-size: .93rem; color: var(--texto); }
.auto-meta { display: block; font-family: var(--fonte-apoio); font-size: .78rem; color: var(--texto-fraco); margin-top: 1px; }

/* Botão de salvar que acompanha o polegar */
.acao-fixa { position: sticky; bottom: calc(var(--barra-baixo) + 8px); z-index: 20; padding-top: 6px; }
.acao-fixa .btn { box-shadow: var(--sombra-alta); min-height: 52px; font-size: 1rem; }

/* ---------- 9. ETIQUETAS ---------- */
.badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    font-family: var(--fonte-apoio); font-weight: 700; font-size: .72rem;
    background: var(--cinza-fundo); color: var(--cinza); white-space: nowrap;
}
.badge-verde { background: var(--verde-fundo); color: var(--verde); }
.badge-azul  { background: var(--azul-fundo);  color: var(--azul); }
.badge-ambar { background: var(--ambar-fundo); color: var(--ambar); }
.badge-roxo  { background: var(--roxo-fundo);  color: var(--roxo); }
.badge-coral { background: var(--coral-fundo); color: var(--coral); }
.badge-cinza { background: var(--cinza-fundo); color: var(--cinza); }
.badge-tipo  { text-transform: uppercase; letter-spacing: .4px; font-size: .68rem; }

.prazo-atrasado { background: var(--coral); color: #fff; }
.prazo-hoje     { background: #C9701A; color: #fff; }
.prazo-perto    { background: var(--dourado); color: #5C4708; }

.tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-family: var(--fonte-apoio); font-weight: 700; font-size: .72rem;
}
.tag-novo       { background: var(--azul-fundo);  color: var(--azul); }
.tag-recorrente { background: var(--verde-fundo); color: var(--verde); }
.tag-vip        { background: var(--dourado);     color: #5C4708; }
.prazo-perto    { color: #5C4708; }
.tag-estimada {
    background: var(--ambar-fundo); color: var(--ambar);
    padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700;
}

/* ---------- 10. FAIXA DE ALERTAS ---------- */
.faixa-alertas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.alerta {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 66px; padding: 8px 4px; border-radius: var(--raio-mini);
    background: var(--fundo-card); box-shadow: var(--sombra); text-align: center;
}
.alerta:hover { text-decoration: none; }
.alerta strong { font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 700; line-height: 1; }
.alerta span { font-family: var(--fonte-apoio); font-size: .68rem; color: var(--texto-fraco); margin-top: 3px; }
.a-vermelho { background: var(--coral); }
.a-vermelho strong, .a-vermelho span { color: #fff; }
.a-laranja  { background: #C9701A; }
.a-laranja strong, .a-laranja span { color: #fff; }
.a-dourado  { background: var(--dourado); }
.a-dourado strong, .a-dourado span { color: #5C4708; }
/* No escuro o cabeçalho precisa se separar da página */
:root[data-tema="escuro"] .topo,
:root[data-tema="auto"] .topo { border-bottom: 1px solid var(--borda); }
.a-ok strong { color: var(--verde); }
.a-neutro strong { color: var(--azul-marinho); }

/* ---------- 11. LISTA DE TRABALHOS ---------- */
.t-lista { display: flex; flex-direction: column; gap: 8px; }

.t-item {
    display: flex; align-items: stretch;
    background: var(--fundo-card); border-radius: var(--raio);
    box-shadow: var(--sombra); overflow: hidden;
    border-left: 5px solid var(--cinza);
}
.t-item.st-azul  { border-left-color: var(--azul);  background: linear-gradient(90deg, var(--azul-fundo) 0%, #fff 42%); }
.t-item.st-ambar { border-left-color: var(--ambar); background: linear-gradient(90deg, var(--ambar-fundo) 0%, #fff 42%); }
.t-item.st-roxo  { border-left-color: var(--roxo);  background: linear-gradient(90deg, var(--roxo-fundo) 0%, #fff 42%); }
.t-item.st-verde { border-left-color: var(--verde); background: linear-gradient(90deg, var(--verde-fundo) 0%, #fff 42%); }
.t-item.st-cinza { border-left-color: var(--cinza); }
.t-item.t-atrasado { border-left-color: var(--coral); border-left-width: 6px; }
.t-item.t-hoje     { border-left-color: #C9701A; border-left-width: 6px; }

.t-corpo { flex: 1; padding: 12px 14px; min-width: 0; color: inherit; }
.t-corpo:hover { text-decoration: none; }

.t-linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.t-cliente {
    font-family: var(--fonte-corpo); font-weight: 700; font-size: 1.02rem; color: var(--texto);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; color: var(--azul-marinho); flex: none; }

.t-linha2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.t-linha3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.t-atendente { font-family: var(--fonte-apoio); font-size: .74rem; font-weight: 600; color: var(--texto-fraco); }
.t-data  { font-family: var(--fonte-apoio); font-size: .78rem; color: var(--texto-medio); }
.t-sem-data { color: var(--ambar); font-weight: 600; }
.t-saldo { font-family: var(--fonte-apoio); font-size: .78rem; font-weight: 700; color: var(--coral); }

.t-zap {
    width: 52px; flex: none;
    display: grid; place-items: center;
    background: var(--verde-fundo); color: var(--verde);
    border-left: 1px solid var(--borda);
}
.t-zap:hover { background: #DCEED5; text-decoration: none; }
.t-zap .icone { width: 22px; height: 22px; }

.t-item.cobranca { border-left-color: var(--coral); }

/* ---------- 12. CONTADORES E KPIs ---------- */
.grade-contadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 6px; }
.contador-card {
    display: flex; flex-direction: column; gap: 2px;
    padding: 13px 14px; border-radius: var(--raio-mini);
    background: var(--fundo-card); box-shadow: var(--sombra); border-left: 4px solid var(--cinza);
}
.contador-card:hover { text-decoration: none; }
.contador-card.st-azul  { border-left-color: var(--azul); }
.contador-card.st-ambar { border-left-color: var(--ambar); }
.contador-card.st-roxo  { border-left-color: var(--roxo); }
.contador-card.st-verde { border-left-color: var(--verde); }
.contador-valor { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 700; color: var(--azul-marinho); line-height: 1; }
.contador-rotulo { font-family: var(--fonte-apoio); font-size: .76rem; color: var(--texto-medio); }

.grade-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--fundo-card); border-radius: var(--raio); padding: 14px;
    box-shadow: var(--sombra); color: inherit;
}
.kpi:hover { text-decoration: none; }
.kpi-rotulo { font-family: var(--fonte-apoio); font-size: .74rem; font-weight: 600; color: var(--texto-medio); text-transform: uppercase; letter-spacing: .5px; }
.kpi-valor  { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 700; color: var(--azul-marinho); line-height: 1.1; }
.kpi-apoio  { font-family: var(--fonte-apoio); font-size: .76rem; color: var(--texto-fraco); line-height: 1.4; }
.kpi-destaque { background: var(--azul-escuro); }
.kpi-destaque .kpi-rotulo { color: #9DB6C7; }
.kpi-destaque .kpi-valor  { color: var(--dourado); }
.kpi-destaque .kpi-apoio  { color: #B9CBD8; }
.kpi-alerta .kpi-valor { color: var(--coral); }

.var-alta   { color: var(--verde); font-weight: 700; }
.var-queda  { color: var(--coral); font-weight: 700; }
.var-neutra { color: var(--texto-fraco); }

/* ---------- 13. PROGRESSO ---------- */
.progresso { margin: 4px 0 8px; }
.progresso-topo {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-family: var(--fonte-apoio); font-size: .84rem; color: var(--texto-medio); margin-bottom: 7px;
}
.progresso-topo strong { color: var(--azul-marinho); font-size: .92rem; }
.barra { height: 12px; background: var(--neutro); border-radius: 999px; overflow: hidden; }
.barra-fina { height: 7px; }
.barra span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.barra-inicio { background: var(--azul-medio); }
.barra-boa    { background: var(--dourado); }
.barra-cheia  { background: var(--verde); }
.progresso-rodape { font-family: var(--fonte-apoio); font-size: .76rem; color: var(--texto-fraco); margin-top: 5px; }

/* ---------- 14. GRÁFICOS ---------- */
.grafico { margin-top: 10px; }
.grafico-legenda { display: flex; gap: 14px; margin-bottom: 10px; }
.leg { font-family: var(--fonte-apoio); font-size: .78rem; color: var(--texto-medio); display: flex; align-items: center; gap: 6px; }
.leg::before { content: ''; width: 11px; height: 11px; border-radius: 3px; }
.leg.serie-a::before { background: var(--azul-marinho); }
.leg.serie-b::before { background: var(--dourado); }

.grafico-area { display: flex; align-items: flex-end; height: 190px; gap: 2px; }
.graf-col { display: flex; flex-direction: column; align-items: center; height: 100%; }
.graf-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; padding: 0 2px; }
.graf-barra { position: relative; flex: 1; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; }
.graf-barra.serie-a { background: var(--azul-marinho); }
.graf-barra.serie-b { background: var(--dourado); }
.graf-valor {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    font-family: var(--fonte-apoio); font-size: .58rem; font-style: normal;
    color: var(--texto-fraco); white-space: nowrap; margin-bottom: 3px;
    opacity: 0; transition: opacity .15s;
}
.graf-col:hover .graf-valor { opacity: 1; }
.graf-rotulo { font-family: var(--fonte-apoio); font-size: .68rem; color: var(--texto-fraco); margin-top: 6px; }

.rank-linha { margin-bottom: 14px; }
.rank-topo {
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
    font-family: var(--fonte-apoio); font-size: .88rem; color: var(--texto); margin-bottom: 5px;
}
.rank-topo strong { color: var(--azul-marinho); }
.rank-extra { display: block; font-family: var(--fonte-apoio); font-size: .74rem; color: var(--texto-fraco); margin-top: 4px; }

/* ---------- 15. TABELAS ---------- */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
.tabela { width: 100%; border-collapse: collapse; font-family: var(--fonte-apoio); font-size: .88rem; }
.tabela th {
    text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--borda);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-fraco); white-space: nowrap;
}
.tabela td { padding: 11px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela tr:last-child td { border-bottom: 0; }

.lista-faixas { list-style: none; margin: 0; padding: 0; }
.lista-faixas li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid var(--borda);
    font-family: var(--fonte-apoio); font-size: .88rem; color: var(--texto-medio);
}
.lista-faixas li:last-child { border-bottom: 0; }
.lista-faixas em { font-style: normal; color: var(--texto-fraco); font-size: .8rem; }
.lista-faixas strong { color: var(--azul-marinho); font-size: 1rem; }

/* ---------- Extrato de recebimentos (meses recolhíveis) ---------- */
.mes { border-bottom: 1px solid var(--borda); }
.mes:last-child { border-bottom: 0; }
.mes > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: var(--toque); padding: 12px 4px; cursor: pointer;
    list-style: none; user-select: none;
}
.mes > summary::-webkit-details-marker { display: none; }
.mes > summary::before {
    content: '▸'; color: var(--texto-fraco); font-size: .8rem;
    transition: transform .15s ease; flex: none;
}
.mes[open] > summary::before { transform: rotate(90deg); }
.mes > summary:hover { background: var(--neutro); }
.mes-nome {
    flex: 1; font-family: var(--fonte-apoio); font-weight: 600;
    font-size: .95rem; color: var(--texto);
}
.mes-total {
    font-family: var(--fonte-titulo); font-weight: 700;
    font-size: 1.05rem; color: var(--azul-marinho); white-space: nowrap;
}
.mes[open] .mes-total { color: var(--verde); }

.tabela-extrato td { vertical-align: top; white-space: normal; }
.tabela-extrato tfoot td {
    border-top: 2px solid var(--borda); border-bottom: 0;
    font-family: var(--fonte-apoio); color: var(--texto-medio); padding-top: 12px;
}
.ext-quem {
    display: block; font-family: var(--fonte-apoio);
    font-size: .72rem; color: var(--texto-fraco); margin-top: 2px;
}
.kpi-link {
    color: var(--dourado); font-weight: 600; text-decoration: underline;
}

/* Realce de um segundo ao chegar de outra tela pelo link do mês */
.mes.destacado { background: var(--dourado-fundo); border-radius: var(--raio-mini); }

/* ---------- Campos editáveis dentro do extrato ---------- */
.ext-editar {
    min-height: 34px; padding: 5px 8px;
    border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: inherit;
    font-family: var(--fonte-apoio); font-size: .84rem;
    width: auto; max-width: 100%;
}
.ext-editar:hover { border-color: var(--borda); background: var(--fundo-campo); }
.ext-editar:focus {
    border-color: var(--azul-medio); background: var(--fundo-campo);
    box-shadow: 0 0 0 3px rgba(78,125,160,.16);
}
.ext-editar:disabled { opacity: .5; }
.ext-data-campo  { color: var(--texto-medio); font-weight: 600; }
.ext-valor-campo {
    font-family: var(--fonte-titulo); font-weight: 700; color: var(--verde);
    text-align: right; width: 7.5em;
}

/* ---------- Alternância dos gráficos ---------- */
.visao-bloco[hidden] { display: none; }

/* ---------- Mover card do kanban ---------- */
.kb-mover {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 36px; margin-top: 8px;
    border: 1px solid var(--borda); border-radius: 8px;
    background: var(--fundo-card); color: var(--texto-medio);
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .78rem;
    cursor: pointer;
}
.kb-mover:hover { background: var(--azul-claro); color: var(--azul-marinho); }
.kb-mover .icone { width: 15px; height: 15px; }

.mover-fundo {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, .55);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
}
.mover-fundo[hidden] { display: none; }
.mover-caixa {
    width: 100%; max-width: 460px;
    background: var(--fundo-card);
    border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: var(--sombra-alta);
}
.mover-titulo {
    font-family: var(--fonte-apoio); font-weight: 700; font-size: .95rem;
    color: var(--texto); margin: 0 0 12px; text-align: center;
}
.mover-opcoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mover-opcao {
    min-height: 50px; padding: 0 16px; text-align: left;
    border: 1px solid var(--borda); border-left-width: 5px; border-radius: var(--raio-mini);
    background: var(--fundo-card); color: var(--texto);
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .95rem;
    cursor: pointer;
}
.mover-opcao:hover:not(:disabled) { background: var(--azul-claro); }
.mover-opcao:disabled { opacity: .45; cursor: default; }
.mover-opcao.atual::after {
    content: ' (está aqui)'; font-weight: 400; color: var(--texto-fraco); font-size: .82rem;
}
.mover-opcao.st-azul  { border-left-color: var(--azul); }
.mover-opcao.st-ambar { border-left-color: var(--ambar); }
.mover-opcao.st-verde { border-left-color: var(--verde); }
.mover-opcao.st-cinza { border-left-color: var(--cinza); }
.mover-opcao.st-roxo  { border-left-color: var(--roxo); }

@media (min-width: 640px) {
    .mover-fundo { align-items: center; padding: 20px; }
    .mover-caixa { border-radius: 18px; }
}

/* ---------- Texto que muda conforme o aparelho ---------- */
.so-desktop { display: none; }
.so-celular { display: inline; }
@media (min-width: 900px) {
    .so-desktop { display: inline; }
    .so-celular { display: none; }
}

/* ---------- Escolha de tema no menu do perfil ---------- */
.tema-escolha { display: flex; gap: 6px; padding: 8px 10px 4px; }
.tema-opcao {
    flex: 1; min-height: 38px; padding: 0 8px;
    border: 1px solid var(--borda); border-radius: 8px;
    background: var(--fundo-card); color: var(--texto-medio);
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .76rem;
    cursor: pointer;
}
.tema-opcao.ativo {
    background: var(--azul-escuro); border-color: var(--azul-escuro); color: #F5F5F5;
}

.lista-simples { list-style: none; margin: 8px 0; padding: 0; font-family: var(--fonte-apoio); font-size: .88rem; }
.lista-simples li { padding: 5px 0; }
.lista-erro li { color: var(--coral); }

/* ---------- 16. ABAS ---------- */
.abas {
    display: flex; gap: 6px; margin-bottom: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
    flex: none; min-height: 40px; padding: 0 16px;
    display: inline-flex; align-items: center;
    background: var(--fundo-card); border-radius: 999px; box-shadow: var(--sombra);
    font-family: var(--fonte-apoio); font-weight: 600; font-size: .86rem; color: var(--texto-medio);
    white-space: nowrap;
}
.abas a:hover { text-decoration: none; }
.abas a.ativo { background: var(--azul-escuro); color: #F5F5F5; }

.barra-busca { display: flex; gap: 8px; margin-bottom: 12px; }
.barra-busca input { flex: 1; }

/* ---------- 17. KANBAN ---------- */
.kanban {
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
}
.kb-coluna {
    flex: none; width: 250px; background: var(--fundo-card); border-radius: var(--raio);
    box-shadow: var(--sombra); display: flex; flex-direction: column;
    border-top: 4px solid var(--cinza); max-height: 70vh;
}
.kb-coluna.st-azul  { border-top-color: var(--azul); }
.kb-coluna.st-ambar { border-top-color: var(--ambar); }
.kb-coluna.st-roxo  { border-top-color: var(--roxo); }
.kb-coluna.st-verde { border-top-color: var(--verde); }
.kb-coluna.sobre    { background: var(--azul-claro); }

.kb-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 13px; border-bottom: 1px solid var(--borda);
}
.kb-titulo { font-family: var(--fonte-apoio); font-weight: 700; font-size: .85rem; color: var(--azul-marinho); }
.kb-contador {
    background: var(--neutro); color: var(--texto-medio);
    font-family: var(--fonte-apoio); font-size: .74rem; font-weight: 700;
    min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
}
.kb-cards { flex: 1; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 8px; min-height: 70px; }

.kb-card {
    background: var(--neutro); border-radius: var(--raio-mini); padding: 11px;
    border-left: 4px solid var(--cinza); cursor: grab;
}
.kb-card:active { cursor: grabbing; }
.kb-card.arrastando { opacity: .45; }
.kb-card.tp-verde { border-left-color: var(--verde); }
.kb-card.tp-azul  { border-left-color: var(--azul); }
.kb-card.tp-ambar { border-left-color: var(--ambar); }
.kb-card.tp-roxo  { border-left-color: var(--roxo); }
.kb-link { display: block; color: inherit; }
.kb-link:hover { text-decoration: none; }
.kb-cliente { display: block; font-weight: 700; font-size: .92rem; color: var(--texto); }
.kb-meta { display: block; font-family: var(--fonte-apoio); font-size: .76rem; color: var(--texto-medio); margin-top: 3px; }
.kb-prazo { display: block; font-family: var(--fonte-apoio); font-size: .74rem; color: var(--texto-fraco); margin-top: 4px; }

/* ---------- 18. DETALHE DO TRABALHO ---------- */
.card-resumo .resumo-topo { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.resumo-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.resumo-valores div { display: flex; flex-direction: column; gap: 2px; }
.resumo-valores .rot { font-family: var(--fonte-apoio); font-size: .72rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .5px; }
.resumo-valores strong { font-family: var(--fonte-titulo); font-size: 1.15rem; color: var(--azul-marinho); }
.resumo-prazo { font-family: var(--fonte-apoio); font-size: .84rem; color: var(--texto-medio); margin: 0 0 14px; }
.acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; }

.extrato { list-style: none; margin: 10px 0; padding: 0; }
.extrato li {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--borda);
    font-family: var(--fonte-apoio); font-size: .86rem;
}
.extrato li:last-child { border-bottom: 0; }
.ext-data { color: var(--texto-medio); font-weight: 600; white-space: nowrap; }
.ext-tipo { color: var(--texto-fraco); font-size: .8rem; }
.ext-valor { font-family: var(--fonte-titulo); font-weight: 700; color: var(--verde); white-space: nowrap; }
.ext-apagar {
    width: 32px; height: 32px; border: 0; background: var(--neutro); color: var(--texto-fraco);
    border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.ext-apagar:hover { background: var(--coral-fundo); color: var(--coral); }

.add-pagamento { margin-top: 12px; border-top: 1px solid var(--borda); padding-top: 12px; }
.add-pagamento summary {
    cursor: pointer; font-family: var(--fonte-apoio); font-weight: 700;
    color: var(--azul-medio); font-size: .9rem; min-height: var(--toque);
    display: flex; align-items: center;
}
.add-pagamento .form-grade { margin-top: 10px; }

/* ---------- 19. RESPOSTAS (visão de negócio) ---------- */
.respostas { display: grid; grid-template-columns: 1fr; gap: 12px; }
.resposta { padding: 13px 14px; background: var(--neutro); border-radius: var(--raio-mini); border-left: 4px solid var(--dourado); }
.resposta-pergunta { display: block; font-family: var(--fonte-apoio); font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-fraco); }
.resposta-valor { display: block; font-family: var(--fonte-titulo); font-size: 1.25rem; color: var(--azul-marinho); margin: 3px 0; }
.resposta-apoio { display: block; font-family: var(--fonte-apoio); font-size: .8rem; color: var(--texto-medio); }

.card-pico { background: var(--azul-escuro); color: #F5F5F5; }
.card-pico h2 { color: #F5F5F5; }
.card-pico .texto-apoio { color: #B9CBD8; }
.card-pico strong { color: var(--dourado); }
.pico-numero { font-family: var(--fonte-titulo); font-size: 3rem; font-weight: 700; color: var(--dourado); line-height: 1; margin: 8px 0; }
.pico-numero span { display: block; font-family: var(--fonte-apoio); font-size: .82rem; font-weight: 400; color: #9DB6C7; margin-top: 4px; }
.card-pico .kpi { background: rgba(255,255,255,.07); }
.card-pico .kpi-rotulo { color: #9DB6C7; }
.card-pico .kpi-valor { color: #fff; }
.card-pico .kpi-apoio { color: #8FA9BA; }

/* ---------- 20. ESTADOS VAZIOS ---------- */
.vazio {
    text-align: center; padding: 40px 20px;
    background: var(--fundo-card); border-radius: var(--raio); box-shadow: var(--sombra);
}
.vazio-titulo { font-family: var(--fonte-titulo); font-size: 1.1rem; color: var(--azul-marinho); margin: 0 0 6px; }
.vazio-apoio { font-family: var(--fonte-apoio); font-size: .88rem; color: var(--texto-fraco); margin: 0 0 18px; }

.escolha-perfil { text-align: center; }

.chips-estaticos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-estatico {
    padding: 5px 12px; background: var(--neutro); border-radius: 999px;
    font-family: var(--fonte-apoio); font-size: .8rem; color: var(--texto-medio);
}
.chip-novo { background: var(--dourado-fundo); color: #6B4E06; font-weight: 600; }

.dup-linha {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.dup-nomes { font-family: var(--fonte-apoio); font-size: .88rem; }
.dup-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.dup-form { display: inline; margin: 0; }

.paginacao {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 20px 0; font-family: var(--fonte-apoio); font-size: .85rem; color: var(--texto-medio);
}

/* ---------- 21. NAVEGAÇÃO INFERIOR ---------- */
.nav-baixo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--fundo-card); border-top: 1px solid var(--borda);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(0,43,73,.07);
}
.nav-baixo a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--barra-baixo); color: var(--texto-fraco);
    font-family: var(--fonte-apoio); font-size: .66rem; font-weight: 600;
}
.nav-baixo a:hover { text-decoration: none; }
.nav-baixo a.ativo { color: var(--azul-marinho); }
.nav-baixo a.ativo .icone { fill: var(--azul-marinho); }
.nav-baixo .icone { width: 21px; height: 21px; fill: var(--texto-fraco); }

/* O botão de cadastrar é o maior: é a ação mais frequente */
.nav-baixo .nav-novo { position: relative; color: var(--azul-marinho); }
.nav-baixo .nav-novo .icone {
    width: 46px; height: 46px; padding: 12px; margin-top: -18px;
    background: var(--dourado); fill: #002B49;
    border-radius: 50%; box-shadow: 0 4px 14px rgba(247,201,72,.5);
}

/* ---------- 22. LOGIN ---------- */
.tela-login {
    min-height: 100vh; display: grid; place-items: center;
    padding: 24px 16px; background: var(--azul-escuro);
}
.login-caixa {
    width: 100%; max-width: 380px;
    background: var(--fundo-card); border-radius: 18px; padding: 28px 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.login-largo { max-width: 520px; }
.login-marca { text-align: center; margin-bottom: 22px; }
.login-marca .marca-nome { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 700; color: var(--azul-marinho); }
.login-marca .marca-nome em { color: var(--dourado); font-style: normal; }
.login-marca .marca-sub { display: block; font-family: var(--fonte-apoio); font-size: .64rem; letter-spacing: 2px; color: var(--texto-fraco); margin-top: 3px; }
.login-caixa label { display: block; margin: 14px 0 5px; }
.login-caixa .btn { margin-top: 20px; }
.login-rodape { text-align: center; font-family: var(--fonte-apoio); font-size: .74rem; color: var(--texto-fraco); margin: 20px 0 0; }

/* ---------- 23. TELAS MAIORES ---------- */
@media (min-width: 640px) {
    .form-grade { grid-template-columns: 1fr 1fr; }
    .grade-kpi { grid-template-columns: repeat(3, 1fr); }
    .grade-contadores { grid-template-columns: repeat(4, 1fr); }
    .respostas { grid-template-columns: 1fr 1fr; }
    h1 { font-size: 1.9rem; }
}

@media (min-width: 900px) {
    .nav-desktop { display: flex; }
    .nav-baixo { display: none; }
    .conteudo { padding-bottom: 40px; }
    .marca-sub { display: block; }
    .acao-fixa { position: static; }
    .grade-kpi { grid-template-columns: repeat(3, 1fr); }
    .form-rapido { max-width: 620px; }
    .toast { bottom: 24px; }
}

/* ---------- 24. IMPRESSÃO E ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
    .topo, .nav-baixo, .acoes-rapidas, .t-zap, .abas, .controles, .toast { display: none !important; }
    body { background: #fff; }
    .card, .t-item { box-shadow: none; border: 1px solid var(--borda); }
}