/* Gestor RC: "papel e tinta".
   Interface monocromática quente; a única cor de marca é o rubi (selo RC, item ativo, foco).
   Cor fora disso só com significado (prazo, erro, aviso). Sem sombra, sem degradê.
   Os NOMES das classes são contrato com os módulos (docs/CONVENCOES.md): não renomear. */

@font-face { font-family: "Geist"; src: url("../fontes/geist.284d2af3ed9d.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fontes/geist-mono.bd0693c1a36d.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fontes/newsreader.175a37868200.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* papel e tinta */
  --fundo: #f8f7f4;
  --superficie: #ffffff;
  --superficie-2: #f2f1ed;
  --lateral: #f1efea;
  --borda: #e6e3dc;
  --borda-forte: #d2cec5;
  --texto: #25231f;
  --texto-2: #67635a;
  --texto-3: #98938a;
  --tinta: #25231f;
  --tinta-2: #3b3830;
  --marca: #8e2f3c;          /* rubi: só selo, item ativo e foco */
  --marca-fixa: #8e2f3c;     /* o selo RC é o mesmo rubi nos dois modos */
  --marca-suave: #f4e6e7;
  --link: #25231f;
  /* semântica (pastéis lavados) */
  --erro: #9f2f2d;
  --erro-suave: #fbeaea;
  --aviso: #8a5a00;
  --aviso-suave: #fbf2d9;
  --ok: #346538;
  --ok-suave: #ebf2ea;
  --info: #1f5f8f;
  --info-suave: #e4f0f8;
  --neutro: #5f5b53;
  --neutro-suave: #efede8;
  --destaque: var(--marca);
  --destaque-suave: #f8efd4;  /* marca-texto amarela para trechos */
  --raio: 8px;
  --raio-p: 5px;
  --fonte: "Geist", "Segoe UI", system-ui, sans-serif;
  --serifa: "Newsreader", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --transicao: 140ms cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #181816;
    --superficie: #1f1e1c;
    --superficie-2: #262522;
    --lateral: #1c1b19;
    --borda: #302e2a;
    --borda-forte: #423f39;
    --texto: #ebe8e1;
    --texto-2: #aaa59a;
    --texto-3: #7d786e;
    --tinta: #ebe8e1;
    --tinta-2: #ffffff;
    --marca: #d2707d;
    --marca-suave: #3a2226;
    --link: #ebe8e1;
    --erro: #f08b84;
    --erro-suave: #3a1f1d;
    --aviso: #e2b24f;
    --aviso-suave: #352a14;
    --ok: #86c08a;
    --ok-suave: #1d2e1f;
    --info: #86b9e0;
    --info-suave: #17283a;
    --neutro: #b3ada2;
    --neutro-suave: #2a2926;
    --destaque-suave: #3b3214;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14.5px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--fundo);
  line-height: 1.5; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; transition: text-decoration-color var(--transicao); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0 0 .6rem; color: var(--texto); text-wrap: balance; }
h1 { font-family: var(--serifa); font-weight: 500; font-size: 1.95rem; line-height: 1.15; letter-spacing: -.012em; }
h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 600; }
p { text-wrap: pretty; }
code, .mono { font-family: var(--mono); font-size: .9em; font-variant-numeric: tabular-nums; }
.muted { color: var(--texto-2); }
.sutil { color: var(--texto-3); font-size: .86rem; }
.nowrap { white-space: nowrap; }
.direita { text-align: right; }
::selection { background: var(--marca-suave); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }
.pular-conteudo { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--fundo); padding: 8px 12px; border-radius: var(--raio-p); z-index: 50; }
.pular-conteudo:focus { left: 8px; }

/* Estrutura */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; }
.lateral {
  background: var(--lateral); border-right: 1px solid var(--borda); padding: 14px 10px 24px;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column;
}
.lateral .logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--texto); font-weight: 600; letter-spacing: -.01em; }
.lateral .logo .marca-icone {
  width: 28px; height: 28px; border-radius: 6px; background: var(--marca-fixa); color: #fff;
  display: grid; place-items: center; font-family: var(--serifa); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.lateral .logo small { display: block; font-weight: 400; color: var(--texto-3); font-size: .78rem; letter-spacing: 0; }
.lateral nav { display: flex; flex-direction: column; gap: 1px; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px;
  color: var(--texto-2); font-size: .93rem; font-weight: 500; text-decoration: none; position: relative;
  transition: background var(--transicao), color var(--transicao);
}
.lateral nav a:hover { background: rgba(37, 35, 31, .05); color: var(--texto); }
.lateral nav a.ativo { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda); }
.lateral nav a.ativo::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--marca); }
.lateral .grupo { margin: 20px 8px 6px; font-size: .78rem; color: var(--texto-3); font-weight: 500; }
.lateral .contador { margin-left: auto; font-family: var(--mono); font-size: .76rem; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 4px; padding: 0 5px; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: color-mix(in srgb, var(--fundo) 88%, transparent);
  border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(1.2) blur(6px);
}
.topo .busca { flex: 1; max-width: 520px; position: relative; }
.topo .busca input { width: 100%; padding-left: 32px; padding-right: 34px; background: var(--superficie); }
.topo .busca::before { content: ""; position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: var(--texto-3); -webkit-mask: url("../icones/magnifying-glass.39c7a575418f.svg") center / contain no-repeat; mask: url("../icones/magnifying-glass.39c7a575418f.svg") center / contain no-repeat; }
.topo .busca::after { content: "/"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: .75rem; color: var(--texto-3); border: 1px solid var(--borda); border-radius: 4px; padding: 0 5px; background: var(--superficie-2); }
.topo .usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.conteudo { padding: 28px 32px 64px; max-width: 1360px; width: 100%; }
.cabecalho { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho h1 { margin-bottom: 2px; }
.cabecalho .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.menu-movel { display: none; }

/* Ícones (Phosphor por máscara: herdam a cor do texto) */
.icone { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.i-painel { --icone: url("../icones/house.940a9696f434.svg"); }
.i-publicacoes { --icone: url("../icones/newspaper-clipping.5ed227273418.svg"); }
.i-agenda { --icone: url("../icones/calendar-blank.12fd927ed1d8.svg"); }
.i-quadro { --icone: url("../icones/kanban.26ba3a6b378b.svg"); }
.i-processos { --icone: url("../icones/scales.9d7f5a6967dc.svg"); }
.i-localizador { --icone: url("../icones/binoculars.2c1a105ab3a2.svg"); }
.i-contatos { --icone: url("../icones/address-book.12a3b0dc3281.svg"); }
.i-calculadora { --icone: url("../icones/calculator.5fc115ca63d4.svg"); }
.i-feriados { --icone: url("../icones/calendar-dots.e323a695fe91.svg"); }
.i-usuarios { --icone: url("../icones/users-three.607214c1a189.svg"); }
.i-rotinas { --icone: url("../icones/arrows-clockwise.42537b39bf6c.svg"); }
.i-auditoria { --icone: url("../icones/fingerprint.2d951fe49e50.svg"); }
.i-config { --icone: url("../icones/gear-six.634781e3beb3.svg"); }
.i-sair { --icone: url("../icones/sign-out.3f8c26783ca5.svg"); }
.i-chave { --icone: url("../icones/key.ee0564929426.svg"); }
.i-escudo { --icone: url("../icones/shield-check.b3f2279f2681.svg"); }
.i-menu { --icone: url("../icones/list.b63f5ac9b4ec.svg"); }

/* Superfícies */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px; }
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.cartao .cartao-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cartao .cartao-topo h2 { margin: 0; }
.cartao .cartao-topo a { margin-left: auto; font-size: .88rem; color: var(--texto-2); }
.grade { display: grid; gap: 14px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numero { font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.contador-cartao { display: block; color: inherit; text-decoration: none; transition: border-color var(--transicao), background var(--transicao); }
.contador-cartao:hover { border-color: var(--borda-forte); background: var(--superficie); }
.contador-cartao .rotulo { color: var(--texto-2); font-size: .88rem; margin-top: 8px; }
.contador-cartao.erro .numero { color: var(--erro); }
.contador-cartao.aviso .numero { color: var(--aviso); }
.contador-cartao.ok .numero { color: var(--ok); }

/* Tabelas */
.tabela-envolve { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-weight: 500; color: var(--texto-3); font-size: .84rem; padding: 7px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 10px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.destacada td { background: var(--destaque-suave); }
.tabela a { text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 10px 0; border-bottom: 1px solid var(--borda); display: flex; gap: 10px; align-items: flex-start; }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples .corpo { flex: 1; min-width: 0; }
.lista-simples a { text-decoration: none; }
.lista-simples a:hover { text-decoration: underline; }
.vazio { color: var(--texto-3); padding: 22px 4px; text-align: center; font-size: .92rem; }

/* Selos: retos, discretos, com cor só quando significa algo */
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: .78rem; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--neutro-suave); color: var(--neutro); font-variant-numeric: tabular-nums; }
.selo-vencido, .selo-erro { background: var(--erro-suave); color: var(--erro); }
.selo-hoje { background: var(--erro); color: #fff; }
.selo-amanha, .selo-aviso { background: var(--aviso-suave); color: var(--aviso); }
.selo-proximo, .selo-info { background: var(--info-suave); color: var(--info); }
.selo-futuro, .selo-neutro { background: var(--neutro-suave); color: var(--neutro); }
.selo-ok { background: var(--ok-suave); color: var(--ok); }
.selo-destaque { background: var(--marca-suave); color: var(--marca); }

/* Avisos: faixa lateral, sem moldura */
.alerta { border-radius: var(--raio-p); padding: 11px 14px; margin-bottom: 14px; border-left: 3px solid; font-size: .93rem; }
.alerta.erro { background: var(--erro-suave); color: var(--erro); border-color: var(--erro); }
.alerta.aviso { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso); }
.alerta.info { background: var(--info-suave); color: var(--info); border-color: var(--info); }
.alerta.ok { background: var(--ok-suave); color: var(--ok); border-color: var(--ok); }
.alerta strong { display: block; margin-bottom: 2px; font-weight: 600; }
.alerta ul { margin: 6px 0 0 18px; padding: 0; }
.alerta a { color: inherit; }
.mensagens { margin-bottom: 14px; }

/* Formulários */
label { display: block; font-weight: 500; font-size: .87rem; margin-bottom: 5px; color: var(--texto); }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=tel], select, textarea {
  width: 100%; height: 34px; padding: 6px 10px; border: 1px solid var(--borda-forte); border-radius: 6px;
  background: var(--superficie); color: var(--texto); font: inherit; font-size: .93rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { height: auto; min-height: 96px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:hover, select:hover, textarea:hover { border-color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--marca-suave); }
input[type=checkbox], input[type=radio] { accent-color: var(--tinta); width: 15px; height: 15px; vertical-align: -2px; }
input[type=color] { width: 54px; height: 34px; padding: 2px; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--superficie); }
input[type=date], input[type=time], input[type=number] { font-variant-numeric: tabular-nums; }
.campo { margin-bottom: 16px; }
.campo .ajuda { color: var(--texto-3); font-size: .82rem; margin-top: 4px; }
.campo .erros, .erro-campo { color: var(--erro); font-size: .85rem; margin-top: 4px; }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--erro); }
.campo ul.checks, .campo div.checks { list-style: none; padding: 0; margin: 0; columns: 2; }
.campo ul.checks li, .campo div.checks > div { break-inside: avoid; padding: 2px 0; }
.campo div.checks label, .campo ul.checks label { font-weight: 400; display: inline; }
.campo input[type=checkbox] + label, .campo label > input[type=checkbox] { display: inline; font-weight: 400; }
.form-linha { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { margin: 0; min-width: 150px; }
.filtros input[type=search] { min-width: 240px; }

/* Botões: tinta para a ação principal; o resto é discreto */
.botao, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 6px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 500; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), transform 80ms ease;
}
.botao:hover, button:hover { background: var(--superficie-2); border-color: var(--texto-3); text-decoration: none; }
.botao:active, button:active { transform: translateY(1px); }
.botao.primario, button.primario { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.botao.primario:hover, button.primario:hover { background: var(--tinta-2); border-color: var(--tinta-2); }
.botao.perigo, button.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, var(--borda-forte)); }
.botao.perigo:hover, button.perigo:hover { background: var(--erro-suave); }
.botao.pequeno, button.pequeno { height: 27px; padding: 0 9px; font-size: .84rem; }
.botao.link, button.link { border: 0; background: none; color: var(--texto); height: auto; padding: 0; text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; }
button:disabled, .botao[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; }
.inline { display: inline; }

/* Avatares: quadrado arredondado */
.avatar { display: inline-grid; place-items: center; border-radius: 6px; color: #fff; font-weight: 600; flex: none; letter-spacing: .02em; }
.avatar.p { width: 22px; height: 22px; font-size: .64rem; border-radius: 5px; }
.avatar.m { width: 30px; height: 30px; font-size: .74rem; }
.avatar.g { width: 44px; height: 44px; font-size: .95rem; border-radius: 9px; }

/* Abas */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; flex-wrap: wrap; }
.abas a { padding: 8px 12px; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; font-size: .92rem; text-decoration: none; transition: color var(--transicao); }
.abas a:hover { color: var(--texto); }
.abas a.ativa { color: var(--texto); border-bottom-color: var(--tinta); }
.abas .contador { font-family: var(--mono); font-size: .76rem; color: var(--texto-3); margin-left: 5px; }

/* Quadro de tarefas */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.coluna { background: var(--superficie-2); border-radius: var(--raio); padding: 10px; min-height: 220px; transition: background var(--transicao); }
.coluna h3 { display: flex; gap: 8px; align-items: center; font-size: .88rem; font-weight: 600; color: var(--texto-2); margin: 2px 2px 10px; }
.coluna .cartao-tarefa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 10px 11px; margin-bottom: 8px; cursor: grab; transition: border-color var(--transicao); }
.coluna .cartao-tarefa:hover { border-color: var(--borda-forte); }
.coluna .cartao-tarefa.arrastando { opacity: .45; }
.coluna.sobre { background: var(--marca-suave); }

/* Texto de publicação: leitura longa, em serifa */
.texto-publicacao {
  white-space: pre-wrap; font-family: var(--serifa); font-size: 1.04rem; line-height: 1.65; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 22px;
  max-height: 64vh; overflow-y: auto; max-width: 78ch;
}
pre.texto-publicacao.mono { font-family: var(--mono); font-size: .84rem; line-height: 1.55; max-width: none; }
.texto-publicacao mark { background: var(--destaque-suave); color: inherit; padding: 0 2px; border-radius: 2px; }

/* Paginação */
.paginacao { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 18px 0 2px; }

/* Entrada */
.tela-login { min-height: 100dvh; display: grid; place-items: center; background: var(--fundo); padding: 16px; }
.tela-login .caixa { width: 100%; max-width: 360px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 30px 28px 26px; }
.tela-login h1 { font-size: 1.65rem; margin-bottom: 4px; }
.tela-login .marca-icone { width: 34px; height: 34px; border-radius: 8px; background: var(--marca-fixa); color: #fff; display: grid; place-items: center; font-family: var(--serifa); font-weight: 600; margin-bottom: 18px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Teclas */
kbd { font-family: var(--mono); font-size: .78rem; border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--superficie-2); color: var(--texto-2); }

/* HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.htmx-swapping { opacity: .6; transition: opacity var(--transicao); }

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

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; z-index: 20; }
  .lateral.aberta { transform: none; }
  .menu-movel { display: inline-flex; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .conteudo { padding: 18px 16px 48px; }
  .topo { padding: 10px 16px; }
  .topo .usuario .rotulo-usuario { display: none; }
  .campo ul.checks, .campo div.checks { columns: 1; }
  h1 { font-size: 1.6rem; }
}