* { box-sizing: border-box; margin: 0; }
:root {
  --cor-primaria: #1E88E5;
  --cor-primaria-escura: #0D47A1;
  --cor-primaria-clara: #64B5F6;
  --cor-status-nao-tratada: #FFC107;
  --cor-alerta: #F44336;
  --cor-sucesso: #4CAF50;
  --cor-fundo: #FAFAFA;
  --cor-fundo-card: #FFFFFF;
  --cor-borda: #E0E0E0;
  --cor-texto-primario: #212121;
  --cor-texto-secundario: #757575;
  --cor-desabilitado: #BDBDBD;

  /* Legacy (para compatibilidade) */
  --azul: #1E88E5; --azul-claro: #0D47A1; --dourado: #FFC107;
  --fundo: #FAFAFA; --borda: #E0E0E0; --texto: #212121; --cinza: #757575;
}
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--fundo);
  color: var(--texto); display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: #FFFFFF; color: var(--cor-texto-primario); display: flex;
  flex-direction: column; position: fixed; top: 0; bottom: 0; border-right: 1px solid var(--cor-borda);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.logo { padding: 16px; flex-shrink: 0; }
.logo img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }
.logo-login { display: flex; justify-content: center; margin-bottom: 22px; }
.logo-login img { width: 250px; max-width: 100%; height: auto; border-radius: 8px; }
.sidebar nav { flex: 1; padding: 8px 0; overflow-y: auto; min-height: 0; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; color: var(--cor-texto-primario); text-decoration: none;
  padding: 12px 16px; font-size: .95rem; border-left: 3px solid transparent; transition: all 200ms; }
.sidebar nav a:hover { background: #F3F7FF; color: var(--cor-primaria); }
.sidebar nav a.ativo { background: #F3F7FF; color: var(--cor-primaria); border-left-color: var(--cor-primaria); font-weight: 600; }
.rodape-sidebar { padding: 16px; border-top: 1px solid var(--cor-borda); font-size: .85rem; flex-shrink: 0; }
.rodape-sidebar a { color: var(--cor-texto-secundario); display: block; margin-top: 8px; text-decoration: none; transition: color 200ms; }
.rodape-sidebar a:hover { color: var(--cor-primaria); }
.usuario-info small { color: var(--cor-texto-secundario); }
.rodape-sidebar .btn-sair { background: var(--cor-primaria); color: #FFFFFF; text-align: center;
  padding: 8px 12px; border-radius: 6px; font-weight: 700; margin-top: 12px; }
.rodape-sidebar .btn-sair:hover { color: var(--azul); filter: brightness(1.06); }
/* Elementos só visíveis no modo responsivo (telas pequenas) */
.barra-mobile { display: none; }
.overlay-menu { display: none; }
.tabela-scroll { width: 100%; }
.conteudo { flex: 1; margin-left: 250px; padding: 32px 40px; }
.tela-cheia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
h1 { font-size: 1.5rem; color: var(--cor-primaria); margin-bottom: 20px; font-weight: 600; }
h2 { font-size: 1.15rem; color: var(--cor-texto-primario); margin: 24px 0 12px; font-weight: 600; }
.topo { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.topo h1 { margin: 0; }
.btn { display: inline-block; background: var(--cor-primaria); color: #FFFFFF; border: 0;
  padding: 10px 20px; border-radius: 6px; font-size: .93rem; cursor: pointer; text-decoration: none;
  font-weight: 500; transition: all 200ms; }
.btn:hover { background: var(--cor-primaria-escura); box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3); }
.btn:active { transform: scale(0.98); }
.btn.secundario { background: #FFFFFF; color: var(--cor-primaria); border: 1.5px solid var(--cor-borda); }
.btn.secundario:hover { background: #F3F7FF; border-color: var(--cor-primaria); }
.btn.perigo { background: var(--cor-alerta); }
.btn.perigo:hover { background: #E53935; }
.btn.pequeno { padding: 6px 14px; font-size: .84rem; }
.cartao { background: #FFFFFF; border: 1px solid var(--cor-borda); border-radius: 8px;
  padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cartoes-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px; margin-bottom: 24px; }
.cartao-num { background: #FFFFFF; border: 1px solid var(--cor-borda); border-radius: 8px;
  padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cartao-num .num { font-size: 2.2rem; font-weight: 700; color: var(--cor-primaria); }
.cartao-num .num.valor { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.cartao-num .rotulo { color: var(--cor-texto-secundario); font-size: .88rem; font-weight: 500; }
.cartao-num .rotulo a { color: inherit; text-decoration: none; }
.cartao-num .rotulo a:hover { text-decoration: underline; }
.topo-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.topo-secao h2 { margin: 0; }
.ver-tudo { font-size: .85rem; color: var(--azul-claro); text-decoration: none; font-weight: 600; }
.ver-tudo:hover { text-decoration: underline; }
table { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--cor-borda);
  border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-texto-secundario); padding: 13px 16px; background: #F5F5F5; border-bottom: 1px solid var(--cor-borda);
  font-weight: 600; }
td { padding: 13px 16px; border-bottom: 1px solid #F0F0F0; font-size: .93rem; color: var(--cor-texto-primario); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #F9FBFF; }
td a { color: var(--cor-primaria); font-weight: 600; text-decoration: none; transition: color 200ms; }
td a:hover { color: var(--cor-primaria-escura); text-decoration: underline; }
.flash { padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .93rem; font-weight: 500; }
.flash.sucesso { background: #E8F5E9; color: #1B5E20; border: 1px solid #C8E6C9; }
.flash.erro { background: #FFEBEE; color: #B71C1C; border: 1px solid #FFCDD2; }
form.filtro { display: flex; gap: 10px; flex-wrap: wrap; }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--borda);
  border-radius: 6px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: transparent; }
form.filtro input, form.filtro select { width: auto; }
.grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.grade .campo-l { grid-column: 1 / -1; }
label { display: block; font-size: .84rem; font-weight: 600; color: var(--cinza); margin-bottom: 5px; }
.acoes-form { margin-top: 20px; display: flex; gap: 10px; }
.selo { display: inline-block; padding: 4px 12px; border-radius: 16px; font-size: .78rem; font-weight: 600; }
.selo.Ativo { background: #E8F5E9; color: #1B5E20; }
.selo.Suspenso { background: #FFF3E0; color: #E65100; }
.selo.Encerrado, .selo.Arquivado { background: #EEEEEE; color: #424242; }
.selo.nao-tratada { background: var(--cor-status-nao-tratada); color: #212121; }
.caixa-login { background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 36px; width: 360px; box-shadow: 0 8px 30px rgba(30,58,95,.12); }
.caixa-login h1 { text-align: center; margin-bottom: 22px; }
.caixa-login .campo { margin-bottom: 14px; }
.detalhe-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.detalhe-grade .rotulo { font-size: .78rem; text-transform: uppercase; color: var(--cinza);
  letter-spacing: .04em; }
.detalhe-grade .valor { font-size: .95rem; margin-top: 2px; }
.vazio { color: var(--cinza); padding: 30px; text-align: center; }
.em-breve { text-align: center; padding: 60px 20px; color: var(--cinza); }
.em-breve .icone { font-size: 3rem; margin-bottom: 12px; }
/* ---- Processo detalhe: layout grid ---- */
.processo-container { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.processo-main { min-width: 0; }
.dados-processo { border-top: 4px solid var(--cor-primaria); }
.processo-abas { margin-top: 24px; }
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--cor-borda); margin-bottom: 24px; role: tablist; }
.tab-button { padding: 12px 20px; background: transparent; border: none; color: var(--cor-texto-secundario);
  font-size: .95rem; font-weight: 500; cursor: pointer; border-bottom: 3px solid transparent; transition: all 200ms;
  position: relative; top: 2px; }
.tab-button:hover { color: var(--cor-primaria); }
.tab-button.active { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.processo-panel-direito { background: #FFFFFF; border: 1px solid var(--cor-borda); border-radius: 8px;
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); height: fit-content; position: sticky; top: 100px; }
.panel-card { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--cor-borda); }
.panel-card:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.panel-card h3 { font-size: .95rem; color: var(--cor-primaria); margin-bottom: 10px; font-weight: 600; }
.panel-item { padding: 8px 0; font-size: .85rem; }
.panel-data { font-size: .75rem; color: var(--cor-texto-secundario); font-weight: 600; }
.panel-titulo { color: var(--cor-texto-primario); margin-top: 2px; }
.panel-titulo a { color: var(--cor-primaria); text-decoration: none; font-weight: 600; }
.panel-titulo a:hover { text-decoration: underline; }
/* Panel Card Header */
.panel-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* Panel Financeiro */
.panel-financeiro { display: flex; flex-direction: column; gap: 6px; }
.fin-linha { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; padding: 6px 0; border-bottom: 1px solid #F0F0F0; align-items: center; }
.fin-linha.fin-total { border-top: 1px solid var(--cor-borda); border-bottom: none; padding-top: 8px; font-weight: 600; }
.fin-label { color: var(--cor-texto-secundario); font-weight: 500; flex: 1; }
.fin-valor { font-weight: 600; text-align: right; min-width: 60px; }
.panel-buttons { display: flex; gap: 6px; }
.btn-small {
  background: var(--cor-primaria);
  color: #FFFFFF;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-small:hover {
  background: var(--cor-primaria-escura);
  box-shadow: 0 1px 4px rgba(30, 136, 229, 0.3);
}
.btn-tiny {
  background: var(--cor-primaria);
  color: #FFFFFF;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
}
.btn-tiny:hover {
  background: var(--cor-primaria-escura);
  box-shadow: 0 1px 4px rgba(30, 136, 229, 0.3);
}
/* Panel Timesheet */
.panel-timesheet { display: flex; flex-direction: column; gap: 6px; }
.panel-timesheet input {
  padding: 6px;
  font-size: .85rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-family: inherit;
}
.panel-timesheet input:focus {
  outline: 2px solid var(--cor-primaria-clara);
  border-color: transparent;
}
/* ---- Faturas: edição ---- */
.fatura-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.fatura-grid > div { min-width: 0; }
.fatura-emissor { position: sticky; top: 100px; }
.fatura-logo-box { max-width: 500px; }
@media (max-width: 900px) { .fatura-grid { grid-template-columns: 1fr; } .fatura-emissor { position: static; } }
/* ---- Publicações: layout grid ---- */
.publicacoes-container { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.publicacoes-main { min-width: 0; }
.publicacoes-panel-direito { background: #FFFFFF; border: 1px solid var(--cor-borda); border-radius: 8px;
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); height: fit-content; position: sticky; top: 100px; }
.publicacao-item { border-top: 4px solid var(--cor-status-nao-tratada); }
.tratamentos-list { display: flex; flex-direction: column; gap: 8px; }
.tratamentos-list label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 400; margin: 0; cursor: pointer; }
.tratamentos-list input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.btn-primary { background: var(--cor-primaria); color: #FFFFFF; border: none; padding: 10px 16px;
  border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 200ms; }
.btn-primary:hover { background: var(--cor-primaria-escura); box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3); }
/* ---- Agenda: calendário ---- */
.alterna-visao { display: inline-flex; gap: 4px; }
.cal-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-titulo { font-size: 1.1rem; color: var(--azul); min-width: 165px; text-align: center; }
table.calendario { table-layout: fixed; }
table.calendario th { text-align: center; }
.cal-dia { vertical-align: top; height: 92px; padding: 6px 7px; cursor: pointer; }
.cal-dia:hover { background: #eef3fa; }
.cal-dia:hover .cal-mais { visibility: visible; }
.cal-mais { visibility: hidden; color: var(--azul-claro); font-weight: 700; float: right; }
.cal-num { font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.cal-dia.fora-mes { background: #fafbfd; }
.cal-dia.fora-mes .cal-num span { color: #b6bfca; }
.cal-dia.fds { background: #f6f8fb; }
.cal-dia.cal-hoje { outline: 2px solid var(--dourado); outline-offset: -2px; }
.cal-tag-hoje { color: #8f6b14; font-weight: 700; margin-left: 4px; }
.cal-dia.feriado { background: #fdecea; }
.cal-dia.feriado:hover { background: #fadbd7; }
.cal-dia.feriado .cal-num span { color: #9c2b21; }
.cal-feriado-desc { color: #9c2b21; font-size: .72rem; font-weight: 600; line-height: 1.25; margin-bottom: 3px; }
.cal-item { display: block; font-size: .72rem; line-height: 1.3; padding: 2px 6px; margin-bottom: 3px;
  border-radius: 4px; color: #fff !important; font-weight: 600; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item:hover { text-decoration: none; filter: brightness(1.15); }
.cal-item.tarefa { background: var(--azul-claro); }
.cal-item.audiencia { background: #6a3fa0; }
.cal-item.prazo { background: #b3392e; }
.cal-item.concluida { opacity: .5; text-decoration: line-through; }
.cal-legenda { display: flex; gap: 18px; margin-top: 10px; color: var(--cinza); font-size: .82rem; }
.cal-legenda .quad { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; }
.cal-legenda .quad.tarefa { background: var(--azul-claro); }
.cal-legenda .quad.audiencia { background: #6a3fa0; }
.cal-legenda .quad.prazo { background: #b3392e; }
.cal-legenda .quad.feriado-q { background: #fdecea; border: 1px solid #f5c6c1; }
/* ---- Cálculos: demonstrativo ---- */
.demonstrativo { font-size: .92rem; }
.demo-proc { color: var(--cinza); margin-bottom: 6px; }
.demo-cab { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--azul); }
.demo-secao { margin-top: 18px; }
table.demo-tab, table.demo-resumo { border: 0; }
.demo-tab td { padding: 5px 8px; border-bottom: 1px dotted #e3e8ef; font-size: .88rem; }
.demo-tab td.num, .demo-resumo td.num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; width: 130px; }
.demo-tab .formula { color: var(--cinza); font-size: .8rem; }
.demo-tab tr.demo-desc td { font-weight: 700; color: var(--azul); border-bottom: 0; padding-top: 10px; }
.demo-tab tr.demo-sub td { font-weight: 700; border-bottom: 2px solid var(--borda); }
.demo-resumo th { text-align: right; }
.demo-resumo th:first-child { text-align: left; }
.demo-resumo tr.demo-total td { font-weight: 700; border-top: 2px solid var(--azul);
  font-size: .95rem; }
/* ---- bolinhas de estágio (agenda do processo) ---- */
.estagios { display: inline-flex; gap: 6px; align-items: center; }
.bolinha { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #c2cad6;
  background: #fff; cursor: pointer; padding: 0; transition: transform .1s; }
.bolinha:hover { transform: scale(1.2); }
.bolinha.bo-pendente.on { background: #6b7686; border-color: #6b7686; }
.bolinha.bo-em_progresso.on { background: var(--azul-claro); border-color: var(--azul-claro); }
.bolinha.bo-concluida.on { background: #1d6f42; border-color: #1d6f42; }
.filtro-datas { display: inline-flex; gap: 6px; align-items: center; }
.filtro-datas input[type=date] { width: auto; }
/* ---- Agenda: painel kanban ---- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kb-coluna { background: #eef1f5; border: 1px solid var(--borda); border-radius: 10px; padding: 8px; }
.kb-cabecalho { font-weight: 700; font-size: .9rem; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center; color: #fff; }
.kb-cabecalho.kb-pendente { background: #6b7686; }
.kb-cabecalho.kb-em_progresso { background: var(--azul-claro); }
.kb-cabecalho.kb-concluida { background: #1d6f42; }
.kb-contador { background: rgba(255,255,255,.3); border-radius: 12px; padding: 0 8px; font-size: .8rem; }
.kb-lista { min-height: 80px; display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 6px; }
.kb-lista.kb-sobre { background: #dde7f3; outline: 2px dashed var(--azul-claro); }
.kb-card { background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--cinza);
  border-radius: 8px; padding: 9px 11px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kb-card:active { cursor: grabbing; }
.kb-card.kb-arrastando { opacity: .45; }
.kb-card.kb-tipo-tarefa { border-left-color: var(--azul-claro); }
.kb-card.kb-tipo-audiencia { border-left-color: #6a3fa0; }
.kb-card.kb-tipo-prazo { border-left-color: #b3392e; }
.kb-card-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.kb-etq { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px;
  border-radius: 10px; color: #fff; }
.kb-etq.kb-tarefa { background: var(--azul-claro); }
.kb-etq.kb-audiencia { background: #6a3fa0; }
.kb-etq.kb-prazo { background: #b3392e; }
.kb-data { font-size: .78rem; color: var(--cinza); font-variant-numeric: tabular-nums; }
.kb-data.kb-vencido { color: #9c2b21; font-weight: 700; }
.kb-titulo { display: block; font-weight: 600; color: var(--texto); text-decoration: none; font-size: .9rem; line-height: 1.3; }
.kb-titulo:hover { color: var(--azul); text-decoration: underline; }
.kb-proc { font-size: .78rem; margin-top: 4px; }
.kb-proc a { color: var(--azul); text-decoration: none; font-weight: 600; }
.kb-resp { font-size: .76rem; color: var(--cinza); margin-top: 3px; }
.kb-aviso { display: inline-block; margin-top: 5px; font-size: .68rem; font-weight: 700; color: #9c2b21;
  background: #fdecea; padding: 1px 7px; border-radius: 4px; }
@media (max-width: 860px) { .kanban { grid-template-columns: 1fr; } }

@media print {
  .sidebar, .nao-imprime, .flash { display: none !important; }
  .conteudo { margin-left: 0; padding: 0; }
  .cartao { border: 0; padding: 0; }
  body { background: #fff; }
}
@media (max-width: 860px) {
  /* Barra superior fixa com botão de menu e Sair */
  .barra-mobile { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0;
    right: 0; height: 54px; background: var(--azul); color: #fff; padding: 0 12px; z-index: 50; }
  .menu-toggle { background: transparent; border: 0; color: #fff; font-size: 1.6rem; line-height: 1;
    cursor: pointer; padding: 2px 8px; width: auto; }
  .barra-mobile-titulo { font-weight: 600; flex: 1; font-size: 1rem; }
  .barra-mobile .btn-sair-mobile { color: #fff; border: 1px solid rgba(255,255,255,.45);
    padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: .85rem; }
  /* Barra lateral vira menu deslizante (off-canvas) */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; width: 230px; z-index: 60; }
  body.menu-aberto .sidebar { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.35); }
  .overlay-menu { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
  body.menu-aberto .overlay-menu { display: block; }
  .conteudo { margin-left: 0; padding: 70px 16px 24px; }
  .grade { grid-template-columns: 1fr; }
  .cartoes-resumo { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  /* Tabelas rolam horizontalmente sem quebrar o layout */
  .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela-scroll table { min-width: 560px; }
  .caixa-login { width: 360px; max-width: 100%; padding: 28px 22px; }
  form.filtro { width: 100%; }
}