/* ==========================================================================
   CRM Jurídico — folha de estilo
   Tipografia IBM Plex (Sans para a interface, Serif para números grandes e
   títulos, Mono para valores e números CNJ). Se as fontes não carregarem,
   as pilhas de reserva mantêm a leitura e o alinhamento.
   ========================================================================== */

:root {
  /* Superfícies */
  --papel:      #F1EFEA;
  --papel-2:    #E7E3DC;
  --superficie: #FFFFFF;
  --insumo:     #FAF9F6;

  /* Tinta */
  --tinta:      #16202E;
  --tinta-2:    #41505F;
  --tinta-3:    #7C8898;

  /* Traços */
  --linha:      #E4DFD6;
  --linha-2:    #CFC8BC;

  /* Semântica */
  --marca:      #1B4D3E;
  --marca-2:    #E9F1ED;
  --ouro:       #8A6410;
  --ouro-2:     #FBF1DB;
  --alarme:     #9E2B22;
  --alarme-2:   #FAE9E7;
  --elo:        #2A5C8A;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(22,32,46,.05), 0 1px 3px rgba(22,32,46,.04);
  --sombra-2: 0 2px 4px rgba(22,32,46,.06), 0 4px 12px rgba(22,32,46,.06);

  --raio: 6px;
  --ui:     "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serifa: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--elo); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--elo); outline-offset: 2px; border-radius: 3px; }
svg { flex: none; }

/* ---------- Estrutura ---------- */

.app { display: flex; min-height: 100vh; }

.rail {
  width: 226px; flex: 0 0 226px;
  background: var(--tinta);
  background-image: linear-gradient(180deg, #1B2636 0%, #141E2B 100%);
  color: #CBD5E1;
  display: flex; flex-direction: column;
  padding: 20px 0 16px;
  position: sticky; top: 0; height: 100vh;
}
.rail .marca { padding: 0 20px 18px; }
.rail .marca b {
  display: block; color: #fff; font-weight: 600; font-size: 16px;
  font-family: var(--serifa); letter-spacing: .01em;
}
.rail .marca small { display: block; color: #7D8CA0; font-size: 12px; margin-top: 2px; }
.rail .marca .fio { height: 2px; width: 26px; background: #B08A3E; margin-top: 12px; border-radius: 1px; }

.rail nav { display: flex; flex-direction: column; padding: 0 10px; }
.rail nav a {
  display: flex; align-items: center;
  padding: 9px 12px; border-radius: 5px; margin-bottom: 1px;
  color: #AFBDCD; font-size: 14.5px;
}
.rail nav a svg { margin-right: 10px; }
.rail nav a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: .85; }
.rail nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.rail nav a.ativo { background: rgba(176,138,62,.16); color: #fff; }
.rail nav a.ativo svg { color: #D6AE68; opacity: 1; }
.rail nav a .sino {
  margin-left: auto; background: var(--alarme); color: #fff;
  font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 9px;
  font-family: var(--mono);
}

.rail .rodape {
  margin-top: auto; padding: 14px 20px 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px; color: #7D8CA0;
}
.rail .rodape strong { display: block; color: #E2E8F0; font-weight: 500; font-size: 14px; }
.rail .rodape form { margin-top: 8px; }
.rail .rodape button {
  background: none; border: 0; color: #7D8CA0; padding: 0;
  cursor: pointer; font: inherit; text-decoration: underline;
}
.rail .rodape button:hover { color: #CBD5E1; }

main { flex: 1; min-width: 0; padding: 26px 34px 64px; }

/* ---------- Barra superior ---------- */

.topo {
  display: flex; align-items: center;
  margin: -26px -34px 24px; padding: 14px 34px;
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--linha);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.topo .procura { flex: 1; max-width: 420px; position: relative; margin-right: 14px; }
.topo .procura svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--tinta-3); fill: none; stroke-width: 1.8;
}
.topo .procura input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--linha-2); border-radius: 20px;
  background: var(--superficie); font: inherit; font-size: 14px;
}
.topo .procura input::placeholder { color: var(--tinta-3); }
.topo .espaco { flex: 1; }
.topo .hoje { font-size: 13.5px; color: var(--tinta-2); white-space: nowrap; }

/* ---------- Cabeçalho de página ---------- */

.cabecalho { display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.cabecalho > * { margin-right: 12px; }
.cabecalho > :last-child { margin-right: 0; }
.cabecalho h1 { font: 600 24px/1.2 var(--serifa); margin: 0; letter-spacing: -.01em; }
.cabecalho .sub { color: var(--tinta-2); font-size: 14px; width: 100%; margin-top: -6px; }
.cabecalho .espaco { flex: 1; }

h2 { font: 600 16px/1.3 var(--ui); margin: 30px 0 12px; letter-spacing: .005em; }
h2:first-child { margin-top: 0; }
h2 .leve { color: var(--tinta-3); font-weight: 400; }

/* ---------- Blocos e cartões ---------- */

.bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px 22px;
  box-shadow: var(--sombra-1);
}
.bloco + .bloco { margin-top: 14px; }
.bloco.insumo { background: var(--insumo); }

.painel-grade { display: flex; align-items: flex-start; flex-wrap: wrap; }
.painel-grade > * { min-width: 0; }
.painel-grade > :first-child { flex: 2.4 1 400px; margin-right: 18px; }
.painel-grade > :last-child { flex: 1 1 280px; margin-right: 0; }

.cartoes { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.cartao {
  flex: 1 1 150px; min-width: 0; margin: 0 6px 12px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 15px 17px; box-shadow: var(--sombra-1);
  position: relative; overflow: hidden;
}
.cartao::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--linha-2);
}
.cartao.grave::before { background: var(--alarme); }
.cartao.ouro::before  { background: #B08A3E; }
.cartao.verde::before { background: var(--marca); }
.cartao b {
  display: block; font: 600 23px/1.15 var(--serifa); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cartao.grave b { color: var(--alarme); }
.cartao span { display: block; color: var(--tinta-2); font-size: 13px; margin-top: 4px; }
.cartao .nota { font-size: 12px; color: var(--tinta-3); margin-top: 6px; }

/* ---------- Prazos ---------- */

.prazos {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-1);
}
.prazo {
  display: flex; padding: 14px 18px; align-items: flex-start;
  border-bottom: 1px solid var(--linha); transition: background .12s;
}
.prazo:last-child { border-bottom: 0; }
.prazo:hover { background: var(--insumo); }

.contador {
  flex: 0 0 74px; text-align: center; padding: 7px 0 8px;
  border-radius: 5px; background: var(--marca-2); color: var(--marca);
  border: 1px solid rgba(27,77,62,.14);
}
.contador b {
  display: block; font: 600 27px/1 var(--serifa);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.contador span { font-size: 10.5px; display: block; margin-top: 3px; letter-spacing: .02em; }
.contador.atencao { background: var(--ouro-2); color: var(--ouro); border-color: rgba(138,100,16,.18); }
.contador.critico, .contador.hoje, .contador.vencido {
  background: var(--alarme-2); color: var(--alarme); border-color: rgba(158,43,34,.2);
}
.contador.vencido b, .contador.hoje b { font-size: 15px; padding: 6px 0 5px; font-family: var(--ui); font-weight: 600; }
.contador.feito { background: var(--papel-2); color: var(--tinta-2); border-color: var(--linha-2); }
.contador.feito b { font-size: 15px; padding: 6px 0 5px; font-family: var(--ui); }

.prazo .contador { margin-right: 16px; }
.prazo .corpo { flex: 1; min-width: 0; margin-right: 16px; }
.prazo .corpo strong { font-weight: 600; font-size: 15px; }
.prazo .meta { color: var(--tinta-2); font-size: 13px; margin-top: 3px; }
.prazo .meta .mono { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.prazo .acoes { display: flex; align-items: center; flex: none; }
.prazo .acoes > * { margin-left: 7px; }
.prazo .acoes > :first-child { margin-left: 0; }

/* ---------- Linha de agenda / tarefa ---------- */

.linhas > * { margin-bottom: 8px; }
.linhas > :last-child { margin-bottom: 0; }
.linha-item {
  display: flex; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 15px; box-shadow: var(--sombra-1);
}
.linha-item .data-bloco {
  flex: 0 0 52px; text-align: center; border-right: 1px solid var(--linha); padding-right: 12px;
}
.linha-item .data-bloco b {
  display: block; font: 600 20px/1 var(--serifa); font-variant-numeric: tabular-nums;
}
.linha-item .data-bloco span { font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.linha-item > * { margin-right: 13px; }
.linha-item > :last-child { margin-right: 0; }
.linha-item .corpo { flex: 1; min-width: 0; }
.linha-item .corpo strong { font-weight: 600; }
.linha-item .meta { color: var(--tinta-2); font-size: 13px; margin-top: 2px; }
.linha-item.urgente { border-left: 3px solid var(--alarme); }
.linha-item.hoje-item { border-left: 3px solid #B08A3E; }

.check {
  appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--linha-2);
  border-radius: 4px; cursor: pointer; flex: none; margin-top: 2px; background: #fff;
}
.check:hover { border-color: var(--marca); }

/* ---------- Tabelas ---------- */

.tabela {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow-x: auto; box-shadow: var(--sombra-1);
}
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--tinta-3);
  padding: 11px 15px; border-bottom: 1px solid var(--linha-2);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  background: var(--insumo);
}
td { padding: 12px 15px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--insumo); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .mono, .mono { font-family: var(--mono); font-size: 12.5px; }
td .sub { display: block; color: var(--tinta-3); font-size: 12.5px; margin-top: 2px; }
tfoot td { border-top: 1px solid var(--linha-2); font-weight: 600; background: var(--insumo); }

.vazio {
  padding: 34px 22px; text-align: center; color: var(--tinta-2);
  background: var(--superficie); border: 1px dashed var(--linha-2); border-radius: var(--raio);
}
.vazio svg { width: 26px; height: 26px; stroke: var(--tinta-3); fill: none; stroke-width: 1.4; margin-bottom: 8px; }
.vazio p { margin: 0 0 4px; }
.vazio .dica { font-size: 13.5px; color: var(--tinta-3); }

/* ---------- Formulários ---------- */

form.grade { display: flex; flex-wrap: wrap; margin: 0 -9px; }
form.grade > * { flex: 1 1 240px; min-width: 0; padding: 0 9px; margin-bottom: 15px; }
form.grade > .largo { flex-basis: 100%; }

label { display: block; font-size: 12.5px; color: var(--tinta-2); margin-bottom: 5px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linha-2);
  border-radius: 5px; font: inherit; font-size: 14.5px; color: var(--tinta);
  background: #fff; transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: #B6AEA0; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--elo); box-shadow: 0 0 0 3px rgba(42,92,138,.12);
}
textarea { min-height: 84px; resize: vertical; }
.linha-check { display: flex; align-items: flex-start; font-size: 14px; }
.linha-check input { margin-top: 3px; margin-right: 9px; }
.linha-check label { margin: 0; color: var(--tinta); font-weight: 400; font-size: 14px; }
.ajuda { font-size: 12.5px; color: var(--tinta-3); margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center;
  padding: 9px 15px; border: 1px solid var(--tinta); background: var(--tinta);
  color: #fff; border-radius: 5px; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sombra-1); transition: background .12s, transform .06s;
}
.btn:hover { background: #22364C; color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; margin-right: 7px; }
.btn.secundario { background: #fff; color: var(--tinta); border-color: var(--linha-2); }
.btn.secundario:hover { background: var(--insumo); color: var(--tinta); border-color: #B6AEA0; }
.btn.verde { background: var(--marca); border-color: var(--marca); }
.btn.verde:hover { background: #245F4E; }
.btn.perigo { background: #fff; color: var(--alarme); border-color: #DFB6B1; }
.btn.perigo:hover { background: var(--alarme-2); color: var(--alarme); }
.btn.pequeno { padding: 5px 10px; font-size: 13px; }

.etiqueta {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 11px; font-size: 12px; font-weight: 500;
  background: var(--papel-2); color: var(--tinta-2); border: 1px solid var(--linha-2);
}
.etiqueta::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 5px;
}
.etiqueta.simples::before { display: none; }
.etiqueta.ativo     { background: var(--marca-2); color: var(--marca); border-color: rgba(27,77,62,.16); }
.etiqueta.suspenso  { background: var(--ouro-2);  color: var(--ouro);  border-color: rgba(138,100,16,.18); }
.etiqueta.grave     { background: var(--alarme-2); color: var(--alarme); border-color: rgba(158,43,34,.2); }
.etiqueta.encerrado, .etiqueta.arquivado { background: var(--papel-2); color: var(--tinta-3); }

.busca { display: flex; }
.busca > * { margin-right: 8px; }
.busca input { width: 250px; }

.abas { display: flex; margin-bottom: 16px; flex-wrap: wrap; }
.abas a { margin: 0 5px 5px 0; }
.abas a {
  padding: 6px 13px; border: 1px solid var(--linha-2); border-radius: 16px;
  background: #fff; color: var(--tinta-2); font-size: 13.5px;
}
.abas a:hover { background: var(--insumo); text-decoration: none; }
.abas a.ativo { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.ficha { display: flex; flex-wrap: wrap; margin: 0 -13px; }
.ficha > div { flex: 1 1 178px; padding: 0 13px; margin-bottom: 15px; }
.ficha div span {
  display: block; font-size: 11.5px; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.ficha div strong { font-weight: 500; font-size: 14.5px; }

.previa {
  background: var(--marca-2); border: 1px solid rgba(27,77,62,.16);
  border-radius: 5px; padding: 11px 14px; font-size: 14px; color: var(--marca);
}
.previa b { font-weight: 600; }
.previa.erro { background: var(--alarme-2); border-color: rgba(158,43,34,.2); color: var(--alarme); }

.nota {
  background: var(--ouro-2); border: 1px solid rgba(138,100,16,.2);
  border-left: 3px solid #B08A3E; border-radius: 5px;
  padding: 11px 15px; font-size: 14px; color: #6B4E0C; margin-bottom: 16px;
}
.aviso {
  background: var(--alarme-2); border: 1px solid rgba(158,43,34,.22);
  color: var(--alarme); padding: 10px 13px; border-radius: 5px; font-size: 14px;
}
.chave {
  font-family: var(--mono); font-size: 13px; background: var(--tinta); color: #E2E8F0;
  padding: 11px 14px; border-radius: 5px; word-break: break-all; margin: 8px 0;
}

/* ---------- Gráficos ---------- */

.grafico { width: 100%; height: auto; display: block; }
.grafico .eixo { stroke: var(--linha-2); stroke-width: 1; }
.grafico .rotulo { font: 11px var(--ui); fill: var(--tinta-3); }
.grafico .valor { font: 600 11px var(--mono); fill: var(--tinta-2); }

.barra-pilha { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--papel-2); margin: 10px 0 6px; }
.barra-pilha i { display: block; height: 100%; }
.legenda { display: flex; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); }
.legenda span { display: flex; align-items: center; margin: 0 16px 4px 0; }
.legenda i { width: 9px; height: 9px; border-radius: 2px; display: block; margin-right: 6px; }

/* ---------- Entrada ---------- */

.entrada {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: var(--tinta);
  background-image: radial-gradient(ellipse at 50% 0%, #22344A 0%, #141E2B 62%);
}
.entrada .caixa {
  width: 100%; max-width: 372px; background: var(--superficie);
  border-radius: 8px; padding: 32px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.entrada .fio { height: 3px; width: 34px; background: #B08A3E; border-radius: 2px; margin-bottom: 18px; }
.entrada h1 { font: 600 22px/1.2 var(--serifa); margin: 0 0 4px; }
.entrada p.sub { color: var(--tinta-2); margin: 0 0 22px; font-size: 14px; }
.entrada label { margin-top: 14px; }
.entrada .btn { width: 100%; margin-top: 22px; justify-content: center; }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .painel-grade { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .rail { width: auto; flex: none; height: auto; position: static; padding: 14px 0 10px; }
  .rail .marca { padding-bottom: 12px; }
  .rail .marca .fio { display: none; }
  .rail nav { flex-direction: row; overflow-x: auto; padding: 0 10px 4px; }
  .rail nav a { white-space: nowrap; }
  .rail .rodape { margin-top: 10px; }
  main { padding: 18px 16px 52px; }
  .topo { margin: -18px -16px 18px; padding: 12px 16px; position: static; }
  .topo .procura { max-width: none; }
  .topo .hoje { display: none; }
  form.grade { grid-template-columns: 1fr; }
  .prazo { flex-wrap: wrap; }
  .prazo .acoes { width: 100%; padding-left: 90px; }
}

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

@media print {
  .rail, .topo, .acoes, .btn { display: none !important; }
  main { padding: 0; }
  .bloco, .tabela, .prazos { box-shadow: none; }
}

/* Ações alinhadas nas linhas de agenda e tarefa */
.linha-item .acoes { display: flex; align-items: center; flex: none; }
.linha-item .acoes > * { margin-left: 7px; }
.linha-item .acoes > :first-child { margin-left: 0; }