/* =====================================================================
   Portal Moraes & Oliveira — identidade da marca M&O
   Cores tiradas da logomarca (9-LOGO MARCA/logo nova.png): noite #00091D,
   azul eletrico #0090F0, ciano #00C8F0, brilho gelo #E4FFFF. O azul do acento
   foi escurecido para texto branco passar no contraste AA; o ciano entra so
   como brilho e destaque sobre fundo escuro, nunca como texto sobre branco.
   ===================================================================== */
:root {
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --t-micro: 11px; --t-p: 13px; --t-base: 15px; --t-g: 19px; --t-gg: 25px; --t-titulo: 33px;
  --titulo: Bahnschrift, "DIN Alternate", "Segoe UI Semibold", "Segoe UI", sans-serif;
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
  --noite: #00091d; --noite-2: #001935; --eletrico: #0090f0; --ciano: #00c8f0; --gelo: #e4ffff;
  --fundo-0: #edf3f9;
  --fundo-1: #ffffff;
  --fundo-2: #e0e9f3;
  --texto: #00091d;
  --texto-2: #3a4e66;
  --texto-3: #3a4e66;
  --regua: #d2deea;
  --regua-forte: #a5b9cf;
  --acento: #0067d1;
  --acento-tinta: #e4f4ff;
  --acento-suave: #dbeafb;
  --ok: #0d7a4c;      --ok-f: #dcf2e7;
  --atencao: #8a5800; --atencao-f: #fbefcf;
  --erro: #c0261b;    --erro-f: #fbe0dc;
  --neutro: #4b5d72;  --neutro-f: #e5ecf3;
  --lateral: #00091d; --lateral-texto: #e4f4ff; --lateral-2: #8fb3d6;
  --lateral-linha: #0d2747; --lateral-real: #04203f;
  --raio-p: 6px; --raio: 14px;
  --sombra-1: 0 1px 2px rgba(0, 25, 53, .06), 0 2px 8px rgba(0, 25, 53, .06);
  --sombra-2: 0 16px 40px rgba(0, 9, 29, .28);
  --brilho: 0 0 0 1px rgba(0, 200, 240, .35), 0 6px 20px rgba(0, 144, 240, .35);
  --foco: 0 0 0 3px rgba(0, 144, 240, .45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo-0: #000b1f; --fundo-1: #021530; --fundo-2: #062240;
    --texto: #e4f4ff; --texto-2: #a9c3dd; --texto-3: #a9c3dd;
    --regua: #0e2c4d; --regua-forte: #1d4775;
    --acento: #00c8f0; --acento-tinta: #00091d; --acento-suave: #04304f;
    --ok: #52d39c; --ok-f: #072e22;
    --atencao: #f2c14e; --atencao-f: #33280a;
    --erro: #ff8a80; --erro-f: #3a1210;
    --neutro: #a9c3dd; --neutro-f: #0b2442;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-2: 0 16px 40px rgba(0, 0, 0, .65);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo-0); color: var(--texto);
  font: 400 var(--t-base)/1.55 var(--sans); font-variant-numeric: tabular-nums;
}
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; color: var(--texto); margin: 0; letter-spacing: -.005em; }
h1 { font-size: var(--t-titulo); line-height: 1.15; }
h2 { font-size: var(--t-g); line-height: 1.3; margin-bottom: var(--e3); }
h3 { font-size: var(--t-base); margin: var(--e4) 0 var(--e2); }
p { margin: 0 0 var(--e3); }
code { font-family: var(--mono); font-size: var(--t-p); }
.quebra { word-break: break-all; }
.sub { color: var(--texto-2); font-size: var(--t-p); }
.vazio { color: var(--texto-3); font-style: italic; }
.ajuda { color: var(--texto-2); font-size: var(--t-p); }
.rotulo { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--regua); margin: var(--e4) 0; }
svg.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
svg.ic-g { width: 22px; height: 22px; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-p); }

/* ---------------- estrutura: lateral + area ---------------- */
.estrutura { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  background: var(--lateral); color: var(--lateral-texto); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--e5) var(--e4);
}
.marca { display: flex; gap: var(--e3); align-items: center; text-decoration: none; color: var(--lateral-texto); margin-bottom: var(--e5); }
.selo-marca {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid currentColor; font: 700 var(--t-p)/1 var(--titulo); letter-spacing: .02em; flex: none;
}
.marca-nome { font: 600 var(--t-base)/1.2 var(--titulo); }
.marca-nome small { display: block; font: 400 var(--t-micro)/1.4 var(--sans); color: var(--lateral-2); letter-spacing: .1em; text-transform: uppercase; }
.lateral .empresa-ativa {
  display: block; padding: var(--e3); border: 1px solid var(--lateral-linha); border-radius: var(--raio-p);
  color: var(--lateral-texto); text-decoration: none; margin-bottom: var(--e5); font-size: var(--t-p);
}
.lateral .empresa-ativa small { display: block; color: var(--lateral-2); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; }
.lateral .empresa-ativa:hover { border-color: var(--lateral-2); }
.nav-grupo { margin-bottom: var(--e5); }
.nav-grupo .rotulo { color: var(--lateral-2); display: block; padding: 0 var(--e3) var(--e2); }
.nav a {
  display: flex; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--raio-p);
  color: var(--lateral-texto); text-decoration: none; font-size: var(--t-base); border-left: 3px solid transparent;
}
.nav a:hover { background: var(--lateral-real); }
.nav a[aria-current="page"] { background: var(--lateral-real); border-left-color: var(--ciano); font-weight: 600; }
.nav .contagem { margin-left: auto; font-size: var(--t-micro); background: var(--ciano); color: #fff; border-radius: 999px; padding: 0 var(--e2); line-height: 18px; }
.busca-lateral { display: flex; gap: var(--e2); margin-bottom: var(--e5); }
.busca-lateral input { background: var(--lateral-real); border-color: var(--lateral-linha); color: var(--lateral-texto); }
.busca-lateral input::placeholder { color: var(--lateral-2); }
.lateral-pe { margin-top: auto; border-top: 1px solid var(--lateral-linha); padding-top: var(--e4); display: grid; gap: var(--e2); }
.lateral-pe .usuario { font-size: var(--t-p); color: var(--lateral-2); }
.lateral-pe .usuario strong { display: block; color: var(--lateral-texto); font-size: var(--t-base); }
.lateral-pe a, .lateral-pe button { color: var(--lateral-texto); }
.botao-lateral {
  display: flex; gap: var(--e2); align-items: center; background: none; border: 0; padding: var(--e2) 0;
  font: inherit; font-size: var(--t-p); cursor: pointer; text-decoration: none;
}
.botao-lateral:hover { text-decoration: underline; }

.area { display: flex; flex-direction: column; min-width: 0; }
.barra-topo {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--e3); padding: var(--e3) var(--e6);
  border-bottom: 1px solid var(--regua); background: var(--fundo-0); position: sticky; top: 0; z-index: 5;
}
.barra-topo .abrir-menu { display: none; margin-right: auto; }
.conteudo { width: 100%; max-width: 1240px; padding: var(--e6); flex: 1; }
.rodape { color: var(--texto-3); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; padding: var(--e5) var(--e6); border-top: 1px solid var(--regua); }

@media (max-width: 960px) {
  .estrutura { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-2); }
  body.menu-aberto .lateral { transform: none; }
  .barra-topo { padding: var(--e3) var(--e4); }
  .barra-topo .abrir-menu { display: inline-flex; }
  .conteudo { padding: var(--e5) var(--e4); }
  h1 { font-size: var(--t-gg); }
}

/* avisos (sino) */
details.avisos { position: relative; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.avisos > summary { display: inline-flex; gap: var(--e2); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--raio-p); border: 1px solid var(--regua); background: var(--fundo-1); font-size: var(--t-p); }
.avisos[open] > summary { border-color: var(--regua-forte); }
.contador { background: var(--acento); color: var(--acento-tinta); border-radius: 999px; padding: 0 var(--e2); font-size: var(--t-micro); font-weight: 700; line-height: 18px; }
.avisos-lista { position: absolute; right: 0; top: calc(100% + var(--e2)); z-index: 10; width: min(360px, 90vw); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); box-shadow: var(--sombra-2); padding: var(--e2); max-height: 70vh; overflow: auto; }
.aviso-item { display: grid; gap: var(--e1); width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--regua); padding: var(--e3); color: var(--texto); cursor: pointer; font: inherit; }
.aviso-item:hover { background: var(--fundo-2); }
.aviso-item span { font-size: var(--t-p); color: var(--texto-2); }
.aviso-item small { font-size: var(--t-micro); color: var(--texto-3); }

.faixa { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) var(--e6); font-size: var(--t-p); border-bottom: 1px solid var(--regua); }
.faixa-equipe { background: var(--neutro-f); color: var(--texto); }
.faixa-homologacao { background: var(--atencao-f); color: var(--atencao); }

/* ---------------- cabecalho de pagina ---------------- */
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e6); padding-bottom: var(--e4); border-bottom: 3px double var(--regua-forte); }
.cabecalho-pagina .sub { margin: var(--e2) 0 0; }
.sobretitulo { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); font-weight: 700; margin-bottom: var(--e2); display: block; }
.acoes, .acoes-linha { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.migalha { font-size: var(--t-p); color: var(--texto-2); margin-bottom: var(--e3); }
.migalha a { color: var(--texto-2); }

/* ---------------- folha (painel) ---------------- */
.painel { background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); padding: var(--e5); box-shadow: var(--sombra-1); margin-bottom: var(--e5); }
.painel > h2:first-child, .painel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.painel-cab { margin-bottom: var(--e3); }
.painel-cab h2 { margin: 0; }
.painel-cab a { font-size: var(--t-p); }
.painel-destaque { border-top: 4px solid var(--acento); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
.grade-larga { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
.coluna { display: flex; flex-direction: column; }
@media (max-width: 1100px) { .grade-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .grade-2, .grade-larga, .grade-3 { grid-template-columns: 1fr; } }

/* ---------------- numeros-chave ---------------- */
.cards-impostos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .cards-impostos, .cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cards-impostos, .cards-4 { grid-template-columns: 1fr; } }
.card {
  display: grid; gap: var(--e1); padding: var(--e4) var(--e5); background: var(--fundo-1); border: 1px solid var(--regua);
  border-radius: var(--raio); text-decoration: none; color: var(--texto); box-shadow: var(--sombra-1); position: relative;
}
a.card:hover { border-color: var(--regua-forte); }
.card-rotulo { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; }
.card-valor { font: 600 var(--t-gg)/1.2 var(--titulo); }
.card-nota { font-size: var(--t-p); color: var(--texto-2); }
.card-alerta { border-color: var(--erro); background: var(--erro-f); }
.card-alerta .card-valor, .card-alerta .card-rotulo { color: var(--erro); }

/* ---------------- listas e tabelas ---------------- */
.lista-linhas { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.lista-linhas li { display: flex; gap: var(--e3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--e3) 0; border-bottom: 1px solid var(--regua); }
.lista-linhas li:last-child { border-bottom: 0; }
.lista-linhas .valor { font-weight: 600; }
.tabela-rolagem { overflow-x: auto; background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); box-shadow: var(--sombra-1); margin-bottom: var(--e5); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: var(--e3) var(--e4); text-align: left; vertical-align: top; }
.tabela th { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); border-bottom: 3px double var(--regua-forte); white-space: nowrap; }
.tabela td { border-bottom: 1px solid var(--regua); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--fundo-0); }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela tfoot td { border-top: 3px double var(--regua-forte); font-weight: 700; }
.tabela.compacta td { font-size: var(--t-p); padding: var(--e2) var(--e3); }
.linha-atraso td { background: var(--erro-f); }
.linha-atraso td:first-child { border-left: 3px solid var(--erro); }
.linha-inativa { opacity: .6; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e4); margin: 0; }
.dados dt { color: var(--texto-2); font-size: var(--t-p); }
.dados dd { margin: 0; }
.destaque { font: 600 var(--t-gg)/1.2 var(--titulo); }
.texto { white-space: pre-wrap; margin: var(--e1) 0; }

/* ---------------- selos (estado sempre com texto) ---------------- */
.selo { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px var(--e2); border-radius: var(--raio-p); border: 1px solid currentColor; white-space: nowrap; }
.selo-ok { color: var(--ok); background: var(--ok-f); }
.selo-aviso { color: var(--atencao); background: var(--atencao-f); }
.selo-erro { color: var(--erro); background: var(--erro-f); }
.selo-info { color: var(--texto); background: var(--fundo-2); }
.selo-neutro { color: var(--neutro); background: var(--neutro-f); }
.semaforo { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px var(--e2); border-radius: var(--raio-p); vertical-align: middle; font-family: var(--sans); }
.semaforo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.semaforo-verde { color: var(--ok); background: var(--ok-f); }
.semaforo-amarelo { color: var(--atencao); background: var(--atencao-f); }
.semaforo-vermelho { color: var(--erro); background: var(--erro-f); }

/* ---------------- formularios ---------------- */
.formulario { display: grid; gap: var(--e4); }
.formulario label { display: grid; gap: var(--e1); font-size: var(--t-p); color: var(--texto-2); font-weight: 600; }
.formulario label.check { display: flex; align-items: flex-start; gap: var(--e2); color: var(--texto); font-weight: 400; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--fundo-1); border: 1px solid var(--regua-forte);
  border-radius: var(--raio-p); padding: var(--e2) var(--e3); width: 100%; min-height: 40px;
}
textarea { min-height: 96px; }
input[type="checkbox"], input[type="radio"] { width: 18px; flex: none; min-height: 18px; height: 18px; margin: var(--e1) 0 0; accent-color: var(--acento); }
input[type="file"] { padding: var(--e2); background: var(--fundo-0); border-style: dashed; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: var(--foco); }
.em-linha { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.em-linha input:not([type="checkbox"]) { width: auto; flex: 1; min-width: 160px; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
@media (max-width: 640px) { .campos-2, .campos-3 { grid-template-columns: 1fr; } }
fieldset.grupo { border: 1px solid var(--regua); border-radius: var(--raio-p); padding: var(--e4); display: grid; gap: var(--e3); margin: 0; }
fieldset.grupo legend { font: 600 var(--t-base) var(--titulo); padding: 0 var(--e2); }
.filtro { display: flex; gap: var(--e2); align-items: flex-end; flex-wrap: wrap; }
.filtro label { display: grid; gap: var(--e1); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.filtro input:not([type="checkbox"]), .filtro select { min-width: 140px; }
.detalhe summary { color: var(--acento); font-size: var(--t-p); font-weight: 600; margin: var(--e1) 0; }
.previa { color: var(--texto); min-height: 1.2em; margin: 0; font-size: var(--t-p); }

/* ---------------- botoes ---------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 40px;
  font: 600 var(--t-p)/1 var(--sans); letter-spacing: .02em; padding: var(--e2) var(--e4); border-radius: var(--raio-p);
  border: 1px solid var(--regua-forte); background: var(--fundo-1); color: var(--texto); cursor: pointer; text-decoration: none;
}
.botao:hover { border-color: var(--texto-2); background: var(--fundo-2); }
.botao.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.botao.primario:hover { filter: brightness(1.1); background: var(--acento); }
.botao.perigo { color: var(--erro); border-color: var(--erro); }
.botao.perigo:hover { background: var(--erro-f); }
.botao.pequeno { min-height: 32px; padding: var(--e1) var(--e3); font-size: var(--t-micro); }
.botao.largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: progress; }
.link { background: none; border: 0; font: inherit; color: var(--acento); cursor: pointer; padding: 0; }

/* ---------------- recados ---------------- */
.flash { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4); border-radius: var(--raio-p); margin-bottom: var(--e5); border: 1px solid currentColor; border-left-width: 4px; }
.flash ul { margin: var(--e1) 0 0; padding-left: var(--e5); }
.flash-ok { background: var(--ok-f); color: var(--ok); }
.flash-erro { background: var(--erro-f); color: var(--erro); }
.flash-info { background: var(--fundo-2); color: var(--texto); }

/* ---------------- acesso ---------------- */
.tela-acesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acesso-capa {
  background: var(--lateral); color: var(--lateral-texto); padding: var(--e8) var(--e7); display: flex; flex-direction: column; justify-content: space-between;
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(233, 225, 211, .06) 31px 32px);
}
.acesso-capa h1 { color: var(--lateral-texto); font-size: var(--t-titulo); max-width: 14ch; margin: var(--e6) 0 var(--e4); }
.acesso-capa p { color: var(--lateral-2); max-width: 40ch; }
.acesso-capa ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); color: var(--lateral-texto); }
.acesso-capa li { display: flex; gap: var(--e3); align-items: center; }
.acesso-folha { display: grid; place-items: center; padding: var(--e6) var(--e4); }
.cartao-acesso { width: min(420px, 100%); }
.cartao-acesso h1 { font-size: var(--t-gg); margin-bottom: var(--e2); }
.cartao-acesso .sub { margin-bottom: var(--e5); }
@media (max-width: 860px) { .tela-acesso { grid-template-columns: 1fr; } .acesso-capa { padding: var(--e6) var(--e4); } .acesso-capa ul { display: none; } }
.chave-totp code { display: block; font-size: var(--t-g); text-align: center; letter-spacing: .1em; padding: var(--e3); background: var(--fundo-2); border-radius: var(--raio-p); }
.passos { padding-left: var(--e5); color: var(--texto-2); font-size: var(--t-p); }
.lista-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e4); }
.cartao-escolha { width: 100%; display: grid; gap: var(--e1); padding: var(--e4); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); cursor: pointer; font: inherit; color: var(--texto); text-align: left; box-shadow: var(--sombra-1); }
.cartao-escolha strong { font: 600 var(--t-base) var(--titulo); }
.cartao-escolha:hover { border-color: var(--acento); }
.cartao-escolha span { color: var(--texto-2); font-size: var(--t-p); }
.contador-nome { font: 600 var(--t-g) var(--titulo); margin: 0; }

/* ---------------- proximas acoes (dominante do cliente) ---------------- */
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--e4); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--regua); }
.agenda li:last-child { border-bottom: 0; }
.agenda .dia { text-align: center; border: 1px solid var(--regua-forte); border-radius: var(--raio-p); padding: var(--e1) 0; background: var(--fundo-0); line-height: 1.1; }
.agenda .dia strong { display: block; font: 600 var(--t-g) var(--titulo); }
.agenda .dia small { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.agenda .atrasado .dia { border-color: var(--erro); color: var(--erro); background: var(--erro-f); }
.agenda .atrasado .dia small { color: var(--erro); }
.agenda .o-que strong { display: block; }
.agenda .o-que span { color: var(--texto-2); font-size: var(--t-p); }
@media (max-width: 520px) { .agenda li { grid-template-columns: 52px minmax(0, 1fr); } .agenda li > :last-child { grid-column: 2; justify-self: start; } }

/* ---------------- graficos em SVG (gerados no servidor) ---------------- */
.grafico { width: 100%; height: auto; display: block; }
.grafico .eixo { stroke: var(--regua-forte); stroke-width: 1; }
.grafico .grade { stroke: var(--regua); stroke-width: 1; stroke-dasharray: 2 4; }
.grafico .barra-a { fill: var(--acento); }
.grafico .barra-b { fill: var(--regua-forte); }
.grafico text { fill: var(--texto-2); font: 11px var(--sans); }
.legenda { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-p); color: var(--texto-2); margin-top: var(--e2); }
.legenda span { display: inline-flex; gap: var(--e2); align-items: center; }
.legenda i { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
.legenda .la { background: var(--acento); }
.legenda .lb { background: var(--regua-forte); }
.medidor { height: 8px; background: var(--fundo-2); border-radius: 999px; overflow: hidden; }
.medidor span { display: block; height: 100%; background: var(--ok); }
.medidor.baixo span { background: var(--erro); }
.medidor.medio span { background: var(--atencao); }

/* ---------------- calendario ---------------- */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e1); }
.calendario .cab { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); text-align: center; padding-bottom: var(--e1); }
.calendario .d { min-height: 44px; border: 1px solid var(--regua); border-radius: var(--raio-p); padding: var(--e1); font-size: var(--t-p); background: var(--fundo-1); display: grid; align-content: space-between; }
.calendario .fora { visibility: hidden; }
.calendario .hoje { border: 2px solid var(--texto); }
.calendario .tem { background: var(--acento-suave); border-color: var(--acento); }
.calendario .tem b { font-size: var(--t-micro); color: var(--acento); }
.calendario .vencido { background: var(--erro-f); border-color: var(--erro); }
.calendario .vencido b { color: var(--erro); }

/* ---------------- documentos ---------------- */
.lista-pedidos { display: grid; gap: var(--e3); margin-bottom: var(--e5); }
.pedido { background: var(--fundo-1); border: 1px solid var(--regua); border-left: 4px solid var(--regua-forte); border-radius: var(--raio-p); padding: var(--e4); }
.pedido header { display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; align-items: center; }
.pedido header strong { font: 600 var(--t-base) var(--titulo); }
.pedido-pendente { border-left-color: var(--atencao); }
.pedido-recusado { border-left-color: var(--erro); }
.pedido-recebido, .pedido-aceito, .pedido-nada_a_enviar { border-left-color: var(--ok); }
.pedido p { margin: var(--e1) 0; }
.pedido-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin-top: var(--e3); }
.observacao { color: var(--erro); font-size: var(--t-p); }

/* ---------------- conversa ---------------- */
.conversa { list-style: none; padding: 0; margin: 0 0 var(--e5); display: grid; gap: var(--e3); }
.mensagem { max-width: 78%; background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); padding: var(--e3) var(--e4); }
.mensagem header { display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; font-size: var(--t-p); }
.mensagem time { margin-left: auto; color: var(--texto-3); font-size: var(--t-micro); }
.mensagem-equipe { justify-self: start; border-left: 4px solid var(--acento); }
.mensagem-cliente { justify-self: end; background: var(--fundo-2); }
.mensagem-interna { background: var(--atencao-f); border-style: dashed; }
@media (max-width: 640px) { .mensagem { max-width: 100%; } }

/* ---------------- conferencia ---------------- */
.barra-lote { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap; padding: var(--e3) var(--e4); background: var(--ok-f); color: var(--ok); border: 1px solid var(--ok); border-radius: var(--raio-p); margin-bottom: var(--e4); }
.item-conferencia { background: var(--fundo-1); border: 1px solid var(--regua); border-left: 4px solid var(--atencao); border-radius: var(--raio-p); padding: var(--e4); margin-bottom: var(--e3); }
.item-conferencia.confianca-alta { border-left-color: var(--ok); }
.item-conferencia header { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; margin-bottom: var(--e3); }
.grade-conferencia { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--e3); align-items: end; }
.grade-conferencia label:nth-of-type(6) { grid-column: 1 / 4; }
.grade-conferencia .acoes-linha { grid-column: 4 / 6; justify-content: flex-end; }
@media (max-width: 900px) { .grade-conferencia { grid-template-columns: 1fr 1fr; } .grade-conferencia label:nth-of-type(6), .grade-conferencia .acoes-linha { grid-column: 1 / -1; } }
.zona-envio { border: 2px dashed var(--regua-forte); border-radius: var(--raio); padding: var(--e5); text-align: center; background: var(--fundo-0); }
.zona-envio.arrastando { border-color: var(--acento); background: var(--acento-suave); }
.confirmar { display: grid; gap: var(--e3); }
.resumo-nota { display: grid; gap: var(--e2); }
.resumo-nota .linha { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--regua); }
.resumo-nota .total { font: 600 var(--t-g) var(--titulo); border-bottom: 3px double var(--regua-forte); }

/* abas simples */
.abas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--regua-forte); margin-bottom: var(--e5); flex-wrap: wrap; }
.abas a { padding: var(--e2) var(--e4); text-decoration: none; color: var(--texto-2); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; font-size: var(--t-p); }
.abas a[aria-current="true"] { color: var(--texto); border-bottom-color: var(--acento); }

/* ranking */
.ranking li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
.ranking .medidor-svg { width: 100%; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .lateral, .barra-topo, .rodape, .acoes, form { display: none !important; } .estrutura { display: block; } body { background: #fff; } }