/* VISUAL NOVO — "Azul Contare".
   Plano, decisoes e como ligar: docs/visual-novo.md.

   Este arquivo e carregado em toda pagina, mas e INERTE: tudo aqui dentro
   so vale com <html data-visual="novo"> (ligado por tema.js). Sem esse
   atributo nenhuma regra abaixo se aplica e o portal fica exatamente como
   estava. Por isso pode ir pra producao antes da data do lancamento.

   Estrategia: o estilo.css ja e todo montado em cima de variaveis
   (--cor-*, --raio*). Aqui so se redefinem as variaveis e se ajusta o
   acabamento de poucos componentes — nada de duplicar o layout. */

/* ---- Fontes (hospedadas aqui: a politica de seguranca bloqueia Google Fonts) ----
   Variaveis, so o subconjunto latino (cobre todo o portugues).
   Licenca OFL: public/fontes/LICENCA-*.txt */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fontes/lexend-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fontes/figtree-latin-wght-normal.woff2") format("woff2-variations");
}

/* ---- Paleta: claro ---- */
:root[data-visual="novo"] {
  --cor-fundo: #f1f5fb;
  --cor-superficie: #ffffff;
  --cor-borda: #e1e8f1;
  --cor-borda-forte: #cdd8e6;

  --cor-texto: #0f2238;
  --cor-texto-secundario: #62758c;
  --cor-texto-suave: #8a9bb0;

  --cor-primaria: #0b63c7;
  --cor-primaria-hover: #0950a3;
  --cor-destaque: #0b63c7;
  --cor-destaque-fundo: #e6f0fc;

  --cor-azul: #0b63c7;
  --cor-azul-fundo: #e6f0fc;
  --cor-verde: #12873f;
  --cor-verde-fundo: #e4f5ea;
  --cor-vermelho: #c3342a;
  --cor-vermelho-fundo: #fde8e6;
  --cor-amarelo: #b86e00;
  --cor-amarelo-fundo: #fff1d6;

  --raio: 16px;
  --raio-pequeno: 10px;
  --sombra: none;

  --fonte-titulo: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* ---- Paleta: escuro (azul-noite; azul da marca mais claro p/ manter contraste) ---- */
:root[data-visual="novo"][data-tema="escuro"] {
  --cor-fundo: #0b1524;
  --cor-superficie: #111f33;
  --cor-borda: #22324a;
  --cor-borda-forte: #34476a;

  --cor-texto: #e6edf7;
  --cor-texto-secundario: #8da2bd;
  --cor-texto-suave: #6f84a1;

  --cor-primaria: #3b8cf0;
  --cor-primaria-hover: #5aa2f5;
  --cor-destaque: #8fc2ff;
  --cor-destaque-fundo: #17304f;

  --cor-azul: #6fb0ff;
  --cor-azul-fundo: #17304f;
  --cor-verde: #4cc77e;
  --cor-verde-fundo: #123a27;
  --cor-vermelho: #ff8a80;
  --cor-vermelho-fundo: #44201e;
  --cor-amarelo: #f0b95f;
  --cor-amarelo-fundo: #3d2d10;

  color-scheme: dark;
}

/* ---- Tipografia ---- */
:root[data-visual="novo"] body { font-family: var(--fonte-corpo); }
:root[data-visual="novo"] h1,
:root[data-visual="novo"] h2,
:root[data-visual="novo"] h3,
:root[data-visual="novo"] .card-titulo,
:root[data-visual="novo"] .kpi-valor {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
}
:root[data-visual="novo"] .cabecalho-pagina h1 { font-size: 1.6rem; color: var(--cor-texto); }

/* ---- Menu lateral ---- */
:root[data-visual="novo"] .sidebar-item {
  border-left: 0;
  border-radius: var(--raio-pequeno);
  padding: 0.55rem 0.7rem;
  font-weight: 500;
}
:root[data-visual="novo"] .sidebar-item.ativo { font-weight: 700; }
:root[data-visual="novo"] .sidebar-item .emblema {
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 800;
}
:root[data-visual="novo"] .sidebar-item .emblema.emblema-alerta { background: var(--cor-vermelho); }
:root[data-visual="novo"][data-tema="escuro"] .sidebar-item .emblema.emblema-alerta { color: #1a0a0a; }
:root[data-visual="novo"] .sidebar-secao { letter-spacing: 0.1em; font-weight: 700; }
/* Icone de linha (SVG) no lugar do emoji — ver montarItem em sidebar.js. */
:root[data-visual="novo"] .sidebar-icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-visual="novo"] .sidebar-item.ativo .sidebar-icone { stroke: var(--cor-destaque); }

/* ---- Cartoes e indicadores: borda fina no lugar de sombra ---- */
:root[data-visual="novo"] .card,
:root[data-visual="novo"] .kpi {
  border: 1px solid var(--cor-borda);
  box-shadow: none;
}
:root[data-visual="novo"] .card-titulo::before { display: none; }
:root[data-visual="novo"] .kpi { border-top: 1px solid var(--cor-borda); }
:root[data-visual="novo"] .kpi.alerta .kpi-valor { color: var(--cor-vermelho); }
:root[data-visual="novo"] .kpi.sucesso .kpi-valor { color: var(--cor-verde); }
:root[data-visual="novo"] .kpi-label { letter-spacing: 0.07em; font-weight: 700; }

/* ---- Botoes e campos ---- */
:root[data-visual="novo"] .btn { font-weight: 700; padding: 0.6rem 1.05rem; }
:root[data-visual="novo"] .btn-pequeno { padding: 0.35rem 0.75rem; }
:root[data-visual="novo"] .btn-primario { color: #fff; }
:root[data-visual="novo"] .btn-sucesso:hover:not(:disabled) { filter: brightness(0.92); background: var(--cor-verde); }
:root[data-visual="novo"] input,
:root[data-visual="novo"] select,
:root[data-visual="novo"] textarea { padding: 0.65rem 0.8rem; }
:root[data-visual="novo"] input:focus,
:root[data-visual="novo"] select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}
:root[data-visual="novo"] label { font-weight: 600; }
:root[data-visual="novo"] .segmentado button.ativo { color: #fff; }

/* ---- Tabelas ---- */
:root[data-visual="novo"] th {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--cor-texto-suave);
}
:root[data-visual="novo"] td,
:root[data-visual="novo"] th { border-bottom-color: var(--cor-borda); }
:root[data-visual="novo"] tbody tr:hover { background: color-mix(in srgb, var(--cor-primaria) 5%, transparent); }

/* ---- Selos: no escuro o estilo antigo clareava o texto na mao; aqui usam a paleta ---- */
:root[data-visual="novo"] .selo-verde { background: var(--cor-verde-fundo); color: var(--cor-verde); }
:root[data-visual="novo"] .selo-vermelho { background: var(--cor-vermelho-fundo); color: var(--cor-vermelho); }
:root[data-visual="novo"] .selo-amarelo { background: var(--cor-amarelo-fundo); color: var(--cor-amarelo); }
:root[data-visual="novo"] .selo-azul { background: var(--cor-azul-fundo); color: var(--cor-azul); }
:root[data-visual="novo"][data-tema="escuro"] .selo-verde { color: var(--cor-verde); }
:root[data-visual="novo"][data-tema="escuro"] .selo-vermelho { color: var(--cor-vermelho); }
:root[data-visual="novo"][data-tema="escuro"] .selo-amarelo { color: var(--cor-amarelo); }
:root[data-visual="novo"][data-tema="escuro"] .selo-azul { color: var(--cor-azul); }

/* =====================================================================
   FASE B — estrutura das telas (cartoes de resumo, icones de arquivo,
   cor por departamento, entrada dividida, area do cliente, compacto).
   Os elementos novos tem a classe .so-novo (escondida no visual antigo
   em estilo.css); aqui cada um recebe o seu "display" quando o visual
   novo esta ligado.
   ===================================================================== */

/* REGRA: cartoes na mesma linha ficam SEMPRE alinhados — mesma altura (grid
   com align-items: stretch), mesmo espacamento (gap de 1rem) e conteudo
   comecando no mesmo ponto. Vale pra toda grade de cartoes nova. */
:root[data-visual="novo"] .grade-kpi,
:root[data-visual="novo"] .grade-resumo,
:root[data-visual="novo"] .grade-duo { align-items: stretch; }
:root[data-visual="novo"] .grade-kpi > .kpi,
:root[data-visual="novo"] .grade-resumo > .stat-card,
:root[data-visual="novo"] .grade-duo > .card { height: 100%; margin-bottom: 0; }

/* ---- Cartoes de resumo (Documentos, Clientes) ---- */
:root[data-visual="novo"] .grade-resumo {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
:root[data-visual="novo"] .stat-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1rem 1.25rem;
}
:root[data-visual="novo"] .stat-card .stat-label { font-size: 0.78rem; font-weight: 600; color: var(--cor-texto-secundario); }
:root[data-visual="novo"] .stat-card .stat-valor {
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}
:root[data-visual="novo"] .stat-card .stat-sub { font-size: 0.8rem; color: var(--cor-texto-suave); margin-left: 0.35rem; font-weight: 400; font-family: var(--fonte-corpo); }
:root[data-visual="novo"] .stat-card.destaque { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
:root[data-visual="novo"] .stat-card.destaque .stat-label,
:root[data-visual="novo"] .stat-card.destaque .stat-sub { color: rgba(255, 255, 255, 0.78); }
:root[data-visual="novo"][data-tema="escuro"] .stat-card.destaque { background: #1a5cc4; border-color: #1a5cc4; }
@media (max-width: 720px) { :root[data-visual="novo"] .grade-resumo { grid-template-columns: 1fr; } }

/* ---- Icone do tipo de arquivo + cor automatica por departamento ---- */
:root[data-visual="novo"] .tile-arq {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--raio-pequeno);
  flex: none;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
:root[data-visual="novo"] .tile-arq.xls { background: var(--cor-verde-fundo); color: var(--cor-verde); }
:root[data-visual="novo"] .tile-arq.pdf { background: var(--cor-vermelho-fundo); color: var(--cor-vermelho); }
:root[data-visual="novo"] .tile-arq.zip { background: var(--cor-amarelo-fundo); color: var(--cor-amarelo); }
:root[data-visual="novo"] .tile-arq.outro { background: var(--cor-azul-fundo); color: var(--cor-azul); }

:root[data-visual="novo"] {
  --dep-0: #0b63c7; --dep-1: #b86e00; --dep-2: #12873f; --dep-3: #7a3fc0; --dep-4: #0e7c86; --dep-5: #b8325f;
}
:root[data-visual="novo"][data-tema="escuro"] {
  --dep-0: #8fc2ff; --dep-1: #f0b95f; --dep-2: #4cc77e; --dep-3: #cba6ff; --dep-4: #5fd6d6; --dep-5: #ff9bbd;
}
:root[data-visual="novo"] .selo[data-cor] {
  background: color-mix(in srgb, var(--dep) 14%, var(--cor-superficie));
  color: var(--dep);
  font-weight: 700;
}
:root[data-visual="novo"] .selo[data-cor="0"] { --dep: var(--dep-0); }
:root[data-visual="novo"] .selo[data-cor="1"] { --dep: var(--dep-1); }
:root[data-visual="novo"] .selo[data-cor="2"] { --dep: var(--dep-2); }
:root[data-visual="novo"] .selo[data-cor="3"] { --dep: var(--dep-3); }
:root[data-visual="novo"] .selo[data-cor="4"] { --dep: var(--dep-4); }
:root[data-visual="novo"] .selo[data-cor="5"] { --dep: var(--dep-5); }

/* ---- Envio de arquivos: o proprio campo vira area de arrastar ---- */
:root[data-visual="novo"] input[type="file"]#arquivo {
  border: 2px dashed var(--cor-borda-forte);
  background: var(--cor-fundo);
  border-radius: var(--raio);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  color: var(--cor-texto-secundario);
}
:root[data-visual="novo"] input[type="file"]#arquivo:hover { border-color: var(--cor-primaria); }
:root[data-visual="novo"] input[type="file"]#arquivo::file-selector-button {
  margin-right: 0.8rem;
  border: 1px solid var(--cor-primaria);
  background: var(--cor-primaria);
  color: #fff;
  border-radius: var(--raio-pequeno);
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
:root[data-visual="novo"] .dica-arrastar { display: block; font-size: 0.85rem; color: var(--cor-texto-suave); margin: 0.4rem 0 0; }
:root[data-visual="novo"] .item-upload {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 0.7rem 0.9rem;
  background: var(--cor-superficie);
}
:root[data-visual="novo"] .barra-fundo { background: var(--cor-fundo); border-radius: 99px; height: 6px; overflow: hidden; }
:root[data-visual="novo"] .barra-fundo .barra { background: var(--cor-primaria); border-radius: 99px; }

/* ---- Area do cliente: cartao de destaque do Inicio ---- */
:root[data-visual="novo"] .hero-cliente {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--cor-primaria);
  color: #fff;
  border-radius: var(--raio);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.5rem;
}
:root[data-visual="novo"][data-tema="escuro"] .hero-cliente { background: #1a5cc4; }
:root[data-visual="novo"] .hero-cliente .hero-label { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
:root[data-visual="novo"] .hero-cliente .hero-valor { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 600; margin: 0.1rem 0; }
:root[data-visual="novo"] .hero-cliente .hero-detalhe { font-size: 0.88rem; color: rgba(255, 255, 255, 0.85); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-visual="novo"] .hero-cliente .hero-acoes { display: flex; gap: 0.6rem; flex-wrap: wrap; }
:root[data-visual="novo"] .hero-cliente .btn { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: #fff; }
:root[data-visual="novo"] .hero-cliente .btn-hero-principal { background: #fff; color: #0b63c7; border-color: #fff; }
:root[data-visual="novo"] .grade-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 820px) { :root[data-visual="novo"] .grade-duo { grid-template-columns: 1fr; } }

/* ---- Dashboard: "Precisa de voce" ---- */
:root[data-visual="novo"] .cartao-pendencias { display: block; }
:root[data-visual="novo"] .pendencia {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--cor-borda);
}
:root[data-visual="novo"] .pendencia:first-of-type { border-top: 0; }
:root[data-visual="novo"] .pendencia strong { display: block; font-weight: 700; }
:root[data-visual="novo"] .pendencia small { color: var(--cor-texto-secundario); }

/* ---- Entrada (login, solicitar acesso, trocar senha): painel de marca + formulario ----
   No visual novo estas telas seguem o tema (claro/escuro) em vez do cartao
   sempre claro do visual antigo: os "unset" abaixo devolvem as variaveis de
   cor para o que vem de :root. */
:root[data-visual="novo"] .pagina-centralizada {
  --cor-fundo: unset; --cor-superficie: unset; --cor-borda: unset; --cor-borda-forte: unset;
  --cor-texto: unset; --cor-texto-secundario: unset; --cor-texto-suave: unset;
  --cor-primaria: unset; --cor-primaria-hover: unset; --cor-destaque: unset;
  --cor-azul: unset; --cor-vermelho: unset; --cor-verde: unset; --cor-amarelo: unset;
  color-scheme: unset;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  padding: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
:root[data-visual="novo"] body:has(> .pagina-centralizada) { background: var(--cor-fundo); }
:root[data-visual="novo"] .pagina-centralizada .card {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: calc(100% - 3rem);
  max-width: 410px;
  margin: 2rem 0;
  padding: 2rem 2rem 1.75rem;
  border-radius: var(--raio);
  box-shadow: none;
}
:root[data-visual="novo"] .pagina-centralizada label {
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  margin-top: 0.8rem;
}
:root[data-visual="novo"] .pagina-centralizada input:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}
:root[data-visual="novo"] .pagina-centralizada input:-webkit-autofill,
:root[data-visual="novo"] .pagina-centralizada input:-webkit-autofill:hover,
:root[data-visual="novo"] .pagina-centralizada input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cor-texto);
  caret-color: var(--cor-texto);
  box-shadow: 0 0 0 1000px var(--cor-superficie) inset;
}
:root[data-visual="novo"] .pagina-centralizada input { background: var(--cor-superficie); }
:root[data-visual="novo"] .pagina-centralizada .btn-primario { background: var(--cor-primaria); }
:root[data-visual="novo"] .painel-marca {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: var(--cor-primaria);
  color: #fff;
  padding: 3rem 3.2rem 2.4rem;
  min-height: 100vh;
}
:root[data-visual="novo"][data-tema="escuro"] .painel-marca { background: #0f2747; }
:root[data-visual="novo"] .painel-marca img { height: 40px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
:root[data-visual="novo"] .painel-marca .frase {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 13em;
  margin: 0 0 1.1rem;
}
:root[data-visual="novo"] .painel-marca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; color: rgba(255, 255, 255, 0.86); }
:root[data-visual="novo"] .painel-marca li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin-right: 0.7rem;
  opacity: 0.85;
}
:root[data-visual="novo"] .painel-marca small { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 860px) {
  :root[data-visual="novo"] .pagina-centralizada { grid-template-columns: minmax(0, 1fr); }
  :root[data-visual="novo"] .painel-marca { display: none; }
  :root[data-visual="novo"] .pagina-centralizada .card { grid-column: 1; }
}

/* ---- Botao de densidade no menu (so equipe, so visual novo) ---- */
:root[data-visual="novo"] .sidebar-densidade { display: flex; }

/* ---- Modo compacto: mais linhas por tela ---- */
:root[data-visual="novo"][data-densidade="compacta"] { font-size: 13px; }
:root[data-visual="novo"][data-densidade="compacta"] .conteudo { padding: 1.25rem 1.5rem; }
:root[data-visual="novo"][data-densidade="compacta"] .card { padding: 1rem; margin-bottom: 0.9rem; }
:root[data-visual="novo"][data-densidade="compacta"] table { font-size: 0.83rem; }
:root[data-visual="novo"][data-densidade="compacta"] td,
:root[data-visual="novo"][data-densidade="compacta"] th { padding: 0.32rem 0.5rem; }
:root[data-visual="novo"][data-densidade="compacta"] .tile-arq { width: 24px; height: 24px; font-size: 0.5rem; }
:root[data-visual="novo"][data-densidade="compacta"] .stat-card { padding: 0.65rem 1rem; }
:root[data-visual="novo"][data-densidade="compacta"] .stat-card .stat-valor { font-size: 1.25rem; }
:root[data-visual="novo"][data-densidade="compacta"] .kpi { padding: 0.7rem 1rem; }
:root[data-visual="novo"][data-densidade="compacta"] .kpi-valor { font-size: 1.4rem; }
:root[data-visual="novo"][data-densidade="compacta"] .cabecalho-pagina { margin-bottom: 0.9rem; }