/* =============================================================================
   BASE — tokens, tema claro/escuro e componentes comuns ao sistema e ao painel
   ============================================================================= */

:root {
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #f4f6f8;
  --bg-2: #eef1f4;
  --sup: #ffffff;
  --sup-2: #f8fafc;
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #94a3b8;

  --primaria: #0f766e;
  --primaria-forte: #115e59;
  --primaria-suave: #ccfbf1;
  --primaria-texto: #ffffff;

  --c-atrasado: #dc2626;
  --c-atrasado-bg: #fee2e2;
  --c-hoje: #ea580c;
  --c-hoje-bg: #ffedd5;
  --c-breve: #d97706;
  --c-breve-bg: #fef3c7;
  --c-andamento: #2563eb;
  --c-andamento-bg: #dbeafe;
  --c-aguardando: #a16207;
  --c-aguardando-bg: #fef9c3;
  --c-nao-iniciado: #64748b;
  --c-nao-iniciado-bg: #f1f5f9;
  --c-concluido: #059669;
  --c-concluido-bg: #d1fae5;
  --c-cancelado: #6b7280;
  --c-cancelado-bg: #f3f4f6;

  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --sombra-2: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .05);
  --sombra-3: 0 20px 40px rgba(15, 23, 42, .18);
  --raio: 10px;
  --raio-g: 14px;
  --t: 160ms cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}

/* Escuro: automático pelo sistema operacional, ou forçado pelo botão de tema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
  --bg: #0b1120;
  --bg-2: #0f172a;
  --sup: #131c2e;
  --sup-2: #18233a;
  --borda: #24314a;
  --borda-forte: #334462;
  --texto: #e2e8f0;
  --texto-2: #a5b4cb;
  --texto-3: #64748b;
  --primaria: #14b8a6;
  --primaria-forte: #2dd4bf;
  --primaria-suave: #134e4a;
  --primaria-texto: #042f2e;
  --c-atrasado: #f87171;  --c-atrasado-bg: #3b1219;
  --c-hoje: #fb923c;      --c-hoje-bg: #3a1d0b;
  --c-breve: #fbbf24;     --c-breve-bg: #33260a;
  --c-andamento: #60a5fa; --c-andamento-bg: #172a4d;
  --c-aguardando: #facc15;--c-aguardando-bg: #2f2a0b;
  --c-nao-iniciado: #94a3b8; --c-nao-iniciado-bg: #1e293b;
  --c-concluido: #34d399; --c-concluido-bg: #0b3326;
  --c-cancelado: #9ca3af; --c-cancelado-bg: #1f2937;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 6px 16px rgba(0, 0, 0, .35);
  --sombra-3: 0 24px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --bg: #0b1120;
  --bg-2: #0f172a;
  --sup: #131c2e;
  --sup-2: #18233a;
  --borda: #24314a;
  --borda-forte: #334462;
  --texto: #e2e8f0;
  --texto-2: #a5b4cb;
  --texto-3: #64748b;
  --primaria: #14b8a6;
  --primaria-forte: #2dd4bf;
  --primaria-suave: #134e4a;
  --primaria-texto: #042f2e;
  --c-atrasado: #f87171;  --c-atrasado-bg: #3b1219;
  --c-hoje: #fb923c;      --c-hoje-bg: #3a1d0b;
  --c-breve: #fbbf24;     --c-breve-bg: #33260a;
  --c-andamento: #60a5fa; --c-andamento-bg: #172a4d;
  --c-aguardando: #facc15;--c-aguardando-bg: #2f2a0b;
  --c-nao-iniciado: #94a3b8; --c-nao-iniciado-bg: #1e293b;
  --c-concluido: #34d399; --c-concluido-bg: #0b3326;
  --c-cancelado: #9ca3af; --c-cancelado-bg: #1f2937;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 6px 16px rgba(0, 0, 0, .35);
  --sombra-3: 0 24px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--primaria-suave); }
[hidden] { display: none !important; }

.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
         stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone.p { width: 15px; height: 15px; }
.icone.g { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--borda); background: var(--sup); color: var(--texto);
  font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { background: var(--sup-2); border-color: var(--borda-forte); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .campo:focus-visible, .chip:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.btn.primario:hover { background: var(--primaria-forte); border-color: var(--primaria-forte); }
.btn.perigo { color: var(--c-atrasado); }
.btn.perigo:hover { background: var(--c-atrasado-bg); border-color: var(--c-atrasado); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover { background: var(--bg-2); }
.btn.icone-so { width: 36px; padding: 0; }
.btn.pq { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.pq.icone-so { width: 30px; }

/* ---------------------------------------------------------------- campos */
.campo {
  width: 100%; height: 38px; padding: 0 11px;
  background: var(--sup); border: 1px solid var(--borda); border-radius: 9px;
  transition: border-color var(--t), box-shadow var(--t);
}
.campo:hover { border-color: var(--borda-forte); }
.campo:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent); }
textarea.campo { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; }
select.campo { padding-right: 30px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
input[type="range"].campo { padding: 0; border: none; box-shadow: none; accent-color: var(--primaria); height: 24px; }
input[type="checkbox"] { accent-color: var(--primaria); width: 16px; height: 16px; }

.rotulo { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: 5px; }
.rotulo .dica { font-weight: 400; color: var(--texto-3); }
.grupo { margin-bottom: 14px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.secao-form { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
              color: var(--texto-3); margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.secao-form::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* ---------------------------------------------------------------- etiquetas */
.pilula {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--bg-2); color: var(--texto-2);
}
.pilula .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.sit-atrasado     { color: var(--c-atrasado);     background: var(--c-atrasado-bg); }
.sit-hoje         { color: var(--c-hoje);         background: var(--c-hoje-bg); }
.sit-vence_breve  { color: var(--c-breve);        background: var(--c-breve-bg); }
.sit-em_andamento { color: var(--c-andamento);    background: var(--c-andamento-bg); }
.sit-aguardando   { color: var(--c-aguardando);   background: var(--c-aguardando-bg); }
.sit-nao_iniciado { color: var(--c-nao-iniciado); background: var(--c-nao-iniciado-bg); }
.sit-concluido    { color: var(--c-concluido);    background: var(--c-concluido-bg); }
.sit-cancelado    { color: var(--c-cancelado);    background: var(--c-cancelado-bg); }
.sit-atencao      { color: var(--c-atrasado);     background: var(--c-atrasado-bg); }
.sit-nao_informado{ color: var(--c-nao-iniciado); background: var(--c-nao-iniciado-bg); }

.prazo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.prazo.atrasado { color: var(--c-atrasado); }
.prazo.hoje { color: var(--c-hoje); }
.prazo.breve { color: var(--c-breve); }
.prazo.longe, .prazo.sem { color: var(--texto-3); }
.prazo.sem { font-weight: 500; }

.pin { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
       font-size: 10.5px; font-weight: 800; color: #fff; flex: none; }
.pin.D { background: #7c3aed; } .pin.S { background: #0891b2; } .pin.M { background: #65a30d; }

.avatar {
  --cor: var(--primaria);
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--cor) 18%, var(--sup));
  color: var(--cor); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--cor) 30%, transparent);
}
.avatar { position: relative; overflow: hidden; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar.com-foto { color: transparent; }
.avatar.pq { width: 24px; height: 24px; font-size: 10px; }
.avatar.g { width: 42px; height: 42px; font-size: 15px; }
.avatar.xg { width: 76px; height: 76px; font-size: 24px; }

/* Foto de perfil: avatar grande + botões (Minha conta, Usuários). */
.editor-foto { display: flex; gap: 16px; align-items: center; }
.editor-foto .lado { display: grid; gap: 8px; min-width: 0; }
.editor-foto .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.editor-foto label.btn { cursor: pointer; }
.editor-foto small { color: var(--texto-3); font-size: 12px; }
.avatares { display: inline-flex; flex: none; }
.avatares .avatar + .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--sup); }

.barra { height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: inherit; background: var(--primaria);
                transition: width .4s ease; }
.barra-empilhada { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--bg-2); gap: 2px; }
.barra-empilhada > span { height: 100%; transition: flex-grow .4s ease; }

/* ---------------------------------------------------------------- nº do processo (campo próprio) */
.num-proc {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 700;
  background: var(--bg-2); color: var(--texto); border: 1px solid var(--borda); white-space: nowrap;
}
.num-proc small { font-family: var(--fonte); font-weight: 600; color: var(--texto-3); font-size: 10.5px; }
.sem-num { color: var(--texto-3); font-size: 12px; }

/* ---------------------------------------------------------------- equipe em pílulas (sistema e painel) */
.chips-equipe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--sup); cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--texto-2); transition: all var(--t);
}
.chip .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.chip:hover { border-color: var(--borda-forte); }
.chip.marcado { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria-forte); }
:root[data-tema="escuro"] .chip.marcado { color: var(--primaria); }
.chip .check { display: none; }
.chip.marcado .check { display: inline; }
.chip[disabled] { cursor: default; }
.chip[disabled]:not(.marcado) { opacity: .6; }
.chip.todos { padding-left: 10px; }
.chip.todos.marcado { background: var(--texto); color: var(--bg); border-color: var(--texto); }
.chip.pq { height: 24px; font-size: 11.5px; padding-right: 8px; }
.chip.pq .avatar { width: 18px; height: 18px; font-size: 8.5px; }

/* ---------------------------------------------------------------- cartões */
.cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.cartao-cab h3 { font-size: 15px; }
.cartao-corpo { padding: 16px; }

.vazio { text-align: center; padding: 42px 16px; color: var(--texto-3); }
.vazio .icone { width: 38px; height: 38px; stroke-width: 1.5; margin-bottom: 8px; }
.vazio b { display: block; color: var(--texto-2); font-size: 15px; margin-bottom: 4px; }

/* ---------------------------------------------------------------- avisos flutuantes */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px;
  padding: 11px 14px; border-radius: 11px; background: var(--texto); color: var(--bg);
  box-shadow: var(--sombra-3); font-weight: 500; animation: entra-baixo .22s ease;
}
.toast.erro { background: var(--c-atrasado); color: #fff; }
.toast.ok .icone { color: var(--c-concluido); }
.toast.saindo { animation: sai .2s ease forwards; }

@keyframes entra-baixo { from { opacity: 0; transform: translateY(10px); } }
@keyframes sai { to { opacity: 0; transform: translateY(6px); } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes brilho {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primaria) 55%, transparent); background: color-mix(in srgb, var(--primaria) 12%, var(--sup)); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.atualizado { animation: brilho 1.6s ease-out; }

.ao-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.ao-vivo.on { color: var(--c-concluido); }
.ao-vivo.on i { background: var(--c-concluido); animation: pulso 1.8s infinite; }
.ao-vivo.off i { background: var(--c-atrasado); }

.esqueleto { background: linear-gradient(90deg, var(--bg-2) 25%, var(--sup-2) 50%, var(--bg-2) 75%);
             background-size: 200% 100%; animation: brilho-esq 1.2s infinite; border-radius: 8px; }
@keyframes brilho-esq { to { background-position: -200% 0; } }

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