/* Sistema de Gestão — visual vermelho e branco (com modo escuro). */
:root {
  --vermelho: #C8102E; --vermelho-2: #A50D25; --vermelho-3: #E2334C; --vermelho-suave: #FDECEF; --vermelho-borda: #F5C6CF; --vermelho-texto: #B10E29;
  --fundo: #F4F4F6; --cartao: #FFFFFF; --cartao-2: #FAFAFB; --cartao-3: #F2F2F5; --borda: #E5E5EA; --borda-2: #D3D3DA;
  --texto: #16161B; --texto-2: #4D4D58; --texto-3: #83838E; --texto-inv: #FFFFFF;
  --sombra: 0 1px 2px rgba(20, 16, 24, .05), 0 1px 3px rgba(20, 16, 24, .07);
  --sombra-2: 0 10px 30px rgba(20, 16, 24, .14), 0 2px 6px rgba(20, 16, 24, .06);
  --bom: #0B8F0B; --bom-forte: #0CA30C; --bom-fundo: #E7F5E7;
  --alerta: #8A5D00; --alerta-forte: #FAB219; --alerta-fundo: #FFF5DB;
  --serio: #B4512A; --serio-forte: #EC835A; --serio-fundo: #FDEEE6;
  --critico: #B42323; --critico-forte: #D03B3B; --critico-fundo: #FBE9E9;
  --info: #2A5FA8; --info-fundo: #E8F0FB;
  --s1: #D71920; --s2: #2A78D6; --s3: #1BAF7A; --s4: #EDA100; --s5: #6250D6; --s-cinza: #A3A3AD;
  --grade: #EEEEF2; --eixo: #8E8E99;
  --menu-fundo: linear-gradient(180deg, #C8102E 0%, #9E0C23 100%); --menu-texto: rgba(255, 255, 255, .88); --menu-texto-2: rgba(255, 255, 255, .62);
  --menu-hover: rgba(255, 255, 255, .12); --menu-ativo-fundo: #FFFFFF; --menu-ativo-texto: #C8102E;
  --raio: 14px; --raio-m: 10px; --raio-p: 8px;
  --fonte: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --larg-menu: 252px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --vermelho: #E5484D; --vermelho-2: #C9383D; --vermelho-3: #F0656A; --vermelho-suave: rgba(229, 72, 77, .14); --vermelho-borda: rgba(229, 72, 77, .38); --vermelho-texto: #FF8589;
    --fundo: #0D0D10; --cartao: #17171C; --cartao-2: #1C1C22; --cartao-3: #22222A; --borda: #2A2A31; --borda-2: #3A3A43;
    --texto: #F2F2F5; --texto-2: #B5B5C0; --texto-3: #7E7E89;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 12px 34px rgba(0, 0, 0, .55);
    --bom: #5BD35B; --bom-fundo: rgba(12, 163, 12, .16); --alerta: #FFCB5C; --alerta-fundo: rgba(250, 178, 25, .14);
    --serio: #F4A27F; --serio-fundo: rgba(236, 131, 90, .15); --critico: #FF7A7A; --critico-fundo: rgba(208, 59, 59, .18);
    --info: #8DB8F2; --info-fundo: rgba(57, 135, 229, .16);
    --s1: #E5484D; --s2: #3987E5; --s3: #199E70; --s4: #C98500; --s5: #9085E9; --s-cinza: #6E6E79;
    --grade: #26262D; --eixo: #8A8A95;
    --menu-fundo: linear-gradient(180deg, #2A0A10 0%, #16070A 100%); --menu-texto: rgba(255, 255, 255, .86); --menu-texto-2: rgba(255, 255, 255, .55);
    --menu-hover: rgba(255, 255, 255, .07); --menu-ativo-fundo: #E5484D; --menu-ativo-texto: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --vermelho: #E5484D; --vermelho-2: #C9383D; --vermelho-3: #F0656A; --vermelho-suave: rgba(229, 72, 77, .14); --vermelho-borda: rgba(229, 72, 77, .38); --vermelho-texto: #FF8589;
  --fundo: #0D0D10; --cartao: #17171C; --cartao-2: #1C1C22; --cartao-3: #22222A; --borda: #2A2A31; --borda-2: #3A3A43;
  --texto: #F2F2F5; --texto-2: #B5B5C0; --texto-3: #7E7E89;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 12px 34px rgba(0, 0, 0, .55);
  --bom: #5BD35B; --bom-fundo: rgba(12, 163, 12, .16); --alerta: #FFCB5C; --alerta-fundo: rgba(250, 178, 25, .14);
  --serio: #F4A27F; --serio-fundo: rgba(236, 131, 90, .15); --critico: #FF7A7A; --critico-fundo: rgba(208, 59, 59, .18);
  --info: #8DB8F2; --info-fundo: rgba(57, 135, 229, .16);
  --s1: #E5484D; --s2: #3987E5; --s3: #199E70; --s4: #C98500; --s5: #9085E9; --s-cinza: #6E6E79;
  --grade: #26262D; --eixo: #8A8A95;
  --menu-fundo: linear-gradient(180deg, #2A0A10 0%, #16070A 100%); --menu-texto: rgba(255, 255, 255, .86); --menu-texto-2: rgba(255, 255, 255, .55);
  --menu-hover: rgba(255, 255, 255, .07); --menu-ativo-fundo: #E5484D; --menu-ativo-texto: #FFFFFF;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--vermelho-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; }
.n { text-align: right; white-space: nowrap; }
.c { text-align: center; }
.mut { color: var(--texto-3); }
.mut2 { color: var(--texto-2); }
.pos { color: var(--bom); }
.neg { color: var(--critico); }
.forte { font-weight: 650; }
.peq { font-size: 12px; }
.oculto { display: none !important; }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha.entre { justify-content: space-between; }
.espaco { flex: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; border-radius: 4px; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: var(--larg-menu) 1fr; min-height: 100vh; }
.menu { background: var(--menu-fundo); color: var(--menu-texto); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 30; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.marca { display: block; padding: 18px 18px 10px; border-radius: 0; }
.marca:hover { background: none !important; }
.marca-logo { width: 196px; max-width: 100%; display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }
.marca-ico { width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.marca-ico svg { width: 22px; height: 22px; }
.marca-nome { font-weight: 750; font-size: 16px; color: #fff; letter-spacing: -.01em; line-height: 1.15; }
.marca-sub { font-size: 11.5px; color: var(--menu-texto-2); letter-spacing: .02em; }
.menu-grupo { padding: 10px 10px 2px; }
.menu-grupo-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--menu-texto-2); padding: 6px 10px 6px; font-weight: 650; }
.menu a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--menu-texto); font-weight: 500; text-decoration: none; margin: 1px 0; transition: background .12s; }
.menu a svg { width: 18px; height: 18px; flex: none; opacity: .92; }
.menu a:hover { background: var(--menu-hover); }
.menu a.ativo { background: var(--menu-ativo-fundo); color: var(--menu-ativo-texto); font-weight: 650; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.menu a .cont { margin-left: auto; background: rgba(255,255,255,.22); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.menu a.ativo .cont { background: var(--vermelho); color: #fff; }
.menu-rodape { margin-top: auto; padding: 14px 18px 18px; font-size: 11.5px; color: var(--menu-texto-2); }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo-in { display: flex; align-items: center; gap: 12px; padding: 12px 26px; min-height: 64px; }
.topo h1 { font-size: 20px; margin: 0; letter-spacing: -.015em; font-weight: 720; }
.topo .sub { font-size: 12.5px; color: var(--texto-3); margin-top: 1px; }
/* telas mais estreitas: título e subtítulo numa linha só (com reticências), sem empurrar os botões */
@media (min-width: 901px) {
  .topo-in > div:nth-child(2) { flex: 1 1 auto; min-width: 140px; overflow: hidden; }
  .topo h1, .topo .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topo-in > .espaco { flex: 0 0 0; }
}
.hamburguer { display: none; }
.conteudo { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 1640px; width: 100%; }

/* seletor de mês */
.mes-sel { display: inline-flex; align-items: center; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); overflow: hidden; }
.mes-sel button { border: 0; background: transparent; padding: 7px 10px; cursor: pointer; color: var(--texto-2); display: grid; place-items: center; }
.mes-sel button:hover { background: var(--cartao-3); color: var(--texto); }
.mes-sel select { border: 0; background: transparent; padding: 7px 4px; font-weight: 650; cursor: pointer; appearance: none; text-align: center; min-width: 128px; }
.mes-sel select:focus { outline: none; }
.busca-g { position: relative; }
.busca-g input { width: 260px; padding: 8px 12px 8px 34px; border-radius: 10px; border: 1px solid var(--borda); background: var(--cartao); box-shadow: var(--sombra); }
.busca-g svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); }
.busca-g kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10.5px; color: var(--texto-3); border: 1px solid var(--borda); border-radius: 5px; padding: 0 5px; background: var(--cartao-2); }
.busca-res { position: absolute; top: calc(100% + 6px); right: 0; width: 420px; max-height: 70vh; overflow: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-2); z-index: 50; padding: 6px; }
.busca-res .g { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 8px 10px 4px; font-weight: 650; }
.busca-res a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.busca-res a:hover, .busca-res a.sel { background: var(--vermelho-suave); }
.busca-res a small { display: block; color: var(--texto-3); font-size: 12px; }
.icone-bt { border: 1px solid var(--borda); background: var(--cartao); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--texto-2); box-shadow: var(--sombra); flex: none; }
.icone-bt:hover { color: var(--texto); background: var(--cartao-2); }
.icone-bt svg { width: 18px; height: 18px; }
.usuario-bt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); background: var(--cartao); border-radius: 10px; padding: 4px 10px 4px 4px; cursor: pointer; box-shadow: var(--sombra); }
.avatar { width: 28px; height: 28px; border-radius: 8px; background: var(--vermelho); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; }
.pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-2); min-width: 220px; padding: 6px; z-index: 60; }
.pop button, .pop a { display: flex; width: 100%; text-align: left; gap: 8px; align-items: center; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); text-decoration: none; }
.pop button:hover, .pop a:hover { background: var(--cartao-3); }
.pop hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 0; }
.rel { position: relative; }
.status-leitura { font-size: 12px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 1500px) { .status-leitura span:not(.ponto) { display: none; } .status-leitura { cursor: help; } }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--bom-forte); box-shadow: 0 0 0 3px var(--bom-fundo); flex: none; }
.ponto.alerta { background: var(--alerta-forte); box-shadow: 0 0 0 3px var(--alerta-fundo); }
.ponto.erro { background: var(--critico-forte); box-shadow: 0 0 0 3px var(--critico-fundo); }

/* ---------- grades ---------- */
.g { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.span2 { grid-column: span 2; }

/* ---------- cartões ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); min-width: 0; display: flex; flex-direction: column; }
.cartao-cab { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 6px; }
.cartao-cab h2 { font-size: 15px; margin: 0; font-weight: 680; letter-spacing: -.005em; }
.cartao-cab .sub { font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.cartao-cab .acoes { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cartao-corpo { padding: 10px 18px 18px; min-width: 0; }
.cartao-corpo.sem-pad { padding: 4px 0 0; }
.cartao.destaque { border-color: var(--vermelho-borda); background: linear-gradient(180deg, var(--vermelho-suave), var(--cartao) 70%); }

/* ---------- indicadores ---------- */
.kpi { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; overflow: hidden; }
.kpi .rot { font-size: 12.5px; color: var(--texto-2); font-weight: 560; display: flex; align-items: center; gap: 8px; }
.kpi .rot .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--vermelho-suave); color: var(--vermelho-texto); display: grid; place-items: center; flex: none; }
.kpi .rot .ico svg { width: 15px; height: 15px; }
.kpi .val { font-size: 24px; font-weight: 740; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .det { font-size: 12.5px; color: var(--texto-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kpi.principal-kpi { background: var(--menu-fundo); border: 0; color: #fff; }
.kpi.principal-kpi .rot, .kpi.principal-kpi .det { color: rgba(255,255,255,.82); }
.kpi.principal-kpi .rot .ico { background: rgba(255,255,255,.18); color: #fff; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-size: 12px; padding: 1px 7px; border-radius: 99px; }
.delta.sobe { color: var(--bom); background: var(--bom-fundo); }
.delta.desce { color: var(--critico); background: var(--critico-fundo); }
.delta.neutro { color: var(--texto-2); background: var(--cartao-3); }
.kpi.principal-kpi .delta { background: rgba(255,255,255,.18); color: #fff; }

/* barra de meta (bullet) */
.meta-barra { position: relative; height: 12px; border-radius: 99px; background: var(--cartao-3); overflow: visible; margin: 8px 0 4px; }
.meta-barra .real { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--vermelho); }
.meta-barra .prev { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: repeating-linear-gradient(45deg, var(--vermelho-borda), var(--vermelho-borda) 4px, transparent 4px, transparent 8px); border: 1px solid var(--vermelho-borda); }
.meta-barra .alvo { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--texto); border-radius: 2px; }
.kpi.principal-kpi .meta-barra { background: rgba(255,255,255,.2); }
.kpi.principal-kpi .meta-barra .real { background: #fff; }
.kpi.principal-kpi .meta-barra .prev { background: repeating-linear-gradient(45deg, rgba(255,255,255,.45), rgba(255,255,255,.45) 4px, transparent 4px, transparent 8px); border-color: rgba(255,255,255,.45); }
.kpi.principal-kpi .meta-barra .alvo { background: #fff; }

/* ---------- botões e campos ---------- */
.bt { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); padding: 7px 13px; border-radius: 9px; cursor: pointer; font-weight: 560; white-space: nowrap; box-shadow: var(--sombra); transition: background .12s, border-color .12s; text-decoration: none; }
.bt:hover { background: var(--cartao-2); border-color: var(--borda-2); text-decoration: none; }
.bt svg { width: 16px; height: 16px; }
.bt.prim { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.bt.prim:hover { background: var(--vermelho-2); border-color: var(--vermelho-2); }
.bt.fant { background: transparent; box-shadow: none; border-color: transparent; color: var(--texto-2); }
.bt.fant:hover { background: var(--cartao-3); color: var(--texto); }
.bt.perigo { color: var(--critico); }
.bt.perigo:hover { background: var(--critico-fundo); border-color: var(--critico-fundo); }
.bt.peq { padding: 4px 9px; font-size: 12.5px; border-radius: 8px; }
.bt[disabled] { opacity: .55; cursor: not-allowed; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.campo small { color: var(--texto-3); font-size: 12px; }
.entrada, .campo input, .campo select, .campo textarea, select.entrada { width: 100%; padding: 8px 11px; border: 1px solid var(--borda-2); border-radius: 9px; background: var(--cartao); color: var(--texto); min-height: 37px; }
.campo textarea { min-height: 70px; resize: vertical; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-suave); }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { min-width: 150px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .inteiro { grid-column: 1 / -1; }
.campo-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
.campo-check .chk { margin-top: 2px; }
.campo-check span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.campo-check small { color: var(--texto-3); font-size: 12px; }
.seg { display: inline-flex; background: var(--cartao-3); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; cursor: pointer; color: var(--texto-2); font-weight: 560; font-size: 13px; }
.seg button.ativo { background: var(--cartao); color: var(--texto); box-shadow: var(--sombra); }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas button { border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--texto-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas button:hover { color: var(--texto); }
.abas button.ativo { color: var(--vermelho-texto); border-bottom-color: var(--vermelho); }

/* ---------- tabelas ---------- */
.tab-ferr { display: flex; gap: 8px; align-items: center; padding: 0 18px 10px; flex-wrap: wrap; }
.tab-ferr .entrada { max-width: 260px; min-height: 33px; padding: 6px 10px; }
.tab-caixa { overflow: auto; max-height: var(--altura-tabela, 640px); border-top: 1px solid var(--borda); }
.tab-caixa.livre { max-height: none; }
table.tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tab th { position: sticky; top: 0; z-index: 2; background: var(--cartao-2); color: var(--texto-2); font-weight: 650; font-size: 12px; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; user-select: none; }
table.tab th.ord { cursor: pointer; }
table.tab th.ord:hover { color: var(--texto); }
table.tab th .seta { opacity: .5; font-size: 10px; margin-left: 3px; }
table.tab td { padding: 8px 12px; border-bottom: 1px solid var(--grade); vertical-align: middle; }
table.tab tbody tr:hover td { background: var(--cartao-2); }
table.tab tbody tr.clicavel { cursor: pointer; }
table.tab tfoot td { position: sticky; bottom: 0; background: var(--cartao-2); font-weight: 700; border-top: 1px solid var(--borda); border-bottom: 0; }
table.tab td.n, table.tab th.n { text-align: right; }
table.tab tr.grupo td { font-weight: 700; background: var(--cartao-2); }
table.tab tr.subgrupo td { font-weight: 650; }
table.tab tr.resultado td { font-weight: 750; background: var(--vermelho-suave); color: var(--texto); }
table.tab tr.destaque td { font-weight: 800; background: var(--vermelho); color: #fff; }
table.tab tr.destaque td .mut, table.tab tr.destaque td .neg, table.tab tr.destaque td .pos { color: #fff; }
table.tab td.fixa, table.tab th.fixa { position: sticky; left: 0; z-index: 1; background: var(--cartao); }
table.tab th.fixa { z-index: 3; background: var(--cartao-2); }
table.tab tr.grupo td.fixa, table.tab tr.subgrupo td.fixa { background: var(--cartao-2); }
table.tab tr.resultado td.fixa { background: color-mix(in srgb, var(--vermelho-suave) 100%, var(--cartao)); }
table.tab.compacta td, table.tab.compacta th { padding: 6px 9px; }
table.tab .recuo1 { padding-left: 24px; } table.tab .recuo2 { padding-left: 38px; }
.tab-pag { display: flex; align-items: center; gap: 8px; padding: 10px 18px; color: var(--texto-3); font-size: 12.5px; border-top: 1px solid var(--borda); }
.celula-barra { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.celula-barra .b { height: 6px; border-radius: 4px; background: var(--s1); min-width: 2px; }

/* ---------- selos (status) ---------- */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 640; white-space: nowrap; }
.selo svg { width: 13px; height: 13px; }
.selo.bom { color: var(--bom); background: var(--bom-fundo); }
.selo.alerta { color: var(--alerta); background: var(--alerta-fundo); }
.selo.serio { color: var(--serio); background: var(--serio-fundo); }
.selo.critico { color: var(--critico); background: var(--critico-fundo); }
.selo.info { color: var(--info); background: var(--info-fundo); }
.selo.neutro { color: var(--texto-2); background: var(--cartao-3); }
.selo.marca { color: var(--vermelho-texto); background: var(--vermelho-suave); }

/* ---------- avisos ---------- */
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); }
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso.critico { background: var(--critico-fundo); border-color: transparent; color: var(--critico); }
.aviso.serio { background: var(--serio-fundo); border-color: transparent; color: var(--serio); }
.aviso.alerta { background: var(--alerta-fundo); border-color: transparent; color: var(--alerta); }
.aviso.info { background: var(--info-fundo); border-color: transparent; color: var(--info); }
.aviso.bom { background: var(--bom-fundo); border-color: transparent; color: var(--bom); }
.aviso .txt { color: var(--texto); }
.aviso .txt b { display: block; margin-bottom: 2px; }

/* lista de conferências */
.conf-item { border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); overflow: hidden; }
.conf-cab { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; cursor: pointer; }
.conf-cab:hover { background: var(--cartao-2); }
.conf-cab .t { font-weight: 650; }
.conf-cab .d { color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.conf-corpo { border-top: 1px solid var(--borda); padding: 12px 16px; background: var(--cartao-2); }
.conf-acao { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--texto); background: var(--cartao); border: 1px dashed var(--borda-2); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }
.conf-acao.feito { border-style: solid; border-color: var(--bom); background: var(--bom-fundo); }
.conf-acao.feito svg { color: var(--bom); }
.conf-acao.bs { border-style: solid; border-color: var(--info); background: var(--info-fundo); }
.conf-acao.bs svg { color: var(--info); }
.conf-acao svg { flex: none; margin-top: 1px; }
.conf-onde { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }
.conf-onde > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.conf-onde .rot { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-2); white-space: nowrap; }
.conf-onde .bt { margin-left: auto; }
.conf-escolha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.conf-escolha.col { flex-direction: column; align-items: stretch; }
.conf-escolha select { max-width: 340px; }
.conf-item.conf-ok .conf-cab .t { color: var(--texto); }

/* ---------- gráficos ---------- */
.graf { position: relative; width: 100%; }
.vazio-graf { display: grid; place-items: center; color: var(--texto-3); border: 1px dashed var(--borda); border-radius: 10px; font-size: 13px; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf .grade-l { stroke: var(--grade); stroke-width: 1; }
.graf .eixo-t { fill: var(--eixo); font-size: 11px; font-family: var(--fonte); }
.graf .rotulo-v { fill: var(--texto-2); font-size: 11px; font-weight: 600; font-family: var(--fonte); }
.graf .linha-ref { stroke: var(--texto-2); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.graf .cruz { stroke: var(--borda-2); stroke-width: 1; }
.graf-dica { position: absolute; pointer-events: none; background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra-2); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; min-width: 150px; z-index: 10; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.graf-dica .t { font-weight: 700; margin-bottom: 4px; }
.graf-dica .l { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.graf-dica .l .k { display: flex; align-items: center; gap: 6px; color: var(--texto-2); }
.graf-dica .l b { font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); margin: 4px 0 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.marca-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.marca-cor.linha-tr { height: 2px; width: 14px; border-radius: 2px; }
.marca-cor.trac { height: 0; width: 14px; border-top: 2px dashed var(--texto-2); border-radius: 0; background: none !important; }
.barras-h .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome v" "trilho trilho"; gap: 3px 10px; align-items: baseline; padding: 6px 0; font-size: 13px; }
.barras-h .item .nome { grid-area: nome; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.barras-h .item .trilho { grid-area: trilho; height: 8px; background: var(--cartao-3); border-radius: 99px; overflow: hidden; }
.barras-h .item .barra { height: 100%; border-radius: 99px; background: var(--s1); }
.barras-h .item .v { grid-area: v; font-variant-numeric: tabular-nums; font-weight: 640; white-space: nowrap; text-align: right; }
.barras-h .item .v small { color: var(--texto-3); font-weight: 500; margin-left: 5px; }
.barras-h .item.clicavel { cursor: pointer; border-radius: 8px; }
.barras-h .item.clicavel:hover .nome { color: var(--texto); }

/* ---------- modal, toast ---------- */
.fundo-modal { position: fixed; inset: 0; background: rgba(10, 8, 12, .45); display: grid; place-items: center; z-index: 100; padding: 16px; animation: aparece .12s ease-out; }
.modal { background: var(--cartao); border-radius: 16px; box-shadow: var(--sombra-2); width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border: 1px solid var(--borda); }
.modal.largo { width: min(1100px, 100%); }
.modal-cab { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.modal-cab h3 { margin: 0; font-size: 16.5px; }
.modal-corpo { padding: 18px 20px; overflow: auto; }
.modal-rod { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--borda); }
.toasts { position: fixed; right: 18px; top: 78px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--texto); color: var(--fundo); padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra-2); max-width: 380px; animation: aparece .15s ease-out; display: flex; gap: 8px; align-items: center; }
.toast.erro { background: var(--critico-forte); color: #fff; }
.toast.ok { background: var(--bom-forte); color: #fff; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- vazio e carregando ---------- */
.vazio { text-align: center; padding: 34px 16px; color: var(--texto-3); }
.vazio svg { width: 34px; height: 34px; opacity: .5; margin-bottom: 6px; }
.esq { background: linear-gradient(90deg, var(--cartao-3), var(--cartao-2), var(--cartao-3)); background-size: 200% 100%; animation: brilho 1.2s linear infinite; border-radius: 10px; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.carregando { display: grid; gap: 18px; }
.carregando .linha-esq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carregando .linha-esq .esq { height: 104px; }
.carregando .bloco { height: 320px; }
.erro-tela { padding: 30px; text-align: center; }

/* ---------- ficha do cliente / listas ---------- */
.ficha-cab { display: flex; gap: 16px; align-items: center; }
.ficha-av { width: 54px; height: 54px; border-radius: 15px; background: var(--vermelho); color: #fff; display: grid; place-items: center; font-size: 21px; font-weight: 760; flex: none; }
.dados-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.dados-l .k { font-size: 12px; color: var(--texto-3); }
.dados-l .v { font-weight: 600; }
.mini-tab { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font-size: 13px; }
.mini-tab .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }
.lista-l { display: flex; flex-direction: column; }
.lista-l .it { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grade); }
.lista-l .it:last-child { border-bottom: 0; }
.lista-l .it .p { flex: 1; min-width: 0; }
.lista-l .it .p .t { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.lista-l .it .p .s { color: var(--texto-3); font-size: 12px; }

/* ---------- arquivos, seleção, extratos ---------- */
.zona-arquivos { border: 2px dashed var(--vermelho-borda); background: var(--vermelho-suave); border-radius: var(--raio); padding: 26px 18px; text-align: center; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; }
.zona-arquivos:hover, .zona-arquivos:focus-visible { border-color: var(--vermelho); }
.zona-arquivos.ativa { border-color: var(--vermelho); background: color-mix(in srgb, var(--vermelho-suave) 60%, var(--cartao)); transform: scale(1.005); }
.zona-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--vermelho); color: #fff; display: grid; place-items: center; margin: 0 auto 10px; }
.zona-ico svg { width: 24px; height: 24px; }
.zona-t { font-weight: 700; font-size: 16px; }
.zona-s { color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.chk { width: 17px; height: 17px; accent-color: var(--vermelho); cursor: pointer; vertical-align: middle; margin: 0; }
.barra-sel { position: sticky; bottom: 12px; z-index: 15; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--texto); color: var(--fundo); border-radius: 12px; padding: 10px 14px; box-shadow: var(--sombra-2); }
.barra-sel .bt { box-shadow: none; }
.barra-sel .bt.fant { color: var(--fundo); }
.barra-sel .bt.fant:hover { background: rgba(255,255,255,.12); }
.contas-banco { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.conta-banco { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: var(--cartao); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.conta-banco .topo-cb { display: flex; align-items: center; gap: 10px; }
.conta-banco .ico-b { width: 34px; height: 34px; border-radius: 10px; background: var(--vermelho-suave); color: var(--vermelho-texto); display: grid; place-items: center; flex: none; }
.conta-banco .ico-b svg { width: 18px; height: 18px; }
.conta-banco .nome-b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-banco .saldo-b { font-size: 19px; font-weight: 740; font-variant-numeric: tabular-nums; }
.conta-banco.ignorada { opacity: .55; }
.conf-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.conf-pill.alta { color: var(--bom); background: var(--bom-fundo); }
.conf-pill.media { color: var(--alerta); background: var(--alerta-fundo); }
.conf-pill.baixa { color: var(--texto-2); background: var(--cartao-3); }
.acoes-l { display: inline-flex; gap: 4px; justify-content: flex-end; }
.bt-mini { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto-2); border-radius: 7px; padding: 3px 7px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bt-mini:hover { color: var(--texto); border-color: var(--borda-2); background: var(--cartao-2); }
.bt-mini svg { width: 13px; height: 13px; }
.bt-mini.prim { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.bt-mini.prim:hover { background: var(--vermelho-2); }
.desc-ex { max-width: 360px; }
.desc-ex .d1 { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desc-ex .d2 { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desc-ex .d2.alerta-t { color: var(--alerta); white-space: normal; }
.sanfona { border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); overflow: hidden; }
.sanfona-cab { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: none; padding: 12px 16px; cursor: pointer; font-weight: 650; text-align: left; }
.sanfona-cab:hover { background: var(--cartao-2); }
.sanfona-cab[aria-expanded="true"] svg { transform: rotate(180deg); }
.sanfona-corpo { padding: 4px 16px 14px; border-top: 1px solid var(--borda); }
.passos { margin: 8px 0 0; padding-left: 20px; }
.passos li { margin: 3px 0; }
.previa-arq { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: var(--cartao-2); display: flex; flex-direction: column; gap: 10px; }
.previa-arq .cab-p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.previa-arq .cab-p b { font-size: 14.5px; }
.previa-conta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.previa-conta select { min-height: 33px; padding: 5px 8px; }
.interruptor { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--borda-2); position: relative; cursor: pointer; transition: background .15s; margin: 0; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.interruptor input:checked { background: var(--vermelho); }
.interruptor input:checked::after { left: 19px; }
.interruptor > span { display: flex; flex-direction: column; gap: 1px; }
.interruptor .sub-cel { display: block; font-size: 12px; color: var(--texto-3); font-weight: 400; }
.passos-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.passos-ex > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texto-2); }
.passos-ex .num-p { width: 24px; height: 24px; border-radius: 50%; background: var(--vermelho-suave); color: var(--vermelho-texto); font-weight: 750; display: grid; place-items: center; flex: none; font-size: 12.5px; }
@media (max-width: 900px) { .passos-ex { grid-template-columns: minmax(0, 1fr); } }
.kv-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.kv-lista .k { color: var(--texto-3); }
.log-caixa { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.log-caixa .erro-l { color: var(--critico); } .log-caixa .aviso-l { color: var(--alerta); }
.json-dif { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
.json-dif .h { font-weight: 700; color: var(--texto-2); }
.json-dif .mudou { background: var(--alerta-fundo); border-radius: 4px; padding: 0 4px; }
.etapas { display: flex; gap: 8px; flex-wrap: wrap; }
.etapas .et { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: var(--cartao-3); color: var(--texto-2); }
.etapas .et.ok { background: var(--bom-fundo); color: var(--bom); } .etapas .et.erro { background: var(--critico-fundo); color: var(--critico); }
.etapas .et svg { width: 13px; height: 13px; }
.mini-num { display: flex; gap: 18px; flex-wrap: wrap; }
.mini-num > div { display: flex; flex-direction: column; }
.mini-num .k { font-size: 12px; color: var(--texto-3); }
.mini-num .v { font-weight: 700; font-variant-numeric: tabular-nums; }
td .sub-cel { display: block; font-size: 11.5px; color: var(--texto-3); }
table.tab.matriz td, table.tab.matriz th { padding: 5px 8px; font-size: 12px; }
table.tab.matriz td.fixa { min-width: 230px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tab td.zero { color: var(--texto-3); }
table.tab tr.futuro td { color: var(--texto-3); }

/* ---------- login ---------- */
.login-fundo { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-arte { background: var(--menu-fundo); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-arte h2 { font-size: 32px; line-height: 1.15; margin: 18px 0 10px; letter-spacing: -.02em; max-width: 460px; }
.login-logo-branca { width: 210px; position: relative; }
.login-centro { position: relative; max-width: 480px; }
.login-selo { width: 270px; height: 270px; border-radius: 50%; background: #fff; box-shadow: 0 18px 50px rgba(60, 0, 10, .35), 0 0 0 10px rgba(255,255,255,.12); display: grid; place-items: center; overflow: hidden; }
.login-selo img { width: 100%; height: 100%; object-fit: cover; }
.login-rodape { font-size: 12px; color: rgba(255,255,255,.66); position: relative; }
.login-logo-cor { display: none; width: 230px; margin: 0 auto 26px; }
.cab-impressao { display: none; }
.login-arte p { color: rgba(255,255,255,.82); max-width: 440px; font-size: 15px; }
.login-arte .circ { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.login-caixa { display: grid; place-items: center; padding: 32px; background: var(--fundo); }
.login-form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.login-form h1 { font-size: 24px; margin: 0; letter-spacing: -.015em; }
.login-form .sub { color: var(--texto-3); margin: -6px 0 8px; }
.login-form .bt { justify-content: center; padding: 10px 14px; }
.login-erro { color: var(--critico); background: var(--critico-fundo); padding: 9px 12px; border-radius: 10px; font-size: 13px; }

/* ---------- celular / telas pequenas ---------- */
@media (max-width: 1280px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .g-2-1, .g-1-2, .g-3-2, .g3 { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; } .busca-g input { width: 190px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sombra-2); }
  .app.menu-aberto .menu { transform: none; }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
  .hamburguer { display: grid; }
  .topo-in { padding: 10px 16px; flex-wrap: wrap; }
  .conteudo { padding: 16px 16px 32px; gap: 14px; }
  .g2, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .kpis-mobile2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .busca-g { order: 5; width: 100%; } .busca-g input { width: 100%; } .busca-res { width: 100%; }
  .status-leitura { display: none; }
  .login-fundo { grid-template-columns: 1fr; } .login-arte { display: none; } .login-logo-cor { display: block; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .kpi .val { font-size: 21px; }
  .tab-ferr .entrada { max-width: none; flex: 1; }
  .previa-conta { grid-template-columns: minmax(0, 1fr); }
  .cartao-cab { flex-wrap: wrap; }
  .cartao-cab > div:first-child { flex: 1 1 100%; min-width: 0; }
  .cartao-cab .acoes { margin-left: 0; width: 100%; justify-content: flex-start; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { white-space: nowrap; }
  .tab-ferr .entrada { flex: 1 1 100%; }
  .tab-ferr .espaco { display: none; }
  .filtros .campo { min-width: 0; flex: 1 1 140px; }
  .dados-l { grid-template-columns: minmax(0, 1fr); }
  .barra-sel { bottom: 8px; }
}
@media print {
  .menu, .topo, .tab-ferr, .acoes, .bt, .tab-pag { display: none !important; }
  .cab-impressao { display: flex !important; align-items: center; gap: 16px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 2px solid #C8102E; }
  .cab-impressao img { height: 54px; }
  .app { display: block; } .conteudo { padding: 0; }
  .cartao, .kpi { box-shadow: none; break-inside: avoid; }
  .tab-caixa { max-height: none; overflow: visible; }
  body { background: #fff; }
}

/* ---------- parte cristã: saudação, Palavra do dia, datas cristãs e versículos ---------- */
:root { --fonte-verso: Georgia, "Times New Roman", Cambria, serif; }
.fe-bloco { display: flex; flex-direction: column; gap: 14px; }
.fe-topo { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.2fr); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.fe-topo.so-um { grid-template-columns: minmax(0, 1fr); }
.fe-ola { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-right: 1px solid var(--borda); }
.fe-ola .fe-data { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); font-weight: 650; }
.fe-ola h2 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.02em; line-height: 1.2; }
.fe-ola p { margin: 3px 0 0; color: var(--vermelho-texto); font-weight: 600; }
.fe-palavra { position: relative; padding: 20px 26px 16px; background: linear-gradient(120deg, var(--vermelho-suave) 0%, transparent 75%); min-width: 0; }
.fe-palavra::before { content: "\201C"; position: absolute; right: 20px; top: -14px; font: 700 128px/1 var(--fonte-verso); color: var(--vermelho); opacity: .11; pointer-events: none; }
.cartao .fe-palavra { margin: -10px -18px -18px; border-radius: 0 0 var(--raio) var(--raio); }
.fe-rotulo { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--vermelho-texto); }
.fe-verso { font: italic 18px/1.55 var(--fonte-verso); color: var(--texto); margin: 8px 0 6px; max-width: 72ch; position: relative; }
.fe-ref { font-weight: 700; color: var(--vermelho-texto); font-size: 13.5px; letter-spacing: .01em; }
.fe-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
a.bt:hover { text-decoration: none; }
.fe-faixa { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--raio); background: var(--menu-fundo); color: #fff; box-shadow: var(--sombra); }
.fe-faixa-ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.fe-faixa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fe-faixa-txt b { font-size: 17px; letter-spacing: -.01em; }
.fe-faixa-txt span { color: rgba(255, 255, 255, .9); }
.fe-faixa-txt .fe-faixa-v { font: italic 14px/1.45 var(--fonte-verso); color: rgba(255, 255, 255, .82); }
.fe-rodape { display: flex; align-items: baseline; justify-content: center; gap: 4px 9px; flex-wrap: wrap; margin: 30px auto 2px; padding: 16px 12px 0; border-top: 1px dashed var(--borda-2); max-width: 920px; text-align: center; }
.fe-rodape .fe-cruz { color: var(--vermelho); display: inline-flex; align-self: center; }
.fe-rodape-t { font: italic 14.5px/1.5 var(--fonte-verso); color: var(--texto-2); }
.fe-rodape-r { font-size: 12px; font-weight: 700; color: var(--vermelho-texto); white-space: nowrap; }
.fe-meta-batida { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--bom); }
.principal-kpi .fe-meta-batida { color: #fff; background: rgba(255, 255, 255, .18); display: inline-flex; padding: 3px 9px; border-radius: 99px; }
.cartao-corpo:has(> .fe-palavra) { flex: 1; display: flex; flex-direction: column; }
.cartao-corpo > .fe-palavra { flex: 1; }
.menu-fe { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .94); font-weight: 650; font-size: 12.5px; letter-spacing: .02em; margin-bottom: 5px; }
.login-palavra { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); max-width: 470px; }
.login-palavra .lp-rot, .login-palavra .lp-data { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.login-palavra .lp-data { color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 400; letter-spacing: .01em; text-transform: none; margin-bottom: 8px; align-items: flex-start; }
.login-palavra .lp-data svg { flex: none; margin-top: 2px; }
.login-palavra .lp-data b { color: #fff; font-size: 15px; margin-right: 2px; }
.login-arte .login-palavra p, .login-palavra p { font: italic 16px/1.5 var(--fonte-verso); color: #fff; margin: 6px 0 4px; max-width: none; }
.login-palavra b { font-size: 13px; color: rgba(255, 255, 255, .92); }
.login-palavra-cel { display: none; }
.login-fe { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .92); font-weight: 650; }
.login-tchau { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--vermelho-suave); border: 1px solid var(--vermelho-borda); }
.login-tchau svg { color: var(--vermelho); flex: none; margin-top: 2px; }
.login-tchau b { display: block; margin-bottom: 2px; }
.login-tchau span { font: italic 13px/1.45 var(--fonte-verso); color: var(--texto-2); }
.fe-config { display: flex; flex-direction: column; gap: 14px; }
.fe-datas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fe-data-it { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao-2); }
.fe-data-it svg { color: var(--vermelho); flex: none; margin-top: 2px; }
.fe-data-it b { display: block; }
.fe-data-it span { font-size: 12.5px; color: var(--texto-3); }
.fe-tab-verso { display: block; white-space: normal; min-width: 260px; max-width: 640px; font-family: var(--fonte-verso); font-size: 14px; line-height: 1.45; }
.fe-editar-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
@media (max-width: 900px) {
  .fe-topo { grid-template-columns: minmax(0, 1fr); }
  .fe-ola { border-right: 0; border-bottom: 1px solid var(--borda); padding: 16px 18px; }
  .fe-ola h2 { font-size: 20px; }
  .fe-palavra { padding: 16px 18px 14px; }
  .fe-palavra::before { font-size: 96px; right: 12px; }
  .fe-verso { font-size: 16.5px; }
  .fe-faixa { padding: 12px 14px; align-items: flex-start; }
  .fe-faixa-ic { width: 36px; height: 36px; }
  .login-palavra-cel { display: block; margin-top: 22px; background: var(--vermelho-suave); border-color: var(--vermelho-borda); }
  .login-palavra-cel .lp-rot, .login-palavra-cel .lp-data { color: var(--vermelho-texto); border-color: var(--vermelho-borda); }
  .login-palavra-cel p { color: var(--texto); }
  .login-palavra-cel b { color: var(--vermelho-texto); }
}
@media print { .fe-acoes, .fe-rodape { display: none !important; } .fe-topo { box-shadow: none; } }

/* ---------- tempo real (vendas de hoje) ---------- */
.tr-pilula { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--borda); background: var(--cartao); box-shadow: var(--sombra); color: var(--texto-2); font-size: 12.5px; white-space: nowrap; text-decoration: none; flex: none; }
.tr-pilula b { color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 720; }
.tr-pilula .tr-hora { color: var(--texto-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tr-pilula:hover { border-color: var(--vermelho-borda); background: var(--vermelho-suave); color: var(--texto); }
@media (max-width: 1280px) { .tr-pilula .tr-hora { display: none; } }
@media (max-width: 1100px) { .tr-pilula .tr-rot { display: none; } }
@media (max-width: 900px) { .tr-pilula { order: 4; } }
.tr-topo { display: flex; flex-direction: column; gap: 10px; }
.tr-barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); box-shadow: var(--sombra); font-size: 13px; color: var(--texto-2); flex-wrap: wrap; }
.tr-barra .tr-txt { min-width: 0; font-variant-numeric: tabular-nums; }
.tr-barra.compacta { padding: 8px 12px; box-shadow: none; }
.tr-filtros { padding: 12px 14px; }
.tr-filtros .filtros .campo { min-width: 132px; }
.tr-filtros .filtros .campo-hora { min-width: 84px; }
.tr-filtros .filtros .campo-cliente { flex: 1; min-width: 180px; }
.tr-conteudo { display: flex; flex-direction: column; gap: 18px; }
.tr-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grade); display: flex; flex-direction: column; gap: 4px; }
.painel-hoje { color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--vermelho-borda); border-radius: var(--raio); background: linear-gradient(90deg, var(--vermelho-suave), var(--cartao) 75%); box-shadow: var(--sombra); }
.painel-hoje .ph-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--vermelho); color: #fff; display: grid; place-items: center; flex: none; }
.painel-hoje .ph-ico svg { width: 18px; height: 18px; }
.painel-hoje .ph-val { font-size: 22px; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.painel-hoje .ph-rot { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.painel-hoje .ph-det { font-size: 12.5px; color: var(--texto-3); display: flex; gap: 6px 14px; flex-wrap: wrap; }
.painel-hoje .ph-det b { color: var(--texto-2); font-weight: 650; }
@media (max-width: 900px) {
  .tr-filtros .filtros > .campo { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .tr-filtros .filtros > .campo:first-child, .tr-filtros .filtros > .campo-cliente { flex-basis: 100%; }
  .tr-filtros .seg { width: 100%; } .tr-filtros .seg button { flex: 1; padding: 6px 8px; }
  .painel-hoje .espaco { display: none; }
}

/* ---------- relatórios ---------- */
.rel-grade { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: 18px; align-items: start; }
.rel-cartao-lista { position: sticky; top: 84px; max-height: calc(100vh - 104px); display: flex; flex-direction: column; }
.rel-cartao-lista > .cartao-corpo { overflow: auto; min-height: 0; }
.rel-lista { display: flex; flex-direction: column; gap: 2px; }
.rel-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); font-weight: 650; padding: 10px 6px 4px; }
.rel-item { text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--texto); font: inherit; }
.rel-item:hover { background: var(--cartao-3); }
.rel-item.ativo { background: var(--vermelho-suave); box-shadow: inset 3px 0 0 var(--vermelho); }
.rel-item .t { font-weight: 640; font-size: 13.5px; }
.rel-item .s { font-size: 12px; color: var(--texto-3); line-height: 1.35; }
.rel-painel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rel-previa { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rel-cab h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.rel-fixo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--cartao-3); font-size: 13px; color: var(--texto-2); }
.rel-filtros { display: flex; flex-direction: column; gap: 10px; }
.rel-atalhos { gap: 6px; }
.rel-filtros .campo-cliente { flex: 1; min-width: 180px; }
@media (max-width: 1100px) { .rel-grade { grid-template-columns: minmax(0, 1fr); } .rel-cartao-lista { position: static; max-height: 420px; } }
@media print { .rel-cartao-lista, .rel-cartao-filtros { display: none !important; } .rel-grade { grid-template-columns: 1fr; } }
.tr-baixar { margin-left: auto; gap: 6px; }
@media (max-width: 900px) { .tr-baixar { margin-left: 0; width: 100%; } }
.rel-previa .g4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- entregas e motoboys ---------- */
.mb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mb-cartao { border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--cartao-2); padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mb-cartao.st-em-rota { border-color: var(--info); box-shadow: inset 3px 0 0 var(--info); }
.mb-cartao.st-confirmar { box-shadow: inset 3px 0 0 var(--alerta-forte); }
.mb-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mb-cab .selo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mb-av { width: 36px; height: 36px; border-radius: 50%; background: var(--vermelho-suave); color: var(--vermelho-texto); display: grid; place-items: center; font-weight: 750; flex: none; }
.mb-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-gps { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; border-radius: 99px; padding: 3px 8px; background: var(--cartao-3); color: var(--texto-3); }
.mb-gps.vivo { background: var(--bom-fundo); color: var(--bom); font-weight: 640; }
.mb-gps svg { width: 13px; height: 13px; }
.mb-rua { display: flex; flex-direction: column; gap: 6px; }
.mb-ped { border-radius: 8px; background: var(--info-fundo); padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; }
.mb-ped.atrasado { background: var(--critico-fundo); }
.mb-ped .selo { align-self: flex-start; }
.mb-ped-t { font-weight: 640; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-ped-s { font-size: 12px; color: var(--texto-2); }
.mb-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.mb-nums div { display: flex; flex-direction: column; background: var(--cartao); border: 1px solid var(--grade); border-radius: 8px; padding: 5px 2px; }
.mb-nums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mb-nums span { font-size: 11px; color: var(--texto-3); }
.mb-rod { font-size: 12px; color: var(--texto-3); }
tr.linha-critica td { background: var(--critico-fundo); }
tr.linha-alerta td { background: var(--alerta-fundo); }

/* ---------- quem ligar hoje ---------- */
.lig-lista { display: flex; flex-direction: column; gap: 10px; }
.lig-item { border: 1px solid var(--borda); border-radius: var(--raio-m); padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; background: var(--cartao); }
.lig-item.sit-hora { box-shadow: inset 3px 0 0 var(--bom-forte); }
.lig-item.sit-atrasado { box-shadow: inset 3px 0 0 var(--alerta-forte); }
.lig-item.sit-parado { box-shadow: inset 3px 0 0 var(--critico-forte); }
.lig-item.sit-ligou { box-shadow: inset 3px 0 0 var(--info); }
.lig-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lig-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; }
.lig-nome a { color: var(--texto); }
.lig-tel { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 13px; }
.lig-info, .lig-local, .lig-contato { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lig-local svg, .lig-contato svg { width: 13px; height: 13px; flex: none; }
.lig-contato { color: var(--texto-3); }
.lig-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.lig-acoes .bt { box-shadow: none; }
.bt.lig-zap { background: #1FA855; border-color: #1FA855; color: #fff; }
.bt.lig-zap:hover { background: #178A45; text-decoration: none; }
.lig-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.lig-res .bt { justify-content: center; white-space: normal; text-align: center; }
.lig-msg { white-space: pre-wrap; background: var(--cartao-3); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.lig-urgente { border-color: var(--info); }
.lig-filtros .campo-cliente { flex: 1; min-width: 200px; }

/* ---------- no celular ---------- */
.cel-enderecos { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.cel-end { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cel-end code { overflow-wrap: anywhere; font-size: 20px; font-weight: 700; color: var(--vermelho-texto); background: var(--vermelho-suave); border-radius: 10px; padding: 6px 12px; user-select: all; }
.cel-passos h3 { margin: 6px 0 2px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.cel-sub { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.cel-chats { display: flex; flex-direction: column; gap: 8px; }
.cel-alertas { display: flex; flex-direction: column; gap: 8px; }
.cel-alerta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--grade); padding-bottom: 8px; }
.cel-alerta:last-child { border-bottom: 0; }
.cel-alerta .interruptor { flex: 1; min-width: 240px; }
.cel-rod { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); gap: 8px; flex-wrap: wrap; }
.cel-previa { white-space: pre-wrap; font: 13px/1.5 var(--fonte); margin: 0; background: var(--cartao-3); border-radius: 10px; padding: 12px; max-height: 420px; overflow: auto; }
@media (max-width: 760px) {
  .mb-grade { grid-template-columns: minmax(0, 1fr); }
  .cel-end code { font-size: 16px; }
  .lig-acoes .bt { flex: 1 1 calc(50% - 6px); justify-content: center; }
}

/* interruptor dentro de um .campo não herda o tamanho das caixas de texto */
.campo .interruptor input { width: 38px; height: 22px; min-height: 0; padding: 0; border: 0; }
.campo .interruptor input:focus { box-shadow: none; }
.cel-token { flex: 1 1 360px; }
.mb-loc { display: flex; }

/* 2.4: botões de lançar à mão no alto das telas */
.acoes-tela { margin: 0 0 14px; }
.acoes-tela .dica { margin: 0; }
/* 2.4: aviso de versão nova (reiniciar com um clique) */
.faixa-atualizacao { display: flex; align-items: center; gap: 12px; margin: 16px 26px 0; padding: 12px 16px; border-radius: 12px; background: var(--info-fundo); color: var(--texto); border: 1px solid var(--borda); max-width: 1588px; }
.faixa-atualizacao > svg { color: var(--info); flex: none; }
.faixa-atualizacao .faixa-sub { color: var(--texto-2); font-size: 13px; }
@media (max-width: 720px) { .faixa-atualizacao { margin: 12px 16px 0; flex-wrap: wrap; } }
@media print { .faixa-atualizacao { display: none; } }
.barra-espera { height: 6px; border-radius: 6px; background: var(--borda); overflow: hidden; margin-top: 10px; }
.barra-espera span { display: block; height: 100%; width: 40%; background: var(--vermelho); border-radius: 6px; animation: espera 1.4s ease-in-out infinite; }
@keyframes espera { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ---------- 2.5: mapa das filiais ---------- */
.mapa { position: relative; overflow: hidden; background: #E9EEF2; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: inherit; outline: none; }
.mapa:focus-visible { box-shadow: inset 0 0 0 2px var(--vermelho); }
.mapa.arrastando { cursor: grabbing; }
.mapa.colocando { cursor: crosshair; }
.mapa.sem-fundo { background-color: var(--cartao-3); background-image: linear-gradient(var(--borda) 1px, transparent 1px), linear-gradient(90deg, var(--borda) 1px, transparent 1px); background-size: 48px 48px; }
.mapa-tiles, .mapa-pontos { position: absolute; inset: 0; }
.mapa-tiles { pointer-events: none; }
.mapa-pontos { pointer-events: none; }
.mapa-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; opacity: 0; transition: opacity .25s; max-width: none; }
.mapa-tile.ok { opacity: 1; }
.mapa-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 3; }
.mapa-zoom button { width: 36px; height: 36px; border: 0; background: var(--cartao); color: var(--texto); font-size: 20px; font-weight: 600; cursor: pointer; line-height: 1; }
.mapa-zoom button + button { border-top: 1px solid var(--borda); }
.mapa-zoom button:hover { background: var(--cartao-3); }
.mapa-atrib { position: absolute; right: 0; bottom: 0; font-size: 10.5px; padding: 2px 6px; background: rgba(255,255,255,.8); color: #333; border-top-left-radius: 6px; z-index: 3; pointer-events: none; }
.mapa-aviso { position: absolute; left: 12px; top: 12px; right: 60px; z-index: 3; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--texto-2); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mapa-ponto { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; z-index: 2; }
.mapa-ponto:hover, .mapa-ponto.segurando { z-index: 4; }
.mapa-ponto.arrastavel { cursor: move; }
.mapa-ponto.arrastavel .mp-pino { box-shadow: 0 0 0 4px rgba(200, 16, 46, .25), 0 4px 10px rgba(0,0,0,.3); }
/* pino da filial: a ponta fica no lugar */
.mp-filial, .mp-matriz { position: absolute; left: 0; top: 0; }
.mp-pino { position: absolute; left: -17px; top: -44px; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--vermelho); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); display: grid; place-items: center; color: #fff; cursor: pointer; transition: transform .15s; }
.mp-pino > svg { transform: rotate(45deg); }
.mapa-ponto:hover .mp-pino { transform: rotate(-45deg) scale(1.12); }
.mp-filial.neg .mp-pino { background: #8E0B20; }
.mp-pino > span { transform: rotate(45deg); }
.mp-matriz .mp-pino { background: #16161B; color: #fff; font-weight: 800; font-size: 14px; line-height: 1; }
.mp-matriz.provavel .mp-pino { border-style: dashed; opacity: .9; }
.mp-rotulo { position: absolute; left: 0; top: 2px; transform: translateX(-50%); white-space: nowrap; background: var(--cartao); color: var(--texto); border-radius: 8px; padding: 3px 8px; font-size: 12px; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.18); text-align: center; pointer-events: none; }
.mp-rotulo b { display: block; font-size: 12.5px; }
.mp-rotulo.escondido { visibility: hidden; }
.mp-rotulo span { color: var(--texto-3); font-size: 11px; }
.mp-dica { display: none; position: absolute; left: 22px; top: -58px; min-width: 210px; max-width: 280px; background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 5; pointer-events: none; }
.mp-dica b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.mp-dica .mut { color: var(--texto-3); }
.mp-dica-acao { margin-top: 6px; color: var(--vermelho-texto); font-weight: 600; font-size: 12px; }
.mapa-ponto:hover .mp-dica { display: block; }
.mapa-ponto.segurando .mp-dica { display: none; }
/* motoboy: bolinha com as iniciais */
.mp-moto { position: absolute; left: 0; top: 0; }
.mp-bola { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #6B7280; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.mp-moto.vivo .mp-bola { background: #15803D; box-shadow: 0 0 0 4px rgba(21, 128, 61, .25), 0 2px 6px rgba(0,0,0,.3); }
.mp-moto .mp-dica { left: 16px; top: -40px; min-width: 160px; }
/* tela: mapa + lista ao lado */
.mapa-grade { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); align-items: start; }
.cartao-mapa { overflow: hidden; }
.cartao-mapa .cartao-corpo.sem-pad { padding: 0; }
.lista-filiais { display: flex; flex-direction: column; }
.lf-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--grade); }
.lf-item:last-child { border-bottom: 0; }
.lf-item.sem-pos { background: var(--cartao-2); }
.lf-centro { border: 0; background: var(--vermelho-suave); color: var(--vermelho-texto); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: none; }
.lf-item.sem-pos .lf-centro { background: var(--cartao-3); color: var(--texto-3); cursor: default; }
.lf-txt { flex: 1; min-width: 0; color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.lf-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-txt:hover b { color: var(--vermelho-texto); }
.lf-num { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-variant-numeric: tabular-nums; }
.lf-num b.neg { color: var(--critico-forte, #B42318); }
.lf-num b.pos { color: var(--bom-forte, #15803D); }
@media (max-width: 1100px) { .mapa-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .mp-rotulo span { display: none; } .mp-dica { left: -105px; top: 8px; } }
/* no escuro o fundo do mapa fica escuro também */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .mapa-tiles { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); } }
:root[data-tema="escuro"] .mapa-tiles { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }
@media print { .mapa-zoom, .mapa-aviso { display: none; } }
/* mapa em tela cheia (para mostrar na TV ou no computador) */
.cartao-mapa:fullscreen { border-radius: 0; background: #E9EEF2; }
.cartao-mapa:fullscreen .mapa { height: 100vh !important; border-radius: 0; }
.cartao-mapa:-webkit-full-screen { border-radius: 0; background: #E9EEF2; width: 100%; }
.cartao-mapa:-webkit-full-screen .mapa { height: 100vh !important; border-radius: 0; }

/* ---------- Vendas do dia: escolha do dia e calendário do mês ---------- */
.dia-topo { padding: 12px 16px; }
.dia-nav { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.dia-nav .dia-campo { min-width: 150px; }
.dia-nav .dia-sem { display: flex; flex-direction: column; line-height: 1.2; padding: 0 6px 4px; }
.dia-nav .espaco { flex: 1; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-sem { font-size: 11px; color: var(--texto-3); text-align: center; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.cal-dia { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 5px 6px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--cartao); cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; }
.cal-dia:hover { border-color: var(--borda-2); background: var(--cartao-2); }
.cal-dia .n { font-weight: 700; font-size: 12.5px; }
.cal-dia .v { font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-dia .trilho { margin-top: auto; width: 100%; height: 4px; border-radius: 4px; background: var(--grade); overflow: hidden; }
.cal-dia .trilho .b { display: block; height: 100%; border-radius: 4px; background: var(--s1); }
.cal-dia.sem { background: var(--cartao-2); }
.cal-dia.futuro { opacity: .45; cursor: default; }
.cal-dia.hoje .n::after { content: ' • hoje'; font-weight: 400; color: var(--vermelho-texto); font-size: 10.5px; }
.cal-dia.sel { border: 2px solid var(--vermelho); padding: 4px 5px; background: var(--vermelho-suave); }
.cal-vazio { min-height: 56px; }
.lista-notas { margin: 4px 0 0; padding-left: 18px; }
.lista-notas li { margin: 2px 0; }
@media (max-width: 640px) { .cal-dia { min-height: 46px; padding: 4px; } .cal-dia .v { font-size: 10px; } .cal-dia.hoje .n::after { content: ''; } .dia-nav .espaco { display: none; } }
table.tab tfoot tr.rodape-extra td { position: static; font-weight: 600; color: var(--texto-2); background: var(--cartao-2); border-top: 1px dashed var(--borda); }
.conf-abas { display: flex; flex-direction: column; gap: 6px; }
.conf-abas .sanfona-cab .selo { margin-left: 8px; }
@media (max-width: 640px) { .cal-dia.sel { padding: 3px; } .cal-grade { gap: 3px; } }