:root {
  --laranja: #F05423; --laranja-esc: #D9461A; --laranja-claro: #FDEDE6;
  --tinta: #22262B; --escuro: #3E464F; --ardosia: #5C6670; --apagado: #8A9099;
  --linha: #E4E4E1; --fundo: #F7F7F5; --card: #FFFFFF;
  --verde: #2E7D5B; --verde-claro: #E7F2EC;
  --vermelho: #C4362B; --vermelho-claro: #FBEAE8;
  --ambar: #B8791C; --ambar-claro: #FBF1E0;
  --azul: #3E6B96; --azul-claro: #E8EFF6;
  --raio: 10px;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinta); background: var(--fundo);
       font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.carregando-tela { display: grid; place-items: center; height: 100%; color: var(--apagado); }
[hidden] { display: none !important; }

/* ---------- Botões e campos ---------- */
.btn { border: 1px solid var(--linha); background: var(--card); padding: 9px 14px; border-radius: 8px; cursor: pointer;
       font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: #cfcfca; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-pri { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.btn-pri:hover { background: var(--laranja-esc); border-color: var(--laranja-esc); }
.btn-esc { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-perigo { color: var(--vermelho); }
.btn-link { background: none; border: none; padding: 0; color: var(--ardosia); text-decoration: underline; cursor: pointer; font-size: 12.5px; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo > label { font-size: 12px; font-weight: 600; color: var(--escuro); }
.campo .ajuda { font-size: 11.5px; color: var(--apagado); }
.inp { width: 100%; border: 1px solid var(--linha); background: #fff; border-radius: 8px; padding: 9px 11px; font-size: 14px; }
.inp:focus { border-color: var(--laranja); outline: none; box-shadow: 0 0 0 3px rgba(240, 84, 35, .14); }
textarea.inp { resize: vertical; min-height: 78px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.erro { background: var(--vermelho-claro); color: var(--vermelho); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.ok-msg { background: var(--verde-claro); color: var(--verde); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }

.seg { display: inline-flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: #fff; flex-wrap: wrap; }
.seg button { border: none; background: none; padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ardosia); border-right: 1px solid var(--linha); }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--tinta); color: #fff; }

/* ---------- Login ---------- */
/* Capa = foto + marca em HTML. A foto pode ser cortada à vontade em qualquer proporção de tela;
   logo, textos e ícones são desenhados por cima (nítidos e sempre no lugar). */
.login { min-height: 100%; position: relative; overflow: hidden; background: #0b1119; display: flex;
         align-items: center; justify-content: flex-end; padding: 24px 1.6vw; --u: min(1vw, 1.78vh); }
.login::before { content: ""; position: absolute; inset: 0; background: url(../img/capa.jpg?v=5) 66% 50% / cover no-repeat; }
/* véu escuro à esquerda: área limpa para a marca (e cobre o texto que vem gravado na foto) */
.login-veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #040b13 0%, #040b13 32%, rgba(4,11,19,.75) 42%, rgba(4,11,19,.3) 52%, rgba(4,11,19,0) 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 84%); mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 84%); }
.login-marca { position: absolute; z-index: 1; left: calc(var(--u) * 4.6); top: calc(var(--u) * 7.5); color: #fff; pointer-events: none; }
.lm-logo { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.lm-logo .s { height: calc(var(--u) * 7.2); width: auto; }
.lm-logo .t { height: calc(var(--u) * 6.1); width: auto; margin-top: calc(var(--u) * -.4); }
.lm-slogan { margin: calc(var(--u) * .9) 0 0 calc(var(--u) * 8.8); font-size: calc(var(--u) * 1.32); font-weight: 400; letter-spacing: .2em; color: rgba(255,255,255,.88); white-space: nowrap; }
.lm-traco { width: calc(var(--u) * 4.2); height: 3px; background: var(--laranja); margin: calc(var(--u) * 3.6) 0 calc(var(--u) * 1.4); border-radius: 2px; }
.lm-titulo { font-size: calc(var(--u) * 2.25); font-weight: 400; letter-spacing: .14em; line-height: 1; }
.lm-pilares { margin-top: calc(var(--u) * 1.15); font-size: calc(var(--u) * .9); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9); white-space: nowrap; }
.lm-pilares b { color: var(--laranja); margin: 0 calc(var(--u) * .9); }
.lm-icones { display: flex; align-items: flex-start; margin-top: calc(var(--u) * 3); }
.lm-icones > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(var(--u) * 1.9); border-left: 1px solid rgba(255,255,255,.35); }
.lm-icones > div:first-child { border-left: none; padding-left: 0; }
.lm-icones svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); color: var(--laranja); margin-bottom: calc(var(--u) * .8); }
.lm-icones span { font-size: calc(var(--u) * .78); font-weight: 600; letter-spacing: .08em; line-height: 1.3; }
/* cartão no lado direito, sobre o painel escuro da foto */
@media (min-width: 861px) {
  .login .login-card { position: absolute; right: 1.6vw; top: 50%; transform: translateY(-50%); }
}
.login-card { position: relative; z-index: 1; width: clamp(300px, 22.5vw, 400px); max-width: 100%; background: rgba(24, 27, 31, .78); backdrop-filter: blur(14px);
              -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
              padding: 34px 30px 26px; color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.login-card h1 { margin: 0 0 4px; font-size: clamp(18px, 1.45vw, 22px); white-space: nowrap; font-weight: 800; letter-spacing: -.01em; }
.login-card .sub { margin: 0 0 24px; color: rgba(255,255,255,.62); font-size: 13px; }
.login-card .campo > label { color: rgba(255,255,255,.8); }
.login-card .inp { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.login-card .inp::placeholder { color: rgba(255,255,255,.4); }
.login-card .btn-pri { width: 100%; justify-content: center; padding: 12px; font-size: 14px; margin-top: 4px; }
.login-card .btn-link { color: rgba(255,255,255,.7); display: block; margin: 14px auto 0; }
.login-card .erro { background: rgba(196, 54, 43, .22); color: #ffd3cd; }
.login-card .ok-msg { background: rgba(46, 125, 91, .25); color: #c9f0dc; }
.login-card .rodape { text-align: center; margin-top: 22px; font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: .08em; }


/* ---------- Estrutura ---------- */
.app { display: flex; height: 100%; }
.side { width: 236px; flex: none; background: var(--tinta); color: #fff; display: flex; flex-direction: column; padding: 20px 14px 14px; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca img { width: 30px; height: auto; }
.marca .g { display: block; font-size: 9.5px; letter-spacing: .28em; color: rgba(255,255,255,.6); }
.marca .r { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.produto { font-size: 12px; color: rgba(255,255,255,.55); padding: 14px 6px 12px; }
.btn-nova { width: 100%; justify-content: center; background: var(--laranja); color: #fff; border: none; padding: 11px; border-radius: 9px; font-weight: 700; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.btn-nova:hover { background: var(--laranja-esc); }
.nav a { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.72); text-decoration: none; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.on { background: rgba(240, 84, 35, .16); color: #fff; box-shadow: inset 3px 0 0 var(--laranja); }
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav .grupo { font-size: 11px; color: rgba(255,255,255,.38); padding: 16px 10px 6px; }
.nav .badge { margin-left: auto; background: rgba(255,255,255,.12); border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.nav .badge.alerta { background: var(--laranja); color: #fff; }
.side-pe { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.side-pe .quem { font-size: 13px; font-weight: 600; padding: 0 6px; }
.side-pe .cargo { font-size: 11.5px; color: rgba(255,255,255,.5); padding: 0 6px 10px; }
.side-pe .acoes { display: flex; gap: 6px; }
.side-pe .acoes button { flex: 1; background: rgba(255,255,255,.08); color: #fff; border: none; border-radius: 7px; padding: 8px; font-size: 12px; cursor: pointer; }
.side-pe .acoes button:hover { background: rgba(255,255,255,.14); }

.main { flex: 1; overflow-y: auto; min-width: 0; }
.pagina { padding: 26px 30px 60px; max-width: 1440px; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.topo h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.topo .desc { color: var(--apagado); font-size: 13px; margin-top: 3px; }
.topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.barra-movel { display: none; }
.fab { display: none; }

/* ---------- Cartões / tabelas ---------- */
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); }
.card-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.card-tit h2 { margin: 0; font-size: 14.5px; font-weight: 700; }
.card-tit .n { color: var(--apagado); font-weight: 500; }
.card-corpo { padding: 16px; }
.tab-wrap { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--apagado); padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; background: #FBFBFA; }
.tab td { padding: 11px 12px; border-bottom: 1px solid #EFEFEC; vertical-align: top; }
.tab tr:last-child td { border-bottom: none; }
.tab tr.clic { cursor: pointer; }
.tab tr.clic:hover td { background: #FAFAF8; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tit-dem { font-weight: 600; }
.cod { color: var(--apagado); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 6px; }
.sub { color: var(--apagado); font-size: 12px; margin-top: 2px; }
.vazio { padding: 36px 16px; text-align: center; color: var(--apagado); }
.vazio .btn { margin-top: 12px; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; background: #EEEEEB; color: var(--escuro); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip.semponto::before { display: none; }
.st-aberta { background: #EEEFF1; color: var(--ardosia); }
.st-andamento { background: var(--azul-claro); color: var(--azul); }
.st-aguardando { background: var(--ambar-claro); color: var(--ambar); }
.st-bloqueada { background: var(--vermelho-claro); color: var(--vermelho); }
.st-concluida { background: var(--verde-claro); color: var(--verde); }
.st-cancelada { background: #F0F0EE; color: var(--apagado); }
.pr-urgente { color: var(--vermelho); font-weight: 700; }
.pr-alta { color: var(--laranja-esc); font-weight: 600; }
.pr-media { color: var(--ardosia); }
.pr-baixa { color: var(--apagado); }
.prazo-atraso { color: var(--vermelho); font-weight: 700; }
.prazo-perto { color: var(--ambar); font-weight: 600; }
.ag { color: var(--ambar); font-weight: 600; }
.tag { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: #F0F0EE; color: var(--escuro); margin: 0 4px 4px 0; }
.tag.laranja { background: var(--laranja-claro); color: var(--laranja-esc); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; cursor: pointer; text-align: left; }
.kpi:hover { border-color: #cfcfca; }
.kpi.on { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--ardosia); font-weight: 600; }
.kpi.alerta .v { color: var(--vermelho); }
.kpi.espera .v { color: var(--ambar); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros .inp { width: auto; min-width: 150px; padding: 8px 10px; font-size: 13px; }
.filtros .busca { min-width: 220px; flex: 1; max-width: 340px; }

/* ---------- Quadro (kanban) ---------- */
.quadro { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.coluna { background: #EFEFEC; border-radius: var(--raio); padding: 10px; min-height: 120px; }
.coluna h3 { margin: 2px 4px 10px; font-size: 12.5px; display: flex; justify-content: space-between; }
.coluna h3 span { color: var(--apagado); font-weight: 600; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: 9px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer; }
.cartao:hover { border-color: #c9c9c4; }
.cartao .t { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.cartao .m { font-size: 12px; color: var(--ardosia); display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cartao .e { font-size: 12px; color: var(--escuro); background: #F6F6F4; border-radius: 6px; padding: 5px 7px; }

/* ---------- Detalhe ---------- */
.det { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.det-cab { padding: 18px 20px; }
.det-cab h1 { margin: 6px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.det-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.det-meta .l { font-size: 11.5px; color: var(--apagado); }
.det-meta .v { font-weight: 600; font-size: 13.5px; }
.onde { margin-top: 14px; background: #F6F6F4; border-radius: 8px; padding: 10px 12px; }
.onde .l { font-size: 11.5px; color: var(--apagado); }
.onde .v { font-weight: 600; }
.obs { white-space: pre-wrap; color: var(--escuro); margin-top: 10px; }
.voltar { font-size: 13px; color: var(--ardosia); text-decoration: none; }
.voltar:hover { color: var(--tinta); }

.acao-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #F0F0ED; }
.acao-item:last-child { border-bottom: none; }
.acao-item input[type=checkbox] { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--verde); flex: none; }
.acao-item .tx { flex: 1; }
.acao-item.feita .ds { color: var(--apagado); text-decoration: line-through; }
.nowrap { white-space: nowrap; }
.so-movel { display: none; }
.lista-cartoes { padding: 10px; }
.lista-cartoes .cartao { margin-bottom: 8px; }
.lista-cartoes .cartao:last-child { margin-bottom: 0; }
.acao-item .x { border: none; background: none; color: var(--apagado); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.acao-nova { display: flex; gap: 8px; margin-top: 10px; }
.progresso { height: 6px; background: #EEEEEB; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.progresso i { display: block; height: 100%; background: var(--verde); }

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 18px 26px; }
.tl li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 1px; background: var(--linha); }
.tl li:last-child::before { display: none; }
.tl .pt { position: absolute; left: 1px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--apagado); }
.tl .pt.st-andamento { border-color: var(--azul); } .tl .pt.st-aguardando { border-color: var(--ambar); }
.tl .pt.st-bloqueada { border-color: var(--vermelho); } .tl .pt.st-concluida { border-color: var(--verde); background: var(--verde); }
.tl .pt.laranja { border-color: var(--laranja); }
.tl .cab { font-size: 13px; }
.tl .cab b { font-weight: 600; }
.tl .quando { font-size: 11.5px; color: var(--apagado); }
.tl .tx { white-space: pre-wrap; margin-top: 5px; background: #F8F8F6; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.tl .info { font-size: 12.5px; color: var(--escuro); margin-top: 4px; }

.painel-atual .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 14px; }
.painel-atual .seg button { border-bottom: 1px solid var(--linha); }
.painel-atual .seg button.on.b-andamento { background: var(--azul); }
.painel-atual .seg button.on.b-aguardando { background: var(--ambar); }
.painel-atual .seg button.on.b-bloqueada { background: var(--vermelho); }
.painel-atual .seg button.on.b-concluida { background: var(--verde); }
.lista-mini { font-size: 13px; }
.lista-mini > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F0F0ED; }
.lista-mini > div:last-child { border-bottom: none; }
.lista-mini .sub { margin: 0; }
.gerir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gerir .btn { justify-content: center; }
.coluna-dir > .card { margin-bottom: 14px; }
.coluna-esq > .card { margin-bottom: 14px; }

/* ---------- Gargalos ---------- */
.barra { height: 8px; background: #F0F0EE; border-radius: 4px; overflow: hidden; min-width: 80px; }
.barra i { display: block; height: 100%; background: var(--ambar); }
.nota-rodape { font-size: 12px; color: var(--apagado); margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mb { margin-bottom: 14px; }

/* ---------- Árvore / ações ---------- */
.arvore { color: var(--azul); }
.caminho { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.caminho a { color: var(--ardosia); text-decoration: none; }
.caminho a:hover { color: var(--tinta); text-decoration: underline; }
.caminho > span { color: var(--apagado); }
.acao-nova-3 { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px auto; }
.acao-item.minha { background: var(--laranja-claro); border-radius: 8px; padding-left: 8px; padding-right: 8px; }

/* ---------- Painel da equipe ---------- */
.kpis-6 { grid-template-columns: repeat(6, 1fr); }
.kpis-6 .kpi { cursor: default; }
.kpis-6 .kpi:hover { border-color: var(--linha); }
.kpis-6 .kpi .v { font-size: 24px; }
.rank { padding-top: 6px; padding-bottom: 6px; }
.rank-l { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid #F0F0ED; cursor: pointer; }
.rank-l:last-child { border-bottom: none; }
.rank-n b { display: block; font-size: 13.5px; }
.rank-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; align-self: center; }
.rank-l .barra { grid-column: 1 / -1; }
.barra.vermelha i { background: var(--vermelho); }
.tab tr.sel td { background: var(--laranja-claro); }
.tab.compacta th { white-space: normal; vertical-align: bottom; }
.tab.compacta th, .tab.compacta td { padding-left: 8px; padding-right: 8px; }
.tab td.cron b { font-variant-numeric: tabular-nums; }

/* ---------- Calendário ---------- */
.cal-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.cal-cab b { font-size: 15px; min-width: 150px; text-align: center; }
.cal-cab .sub { margin-left: auto; }
.cal-sem { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--linha); }
.cal-sem div { padding: 7px 8px; font-size: 11.5px; font-weight: 600; color: var(--apagado); }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dia { min-height: 112px; border-right: 1px solid #EFEFEC; border-bottom: 1px solid #EFEFEC; padding: 6px; display: flex; flex-direction: column; min-width: 0; }
.cal-dia:nth-child(7n) { border-right: none; }
.cal-dia.fds { background: #FBFBFA; }
.cal-dia.fora { background: #F7F7F5; }
.cal-dia.fora .n { color: #C2C5C9; }
.cal-dia .n { font-size: 12px; font-weight: 600; color: var(--ardosia); margin-bottom: 4px; display: flex; justify-content: space-between; }
.cal-dia .n span { color: var(--apagado); font-weight: 500; }
.cal-dia.hoje .n { color: var(--laranja); }
.cal-dia.hoje { box-shadow: inset 0 0 0 2px var(--laranja); }
.cal-dia .itens { overflow-y: auto; max-height: 120px; }
.cal-item { font-size: 11.5px; padding: 3px 6px; border-radius: 5px; margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid currentColor; }
.cal-item b { font-weight: 700; }
.cal-item:hover { filter: brightness(.96); }
.cal-item.atraso { background: var(--vermelho-claro); color: var(--vermelho); }
.ag-dia { padding: 10px 0; border-bottom: 1px solid #F0F0ED; }
.ag-data { font-size: 12px; font-weight: 700; color: var(--ardosia); margin-bottom: 6px; }
.ag-data.hoje { color: var(--laranja); }
.ag-dia .cal-item { white-space: normal; font-size: 13px; padding: 6px 8px; }

/* ---------- Admin ---------- */
.perm-lista label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #F0F0ED; cursor: pointer; }
.perm-lista label:last-child { border-bottom: none; }
.perm-lista input { margin-top: 3px; accent-color: var(--laranja); width: 16px; height: 16px; }
.perm-lista b { display: block; font-size: 13px; }
.perm-lista span { font-size: 12px; color: var(--apagado); }
.escolha { border: 1px solid var(--linha); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.escolha label { display: flex; gap: 9px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #F2F2EF; cursor: pointer; font-size: 13px; }
.escolha label:last-child { border-bottom: none; }
.escolha input { accent-color: var(--laranja); }
.escolha .sub { margin: 0 0 0 auto; }
.grupo-card { padding: 16px; }
.grupo-card h3 { margin: 0 0 4px; font-size: 15px; }
.grupo-card .l { font-size: 11.5px; color: var(--apagado); margin: 10px 0 4px; }
.grupos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.inativo td { color: var(--apagado); }

/* ---------- Modal / toast ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(20, 22, 25, .5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 50; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; width: 520px; max-width: 100%; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.modal.largo { width: 760px; }
.modal-cab { padding: 16px 20px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; }
.modal-cab h2 { margin: 0; font-size: 16px; }
.modal-cab button { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--apagado); }
.modal-corpo { padding: 18px 20px; }
.modal-pe { padding: 14px 20px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 8px; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 9px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: .2s; z-index: 80; max-width: 90vw; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.erro { background: var(--vermelho); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .det { grid-template-columns: 1fr; }
  .kpis, .kpis-6 { grid-template-columns: repeat(3, 1fr); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .app.menu-aberto .side { transform: none; }
  .barra-movel { display: flex; align-items: center; gap: 12px; background: var(--tinta); color: #fff; padding: 12px 16px; flex: none; }
  .barra-movel button { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; }
  .barra-movel img { width: 22px; }
  .barra-movel b { font-size: 15px; }
  .pagina { padding: 18px 16px 90px; }
  .kpis, .kpis-6 { grid-template-columns: repeat(2, 1fr); }
  .linha2, .linha3, .acao-nova-3 { grid-template-columns: 1fr; }
  .fab { display: grid; place-items: center; position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: var(--laranja); color: #fff; border: none; font-size: 28px; box-shadow: 0 10px 24px rgba(240,84,35,.4); z-index: 30; cursor: pointer; }
  .login { justify-content: center; }
  .login-marca, .login-veu { display: none; }
  .login-card { width: 100%; max-width: 400px; }
  .esconde-movel { display: none; }
  .so-movel { display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Tela de senha (diferente do login de propósito) ---------- */
.senha-tela { min-height: 100%; position: relative; display: grid; place-items: center; padding: 32px 16px; background: #121417; overflow: hidden; }
.senha-tela::before { content: ""; position: absolute; inset: -30px; background: url(../img/capa.jpg?v=5) center / cover no-repeat; filter: blur(14px) brightness(.35); }
.senha-card { position: relative; width: 420px; max-width: 100%; background: #fff; color: var(--tinta); border-radius: 14px; padding: 34px 32px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.45); overflow: hidden; text-align: left; }
.senha-faixa { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--laranja); }
.senha-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--laranja-claro); color: var(--laranja); display: grid; place-items: center; margin-bottom: 14px; }
.senha-ic svg { width: 26px; height: 26px; }
.senha-card h1 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.senha-ctx { font-size: 13.5px; color: var(--ardosia); margin-bottom: 14px; }
.senha-quem { font-size: 13px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 11px; margin-bottom: 16px; }
.senha-req { list-style: none; padding: 0; margin: 2px 0 16px; font-size: 12.5px; color: var(--apagado); }
.senha-req li { padding: 3px 0 3px 22px; position: relative; }
.senha-req li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #C9CCD0; }
.senha-req li.ok { color: var(--verde); font-weight: 600; }
.senha-req li.ok::before { background: var(--verde); border-color: var(--verde); }
.senha-card .btn-pri { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
.senha-card .btn-pri:disabled { background: #F4A486; border-color: #F4A486; cursor: not-allowed; opacity: 1; }
.senha-card .btn-link { display: block; margin: 14px auto 0; }

/* ---------- Vencimentos ---------- */
.kpi.venc .v { color: var(--azul); }
.kpi.venc.perto .v { color: var(--ambar); }
.kpi-extra { font-size: 11.5px; color: var(--apagado); margin-top: 2px; }
.venc-resumo { font-size: 13px; color: var(--ardosia); margin-bottom: 12px; }
.venc-dia { margin-bottom: 14px; }
.venc-data { font-size: 12px; font-weight: 700; color: var(--escuro); text-transform: capitalize; padding: 6px 0; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.venc-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.venc-item:hover { background: var(--fundo); }
.venc-item.acao { border-left: 3px solid var(--laranja); }
.venc-t { font-size: 13.5px; font-weight: 600; min-width: 0; }
.venc-t .tag { margin-right: 6px; }
.venc-m { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ardosia); white-space: nowrap; }

/* ---------- Equipes e hierarquia ---------- */
.eq-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.eq-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 20px; padding: 5px 6px 5px 12px; font-weight: 600; font-size: 13px; }
.eq-chip .sub { margin: 0; font-weight: 500; }
.eq-chip .x { border: none; background: none; color: var(--apagado); cursor: pointer; font-size: 14px; padding: 0 4px; }
.eq-chip .x:hover { color: var(--tinta); }
.org { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.org-raiz { padding-left: 0; }
.org .org .org-no { position: relative; }
.org .org .org-no::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; border-left: 1px solid #D5D7DA; }
.org .org .org-no:last-child::before { bottom: auto; height: 28px; }
.org .org .org-no::after { content: ""; position: absolute; left: -16px; top: 28px; width: 12px; border-top: 1px solid #D5D7DA; }
.org-linha { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; margin: 6px 0; flex-wrap: wrap; }
.org-no.fora > .org-linha { opacity: .5; }
.org-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: none; background: var(--apagado); }
.org-av.c1 { background: var(--laranja); } .org-av.c2 { background: #C2410C; } .org-av.c3 { background: var(--azul); } .org-av.c4 { background: var(--escuro); } .org-av.c5 { background: var(--ardosia); } .org-av.c6 { background: var(--apagado); }
.org-quem { flex: 1; min-width: 180px; }
.org-quem b { font-size: 13.5px; }
.org-campo { display: flex; flex-direction: column; font-size: 11px; color: var(--apagado); font-weight: 600; gap: 2px; }
.org-campo .inp { padding: 5px 8px; font-size: 12.5px; width: 210px; }

.org-soltos { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.org-tit { font-size: 13px; font-weight: 700; margin-bottom: 4px; }

.eq-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.eq-togs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.eq-tog { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: #fff; border-radius: 16px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ardosia); cursor: pointer; }
.eq-tog input { accent-color: var(--laranja); margin: 0; }
button.eq-tog.on { background: var(--laranja-claro); border-color: #F6B79F; color: var(--laranja-esc); }

/* ---------- Pausa / cancelada / resposta ---------- */
.st-pausada { background: #EFEAF7; color: #6B4FA0; }
.tl .pt.st-pausada { border-color: #6B4FA0; }
.kpi.pausa .v { color: #6B4FA0; }
.kpi.cancel .v { color: var(--apagado); }
.kpis-8 { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 1500px) { .kpis-8 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .kpis-8 { grid-template-columns: repeat(2, 1fr); } }
.pausa-aviso { background: #F4F0FA; }
.pausa-aviso .v { color: #6B4FA0; font-weight: 600; }
.card.destaque { border-color: #F2B48F; box-shadow: 0 0 0 3px rgba(240,84,35,.10); }
.quadro { grid-template-columns: repeat(6, minmax(210px, 1fr)); }

/* ---------- Por quais mãos passou ---------- */
.maos { list-style: none; margin: 0; padding: 0; }
.maos li { position: relative; padding: 0 0 14px 24px; font-size: 13px; }
.maos li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; border-left: 2px solid var(--linha); }
.maos li:last-child { padding-bottom: 0; }
.maos li:last-child::before { display: none; }
.maos .mp { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--apagado); }
.maos li.atual .mp { background: var(--laranja); border-color: var(--laranja); }
.maos li.volta .mp { border-color: #6B4FA0; }
.maos b { font-weight: 600; }
.org-av.c7 { background: #A3A9B0; }

/* ---------- Cargos e níveis ---------- */
.niveis { margin-bottom: 14px; }
.nivel-l { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #ECECE8; }
.nivel-l:last-child { border-bottom: none; }
.nivel-n { width: 64px; flex: none; font-size: 12px; font-weight: 700; color: var(--apagado); }
.nivel-c { display: flex; flex-wrap: wrap; gap: 6px; }
.cargo-novo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; max-width: 860px; }
.org-av.c8, .org-av.c9 { background: #B5BAC0; }

/* ---------- Vários superiores ---------- */
.sup-lista { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 340px; }
.sup-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 14px; padding: 3px 4px 3px 10px; font-size: 12px; font-weight: 600; color: var(--escuro); }
.sup-chip .sub { margin: 0; font-weight: 500; }
.sup-chip .x { border: none; background: none; color: var(--apagado); cursor: pointer; padding: 0 4px; font-size: 14px; }
.org-tambem { margin: -2px 0 4px 56px; color: var(--azul); }