/* =====================================================================
   SENTINELA — folha de estilo única
   ---------------------------------------------------------------------
   Identidade: o azul-marinho da farda e da viatura noturna, com o
   amarelo das faixas refletivas como única cor de destaque. Tipografia
   Barlow, desenhada a partir das placas de rua — a mesma linguagem das
   "Visibilidade Rua X x Rua Y" que a equipe já usa.

   Regras:
   - Amarelo (--refletivo) só para marca, ação principal e item ativo.
     Nunca para status (status usa verde/âmbar/vermelho próprios).
   - Números em fonte condensada com algarismos tabulares.
   - Sem estilos inline: o CSP do sistema bloqueia.
   ===================================================================== */

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --marinho: #13213a;
    --marinho-2: #1e3152;
    --marinho-3: #2c4570;
    --refletivo: #f4c20d;
    --refletivo-escuro: #d9a900;

    --fundo: #edf0f4;
    --superficie: #ffffff;
    --superficie-2: #f6f8fa;
    --linha: #d6dce4;
    --linha-forte: #b9c2ce;
    --tinta: #172131;
    --tinta-2: #556173;
    --tinta-3: #7a8494;

    --ok: #1d7748;        --ok-fundo: #e2f3ea;
    --alerta: #9a5800;    --alerta-fundo: #fdf0d9;
    --perigo: #b42318;    --perigo-fundo: #fce9e7;
    --neutro: #4b5565;    --neutro-fundo: #e8ecf1;
    --atraso: #c2410c;    --atraso-fundo: #ffedd5;   /* em atraso no próprio mês (laranja) */
    --info: #1f4e9c;      --info-fundo: #e5edfa;

    --fonte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fonte-titulo: "Barlow Condensed", "Barlow", system-ui, sans-serif;

    --raio: 6px;
    --raio-grande: 10px;
    --sombra: 0 1px 2px rgba(19, 33, 58, .06), 0 2px 8px rgba(19, 33, 58, .05);
    --menu-largura: 248px;
    --foco: 0 0 0 3px rgba(244, 194, 13, .55);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fundo);
    font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: var(--marinho-3); }
a:hover { color: var(--marinho); }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--refletivo); color: var(--marinho); padding: 8px 14px; border-radius: var(--raio); font-weight: 600; }
.pular:focus { top: 8px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.sub { color: var(--tinta-2); font-size: .87em; }
small.sub { display: block; }
.icone { width: 20px; height: 20px; flex: none; }
del { color: var(--tinta-3); }
ins { text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------------
   Marca: três faixas refletivas inclinadas
   --------------------------------------------------------------------- */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.marca span { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.45rem; letter-spacing: .01em; }
.marca:hover { color: #fff; }
.marca-faixas { width: 30px; height: 24px; fill: var(--refletivo); }
.marca-escura { color: var(--marinho); }
.marca-escura:hover { color: var(--marinho); }

/* ---------------------------------------------------------------------
   Estrutura com menu lateral
   --------------------------------------------------------------------- */
.com-menu { background: linear-gradient(to right, var(--marinho) var(--menu-largura), var(--fundo) 0); display: grid; grid-template-columns: var(--menu-largura) minmax(0, 1fr); min-height: 100vh; }
.barra-movel { display: none; }

.menu {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: var(--marinho);
    color: #c9d3e3;
    padding: 0 12px 12px;
    overflow-y: auto;
}
.menu-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 8px 18px;
    margin: 0 -12px 14px;
    padding-left: 20px;
    /* A faixa refletiva sob a marca: o elemento de identidade do sistema. */
    border-bottom: 6px solid transparent;
    border-image: repeating-linear-gradient(-63deg, var(--refletivo) 0 10px, var(--marinho) 10px 17px) 6;
}
.menu .menu-fechar { display: none; }
.menu-grupo { font-size: .8rem; color: #8797b2; margin: 18px 10px 6px; font-weight: 500; }
.menu-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-itens a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: var(--raio);
    color: #d5deec; text-decoration: none; font-weight: 500;
    position: relative;
}
.menu-itens a:hover { background: var(--marinho-2); color: #fff; }
.menu-itens a[aria-current="page"] { background: var(--marinho-2); color: #fff; }
.menu-itens a[aria-current="page"]::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px;
    background: var(--refletivo); border-radius: 0 3px 3px 0;
}
.menu-itens a[aria-current="page"] .icone { color: var(--refletivo); }

.menu-usuario {
    margin-top: auto; display: flex; align-items: center; gap: 4px;
    border-top: 1px solid var(--marinho-2); padding-top: 12px;
}
.menu-conta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--raio); color: #fff; text-decoration: none; }
.menu-conta:hover, .menu-conta[aria-current="page"] { background: var(--marinho-2); color: #fff; }
.menu-conta-texto { min-width: 0; display: grid; }
.menu-conta-texto strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-conta-texto small { color: #8fa0bc; }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--marinho-3); color: var(--refletivo); font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; }
.menu .botao-icone { color: #c9d3e3; }
.menu .botao-icone:hover { background: var(--marinho-2); color: #fff; }

.conteudo { padding: 28px clamp(16px, 3vw, 40px) 48px; max-width: 1360px; width: 100%; }

/* ---------------------------------------------------------------------
   Cabeçalho de página
   --------------------------------------------------------------------- */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecalho h1 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.1rem; color: var(--marinho); letter-spacing: .005em; }
.cabecalho-sub { color: var(--tinta-2); margin-top: 2px; }
.cabecalho-sub a { color: var(--tinta-2); }
.cabecalho .cabecalho-sub:first-child { margin: 0 0 2px; }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 16px;
    border-radius: var(--raio); border: 1px solid transparent;
    font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .12s, border-color .12s;
}
.botao .icone { width: 18px; height: 18px; }
.botao-primario { background: var(--refletivo); color: var(--marinho); border-color: var(--refletivo-escuro); }
.botao-primario:hover { background: var(--refletivo-escuro); color: var(--marinho); }
.botao-secundario { background: var(--superficie); color: var(--marinho); border-color: var(--linha-forte); }
.botao-secundario:hover { background: var(--superficie-2); border-color: var(--marinho-3); color: var(--marinho); }
.botao-perigo { background: var(--perigo); color: #fff; }
.botao-perigo:hover { background: #8f1c13; color: #fff; }
.botao-perigo-contorno { background: var(--superficie); color: var(--perigo); border-color: #e7b4ae; }
.botao-perigo-contorno:hover { background: var(--perigo-fundo); color: var(--perigo); }
.botao-ok { background: var(--ok); color: #fff; }
.botao-ok:hover { background: #155c37; color: #fff; }
.botao-pequeno { min-height: 32px; padding: 4px 12px; font-size: .9rem; }
.botao-largo { width: 100%; }
.botao-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--raio); background: transparent; cursor: pointer; color: inherit; }
.link { background: none; border: 0; padding: 0; color: var(--marinho-3); text-decoration: underline; cursor: pointer; font-weight: 500; }

/* ---------------------------------------------------------------------
   Cartões e grades
   --------------------------------------------------------------------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 22px; box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 16px; }
.cartao-estreito { max-width: 640px; }
.cartao-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.3rem; color: var(--marinho); margin-bottom: 12px; }
.grade-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.grade-ficha > .cartao { max-width: 760px; }
.lateral { display: grid; gap: 16px; }
.lateral .cartao + .cartao { margin-top: 0; }
.lateral form + form { margin-top: 10px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.duas-colunas .cartao + .cartao { margin-top: 0; }

/* ---------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------- */
.formulario { display: grid; gap: 18px; }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.campo legend { margin-bottom: 8px; }
.campo label, .campo legend, .rotulo { font-weight: 600; color: var(--tinta); font-size: .93rem; padding: 0; }
.opcional { font-weight: 400; color: var(--tinta-3); font-size: .85rem; margin-left: 4px; }
.campos-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=date], input[type=number], select, textarea {
    width: 100%; min-height: 42px; padding: 8px 12px;
    background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio);
    transition: border-color .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--marinho-3); box-shadow: var(--foco); border-radius: var(--raio); }
[aria-invalid="true"] { border-color: var(--perigo) !important; background: #fffafa; }
.campo-erro { color: var(--perigo); font-size: .88rem; font-weight: 500; }
.campo-dica { color: var(--tinta-2); font-size: .87rem; }
.campo-fixo { min-height: 42px; display: flex; align-items: center; padding: 0 12px; background: var(--superficie-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--tinta-2); }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.opcoes-perfil { display: grid; gap: 8px; }
.opcao-perfil { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; font-weight: 400 !important; }
.opcao-perfil:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.opcao-perfil:has(input:checked) { border-color: var(--marinho-3); background: #f2f5fa; box-shadow: inset 3px 0 0 var(--refletivo); }
.opcao-perfil:has(input:disabled) { cursor: not-allowed; opacity: .75; }
.opcao-perfil input { margin-top: 4px; accent-color: var(--marinho); width: 16px; height: 16px; }
.opcao-perfil strong { display: block; font-weight: 600; }
.opcao-perfil small { color: var(--tinta-2); }

/* ---------------------------------------------------------------------
   Filtros e tabelas
   --------------------------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.filtros .campo { min-width: 170px; }
.filtros .campo-busca { flex: 1 1 280px; position: relative; }
.campo-busca .icone { position: absolute; left: 12px; bottom: 11px; color: var(--tinta-3); pointer-events: none; }
.campo-busca input { padding-left: 40px; }
.filtros .campo-data { min-width: 150px; }
.filtros .campo-data label { font-size: .82rem; font-weight: 500; color: var(--tinta-2); }
.filtros .link { align-self: center; }

.tabela-caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow-x: auto; box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-weight: 600; font-size: .85rem; color: var(--tinta-2); background: var(--superficie-2); padding: 10px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 11px 14px; border-bottom: 1px solid #e7ebf0; vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #fafbfd; }
.tabela .acoes-linha { text-align: right; white-space: nowrap; }
.linha-inativa td { color: var(--tinta-3); }
.linha-inativa .link-forte { color: var(--tinta-2); }
.link-forte { font-weight: 600; color: var(--marinho); text-decoration: none; }
.link-forte:hover { text-decoration: underline; }
.vazio { color: var(--tinta-2); padding: 28px 14px !important; text-align: center; }
.ordenar { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ordenar:hover { color: var(--marinho); }
.ordenar.ativo { color: var(--marinho); }
.ordenar.ativo::after { content: ""; border: 5px solid transparent; margin-left: 2px; }
.ordenar.asc::after { border-bottom-color: currentColor; margin-top: -5px; }
.ordenar.desc::after { border-top-color: currentColor; margin-top: 5px; }

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: var(--tinta-2); flex-wrap: wrap; }
.paginacao nav { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------
   Selos de situação
   --------------------------------------------------------------------- */
.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.selo + .selo { margin-left: 4px; }
.selo-grande { font-size: .9rem; padding: 4px 12px; }
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo-perigo { background: var(--perigo-fundo); color: var(--perigo); }
.selo-neutro { background: var(--neutro-fundo); color: var(--neutro); }
.selo-info { background: var(--info-fundo); color: var(--info); }
.selo-atraso { background: var(--atraso-fundo); color: var(--atraso); }
.perfil { font-weight: 500; }
.perfil::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; background: var(--tinta-3); }
.perfil-admin::before { background: var(--marinho); }
.perfil-financeiro::before { background: var(--ok); }
.perfil-atendimento::before { background: var(--info); }
.perfil-supervisor::before { background: var(--alerta); }
.perfil-agente::before { background: var(--refletivo-escuro); }

/* ---------------------------------------------------------------------
   Avisos (flash) e senha temporária
   --------------------------------------------------------------------- */
.avisos { display: grid; gap: 10px; margin-bottom: 20px; }
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 16px; border-radius: var(--raio); border-left: 4px solid; font-weight: 500; }
.aviso p { flex: 1; padding-top: 1px; }
.aviso-sucesso { background: var(--ok-fundo); border-color: var(--ok); color: #13512f; }
.aviso-erro { background: var(--perigo-fundo); border-color: var(--perigo); color: #7d1810; }
.aviso-aviso { background: var(--alerta-fundo); border-color: var(--alerta); color: #6b3d00; }
.aviso-fechar { background: none; border: 0; padding: 2px; cursor: pointer; color: inherit; opacity: .7; border-radius: 4px; }
.aviso-fechar:hover { opacity: 1; }
.aviso-fechar .icone { width: 18px; height: 18px; }
.senha-temporaria { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--marinho); color: #fff; border-radius: var(--raio); flex-wrap: wrap; }
.senha-temporaria > .icone { color: var(--refletivo); width: 26px; height: 26px; }
.senha-temporaria > div { flex: 1; }
.senha-rotulo { font-size: .85rem; color: #aebbd2; }
.senha-temporaria code { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 600; letter-spacing: .06em; color: var(--refletivo); }

/* ---------------------------------------------------------------------
   Dados (lista de rótulo/valor) e linha do tempo
   --------------------------------------------------------------------- */
.dados { margin: 0 0 16px; display: grid; gap: 10px; }
.dados div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--linha); padding-bottom: 8px; }
.dados dt { color: var(--tinta-2); }
.dados dd { margin: 0; font-weight: 600; text-align: right; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--linha); display: grid; gap: 14px; }
.linha-tempo > li { position: relative; }
.linha-tempo > li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--marinho-3); }
.lt-resumo { font-weight: 500; }
.lt-meta { color: var(--tinta-3); font-size: .85rem; }
.lt-mudancas { list-style: none; margin: 4px 0; padding: 0; font-size: .88rem; color: var(--tinta-2); }
.lt-mudancas del { margin-right: 6px; }

/* ---------------------------------------------------------------------
   Painel
   --------------------------------------------------------------------- */
.alertas { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.alerta-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--raio); font-weight: 600; }
.alerta-item .icone { width: 18px; height: 18px; }
.alerta-perigo { background: var(--perigo-fundo); color: var(--perigo); }
.alerta-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.alerta-info { background: var(--info-fundo); color: var(--info); }
.alerta-ok { background: var(--ok-fundo); color: var(--ok); }
.alerta-item a { color: inherit; }

.recebimento { margin-bottom: 16px; }
.receb-topo { display: flex; justify-content: space-between; align-items: baseline; }
.receb-topo .cartao-titulo { margin: 0; }
.receb-pct { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.6rem; color: var(--marinho); }
.receb-valores { margin: 6px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.receb-recebido { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--marinho); }
.receb-de { color: var(--tinta-2); }
.barra { height: 14px; background: repeating-linear-gradient(-63deg, #e3e8ef 0 8px, #edf0f4 8px 14px); border-radius: 3px; overflow: hidden; }
.barra-cheia { display: block; height: 100%; width: 0; background: var(--marinho); transition: width .6s ease-out; }
.receb-contagens { margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.receb-contagens div { border-left: 3px solid var(--linha); padding-left: 10px; }
.receb-contagens dt { color: var(--tinta-2); font-size: .87rem; }
.receb-contagens dd { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.35rem; }
.receb-contagens .tem-perigo { border-left-color: var(--perigo); }
.receb-contagens .tem-perigo dd { color: var(--perigo); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow: hidden; box-shadow: var(--sombra); }
.numero { background: var(--superficie); padding: 16px 20px; }
.numero-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.2rem; line-height: 1.05; color: var(--marinho); }
.numero-rotulo { font-weight: 600; }
.numero-extra { color: var(--tinta-2); font-size: .87rem; }

.lista-simples { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e7ebf0; }
.lista-simples li:last-child { border-bottom: 0; }
.valor-perigo { color: var(--perigo); }
.cartao .vazio { text-align: left; padding: 14px 0 !important; }

.primeiros-passos { margin-bottom: 16px; border-left: 4px solid var(--refletivo); }
.primeiros-passos > p { color: var(--tinta-2); }
.passos { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.passos li::marker { font-family: var(--fonte-titulo); font-weight: 700; color: var(--marinho); }

/* ---------------------------------------------------------------------
   Telas de acesso (entrar / criar senha)
   --------------------------------------------------------------------- */
.tela-acesso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; background: var(--superficie); }
.acesso-marca {
    position: relative; overflow: hidden;
    background: var(--marinho);
    color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 48px clamp(28px, 5vw, 64px);
}
/* Faixa refletiva diagonal, como a lateral de uma viatura. */
.acesso-faixa {
    position: absolute; left: -10%; right: -10%; top: 38%; height: 92px;
    transform: rotate(-8deg);
    background: repeating-linear-gradient(-63deg, var(--refletivo) 0 26px, var(--marinho) 26px 44px);
    animation: faixa-entra .7s ease-out both;
}
@keyframes faixa-entra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.acesso-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(3rem, 7vw, 5.4rem); line-height: .95; letter-spacing: -.01em; position: relative; }
.acesso-lema { color: #aebbd2; font-size: 1.1rem; margin-top: 10px; max-width: 28ch; position: relative; }
.acesso-conteudo { display: grid; place-items: center; padding: 40px 24px; }
.acesso-caixa { width: 100%; max-width: 380px; }
.acesso-caixa-larga { max-width: 480px; }
.acesso-caixa fieldset.campo { gap: 14px; }
.acesso-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.2rem; color: var(--marinho); }
.acesso-sub { color: var(--tinta-2); margin: 4px 0 24px; }
.acesso-ajuda { margin-top: 20px; color: var(--tinta-2); font-size: .92rem; }

/* ---------------------------------------------------------------------
   Páginas de erro
   --------------------------------------------------------------------- */
.tela-simples { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.simples-caixa { max-width: 520px; display: grid; gap: 28px; }
.pagina-erro { display: grid; gap: 12px; justify-items: start; max-width: 560px; }
.pagina-erro h1 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2rem; color: var(--marinho); }
.pagina-erro p { color: var(--tinta-2); }
.erro-detalhe { background: var(--marinho); color: #ffd9d4; padding: 14px; border-radius: var(--raio); overflow-x: auto; font-size: .82rem; max-width: 100%; white-space: pre-wrap; }

/* ---------------------------------------------------------------------
   Janela de confirmação
   --------------------------------------------------------------------- */
.confirmar { border: 0; border-radius: var(--raio-grande); padding: 0; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 20px 50px rgba(19, 33, 58, .3); }
.confirmar::backdrop { background: rgba(19, 33, 58, .55); }
.confirmar form { padding: 24px; display: grid; gap: 14px; }
.confirmar h2 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.5rem; color: var(--marinho); }
.confirmar .acoes { justify-content: flex-end; }

/* ---------------------------------------------------------------------
   Celular e tablet
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .grade-ficha { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .com-menu { display: block; background: var(--fundo); }
    .barra-movel {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 30;
        background: var(--marinho); padding: 8px 8px 8px 16px; color: #fff;
        border-bottom: 4px solid transparent;
        border-image: repeating-linear-gradient(-63deg, var(--refletivo) 0 10px, var(--marinho) 10px 17px) 4;
    }
    .menu {
        position: fixed; left: 0; top: 0; z-index: 50; width: min(300px, 86vw);
        transform: translateX(-102%); transition: transform .2s ease-out;
    }
    .menu.aberto { transform: none; box-shadow: 10px 0 30px rgba(0, 0, 0, .25); }
    .menu .menu-fechar { display: inline-grid; }
    .menu-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(19, 33, 58, .5); }
    .conteudo { padding-top: 20px; }
    .cabecalho h1 { font-size: 1.8rem; }

    /* Tabelas viram cartões empilhados */
    .tabela thead { display: none; }
    .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
    .tabela tr { padding: 10px 14px; border-bottom: 1px solid var(--linha); }
    .tabela td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
    .tabela td[data-rotulo]::before { content: attr(data-rotulo); color: var(--tinta-2); font-size: .85rem; text-align: left; flex: none; }
    .tabela td:first-child { display: block; text-align: left; font-size: 1.02rem; }
    .tabela td:first-child::before { display: none; }
    .tabela .acoes-linha { justify-content: flex-start; padding-top: 8px; }
    .tabela tbody tr:hover td { background: none; }
    .vazio { text-align: center !important; display: block !important; }

    .tela-acesso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .acesso-marca { padding: 84px 24px 24px; }
    .acesso-faixa { top: 6px; height: 40px; transform: rotate(-4deg); }
    .acesso-nome { font-size: 2.6rem; }
    .acesso-lema { font-size: .98rem; }
    .acesso-conteudo { place-items: start center; padding-top: 28px; }
    .receb-contagens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Clientes, cobranças e importação
   ===================================================================== */
.dir { text-align: right !important; }
.tabela th.dir .ordenar { justify-content: flex-end; }
.sub-inline { display: inline; margin-left: 4px; }
.link-pequeno { font-size: .88rem; font-weight: 500; }
.link-titulo { color: inherit; text-decoration: none; }
.link-titulo:hover { text-decoration: underline; }
.cabecalho-selos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cabecalho-selos .selo + .selo { margin-left: 0; }
.cartao-medio { max-width: 820px; }
.cartao-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cartao-cabeca .cartao-titulo { margin: 0; }
.coluna-principal { display: grid; gap: 16px; min-width: 0; }
.coluna-principal .cartao + .cartao { margin-top: 0; }
.cartao-destaque { border-top: 4px solid var(--refletivo); }
.observacoes { color: var(--tinta-2); white-space: normal; border-left: 3px solid var(--linha); padding-left: 10px; margin-top: 6px; }
.faixa-aviso { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; border-radius: var(--raio); background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }
.faixa-aviso .icone { width: 18px; height: 18px; }

/* Chips de filtro */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .92rem; }
.chip:hover { border-color: var(--marinho-3); color: var(--marinho); }
.chip[aria-current="true"] { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.chip-n { font-family: var(--fonte-titulo); font-weight: 600; color: var(--tinta-3); }
.chip[aria-current="true"] .chip-n { color: var(--refletivo); }
.filtro-marcar, .marcar { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.filtro-marcar { align-self: center; min-height: 42px; }
.filtro-marcar input, .marcar input { width: 16px; height: 16px; accent-color: var(--marinho); }

/* Formulários longos em seções */
.formulario-secoes { gap: 16px; max-width: 900px; }
.formulario-secoes .cartao + .cartao { margin-top: 0; }
.secao { display: grid; gap: 16px; }
.secao .cartao-titulo { margin: 0; }
.formulario-compacto { gap: 12px; }
.campo-moeda { position: relative; }
.campo-moeda span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); font-weight: 600; }
.campo-moeda input { padding-left: 38px; font-variant-numeric: tabular-nums; }
.campos-endereco { grid-template-columns: minmax(110px, 1fr) minmax(220px, 3fr) minmax(90px, 1fr); }
.opcoes-vencimento { display: grid; gap: 8px; }
.select-inline { width: auto; min-height: 32px; padding: 2px 8px; display: inline-block; font-weight: 600; }
.acoes-fixas { position: sticky; bottom: 0; background: linear-gradient(to top, var(--fundo) 70%, transparent); padding: 14px 0 6px; }
input[type=file] { padding: 8px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); background: var(--superficie-2); width: 100%; }
textarea { resize: vertical; }

/* Ficha do cliente */
.numeros-ficha { margin-bottom: 16px; }
.numeros-ficha .numero-valor { font-size: 1.8rem; }
.numero-perigo .numero-valor, .numero-perigo .numero-extra { color: var(--perigo); }
.numero-valor a { color: inherit; text-decoration: none; }
.lista-locais { list-style: none; margin: 0; padding: 0; }
.lista-locais li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e7ebf0; align-items: start; }
.lista-locais li:last-child { border-bottom: 0; }
.local-icone { color: var(--marinho-3); padding-top: 2px; }
.local-inativo { opacity: .6; }
.local-endereco { font-weight: 500; }
.local-acoes { display: flex; gap: 14px; margin-top: 4px; font-size: .88rem; align-items: center; }
.local-acoes .link { font-size: .88rem; }
.local-valor { text-align: right; display: grid; justify-items: end; }
.local-valor strong { font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; }
.form-inline { display: inline; }
.lista-contatos { list-style: none; margin: 0 0 10px; padding: 0; }
.lista-contatos li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--linha); }
.contato-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contato-valor small { flex-basis: 100%; }
.selo-link { text-decoration: none; }
.selo-link:hover { text-decoration: underline; }
.botao-icone-pequeno { width: 30px; height: 30px; color: var(--tinta-3); }
.botao-icone-pequeno:hover { color: var(--perigo); background: var(--perigo-fundo); }
.botao-icone-pequeno .icone { width: 16px; height: 16px; }
details.adicionar summary, details.estorno summary { cursor: pointer; color: var(--marinho-3); font-weight: 600; list-style: none; }
details.adicionar summary::before { content: "+ "; }
details.adicionar[open] summary { margin-bottom: 10px; }
details.estorno { display: inline-block; }
details.estorno[open] { display: block; margin-top: 10px; }
.tabela-embutida { box-shadow: none; }
.tabela-compacta td, .tabela-compacta th { padding: 8px 12px; }
.linha-estornada { opacity: .65; }
.linha-estornada .num { text-decoration: line-through; }
.dados-colunas dt { font-weight: 600; color: var(--tinta); font-size: .85rem; }
.dados-colunas dd { font-weight: 400; color: var(--tinta-2); font-size: .85rem; }

/* Cobranças */
.mes-nav { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.mes-nav .botao-icone { width: 32px; height: 32px; font-size: 1.4rem; color: var(--marinho); text-decoration: none; border: 1px solid var(--linha-forte); background: var(--superficie); }
.mes-atual { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.25rem; color: var(--marinho); min-width: 170px; text-align: center; }
.mes-nav .link-pequeno { margin-left: 10px; }
.receb-contagens dd small { font-family: var(--fonte); font-size: .8rem; font-weight: 500; }
.tabela-itens { margin-top: 6px; }
.tabela-itens td, .tabela-itens th { padding: 9px 0; }
.tabela-itens tfoot th { text-align: left; font-size: .95rem; color: var(--tinta-2); background: none; border: 0; }
.tabela-itens tfoot td { border: 0; }
.tabela-itens .linha-saldo th, .tabela-itens .linha-saldo td { color: var(--marinho); font-size: 1.05rem; border-top: 2px solid var(--marinho); }
.tabela-itens tbody tr:hover td { background: none; }
.valor-ok { color: var(--ok); }
.lista-pagamentos { list-style: none; margin: 0; padding: 0; }
.lista-pagamentos li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e7ebf0; flex-wrap: wrap; }
.lista-pagamentos li:last-child { border-bottom: 0; }
.pagamento-acoes { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }

/* Importação */
.envio-planilha { margin-top: 18px; max-width: 520px; }
.confirmar-importacao { margin: 16px 0; display: grid; gap: 14px; border-left: 4px solid var(--refletivo); }
.confirmar-importacao form:first-child { display: grid; gap: 12px; }
.msgs { list-style: none; margin: 0; padding: 0; font-size: .87rem; display: grid; gap: 2px; }
.msgs li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.msgs-erro { color: var(--perigo); font-weight: 500; }
.msgs-erro li::before { background: var(--perigo); }
.msgs-aviso { color: var(--alerta); }
.msgs-aviso li::before { background: var(--alerta); }
.tabela-importacao .linha-erros td:first-child { box-shadow: inset 4px 0 0 var(--perigo); }
.tabela-importacao .linha-avisos td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.tabela-importacao .linha-ignorada td { color: var(--tinta-3); }

@media (max-width: 860px) {
    .campos-endereco { grid-template-columns: 1fr; }
    .lista-locais li { grid-template-columns: auto minmax(0, 1fr); }
    .local-valor { grid-column: 2; text-align: left; justify-items: start; }
    .mes-atual { min-width: 0; }
    .tabela .dir { text-align: right !important; }
}

/* =====================================================================
   Edição completa, relatório por rua e equipe
   ===================================================================== */
.faixa-info { padding: 10px 14px; margin-bottom: 16px; border-radius: var(--raio); background: var(--info-fundo); color: #1b3f7c; border-left: 4px solid var(--info); }
.zona-perigo { border: 1px solid #efc4bf; }
.zona-perigo > summary { cursor: pointer; color: var(--perigo); list-style: none; margin: 0; }
.zona-perigo[open] > summary { margin-bottom: 10px; }
.zona-perigo .cartao-titulo { color: var(--perigo); }
.cartao.zona-perigo { margin: 16px 0; }
.marcar-perigo { color: var(--perigo); }

/* Linhas editáveis (contatos, períodos do dia) */
.lista-edicao { display: grid; gap: 10px; }
.linha-edicao { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(140px, 1.5fr) auto auto; gap: 12px; align-items: end; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.linha-edicao .marcar { min-height: 42px; }
.linha-edicao .campo-erro { grid-column: 1 / -1; }
.linha-nova { border-style: dashed; background: var(--superficie-2); }
.linha-turno { grid-template-columns: minmax(150px, 1.4fr) 110px 110px minmax(160px, 2fr) auto auto; }
.linha-resumo { align-self: center; text-align: right; font-weight: 600; }
.campo-hora input { min-width: 0; }

/* Blocos de endereço na edição */
.bloco-endereco { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px 16px; margin: 0; display: grid; gap: 14px; }
.bloco-endereco > legend { font-weight: 600; color: var(--marinho); padding: 0 6px; }
.bloco-inativo { background: var(--superficie-2); }
.bloco-valor { align-items: end; border-top: 1px dashed var(--linha); padding-top: 12px; }
.bloco-valor .marcar { min-height: 42px; }
.bloco-novo { border-style: dashed; }
.bloco-novo > summary { cursor: pointer; font-weight: 600; color: var(--marinho-3); list-style: none; }
.bloco-novo > summary::before { content: "+ "; }

/* Clientes por rua */
.bloco-bairro { margin-bottom: 16px; }
.tabela-ruas caption { text-align: left; padding: 12px 14px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.25rem; color: var(--marinho); border-bottom: 1px solid var(--linha); }
.tabela-ruas tfoot th, .tabela-ruas tfoot td { border-top: 2px solid var(--marinho); background: var(--superficie-2); padding: 11px 14px; text-align: left; }
.tabela-ruas tfoot td.dir { text-align: right; }
.col-barra { width: 22%; }
.barra-rua { display: block; height: 8px; background: #e8ecf1; border-radius: 4px; overflow: hidden; }
.barra-rua .barra-cheia { background: var(--marinho-3); }
.delta { font-family: var(--fonte); font-weight: 600; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: .78rem; }
.delta-mais { color: var(--ok); background: var(--ok-fundo); }
.delta-menos { color: var(--perigo); background: var(--perigo-fundo); }
.chips-ordem { margin-top: 16px; }

/* Escala */
.ponto-agente { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--linha-forte)); margin-right: 7px; vertical-align: 0; flex: none; }
.sel-agente { border-left: 6px solid var(--cor, var(--linha-forte)); min-width: 130px; padding-top: 4px; padding-bottom: 4px; min-height: 36px; }
.chip-agente { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 4px; background: var(--superficie-2); border-left: 4px solid var(--cor, var(--linha-forte)); font-size: .82rem; white-space: nowrap; }
.tabela-escala td, .tabela-escala th { padding: 6px 10px; }
.tabela-escala thead th.col-agente { text-align: center; }
.tabela-escala .col-agente { text-align: center; width: 72px; border-left: 1px solid #edf0f4; }
.tabela-escala .vazio-hora { background: #fbfcfd; }
.tabela-escala tfoot th, .tabela-escala tfoot td { background: var(--superficie-2); border-top: 2px solid var(--marinho); padding: 10px; text-align: left; }
.tabela-escala tfoot td small { display: block; }
.dia-cel { white-space: nowrap; text-align: left; font-weight: 400 !important; background: none !important; color: var(--tinta) !important; font-size: .92rem !important; }
.dia-num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; color: var(--marinho); display: inline-block; min-width: 22px; }
.dia-semana { color: var(--tinta-2); margin-right: 8px; }
.dia-cel .link-pequeno { margin-left: 4px; }
.dia-especial td, .dia-especial th { background: #fbf8ee !important; }
.dia-especial .dia-semana { color: var(--perigo); font-weight: 600; }
.horario-ajustado { display: block; }
.cel-extras { min-width: 140px; }

/* Demonstrativo */
.demonstrativo td strong { font-weight: 600; }
.barras-mes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.barras-mes li { display: grid; grid-template-columns: 70px minmax(0, 1fr) 190px; gap: 12px; align-items: center; }
.barras-rotulo { color: var(--tinta-2); }
.barras-valor { text-align: right; font-weight: 600; }
.historico-custos { margin-top: 16px; }

@media (max-width: 860px) {
    .linha-edicao, .linha-turno { grid-template-columns: 1fr 1fr; }
    .linha-edicao > .campo:first-child { grid-column: 1 / -1; }
    .tabela-escala .col-agente { display: none; }
    .tabela-escala tfoot { display: none; }
    .barras-mes li { grid-template-columns: 60px minmax(0, 1fr); }
    .barras-valor { grid-column: 2; text-align: left; }
    .col-barra { display: none !important; }
}

/* Clientes por rua: tabela única, ordenável, com detalhamento */
.tabela-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.tabela-topo .sub { margin: 0; }
.tabela tr[hidden] { display: none !important; }
.tabela-ruas tbody th[scope="row"] { background: none; font-weight: 600; font-size: 1rem; color: var(--tinta); white-space: normal; padding: 11px 14px; border-bottom: 1px solid #e7ebf0; }
.tabela-ruas .linha-inativa th[scope="row"] { color: var(--tinta-3); font-weight: 500; }
.tabela-ruas thead th[aria-sort] { color: var(--marinho); }
.expandir { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--marinho); cursor: pointer; text-align: left; }
.expandir:hover { text-decoration: underline; }
.expandir:focus-visible { outline: 2px solid var(--marinho-3); outline-offset: 2px; border-radius: 2px; }
.expandir-seta { flex: none; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; transition: transform .15s; }
.expandir[aria-expanded="true"] .expandir-seta { transform: rotate(90deg); }
.expandir-vazio { padding-left: 15px; }
.grupo-rua.aberto .linha-rua > * { background: #eef3fa; border-bottom-color: transparent; }
.linha-detalhe > td { background: #f6f8fb; padding: 4px 14px 14px 37px; border-bottom: 1px solid var(--linha); }
.tabela-detalhe { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabela-detalhe th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--tinta-2); padding: 6px 10px; border-bottom: 1px solid var(--linha); background: none; white-space: nowrap; }
.tabela-detalhe td { padding: 7px 10px; border-bottom: 1px solid #e3e8ef; }
.tabela-detalhe tr:last-child td { border-bottom: 0; }
.tabela-detalhe a { font-weight: 500; }

/* Cadastro de ruas e importação */
.chip-apelido { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 4px; background: var(--superficie-2); border: 1px solid var(--linha); font-size: .82rem; color: var(--tinta-2); }
.lista-pares li { flex-wrap: wrap; }
.lista-pares form { display: inline; }
.acoes-direita { justify-content: flex-end; align-items: center; margin: 12px 0; }
.tabela-sem-borda { border: 0; box-shadow: none; }

@media (max-width: 860px) {
    .tabela-ruas tbody th[scope="row"] { display: block; width: 100%; border: 0; padding: 3px 0; font-size: 1.02rem; }
    .linha-detalhe > td { display: block !important; padding: 8px 10px !important; }
    .linha-detalhe > td::before { display: none !important; }
    .tabela-detalhe thead { display: none; }
    .tabela-detalhe tr { display: block; padding: 6px 0; border-bottom: 1px solid #e3e8ef; }
    .tabela-detalhe td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0; text-align: right; }
    .tabela-detalhe td::before { content: attr(data-rotulo); color: var(--tinta-2); font-size: .82rem; text-align: left; }
    .tabela-detalhe td:first-child { display: block; text-align: left; font-weight: 600; }
    .tabela-detalhe td:first-child::before { display: none; }
}
.bloco-nova-rua { margin-bottom: 16px; }
.bloco-nova-rua[open] > summary { margin-bottom: 12px; }
.formulario-linha { display: grid; grid-template-columns: 150px minmax(200px, 2fr) minmax(150px, 1fr) 130px auto; gap: 12px; align-items: end; }
.formulario-linha .campo { margin: 0; }
.par-x { margin: 0 6px; color: var(--tinta-3); font-size: .9rem; }
@media (max-width: 860px) {
    .formulario-linha { grid-template-columns: 1fr; }
}
.tabela-detalhe { table-layout: fixed; }
.tabela-detalhe col.c-cliente { width: 34%; }
.tabela-detalhe col.c-endereco { width: 24%; }
.tabela-detalhe col.c-valor { width: 14%; }
.tabela-detalhe col.c-situacao { width: 14%; }
.tabela-detalhe td { overflow-wrap: anywhere; }
@media (max-width: 860px) {
    .tabela-detalhe { table-layout: auto; }
    .tabela-ruas tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; background: var(--superficie-2); border-top: 2px solid var(--marinho); }
    .tabela-ruas tfoot th, .tabela-ruas tfoot td { display: inline; border: 0; padding: 0; background: none; }
    .tabela-ruas tfoot td:empty { display: none; }
}
.tabela-ruas tfoot td[data-rotulo]::before { margin-right: 6px; }
/* Em atraso (dentro do mês) = âmbar; inadimplente (mês virou) = vermelho */
.receb-contagens .tem-alerta { border-left-color: var(--atraso); }
.receb-contagens .tem-alerta dd { color: var(--atraso); }

/* Escala: uma tela só, grava na hora */
.slot { display: flex; align-items: center; gap: 4px; }
.slot .sel-agente { flex: 1; min-width: 118px; }
.slot-trechos { flex: 1; min-width: 118px; }
.botao-ajustar { width: 30px; height: 30px; flex: none; color: var(--tinta-3); border-radius: 6px; }
.botao-ajustar:hover, .botao-ajustar:focus-visible { color: var(--marinho); background: var(--superficie-2); }
.botao-ajustar .icone { width: 16px; height: 16px; }
.cel-slot.salvando { opacity: .55; }
.aviso-descoberto { display: block; color: var(--alerta); font-weight: 600; font-size: .78rem; }
.obs-turno { display: block; font-size: .78rem; }
.linha-salva > * { background: #eef7ee !important; transition: background .8s; }
.escala-status { min-height: 1.3em; margin: -6px 0 8px; font-size: .9rem; color: var(--tinta-2); }
.escala-status.escala-ok { color: var(--ok); }
.escala-status.escala-erro { color: var(--perigo); font-weight: 600; }
.dialogo-turno { border: 0; border-radius: var(--raio-grande); padding: 22px 24px; width: min(720px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(19, 33, 58, .35); }
.dialogo-turno::backdrop { background: rgba(19, 33, 58, .45); }
.dialogo-turno .cartao-titulo { margin-bottom: 2px; }
.trechos-cab, .trecho { display: grid; grid-template-columns: minmax(130px, 1.2fr) 118px 118px minmax(120px, 1.4fr) 32px; gap: 8px; align-items: center; }
.trechos-cab { font-size: .8rem; font-weight: 600; color: var(--tinta-2); margin-top: 10px; }
.trechos { display: grid; gap: 8px; }
.trecho input, .trecho select { min-height: 38px; }
.dlg-erro { background: var(--perigo-fundo); color: var(--perigo); padding: 8px 12px; border-radius: var(--raio); font-weight: 600; }
@media (max-width: 640px) {
    .trechos-cab { display: none; }
    .trecho { grid-template-columns: 1fr 1fr; }
    .trecho select, .trecho [name=observacao] { grid-column: 1 / -1; }
}

/* Fechamento da equipe */
.tabela-folha tbody th[scope="row"] { background: none; font-weight: 600; font-size: 1rem; color: var(--tinta); white-space: nowrap; padding: 11px 14px; border-bottom: 1px solid #e7ebf0; }
.tabela-folha td .botao-pequeno { margin-left: 6px; }
.tabela-folha tfoot th, .tabela-folha tfoot td { border-top: 2px solid var(--marinho); background: var(--superficie-2); padding: 11px 14px; }
.folha-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 6px 0; }
.folha-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; color: var(--marinho); margin: 0 0 4px; }
.folha-detalhe .lista-simples li { padding: 8px 0; }
.acoes-item { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.acoes-item form { display: inline; }
.item-estornado > span:first-child { text-decoration: line-through; color: var(--tinta-3); }
.item-estornado .sub { text-decoration: none; }
.estornar summary { cursor: pointer; color: var(--perigo); font-size: .85rem; font-weight: 600; }
.form-linha { display: flex; gap: 6px; margin-top: 6px; }
.form-linha input { min-width: 180px; }
.valor-ok { color: var(--ok); font-weight: 600; }
.tabela-folha td .valor-ok, .tabela-folha td .valor-perigo { display: block; font-weight: 600; }
.numero-alerta .numero-valor { color: var(--alerta); }
.opcoes-linha { border: 0; padding: 0; margin: 4px 0 0; display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 860px) {
    .folha-detalhe { grid-template-columns: 1fr; }
    .tabela-folha tbody th[scope="row"] { display: block; width: 100%; border: 0; padding: 3px 0; }
}

/* Caixa */
.caixa-categorias { margin: 16px 0; }
.linha-cancelada td { color: var(--tinta-3); }
.linha-cancelada td strong, .linha-cancelada td a { text-decoration: line-through; color: var(--tinta-3); }
.numero-valor.valor-ok { color: var(--ok); }

/* =====================================================================
   Página pública (2ª via) — celular primeiro, letras grandes
   ===================================================================== */
.tela-publica { background: var(--fundo); min-height: 100vh; font-size: 17px; }
.publica-topo { background: var(--marinho); color: #fff; padding: 14px 16px; border-bottom: 4px solid var(--refletivo); }
.publica-topo .marca { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.3rem; }
.publica-conteudo { max-width: 520px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 14px; }
.publica-cartao { background: var(--superficie); border-radius: var(--raio-grande); box-shadow: var(--sombra); padding: 20px 18px; }
.publica-ola { color: var(--tinta-2); margin: 0; font-size: 1.05rem; }
.publica-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.6rem; color: var(--marinho); margin: 2px 0 12px; line-height: 1.15; }
.publica-subtitulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; color: var(--marinho); margin: 0 0 8px; }
.publica-valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.6rem; color: var(--tinta); margin: 0; line-height: 1; }
.publica-venc { margin: 8px 0 0; font-size: 1.1rem; }
.publica-venc-atraso { color: var(--atraso); }
.publica-venc-pendente { color: var(--perigo); }
.publica-sub { color: var(--tinta-2); font-size: .95rem; margin: 8px 0 0; }
.publica-pix { margin-top: 18px; display: grid; gap: 10px; }
.publica-botao { min-height: 56px; font-size: 1.15rem; justify-content: center; text-align: center; }
.publica-copiado { color: var(--ok); font-weight: 600; min-height: 1.3em; margin: 0; }
.publica-passos { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 1rem; }
.publica-qr-bloco summary { cursor: pointer; color: var(--marinho-3); font-weight: 600; padding: 8px 0; }
.publica-qr { width: min(280px, 100%); margin: 8px auto; }
.publica-qr svg { width: 100%; height: auto; display: block; }
.publica-codigo { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; color: var(--tinta-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 8px; resize: none; background: var(--superficie-2); }
.publica-situacao { border-left: 4px solid var(--linha-forte); padding: 10px 14px; background: var(--superficie-2); border-radius: var(--raio); }
.publica-situacao p { margin: 0; }
.publica-situacao-titulo { font-weight: 700; font-size: 1.2rem; margin-bottom: 4px !important; }
.publica-ok { border-left-color: var(--ok); background: var(--ok-fundo); color: var(--ok); }
.publica-lista { list-style: none; margin: 0; padding: 0; }
.publica-lista li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
.publica-lista li:last-child { border-bottom: 0; }
.publica-whats { background: #e7f6ec; border-color: #9fd6b1; color: #136c35; }
.publica-rodape { color: var(--tinta-2); font-size: .9rem; text-align: center; margin: 4px 8px; }
.config-form { display: grid; gap: 16px; max-width: 920px; }
.config-form .cartao + .cartao { margin-top: 0; }
.config-form textarea { width: 100%; }
.pix-teste { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.pix-teste .publica-qr { width: 180px; margin: 0; }
@media (max-width: 640px) { .pix-teste { grid-template-columns: 1fr; } .pix-teste .publica-qr { margin: 0 auto; } }

/* ---------------------------------------------------------------------
   Envio ao cliente (WhatsApp), correções e fila do dia
   --------------------------------------------------------------------- */
.aviso-info { background: var(--info-fundo); border-color: var(--info); color: var(--info); margin-bottom: 16px; }
.botao-whats { background: #1f9d55; color: #fff; border-color: #1f9d55; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; }
.botao-whats:hover { background: #17834a; color: #fff; }
.botao-whats.foi-enviado { background: var(--neutro-fundo); color: var(--neutro); border-color: var(--linha); }
.sub-botao { font-size: .78rem; font-weight: 500; opacity: .9; }
.alerta-curto { background: var(--alerta-fundo); color: #6b3d00; padding: 8px 10px; border-radius: var(--raio); font-weight: 600; margin-bottom: 10px; }
.previa-msg { margin-top: 8px; }
.previa-msg summary { cursor: pointer; color: var(--tinta-2); font-size: .9rem; }
.mensagem-previa { background: #e7f6ec; border-radius: 10px; padding: 10px 12px; margin-top: 6px; font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
.campo-link { margin-top: 14px; }
.linha-copiar { display: flex; gap: 6px; }
.linha-copiar input { flex: 1; min-width: 0; font-size: .85rem; }
.lista-envios { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: .88rem; }
.lista-envios li { padding-left: 10px; border-left: 3px solid #1f9d55; }
.lista-envios li.envio-ignorado { border-color: var(--linha); color: var(--neutro); }
.lista-envios li.envio-falhou { border-color: var(--perigo); }
.cartao-aviso { border-left: 4px solid var(--alerta); }
.correcoes { display: grid; gap: 8px; margin-top: 10px; }
.correcao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; }
.correcao > summary { cursor: pointer; font-weight: 600; }
.correcao[open] > summary { margin-bottom: 10px; }
.link-perigo { color: var(--perigo); font-size: .82rem; margin-left: 6px; }
.contagem-fila { margin: 0 0 10px; }
.fila-envios { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.fila-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.fila-item.foi-enviado { opacity: .55; }
.fila-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fila-nome { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.fila-info .selo { align-self: flex-start; }
.fila-acoes { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.fila-acoes .botao-whats { min-width: 96px; min-height: 46px; font-size: 1rem; }
@media (max-width: 560px) {
    .fila-item { flex-direction: column; align-items: stretch; }
    .fila-acoes { justify-content: space-between; }
    .fila-acoes .botao-whats { flex: 1; }
}
/* Itens da cobrança continuam tabela no celular (são só 2 colunas) */
@media (max-width: 860px) {
    .tabela.tabela-itens { display: table; width: 100%; }
    .tabela-itens tbody { display: table-row-group; }
    .tabela-itens tfoot { display: table-footer-group; }
    .tabela-itens tr { display: table-row; padding: 0; border: 0; }
    .tabela-itens td, .tabela-itens th { display: table-cell; width: auto; }
    .tabela-itens td::before { content: none; }
}
.pix-info { display: grid; gap: 4px; margin: 8px 0; font-size: .9rem; }
.pix-info div { display: flex; gap: 8px; flex-wrap: wrap; }
.pix-info dt { color: var(--tinta-2); }
.pix-info dd { margin: 0; font-weight: 600; }
.diag-mes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--neutro-fundo); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 12px; }
.diag-mes p { margin: 0; flex: 1; min-width: 200px; }
.diag-mes.diag-gerar { background: var(--alerta-fundo); color: #6b3d00; }
/* 2ª via: as duas formas de pagar sempre à vista */
.publica-opcao { border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 14px; display: grid; gap: 10px; background: var(--superficie); }
.publica-opcao-titulo { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--marinho); }
.publica-opcao-qr { text-align: center; }
.publica-opcao-qr .publica-qr { width: min(240px, 80%); margin: 0 auto; }
@media (min-width: 720px) { .publica-pix { grid-template-columns: 1fr 1fr; align-items: start; } .publica-pix .publica-codigo { grid-column: 1 / -1; } }
/* Área do cliente */
.publica-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.publica-sair button { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: var(--raio); padding: 6px 12px; font: inherit; cursor: pointer; }
.portal-intro { margin-bottom: 14px; }
.portal-form { display: grid; gap: 14px; }
.portal-campo { display: grid; gap: 6px; }
.portal-campo label { font-weight: 700; font-size: 1.05rem; }
.portal-campo label span { font-weight: 400; color: var(--tinta-2); }
.portal-campo input { font-size: 1.35rem; padding: 12px 14px; border: 2px solid var(--linha-forte); border-radius: var(--raio); width: 100%; letter-spacing: .04em; }
.portal-campo input:focus { outline: none; border-color: var(--marinho); box-shadow: var(--foco); }
.portal-lembrar { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.portal-lembrar input { width: 22px; height: 22px; }
.portal-primeira { display: grid; gap: 10px; }
.portal-abertas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.portal-aberta { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 14px; }
.portal-aberta.portal-atraso { border-color: var(--perigo); background: var(--perigo-fundo); }
.portal-mes { margin: 0; font-weight: 700; }
.portal-valor { margin: 2px 0; font-family: var(--fonte-titulo); font-size: 1.8rem; font-weight: 700; line-height: 1; }
.portal-venc { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.portal-atraso .portal-venc { color: var(--perigo); font-weight: 600; }
.portal-pagar { flex-shrink: 0; min-width: 120px; display: inline-flex; align-items: center; }
@media (max-width: 400px) { .portal-aberta { flex-direction: column; align-items: stretch; } }
.portal-dados { display: grid; gap: 8px; margin: 8px 0 0; }
.portal-dados dt { color: var(--tinta-2); font-size: .9rem; }
.portal-dados dd { margin: 0; font-weight: 600; }
.portal-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.portal-codigo { background: var(--ok-fundo); border-radius: var(--raio); padding: 12px; margin: 10px 0; display: grid; gap: 6px; text-align: center; }
.portal-codigo p { margin: 0; }
.portal-codigo-num { font-family: var(--fonte-titulo); font-size: 2.2rem; font-weight: 700; letter-spacing: .2em; color: var(--marinho); }
.portal-acoes { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
#portal form { margin-top: 8px; }
.portal-acoes form { margin-top: 0; }
.faixa-visualizacao { margin: 0; background: var(--refletivo); color: var(--marinho); text-align: center; padding: 8px 16px; font-size: .92rem; }
/* Página inicial (escolha cliente / equipe) */
.inicio-hero { background: var(--marinho); color: #fff; border-radius: var(--raio-grande); padding: 28px 22px; position: relative; overflow: hidden; }
.inicio-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(-63deg, var(--refletivo) 0 10px, var(--marinho) 10px 17px); }
.inicio-selo { margin: 0; color: var(--refletivo); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; }
.inicio-titulo { margin: 6px 0 4px; font-family: var(--fonte-titulo); font-size: 2.8rem; line-height: 1; }
.inicio-lema { margin: 0; color: #c8d2e4; font-size: 1.05rem; }
.inicio-opcoes { display: grid; gap: 12px; }
.inicio-opcao { display: flex; align-items: center; gap: 14px; background: var(--superficie); border: 2px solid var(--linha); border-radius: var(--raio-grande); padding: 18px 16px; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra); min-height: 84px; }
.inicio-opcao:hover, .inicio-opcao:focus-visible { border-color: var(--marinho); }
.inicio-cliente { border-color: var(--refletivo); }
.inicio-icone { width: 48px; height: 48px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex-shrink: 0; color: var(--marinho); }
.inicio-cliente .inicio-icone { background: var(--refletivo); }
.inicio-icone .icone { width: 26px; height: 26px; }
.inicio-texto { display: grid; gap: 2px; flex: 1; }
.inicio-texto strong { font-size: 1.25rem; font-family: var(--fonte-titulo); }
.inicio-texto span { color: var(--tinta-2); }
.inicio-seta { font-size: 2rem; color: var(--tinta-3); line-height: 1; }
.inicio-equipe { box-shadow: none; background: transparent; }
/* Área do cliente no layout do sistema */
.portal-cliente .menu-grupo:first-of-type { margin-top: 6px; }
.menu-contador { margin-left: auto; background: var(--refletivo); color: var(--marinho); border-radius: 999px; font-size: .78rem; font-weight: 700; padding: 1px 8px; }
.portal-secao { margin-top: 16px; }
.portal-secao .tabela-embutida { box-shadow: none; }
.cartao-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.numero-selo .selo { font-size: 1rem; padding: 4px 12px; vertical-align: middle; }
.valor-perigo-n { color: var(--perigo) !important; }
.portal-subtitulo { font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--marinho); margin: 16px 0 8px; }
.portal-nota { margin-top: 14px; }
.portal-colunas { margin-top: 0; }
.faixa-portal { border-radius: var(--raio); margin-bottom: 14px; }
.portal-botao-pagar { white-space: nowrap; }
.lista-simples li .icone { width: 16px; height: 16px; vertical-align: -2px; color: var(--tinta-3); }
@media (max-width: 860px) {
    .portal-cliente .tabela .acoes-linha .portal-botao-pagar { width: 100%; justify-content: center; min-height: 46px; font-size: 1.05rem; }
}
@media (max-width: 860px) {
    .numeros-portal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .numeros-portal .numero { padding: 12px 14px; }
    .numeros-portal .numero-valor { font-size: 1.55rem; }
    .numeros-portal .numero-selo .selo { font-size: .85rem; padding: 3px 9px; }
}

/* Atraso (laranja) x pendência de mês anterior (vermelho); conquistas em verde */
.alerta-atraso { background: var(--atraso-fundo); color: var(--atraso); }
.valor-atraso-n { color: var(--atraso) !important; }
.valor-ok-n { color: var(--ok) !important; }
.selo .icone { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.portal-cliente .tabela tr.linha-paga td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.portal-conquista { color: var(--ok); font-weight: 600; }
.portal-conquista .icone { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 860px) { .portal-cliente .tabela tr.linha-paga { box-shadow: inset 4px 0 0 var(--ok); } .portal-cliente .tabela tr.linha-paga td:first-child { box-shadow: none; } }
.numero-valor .icone { width: 26px; height: 26px; vertical-align: -3px; }
.selo .icone, .portal-conquista .icone, .numero-valor .icone, .alerta-item .icone { display: inline-block; }
.selo:has(.icone) { display: inline-flex; align-items: center; gap: 2px; }
.campo-moeda-inline { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.campo-moeda-inline input { width: 110px; padding: 4px 8px; }
.caixa-explica { margin: -6px 0 14px; }
/* Atividade do cliente */
.atividade-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.atividade-lista li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e7ebf0; }
.atividade-lista li:last-child { border-bottom: 0; }
.atividade-icone { width: 32px; height: 32px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex-shrink: 0; color: var(--marinho-3); }
.atividade-icone .icone { width: 17px; height: 17px; }
.atividade-ruim .atividade-icone { background: var(--atraso-fundo); color: var(--atraso); }
.atividade-boa .atividade-icone { background: var(--ok-fundo); color: var(--ok); }
.atividade-texto { margin: 0; }
.atividade-meta { margin: 2px 0 0; color: var(--tinta-2); font-size: .84rem; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }