/* Bancada — Fernandes Tobias Advocacia. Visual da proposta B. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap");

:root{
  --fundo:#F2F4F3; --carta:#FFFFFF; --carta-2:#F7F9F8;
  --texto:#0F1A17; --texto-2:#53625C; --texto-3:#8A9A93;
  --linha:#E3E8E5; --linha-2:#CFD8D3;
  --verde:#0F6B4F; --verde-claro:#DCEFE6; --verde-forte:#0B5540;
  --vermelho:#B3261E; --vermelho-claro:#FBE9E7;
  --ambar:#8A5A00; --ambar-claro:#FBF0DB;
  --azul:#26547C; --azul-claro:#E4EDF5;
  --raio:14px; --raio-p:9px;
  --elev:0 1px 2px rgba(15,26,23,.05), 0 6px 20px -14px rgba(15,26,23,.30);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#0C120F; --carta:#141C18; --carta-2:#19231E;
    --texto:#E9EFEB; --texto-2:#A8B7B0; --texto-3:#748179;
    --linha:#243029; --linha-2:#33423A;
    --verde:#7FD4AE; --verde-claro:#123124; --verde-forte:#9BE3C3;
    --vermelho:#F2A9A1; --vermelho-claro:#3A1A17;
    --ambar:#E3B872; --ambar-claro:#332715;
    --azul:#9AC2E6; --azul-claro:#152736;
    --elev:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --fundo:#0C120F; --carta:#141C18; --carta-2:#19231E;
  --texto:#E9EFEB; --texto-2:#A8B7B0; --texto-3:#748179;
  --linha:#243029; --linha-2:#33423A;
  --verde:#7FD4AE; --verde-claro:#123124; --verde-forte:#9BE3C3;
  --vermelho:#F2A9A1; --vermelho-claro:#3A1A17;
  --ambar:#E3B872; --ambar-claro:#332715;
  --azul:#9AC2E6; --azul-claro:#152736;
  --elev:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{margin:0; background:var(--fundo); color:var(--texto);
  font-family:"Plus Jakarta Sans",-apple-system,Segoe UI,sans-serif; font-size:15px; line-height:1.5}
button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit}
a{color:var(--azul)}
:focus-visible{outline:2px solid var(--verde); outline-offset:2px}

.app{display:grid; grid-template-columns:212px minmax(0,1fr); min-height:100vh}
@media (max-width:900px){ .app{grid-template-columns:1fr} .lateral{position:static; height:auto} }

/* ---------------------------------------------------------------- lateral */
.lateral{background:var(--carta); border-right:1px solid var(--linha); padding:22px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto}
.marca{display:flex; align-items:center; gap:10px; padding:0 8px 20px}
.brasao{width:32px; height:32px; border-radius:9px; background:var(--verde); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:none}
:root[data-theme="dark"] .brasao{color:#0C120F}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brasao{color:#0C120F} }
.marca b{font-size:14.5px; font-weight:700; letter-spacing:-.01em; display:block}
.marca span{display:block; font-size:11.5px; color:var(--texto-3); font-weight:500}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{display:flex; align-items:center; gap:10px; padding:9px 10px; border:none;
  border-radius:var(--raio-p); background:none; color:var(--texto-2); font-size:14px;
  font-weight:500; cursor:pointer; text-align:left; width:100%}
.nav button:hover{background:var(--carta-2); color:var(--texto)}
.nav button.on{background:var(--verde-claro); color:var(--verde-forte); font-weight:600}
.nav .pt{margin-left:auto; font-family:"Roboto Mono",monospace; font-size:11px; color:var(--texto-3)}
.nav button.on .pt{color:var(--verde-forte)}
.svg{width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* -------------------------------------------------------------- conteúdo */
.conteudo{padding:26px 30px 60px; max-width:1240px; min-width:0}
@media (max-width:640px){ .conteudo{padding:18px 14px 44px} }
.cabecalho{display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  flex-wrap:wrap; margin-bottom:20px}
.cabecalho h1{margin:0; font-size:25px; font-weight:700; letter-spacing:-.02em}
.cabecalho p{margin:4px 0 0; color:var(--texto-2); font-size:13.5px}
.botao{background:var(--verde); color:#fff; border:none; border-radius:999px; padding:10px 18px;
  font-weight:600; font-size:13.5px; cursor:pointer}
:root[data-theme="dark"] .botao{color:#0C120F}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .botao{color:#0C120F} }
.botao.leve{background:none; color:var(--texto-2); border:1px solid var(--linha-2)}
.botao.leve:hover{border-color:var(--texto-2); color:var(--texto)}
.botao:disabled{opacity:.5; cursor:default}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px}
.tile{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 18px; box-shadow:var(--elev); text-align:left; cursor:pointer; width:100%}
.tile .top{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.bolha{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none}
.bolha.v{background:var(--vermelho-claro); color:var(--vermelho)}
.bolha.a{background:var(--ambar-claro); color:var(--ambar)}
.bolha.g{background:var(--verde-claro); color:var(--verde-forte)}
.bolha.z{background:var(--azul-claro); color:var(--azul)}
.tile .rot{font-size:12.5px; color:var(--texto-2); font-weight:600}
.tile .num{font-size:29px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.tile .leg{font-size:12.5px; color:var(--texto-3); margin-top:2px}

.colunas{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:980px){ .colunas{grid-template-columns:minmax(0,1fr)} }
.carta{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--elev); overflow:hidden}
.carta + .carta{margin-top:16px}
.carta > header{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px 11px; flex-wrap:wrap}
.carta h2{margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em}
.carta header .mais{font-size:12.5px; color:var(--texto-2); font-weight:600}

/* ------------------------------------------------------------------ itens */
.item{display:flex; gap:12px; padding:11px 18px; border-top:1px solid var(--linha); align-items:flex-start}
.marcador{width:4px; align-self:stretch; border-radius:99px; background:var(--linha-2); flex:none}
.marcador.v{background:var(--vermelho)} .marcador.a{background:var(--ambar)}
.marcador.z{background:var(--azul)} .marcador.g{background:var(--verde)}
.item .corpo{flex:1; min-width:0}
.item .nome{font-size:14px; font-weight:600; overflow-wrap:anywhere}
.item.ok .nome{color:var(--texto-3); text-decoration:line-through}
.item .meta{font-size:12.5px; color:var(--texto-3); margin-top:2px; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.item .meta.solta{display:block; -webkit-line-clamp:none}
.item .lado{display:flex; align-items:center; gap:8px; flex:none}
.hora{font-family:"Roboto Mono",monospace; font-size:12.5px; color:var(--texto-2);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.chip{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.chip.v{background:var(--vermelho-claro); color:var(--vermelho)}
.chip.a{background:var(--ambar-claro); color:var(--ambar)}
.chip.z{background:var(--azul-claro); color:var(--azul)}
.chip.g{background:var(--verde-claro); color:var(--verde-forte)}
.chip.n{background:var(--carta-2); color:var(--texto-2)}

/* o botão de dar baixa: redondo, ao lado de cada prazo */
.baixa{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--linha-2);
  background:none; color:var(--texto-3); display:grid; place-items:center; cursor:pointer; flex:none}
.baixa:hover{border-color:var(--verde); color:var(--verde)}
.baixa.feito{background:var(--verde); border-color:var(--verde); color:#fff}
:root[data-theme="dark"] .baixa.feito{color:#0C120F}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .baixa.feito{color:#0C120F} }
.baixa svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}

.abas{display:flex; gap:7px; padding:0 18px 12px; flex-wrap:wrap}
.aba{border:1px solid var(--linha-2); background:none; color:var(--texto-2); border-radius:999px;
  padding:5px 12px; font-weight:600; font-size:12px; cursor:pointer}
.aba[aria-pressed="true"]{background:var(--texto); color:var(--carta); border-color:var(--texto)}

/* ------------------------------------------------------------- calendário */
.barraAgenda{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px}
.navMes{display:flex; align-items:center; gap:10px}
.navMes h2{margin:0; font-size:19px; font-weight:700; min-width:180px}
.navMes h2::first-letter{text-transform:uppercase}
.setinha{width:32px; height:32px; border-radius:50%; border:1px solid var(--linha-2);
  background:var(--carta); color:var(--texto-2); cursor:pointer; display:grid; place-items:center}
.setinha:hover{border-color:var(--texto-2)}
.visoes{display:flex; gap:4px; background:var(--carta); border:1px solid var(--linha);
  border-radius:999px; padding:3px}
.visoes button{border:none; background:none; color:var(--texto-2); border-radius:999px;
  padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer}
.visoes button.on{background:var(--verde-claro); color:var(--verde-forte)}

.mes{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--elev)}
.mes .semanaCab{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--carta-2);
  border-bottom:1px solid var(--linha)}
.mes .semanaCab span{padding:9px 10px; font-size:11.5px; font-weight:600; color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.05em}
.mes .grade{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.dia{min-height:118px; min-width:0; border-right:1px solid var(--linha);
  border-bottom:1px solid var(--linha); padding:7px 8px; display:flex; flex-direction:column;
  gap:4px; cursor:pointer; position:relative; overflow:hidden}
.dia:nth-child(7n){border-right:none}
.dia.fora{background:var(--carta-2); color:var(--texto-3)}
.dia.hoje{background:var(--verde-claro)}
.dia:hover{box-shadow:inset 0 0 0 2px var(--linha-2)}
.dia .n{font-size:12.5px; font-weight:700; color:var(--texto-2); font-variant-numeric:tabular-nums}
.dia.hoje .n{color:var(--verde-forte)}
.pilula{display:block; max-width:100%; font-size:11.5px; font-weight:600;
  padding:3px 7px; border-radius:6px; background:var(--carta-2); color:var(--texto-2);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; border:none;
  width:100%; text-align:left; min-width:0}
.pilula.v{background:var(--vermelho-claro); color:var(--vermelho)}
.pilula.a{background:var(--ambar-claro); color:var(--ambar)}
.pilula.z{background:var(--azul-claro); color:var(--azul)}
.pilula.g{background:var(--verde-claro); color:var(--verde-forte)}
.pilula.ok{opacity:.55; text-decoration:line-through}
.pilula .ho{font-family:"Roboto Mono",monospace; font-weight:500; opacity:.8}
.maisDia{font-size:11px; color:var(--texto-3); font-weight:600; background:none; border:none;
  cursor:pointer; padding:0; text-align:left}

.semanaGrade{display:grid; grid-template-columns:56px repeat(7,minmax(0,1fr)); min-width:0;
  background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--elev)}
.semanaGrade .cabDia{padding:10px 8px; border-bottom:1px solid var(--linha);
  border-left:1px solid var(--linha); font-size:12px; font-weight:600; color:var(--texto-2)}
.semanaGrade .cabDia.hoje{background:var(--verde-claro); color:var(--verde-forte)}
.semanaGrade .cantoCab{border-bottom:1px solid var(--linha)}
.faixaHora{padding:6px 8px; font-family:"Roboto Mono",monospace; font-size:11px;
  color:var(--texto-3); border-bottom:1px solid var(--linha); text-align:right}
.celula{border-left:1px solid var(--linha); border-bottom:1px solid var(--linha);
  min-height:46px; min-width:0; overflow:hidden; padding:3px; display:flex;
  flex-direction:column; gap:3px; cursor:pointer}

.listaAgenda .linhaDia{padding:9px 18px; background:var(--carta-2); font-size:12px;
  font-weight:700; color:var(--texto-2); text-transform:capitalize; border-top:1px solid var(--linha)}

/* ---------------------------------------------------------------- painéis */
.gaveta{position:fixed; inset:0; background:rgba(10,18,15,.45); display:none;
  align-items:stretch; justify-content:flex-end; z-index:40}
.gaveta.aberta{display:flex}
/* ler peça pede espaço: com o leitor aberto, a gaveta ocupa quase a tela */
.gaveta.larga .gavetaCorpo{width:min(1180px,100%)}
.gavetaCorpo{background:var(--carta); width:min(560px,100%); height:100%; overflow-y:auto;
  padding:22px 24px 40px; box-shadow:-12px 0 40px -20px rgba(0,0,0,.5)}
.gavetaCorpo h3{margin:0 0 4px; font-size:19px; font-weight:700}
.gavetaCorpo .sub{color:var(--texto-3); font-size:13px; margin-bottom:18px}
.campo{margin-bottom:14px}
.campo label{display:block; font-size:12.5px; font-weight:600; color:var(--texto-2); margin-bottom:5px}
.campo input, .campo select, .campo textarea{width:100%; padding:9px 11px; border-radius:var(--raio-p);
  border:1px solid var(--linha-2); background:var(--carta-2)}
.campo textarea{min-height:76px; resize:vertical}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.previa{background:var(--carta-2); border:1px solid var(--linha); border-radius:var(--raio-p);
  padding:12px 14px; font-size:13px; color:var(--texto-2); margin-bottom:14px; line-height:1.6}
.previa b{color:var(--texto)}
.previa ol{margin:6px 0 0; padding-left:18px}
.acoes{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.aviso{padding:10px 12px; border-radius:var(--raio-p); font-size:13px; margin-bottom:12px}
.aviso.erro{background:var(--vermelho-claro); color:var(--vermelho)}
.aviso.ok{background:var(--verde-claro); color:var(--verde-forte)}
.vazio{padding:22px 18px; color:var(--texto-3); font-size:13.5px}
.carregando{padding:30px 18px; color:var(--texto-3); font-size:13.5px}

table.tabela{width:100%; border-collapse:collapse; font-size:13.5px}
table.tabela th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-3); padding:10px 14px; border-bottom:1px solid var(--linha); font-weight:600}
table.tabela td{padding:10px 14px; border-bottom:1px solid var(--linha); vertical-align:top}
table.tabela tr:hover td{background:var(--carta-2)}
.rolagem{overflow-x:auto}
.busca{width:100%; max-width:340px; padding:9px 13px; border-radius:999px;
  border:1px solid var(--linha-2); background:var(--carta)}
.zap{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--linha-2);
  border-radius:999px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--verde-forte);
  background:var(--verde-claro); text-decoration:none; white-space:nowrap}
.zap:hover{border-color:var(--verde)}
.entrar{min-height:100vh; display:grid; place-items:center; padding:20px}
.entrar form{background:var(--carta); border:1px solid var(--linha); border-radius:var(--raio);
  padding:28px; width:min(360px,100%); box-shadow:var(--elev)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ------------------------------------------- linha do tempo do dia (painel) */
/* O fatal puxa para o vermelho; os outros ficam num tom leve do próprio estágio. */
.tempo{position:relative; padding:10px 18px 16px 74px}
.tempo::before{content:""; position:absolute; left:60px; top:12px; bottom:16px;
  width:1px; background:var(--linha)}
.faixa{position:relative; padding:6px 0; border-top:1px dashed var(--linha)}
.faixa:first-child{border-top:none}
.faixa > .rot{position:absolute; left:-74px; width:46px; text-align:right; top:9px;
  font-family:"Roboto Mono",monospace; font-size:11.5px; color:var(--texto-3)}
.bloco{display:flex; gap:12px; align-items:flex-start; border-left:3px solid var(--linha-2);
  border-radius:0 10px 10px 0; padding:10px 14px; margin:5px 0; background:var(--carta-2)}
.bloco.v{border-left-color:var(--vermelho);
  background:linear-gradient(90deg, var(--vermelho-claro) 0%, var(--carta-2) 62%)}
.bloco.a{border-left-color:var(--ambar);
  background:linear-gradient(90deg, var(--ambar-claro) 0%, var(--carta-2) 55%)}
.bloco.z{border-left-color:var(--azul);
  background:linear-gradient(90deg, var(--azul-claro) 0%, var(--carta-2) 55%)}
.bloco.g{border-left-color:var(--verde);
  background:linear-gradient(90deg, var(--verde-claro) 0%, var(--carta-2) 55%)}
.bloco.n{border-left-color:var(--linha-2)}
.bloco.ok{opacity:.62}
.bloco .corpo{flex:1; min-width:0}
.bloco .nome{font-size:14.5px; font-weight:600; overflow-wrap:anywhere}
.bloco.ok .nome{text-decoration:line-through; color:var(--texto-3)}
.bloco .meta{font-size:12.5px; color:var(--texto-3); margin-top:2px; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.bloco .lado{display:flex; align-items:center; gap:9px; flex:none}
@media (max-width:640px){
  .tempo{padding-left:56px}
  .tempo::before{left:44px}
  .faixa > .rot{left:-56px; width:34px}
}

/* --------------------------------------------------- leitor de autos */
/* Lista à esquerda, documento à direita: ler peça sem entrar no tribunal. */
.barraAutos{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.notaAutos{margin:0 0 12px; font-size:12.5px; color:var(--texto-3)}
.leitor{display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:0; border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden;
  background:var(--carta); min-height:560px}
@media (max-width:900px){ .leitor{grid-template-columns:minmax(0,1fr)} }
.listaPecas{border-right:1px solid var(--linha); max-height:70vh; overflow-y:auto;
  background:var(--carta-2)}
.peca{display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; width:100%;
  text-align:left; background:none; border:none; border-bottom:1px solid var(--linha);
  padding:10px 12px; cursor:pointer; align-items:baseline}
.peca:hover{background:var(--carta)}
.peca.on{background:var(--verde-claro)}
.peca.lida .ptitulo{color:var(--texto-3)}
.pdata{font-family:"Roboto Mono",monospace; font-size:11px; color:var(--texto-3)}
.ptitulo{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.peca.on .ptitulo{color:var(--verde-forte)}
.pmarca{grid-column:2; font-size:11px; color:var(--texto-3)}
.visorPeca{display:flex; flex-direction:column; min-width:0}
.cabecaPeca{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--linha); flex-wrap:wrap}
.cabecaPeca .meta{font-size:12px; color:var(--texto-3); margin-top:2px}
.acoesPeca{display:flex; gap:8px; flex-wrap:wrap}
.acoesPeca .botao{padding:6px 12px; font-size:12.5px; text-decoration:none}
.pdf{width:100%; flex:1; min-height:520px; border:none; background:var(--carta-2)}

/* ------------------------------------------------------- barra da conta */
.conta{margin-top:22px; padding-top:14px; border-top:1px solid var(--linha)}
.contaNome{font-size:13px; font-weight:700; overflow-wrap:anywhere}
.contaLinha{font-size:11.5px; color:var(--texto-3); margin-top:4px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere}