/* Raeli Gestão Jurídica — estilos */
:root {
  --primaria: #7c5cff;
  --sidebar: #1c1830;
  --fundo: #f4f4f8;
  --fundo-suave: #f0f0f4;
  --card: #ffffff;
  --texto: #23222b;
  --texto-suave: #6e6c7a;
  --borda: #e4e3ec;
  --ok: #1fa763;
  --alerta: #e8a020;
  --perigo: #d9534f;
  --laranja: #e8590c;
  --sombra: 0 1px 3px rgba(20, 16, 50, .08);
  --raio: 12px;
}
[data-tema="escuro"] {
  --fundo: #14121d;
  --fundo-suave: #1a1724;
  --card: #1e1b2b;
  --texto: #eceaf4;
  --texto-suave: #9b98ac;
  --borda: #2e2a40;
  --sombra: 0 1px 3px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  /* Fonte do próprio sistema operacional: no Windows é a Segoe UI, no Mac a San
     Francisco. Nada é baixado da internet, então a tela abre igual mesmo sem rede. */
  font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
               'Helvetica Neue', Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 14.5px;
  /* letras mais definidas em tela; sem isto o texto fica levemente encorpado */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primaria); text-decoration: none; }
button { font-family: inherit; }

/* ---------- login ---------- */
.tela-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sidebar), var(--primaria));
}
.caixa-login {
  background: var(--card); border-radius: 16px; padding: 40px; width: 380px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.caixa-login h1 { font-size: 22px; margin-bottom: 4px; }
.caixa-login p { color: var(--texto-suave); margin-bottom: 24px; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; background: var(--sidebar); color: #fff; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .logo { padding: 20px 18px 12px; font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.sidebar .logo small { display: block; font-weight: 400; opacity: .55; font-size: 11px; margin-top: 2px; }

/* alto do menu lateral: foto (ou logo) do escritório */
.topo-lateral { padding: 20px 18px 12px; }
.topo-lateral.com-foto { text-align: center; padding-top: 22px; }
.topo-lateral .titulo { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.topo-lateral .titulo small { display: block; font-weight: 400; opacity: .55; font-size: 11px; margin-top: 2px; }
.topo-lateral.com-foto .titulo { font-size: 14.5px; margin-top: 10px; }
.topo-lateral .foto { display: block; margin: 0 auto; }
.topo-lateral .foto.redonda {
  width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
.topo-lateral .foto.quadrada {
  width: 84px; height: 84px; object-fit: cover; border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
.topo-lateral .foto.larga { width: 100%; max-height: 76px; object-fit: contain; border-radius: 8px; }
.topo-lateral .sem-foto {
  width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px; gap: 2px;
}
.topo-lateral .sem-foto span { font-size: 9.5px; letter-spacing: .2px; }
.topo-lateral:hover .sem-foto { border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .8); }
.topo-lateral.com-foto:hover .foto { filter: brightness(1.08); }
.sidebar nav { flex: 1; padding: 8px 10px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75);
  padding: 9px 12px; border-radius: 9px; margin-bottom: 2px; font-size: 13.5px;
  cursor: grab;
}
.sidebar nav a:active { cursor: grabbing; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.ativo { background: var(--primaria); color: #fff; }
.sidebar nav a .badge { margin-left: auto; }
.sidebar nav a .fav-btn {
  background: none; border: none; color: inherit; cursor: pointer; font-size: 14px;
  padding: 2px 4px; margin-left: auto; opacity: 0.6; transition: opacity 0.2s;
}
.sidebar nav a:hover .fav-btn { opacity: 1; }
.sidebar nav a .fav-btn:hover { opacity: 1; }
.sidebar .rodape { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; }
.sidebar .rodape .nome { font-weight: 600; }
.sidebar .rodape .acoes { margin-top: 6px; display: flex; gap: 10px; }
.sidebar .rodape a { color: rgba(255,255,255,.6); font-size: 12px; cursor: pointer; }
.sidebar .rodape a:hover { color: #fff; }

.conteudo { flex: 1; padding: 26px 30px 60px; max-width: 1240px; }
.topo-pagina { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.topo-pagina h2 { font-size: 21px; }
.topo-pagina .sub { color: var(--texto-suave); font-size: 13px; margin-top: 3px; }

/* ---------- componentes ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.card {
  background: var(--card); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra);
  border: 1px solid var(--borda);
}
.card .rotulo { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; }
.card .valor { font-size: 26px; font-weight: 700; margin-top: 4px; }
.card .valor.ok { color: var(--ok); }
.card .valor.alerta { color: var(--alerta); }
.card .valor.perigo { color: var(--perigo); }
.card .detalhe { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }
.card.clicavel { cursor: pointer; transition: transform .12s; }
.card.clicavel:hover { transform: translateY(-2px); border-color: var(--primaria); }
/* card usado como filtro: mostra qual fatia está aberta */
.card.ativa { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); }

.painel { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px; }
.painel h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .grade-2 { grid-template-columns: 1fr; } .conteudo { padding: 18px 14px 60px; } }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* Números de mesma largura: os valores de uma coluna alinham casa por casa,
   e dá para comparar R$ 154.891,50 com R$ 24.862,11 batendo o olho. */
td, .card .valor, .direita { font-variant-numeric: tabular-nums; }
th { text-align: left; color: var(--texto-suave); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.linha-clicavel { cursor: pointer; }
tr.linha-clicavel:hover td { background: color-mix(in srgb, var(--primaria) 6%, transparent); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge.cinza { background: color-mix(in srgb, var(--texto-suave) 15%, transparent); color: var(--texto-suave); }
.badge.verde { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.amarelo { background: color-mix(in srgb, var(--alerta) 18%, transparent); color: #a56d00; }
[data-tema="escuro"] .badge.amarelo { color: #ffc95e; }
.badge.vermelho { background: color-mix(in srgb, var(--perigo) 15%, transparent); color: var(--perigo); }
.badge.laranja { background: color-mix(in srgb, var(--laranja) 28%, transparent); color: var(--texto); }
.badge.roxo { background: color-mix(in srgb, var(--primaria) 15%, transparent); color: var(--primaria); }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; }

/* ---------- formulários ---------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font-size: 14px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primaria) 45%, transparent); border-color: var(--primaria); }
textarea { min-height: 80px; resize: vertical; }
input[type="color"] { padding: 2px; height: 40px; cursor: pointer; }
input[type="checkbox"] { width: auto; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px;
  border: none; cursor: pointer; font-size: 13.5px; font-weight: 600;
  background: var(--primaria); color: #fff; transition: filter .12s;
}
.btn:hover { filter: brightness(1.1); }
.btn.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
.btn.secundario:hover { border-color: var(--primaria); color: var(--primaria); filter: none; }
.btn.perigo { background: var(--perigo); }
.btn.mini { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtros input, .filtros select { width: auto; min-width: 160px; }

.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); margin-bottom: 16px; flex-wrap: wrap; }
.abas button {
  background: none; border: none; padding: 9px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.abas button.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }

/* ---------- modal ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(10, 8, 25, .55); display: flex;
  align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--card); border-radius: 14px; padding: 26px; width: 640px; max-width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,.4); margin-bottom: 5vh;
}
.modal h3 { margin-bottom: 4px; }
.modal .sub { color: var(--texto-suave); font-size: 13px; }
.modal .acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }
.kanban .coluna { background: color-mix(in srgb, var(--card) 60%, var(--fundo)); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; min-height: 120px; }
.kanban .coluna h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-suave); margin-bottom: 10px; display: flex; justify-content: space-between; }
.cartao-tarefa { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--sombra); cursor: pointer; }
.cartao-tarefa:hover { border-color: var(--primaria); }
.cartao-tarefa .titulo { font-weight: 600; font-size: 13.5px; }
.cartao-tarefa .meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--texto-suave); }

/* ---------- agenda ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario .dia-semana { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; padding: 6px 0; }
.calendario .dia {
  background: var(--card); border: 1px solid var(--borda); border-radius: 8px; min-height: 92px;
  padding: 6px; font-size: 12px; cursor: pointer; min-width: 0; overflow: hidden;
}
.calendario .dia:hover { border-color: var(--primaria); }
.calendario .dia.fora { opacity: .38; }
.calendario .dia.hoje { border-color: var(--primaria); border-width: 2px; }
.calendario .dia .num { font-weight: 700; margin-bottom: 4px; }
.calendario .evento {
  border-radius: 5px; padding: 2px 5px; margin-bottom: 3px; font-size: 10.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- checklist ---------- */
.check-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--borda); }
.check-item:last-child { border-bottom: none; }
.check-item .nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.check-item.recebido .nome { color: var(--ok); }
.check-item .icone { font-size: 16px; width: 22px; text-align: center; }
.barra-progresso { height: 7px; background: var(--borda); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.barra-progresso > div { height: 100%; background: var(--ok); border-radius: 4px; transition: width .3s; }

/* ---------- equipe ---------- */
.grade-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cartao-pessoa { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); }
.cartao-pessoa .cabecalho { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cartao-pessoa .cabecalho .avatar { width: 40px; height: 40px; font-size: 15px; }
.cartao-pessoa .stats { display: flex; gap: 14px; margin: 10px 0; font-size: 12px; color: var(--texto-suave); }
.cartao-pessoa .stats b { display: block; font-size: 17px; color: var(--texto); }
.lista-mini { font-size: 12.5px; }
.lista-mini li { list-style: none; padding: 5px 0; border-bottom: 1px dashed var(--borda); display: flex; gap: 6px; align-items: center; }
.lista-mini li:last-child { border-bottom: none; }

/* ---------- feed ---------- */
.feed-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--borda); font-size: 13px; align-items: flex-start; }
.feed-item:last-child { border-bottom: none; }
.feed-item .quando { color: var(--texto-suave); font-size: 11.5px; margin-top: 2px; }

/* ---------- gráfico simples ---------- */
.grafico-barras { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; }
.grafico-barras .barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.grafico-barras .barra > div { width: 100%; max-width: 54px; background: var(--primaria); border-radius: 6px 6px 0 0; min-height: 3px; }
.grafico-barras .barra.recebido > div { background: var(--ok); }
.grafico-barras .rotulo { font-size: 10.5px; color: var(--texto-suave); }
.grafico-barras .valor-barra { font-size: 10.5px; font-weight: 700; }

/* ---------- avisos ---------- */
#avisos { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.aviso { background: var(--sidebar); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 13.5px; max-width: 340px; animation: surgir .2s ease; }
.aviso.erro { background: var(--perigo); }
.aviso.ok { background: var(--ok); }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }

.vazio { text-align: center; color: var(--texto-suave); padding: 30px 10px; font-size: 13.5px; }
.mao { cursor: pointer; }
.texto-suave { color: var(--texto-suave); }
.direita { text-align: right; }

/* ---------- impressão da ficha ---------- */
@media print {
  .sidebar, .topo-pagina .btn, .abas, #avisos, .nao-imprimir { display: none !important; }
  .conteudo { padding: 0; max-width: none; }
  body { background: #fff; }
  .painel, .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- aparência ajustável ---------- */
/* A pessoa escolhe contraste, densidade e tamanho da letra; as cores do
   escritório continuam vindo das configurações. */
html { font-size: var(--escala-fonte, 100%); }

/* Contraste alto: bordas e textos mais firmes, para leitura em tela clara ou
   para quem precisa de mais definição. */
[data-contraste="alto"] {
  --texto: #000000;
  --texto-suave: #3d3b4a;
  --borda: #9a97ab;
  --sombra: 0 1px 2px rgba(20, 16, 50, .2);
}
[data-contraste="alto"][data-tema="escuro"] {
  --fundo: #050409;
  --card: #14121d;
  --texto: #ffffff;
  --texto-suave: #cfccdd;
  --borda: #6b6782;
}
[data-contraste="alto"] .texto-suave { color: var(--texto-suave); }
[data-contraste="alto"] .badge { border: 1px solid currentColor; }
[data-contraste="alto"] th { color: var(--texto); }

/* Contraste suave: menos peso visual para uso prolongado */
[data-contraste="suave"] {
  --texto: #45434f;
  --texto-suave: #8a8798;
  --borda: #eeedf4;
}
[data-contraste="suave"][data-tema="escuro"] {
  --texto: #d6d3e2;
  --texto-suave: #86839a;
  --borda: #262233;
}

/* Densidade: quanto cabe na tela */
[data-densidade="compacta"] .painel { padding: 12px 14px; margin-bottom: 12px; }
[data-densidade="compacta"] td { padding: 6px 8px; }
[data-densidade="compacta"] th { padding: 5px 8px; }
[data-densidade="compacta"] .card { padding: 12px 14px; }
[data-densidade="compacta"] .cards { gap: 10px; }

[data-densidade="folgada"] .painel { padding: 24px 28px; margin-bottom: 24px; }
[data-densidade="folgada"] td { padding: 14px 12px; }
[data-densidade="folgada"] .card { padding: 22px 24px; }

/* ---------- painel arrastável ---------- */
.arrastavel { cursor: grab; }
.arrastavel:active { cursor: grabbing; }
.arrastando { opacity: .4; }
.alvo-solta { outline: 2px dashed var(--primaria); outline-offset: 3px; border-radius: var(--raio); }
.pega {
  display: none; float: right; font-size: 15px; line-height: 1; color: var(--texto-suave);
  cursor: grab; user-select: none; padding: 0 2px;
}
.modo-organizar .pega { display: inline-block; }
.modo-organizar .card, .modo-organizar .painel { outline: 1px dashed var(--borda); }

/* ---------- bloco de notas (post-it) ---------- */
.mural { display: flex; flex-wrap: wrap; gap: 12px; }
.postit {
  width: 190px; min-height: 170px; padding: 14px 14px 30px; border-radius: 2px;
  background: #fff8b8; color: #4a4526; font-size: 13.5px; line-height: 1.5;
  box-shadow: 2px 3px 8px rgba(20, 16, 50, .16); position: relative;
  transform: rotate(-.6deg); transition: transform .12s, box-shadow .12s;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.postit:nth-child(even) { transform: rotate(.7deg); }
.postit:hover { transform: rotate(0) translateY(-2px); box-shadow: 3px 6px 14px rgba(20, 16, 50, .22); }
.postit .texto { outline: none; min-height: 120px; white-space: pre-wrap; word-break: break-word; }
.postit .texto:empty::before { content: 'Escreva aqui…'; color: #a49c68; }
.postit .rodape {
  position: absolute; left: 12px; right: 10px; bottom: 8px;
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8a8256;
}
.postit .cores { display: flex; gap: 4px; margin-left: auto; }
.postit .cor { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,.12); }
.postit .apagar { cursor: pointer; opacity: .55; }
.postit .apagar:hover { opacity: 1; color: #b3261e; }
.postit.amarelo { background: #fff8b8; color: #4a4526; }
.postit.rosa    { background: #ffd9e3; color: #57262f; }
.postit.azul    { background: #cfe6ff; color: #1f3a52; }
.postit.verde   { background: #d3f5da; color: #1f4a2c; }
.postit.roxo    { background: #e6dcff; color: #3b2c62; }
.postit.fixada::after {
  content: '📌'; position: absolute; top: -8px; right: 8px; font-size: 15px;
}
.novo-postit {
  width: 190px; min-height: 170px; border: 2px dashed var(--borda); border-radius: 2px;
  background: transparent; color: var(--texto-suave); cursor: pointer; font-size: 13px;
}
.novo-postit:hover { border-color: var(--primaria); color: var(--primaria); }
[data-tema="escuro"] .postit { box-shadow: 2px 3px 10px rgba(0, 0, 0, .45); }

/* ---------- calendário ---------- */
.mini-calendario { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-calendario th {
  text-align: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); padding: 6px 0; border: 0;
}
.mini-calendario td {
  border: 1px solid var(--borda); vertical-align: top; height: 68px; padding: 3px 4px;
  font-size: 11.5px; position: relative;
}
.mini-calendario td.fora { background: color-mix(in srgb, var(--texto-suave) 5%, transparent); }
.mini-calendario td.hoje { outline: 2px solid var(--primaria); outline-offset: -2px; }
.mini-calendario td.feriado { background: color-mix(in srgb, var(--perigo) 7%, transparent); }
.mini-calendario .dia { font-weight: 600; color: var(--texto-suave); }
.mini-calendario td.hoje .dia { color: var(--primaria); }
.mini-calendario .ev {
  display: block; margin-top: 2px; padding: 1px 4px; border-radius: 4px; font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #fff;
}
.mini-calendario .ev.compromisso { background: #2563eb; }
.mini-calendario .ev.prazo { background: #d9534f; }
.mini-calendario .ev.tarefa { background: #b8860b; }
.mini-calendario .ev.extrajudicial { background: #7c5cff; }
.mini-calendario .mais { color: var(--texto-suave); font-size: 10px; }
/* bolinha da legenda */
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* blocos de largura inteira do painel */
#blocos-largos > .painel { margin-bottom: 16px; }

/* ---------- publicações: partes, leitura e subpastas ---------- */
.parte {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--borda); background: var(--fundo);
}
.parte.ativo   { border-color: #2563eb55; background: color-mix(in srgb, #2563eb 12%, transparent); }
.parte.passivo { border-color: #d9534f55; background: color-mix(in srgb, #d9534f 12%, transparent); }
mark.parte-no-texto {
  background: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 700;
  border: 1px solid #ffeaa7;
  box-shadow: 0 0 3px rgba(255, 193, 7, 0.3);
}

/* Publicação ainda não lida salta aos olhos; a lida recua para o fundo.
   A diferença precisa ser visível de longe, batendo o olho na lista. */
.painel.pub.nao-lida {
  border-left: 5px solid var(--alerta);
  background: color-mix(in srgb, var(--alerta) 5%, var(--card));
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--alerta) 55%, transparent);
}
.painel.pub.nao-lida b { font-weight: 700; }

.painel.pub.lida {
  border-left: 5px solid transparent;
  background: color-mix(in srgb, var(--texto) 3%, var(--card));
  box-shadow: none;
  opacity: .72;
}
.painel.pub.lida b { font-weight: 600; }
.painel.pub.lida:hover { opacity: 1; }

/* Estante da biblioteca: as subpastas de um produto, lado a lado */
.grade-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pasta-biblio {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--card); color: var(--texto); text-decoration: none;
  transition: border-color .12s, transform .12s;
}
.pasta-biblio::before { content: "📄"; margin-right: 2px; }
.pasta-biblio:hover { border-color: var(--primaria); transform: translateY(-1px); }
.pasta-biblio .nome { flex: 1; font-size: 13.5px; font-weight: 500; }

/* Uma linha do "o que fazer" no CRM: o caso, o passo e as ações, lado a lado */
.linha-passo {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.linha-passo:last-child { border-bottom: none; }
.linha-passo:hover { background: color-mix(in srgb, var(--primaria) 3%, transparent); }

/* Gavetas por estado: siglas compactas, para os 28 caberem sem virar um muro */
.chips-uf { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-uf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--borda); background: var(--card); color: var(--texto-suave);
  font-size: 12.5px; font-weight: 500; transition: border-color .12s, color .12s;
}
.chip-uf:hover { border-color: var(--primaria); color: var(--texto); }
.chip-uf.tem { border-color: var(--ok); color: var(--texto); font-weight: 600; }
.chip-uf b { font-size: 11px; color: var(--ok); }

.pastas-pub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pastas-pub .pasta {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--card); color: var(--texto);
  font-size: 13px; font-weight: 600; cursor: pointer; position: relative;
}
.pastas-pub .pasta:hover { border-color: var(--primaria); }
.pastas-pub .pasta.ativa { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 12%, transparent); }
.pastas-pub .pasta span {
  font-weight: 400; font-size: 11.5px; color: var(--texto-suave);
  background: var(--fundo); border-radius: 999px; padding: 1px 7px;
}
.ponto-nao-lida { width: 7px; height: 7px; border-radius: 50%; background: var(--alerta); display: inline-block; }

/* aviso de disco temporário — o risco mais grave e o menos visível */
.alerta-disco {
  background: color-mix(in srgb, var(--perigo) 12%, var(--card));
  border: 1px solid var(--perigo); border-left: 5px solid var(--perigo);
  border-radius: var(--raio); padding: 14px 18px; margin-bottom: 18px; font-size: 13.5px;
}
.alerta-disco b { color: var(--perigo); }
.alerta-disco p { margin-top: 6px; }
.alerta-disco code {
  background: color-mix(in srgb, var(--texto-suave) 16%, transparent);
  padding: 1px 6px; border-radius: 4px; font-size: 12.5px;
}

/* Faixa de recado no alto de uma tela: diz o que aconteceu com algo que roda
   sozinho (a busca no DJEN, por exemplo). Falha silenciosa é falha invisível. */
.aviso-linha {
  padding: 10px 14px; border-radius: 10px; margin: 0 0 14px;
  font-size: 13px; line-height: 1.55; border-left: 3px solid var(--texto-suave);
  background: color-mix(in srgb, var(--texto-suave) 8%, transparent);
}
.aviso-linha.verde    { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.aviso-linha.vermelho { border-left-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 10%, transparent); }
.aviso-linha.cinza    { border-left-color: var(--borda); }

/* ---------- cálculos financeiros ---------- */
.calculos-container { padding: 12px 0; }
.calculos-header { margin-bottom: 20px; }
.calculos-header h2 { margin-bottom: 4px; }
.calculos-header p { color: var(--texto-suave); font-size: 13px; }

.calculos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .calculos-grid { grid-template-columns: 1fr; } }

.calculos-formulario, .calculos-resultado { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; }

.tipos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tipo-card {
  background: var(--card); border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; text-align: center; transition: all .12s;
  text-decoration: none; color: inherit; font-size: 13px;
}
.tipo-card:hover { border-color: var(--primaria); box-shadow: 0 4px 12px rgba(124, 92, 255, .1); }
.tipo-card.ativo { background: color-mix(in srgb, var(--primaria) 12%, transparent); border-color: var(--primaria); }
.tipo-card .tipo-nome { font-weight: 600; margin-bottom: 4px; }
.tipo-card .tipo-campos { font-size: 11.5px; color: var(--texto-suave); }

.campo-formulario { margin-bottom: 12px; }
.campo-formulario label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); margin: 0 0 4px; }
.campo-formulario input,
.campo-formulario textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); font-size: 14px; font-family: inherit; }
.campo-formulario input:focus,
.campo-formulario textarea:focus { outline: 2px solid color-mix(in srgb, var(--primaria) 45%, transparent); border-color: var(--primaria); }
.campo-formulario textarea { resize: vertical; }
.parcela-proposta { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 4px; font-size: 12px; }
.analise-lei { margin: 12px 0; }
.analise-lei .status-superendividado { background: color-mix(in srgb, var(--perigo) 8%, transparent); }
.analise-lei .status-superendividado .valor { color: var(--perigo); font-weight: 700; }
.plano-pagamento { margin: 12px 0; }
.plano-pagamento table input { width: 100%; }

/* Formulários com Abas */
.form-revisional,
.form-superendividamento { background: var(--fundo); border-radius: 12px; overflow: hidden; }
.abas-form { display: flex; gap: 1px; background: var(--borda); padding: 1px; }
.aba-btn { flex: 1; padding: 12px 8px; background: var(--fundo-suave); border: none; color: var(--texto-suave); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.aba-btn:hover { background: var(--fundo); color: var(--texto); }
.aba-btn.ativo { background: var(--primaria); color: white; }
.conteudo-abas { padding: 20px; min-height: 300px; }
.aba-conteudo { display: none; }
.aba-conteudo.ativo { display: block; animation: fadeIn .2s; }
.aba-conteudo h4 { margin-top: 0; margin-bottom: 16px; color: var(--texto); font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

.tabela-form { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.tabela-form thead { background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.tabela-form th { padding: 10px; text-align: left; font-weight: 600; color: var(--texto); border-bottom: 2px solid var(--borda); }
.tabela-form td { padding: 10px; border-bottom: 1px solid var(--borda); }
.tabela-form input { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 4px; font-size: 12px; }
.tabela-form tr.total-row { background: color-mix(in srgb, var(--primaria) 5%, transparent); font-weight: 600; }
.tabela-form tr.destaque-row { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok); }

.tabela-credores { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.tabela-credores thead { background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.tabela-credores th { padding: 8px; text-align: left; font-weight: 600; color: var(--texto); border-bottom: 2px solid var(--borda); }
.tabela-credores td { padding: 8px; border-bottom: 1px solid var(--borda); }
.tabela-credores input { width: 100%; padding: 6px; border: 1px solid var(--borda); border-radius: 4px; font-size: 12px; }
.btn-remover-credor { padding: 4px 8px; background: var(--perigo); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
.btn-remover-credor:hover { background: color-mix(in srgb, var(--perigo) 120%, transparent); }

/* Upload Area */
.upload-area { border: 2px dashed var(--primaria); border-radius: 10px; padding: 32px 20px; text-align: center; cursor: pointer; transition: all .2s; background: color-mix(in srgb, var(--primaria) 3%, transparent); }
.upload-area:hover { background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.upload-area p { margin: 4px 0; color: var(--texto); font-weight: 500; }

.progresso { width: 100%; height: 8px; background: var(--borda); border-radius: 4px; overflow: hidden; }
.progresso-barra { height: 100%; background: var(--ok); width: 0%; transition: width .3s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.acoes { display: flex; gap: 8px; margin-top: 16px; }

.resultado-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.resultado-header h3 { font-size: 15px; margin: 0; }

.numeros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.numero-destaque { background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; text-align: center; }
.numero-destaque.positivo { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: var(--ok); }
.numero-destaque.negativo { background: color-mix(in srgb, var(--perigo) 10%, transparent); border-color: var(--perigo); }
.numero-label { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.numero-valor { font-size: 16px; font-weight: 700; color: var(--texto); }
.numero-destaque.negativo .numero-valor { color: var(--perigo); }
.numero-destaque.positivo .numero-valor { color: var(--ok); }

.resultado-grafico { margin: 18px 0; padding: 14px; background: var(--fundo); border-radius: 10px; text-align: center; }
.resultado-grafico svg { max-width: 100%; height: auto; }

.resultado-detalhes { margin: 18px 0; }
.tabela-resultado { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-resultado td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-resultado tr:last-child td { border-bottom: none; }
.tabela-resultado .chave { font-weight: 600; color: var(--texto-suave); width: 40%; }
.tabela-resultado .valor { font-weight: 600; color: var(--primaria); }

.resultado-acoes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.historico-calculos { margin-top: 18px; }
.historico-calculos h3 { margin-bottom: 12px; }

/* ============================ SUPORTE ============================
   O manual da equipe. Todas as abas usam os mesmos cinco blocos, então o
   estilo é um só: o que muda de uma aba para outra é o texto, nunca a
   forma. Fechado, mostra só o nome e para que serve; aberto, o passo a
   passo inteiro. */
.suporte-aba { padding: 0; overflow: hidden; }
.suporte-titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
.suporte-titulo:hover { background: var(--fundo-suave); }
.suporte-aba .suporte { display: none; }
.suporte-aba.aberta .suporte { display: block; }
.suporte-aba.aberta .suporte-titulo { border-bottom: 1px solid var(--borda); }
/* aberta, o resumo do cabeçalho vira repetição do bloco "para que serve" */
.suporte-aba.aberta .suporte-titulo .resumo { display: none; }

.suporte { padding: 4px 16px 16px; }
.suporte-bloco { padding: 12px 0; border-bottom: 1px solid var(--borda); }
.suporte-bloco:last-child { border-bottom: none; padding-bottom: 0; }
.suporte-bloco h4 {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-suave);
}
.suporte-bloco > div { font-size: 13.5px; line-height: 1.55; }
.suporte-bloco ol, .suporte-bloco ul { margin: 0; padding-left: 20px; }
.suporte-bloco li { margin-bottom: 4px; }
.suporte-bloco li:last-child { margin-bottom: 0; }

/* a regra do escritório é o bloco que não se negocia: ganha destaque */
.suporte-bloco[data-bloco="regra"] > div {
  border-left: 3px solid var(--primaria); padding-left: 10px; font-weight: 600;
}

.modal .suporte { padding: 0; max-height: 60vh; overflow-y: auto; }

/* impresso, o manual sai inteiro — serve para treinar quem chega */
@media print {
  .suporte-aba .suporte { display: block; }
  .suporte-titulo:hover { background: none; }
}

/* ---- check da lista do dia (Atividades Diárias) ----
   Linha tratada continua visível, só recua: some da atenção sem sumir da
   página, porque saber o que já foi feito é metade da conferência. */
.linha-feita { opacity: .5; }
.linha-feita td { text-decoration: line-through; text-decoration-color: var(--texto-suave); }
.check-dia { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primaria); }
.painel.dia-zerado { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* ---- grupos de abas do Financeiro ----
   As seções são agrupadas por quando se usa cada uma. O rótulo do grupo é o
   que transforma uma fileira longa de botões numa lista com sentido. */
.grupo-abas { margin-bottom: 6px; }
.grupo-abas .rotulo-grupo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); margin: 10px 0 2px; font-weight: 600;
}
.grupo-abas .abas { margin-bottom: 0; border-bottom: none; }
/* A linha que diz, em palavras, que pergunta a seção aberta responde. */
.explicacao-aba {
  border-left: 3px solid var(--primaria);
  padding: 10px 14px; margin: 14px 0 12px; font-size: 13px;
}