:root {
  /* Identidade Young Empreendimentos */
  --fundo: #E4E2DE; --painel: #F4F3F0; --painel-2: #FAF9F7; --texto: #0D0D0D; --texto2: #323232; --suave: #5C5A55;
  --borda: #D5D1C9; --borda2: #E5E2DB;
  --marca: #FE5009; --marca-escura: #B23600; --marca-suave: #FFF0EB;
  --grafite: #0D0D0D; --grafite2: #262524;
  --ok: #0E8A5F; --ok-fundo: #DFF3EA; --aviso: #B4690A; --aviso-fundo: #FBEFD6; --perigo: #C42B1C; --perigo-fundo: #FBE7E4; --info: #2563B8; --info-fundo: #E6EEFA;
  --f1: #0E8A5F; --f2: #C98A00; --f3: #FE5009; --f4: #C42B1C;
  --sombra: 0 1px 2px rgba(13,13,13,.06), 0 3px 10px rgba(13,13,13,.05);
  --raio: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--fundo); }
a { color: var(--marca-escura); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 0 0 14px; }
.container { width: 100%; margin: 0 auto; padding: 0 28px; }
.texto-suave { color: var(--suave); } .perigo { color: var(--perigo); } .forte { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- topo ---------- */
.topo { background: var(--grafite); color: #fff; }
.topo__linha { display: flex; align-items: center; gap: 28px; height: 60px; }
.marca { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; font-size: 17px; }
.marca:hover { text-decoration: none; }
.marca img { height: 30px; }
.marca span::before { content: ''; display: inline-block; width: 1px; height: 22px; background: #ffffff33; margin: 0 14px 0 2px; vertical-align: -5px; }
.menu { display: flex; gap: 2px; flex: 1; }
.menu a { padding: 9px 14px; border-radius: 8px; color: #d1d5db; font-weight: 500; }
.menu a:hover { background: var(--grafite2); color: #fff; text-decoration: none; }
.menu a.ativo { background: var(--marca); color: #fff; }
.topo__usuario { display: flex; align-items: center; gap: 12px; color: #d1d5db; }
.topo__usuario .btn--leve { background: transparent; color: #fff; border-color: #ffffff33; }
.topo__usuario .btn--leve:hover { background: var(--grafite2); }
main.container { padding-top: 28px; padding-bottom: 48px; }
.rodape { padding: 8px 24px 28px; color: var(--suave); font-size: 12.5px; }

/* ---------- botões, tags, alertas ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--marca); border-radius: 9px; background: var(--marca); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn:hover { background: var(--marca-escura); text-decoration: none; box-shadow: 0 2px 8px rgba(242,101,34,.3); }
.btn--leve { background: var(--painel); color: var(--texto2); border-color: var(--borda); } .btn--leve:hover { background: var(--fundo); box-shadow: none; }
.btn--pequeno { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.chip--aberto { background: var(--info-fundo); color: var(--info); }
.chip--ok { background: var(--ok-fundo); color: var(--ok); }
.chip--conf { background: var(--aviso-fundo); color: var(--aviso); }
.btn--whats { background: #25D366; border-color: #25D366; color: #0b3d24; }
.btn--whats:hover { background: #1EBE5A; border-color: #1EBE5A; box-shadow: 0 2px 8px rgba(37,211,102,.35); }
.btn--google { width: 100%; justify-content: center; background: #fff; color: var(--texto); border-color: var(--borda); padding: 11px; }
.btn--google:hover { background: var(--fundo); box-shadow: none; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f3; color: var(--texto2); white-space: nowrap; }
.tag--ok { background: var(--ok-fundo); color: var(--ok); } .tag--aviso { background: var(--aviso-fundo); color: var(--aviso); }
.tag--info { background: var(--info-fundo); color: var(--info); } .tag--perigo { background: var(--perigo-fundo); color: var(--perigo); }
.tag--marca { background: var(--marca-suave); color: var(--marca-escura); }

.alerta { padding: 12px 16px; border-radius: 10px; margin: 0 0 18px; background: var(--info-fundo); color: var(--info); font-weight: 500; }
.alerta--success { background: var(--ok-fundo); color: var(--ok); } .alerta--warning { background: var(--aviso-fundo); color: var(--aviso); }
.alerta--danger { background: var(--perigo-fundo); color: var(--perigo); } .alerta--info { background: var(--info-fundo); color: var(--info); }

/* ---------- cabeçalho de página ---------- */
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.cabecalho-pagina p { margin: 0; }
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13.5px; margin-bottom: 14px; }
.etiquetas { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- resumo (KPIs) ---------- */
.resumo { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.cartao { background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; }
.cartao__rotulo { font-size: 12.5px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.cartao__valor { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; line-height: 1.15; }
.cartao__sub { font-size: 13px; color: var(--suave); }
.cartao--marca { background: var(--grafite); color: #fff; }
.cartao--marca .cartao__rotulo { color: #9ca3af; } .cartao--marca .cartao__sub { color: #9ca3af; }
.cartao--marca .cartao__valor { color: #fff; }
.barra-faixas { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 14px 0 10px; background: #ffffff22; }
.barra-faixas span { display: block; height: 100%; }
.faixas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.faixa-cartao { display: block; background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px 14px 18px; color: var(--texto); border-left: 5px solid var(--borda); transition: transform .12s, box-shadow .12s; }
.faixa-cartao:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17,24,39,.09); }
.faixa-cartao--1 { border-left-color: var(--f1); } .faixa-cartao--2 { border-left-color: var(--f2); } .faixa-cartao--3 { border-left-color: var(--f3); } .faixa-cartao--4 { border-left-color: var(--f4); }
.faixa-cartao--ativo { outline: 2px solid var(--marca); outline-offset: 1px; }
.faixa-cartao .cartao__valor { font-size: 24px; }
.faixa-cartao .n { font-weight: 700; } .faixa-cartao .v { font-size: 13px; color: var(--suave); }
.cor-1 { background: var(--f1); } .cor-2 { background: var(--f2); } .cor-3 { background: var(--f3); } .cor-4 { background: var(--f4); }

/* ---------- filtros ---------- */
/* cabeçalho de página */
.pagina-cabecalho { margin-bottom: 20px; }
.pagina-cabecalho h1 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.pagina-cabecalho__sub { margin: 5px 0 0; color: var(--suave); font-size: 13.5px; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros input, .filtros select {
  height: 40px; padding: 0 13px; border: 1px solid var(--borda); border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 500; background: var(--painel); color: var(--texto);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.filtros input::placeholder { color: var(--suave); font-weight: 400; }
.filtros input:hover, .filtros select:hover { border-color: var(--suave); }
.filtros input:focus, .filtros select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); background: #fff; }
/* seta própria nos selects (sem o visual nativo) */
.filtros select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 34px;
  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='%235C5A55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* campo de busca com lupa */
.filtros input[type=search] {
  min-width: 260px; flex: 1 1 260px; padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center;
}
.filtros input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.filtros .btn { height: 40px; }
.filtros .espaco { flex: 1; }
.contagem { display: flex; justify-content: space-between; align-items: center; color: var(--suave); font-size: 13.5px; margin: 0 4px 10px; }

/* ---------- tabelas ---------- */
.tabela-rolagem { background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.tabela { width: 100%; border-collapse: collapse; table-layout: auto; }
.tabela th, .tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda2); text-align: left; vertical-align: middle; }
.tabela .nowrap { white-space: nowrap; }
.tabela .sub { display: block; font-size: 12.5px; color: var(--suave); font-weight: 400; }
.tabela th { font-size: 12px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--painel-2); position: sticky; top: 0; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; }
.tabela--compacta th, .tabela--compacta td { padding: 8px 14px; font-size: 13.5px; }
.linha-link { cursor: pointer; transition: background .1s; } .linha-link:hover { background: var(--marca-suave); }
.vazio { text-align: center; color: var(--suave); padding: 40px; }
tr.vencida td { background: #F7E9E5; } tr.vencida td:first-child { box-shadow: inset 4px 0 0 var(--perigo); }
tr.paga td { color: var(--suave); }
.acoes { display: flex; gap: 6px; } .acoes form { display: inline; }

.pessoa { display: flex; align-items: center; gap: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-escura); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar--grande { width: 56px; height: 56px; font-size: 18px; }
.pessoa__nome { font-weight: 600; color: var(--texto); display: block; line-height: 1.25; }
.pessoa__sub { font-size: 12.5px; color: var(--suave); }
.linha-link:hover .pessoa__nome { color: var(--marca-escura); }

.pilula { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.pilula--1 { background: var(--ok-fundo); color: var(--f1); } .pilula--2 { background: var(--aviso-fundo); color: var(--aviso); } .pilula--3 { background: var(--marca-suave); color: var(--f3); } .pilula--4 { background: var(--perigo-fundo); color: var(--f4); }

/* ---------- detalhe ---------- */
.heroi { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.heroi__texto { flex: 1; min-width: 260px; }
.heroi__texto p { margin: 2px 0 0; color: var(--suave); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.kpi__rotulo { font-size: 12.5px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.kpi__valor { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.kpi__sub { font-size: 12.5px; color: var(--suave); }
.kpi--destaque { border-left: 5px solid var(--marca); }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; }
.painel { background: var(--painel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 14px; }
.painel + .painel { margin-top: 0; }
.dados { display: grid; grid-template-columns: 150px 1fr; gap: 9px 14px; margin: 0; font-size: 14.5px; }
.dados dt { color: var(--suave); } .dados dd { margin: 0; color: var(--texto); }
.dados + h2 { margin-top: 22px; }
.painel__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.painel__topo h2 { margin: 0; }
.link-suave { font-size: 13px; color: var(--suave); cursor: pointer; }
.paga-oculta tr.paga { display: none; }

/* ---------- login ---------- */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--grafite); }
.cartao-login { background: var(--painel); border-radius: 16px; padding: 36px; width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cartao-login__logo { height: 48px; margin-bottom: 14px; } .cartao-login h1 { margin-bottom: 2px; } .cartao-login .btn { margin-top: 22px; }
.rodape-login { font-size: 12.5px; margin-top: 18px; }

@media (max-width: 900px) { .resumo { grid-template-columns: 1fr; } .faixas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .container { padding: 0 14px; } .dados { grid-template-columns: 1fr; } .topo__linha { gap: 12px; } .menu a { padding: 8px 10px; } h1 { font-size: 22px; } .cartao__valor { font-size: 24px; } }

/* ---------- kanban ---------- */
.filtros--inline { margin: 0; padding: 8px 10px; }
.quadro { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.coluna { background: #DBD7CF; border-radius: var(--raio); padding: 10px; min-height: 300px; flex: 1 0 240px; min-width: 240px; }
.coluna__topo { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px 10px; }
.coluna__titulo { font-weight: 700; font-size: 13px; line-height: 1.25; }
.coluna__meta { font-size: 11.5px; color: var(--suave); }
.coluna--1 .coluna__titulo { color: var(--f1); } .coluna--2 .coluna__titulo { color: var(--f2); } .coluna--3 .coluna__titulo { color: var(--f3); } .coluna--4 .coluna__titulo { color: var(--f4); } .coluna--5 .coluna__titulo { color: var(--ok); }
.coluna__cards { display: flex; flex-direction: column; gap: 8px; }
.coluna__vazia { text-align: center; color: var(--suave); font-size: 13px; padding: 20px 0; }
.card { display: block; background: var(--painel-2); border-radius: 10px; padding: 12px 13px; box-shadow: 0 1px 2px rgba(17,24,39,.06); color: var(--texto); border: 1px solid transparent; transition: box-shadow .12s, border-color .12s; }
.card:hover { text-decoration: none; border-color: var(--marca); box-shadow: 0 4px 14px rgba(17,24,39,.1); }
.card__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card__nome { font-weight: 600; line-height: 1.25; }
.card__sub { font-size: 12.5px; color: var(--suave); margin: 2px 0 8px; }
.card__linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin-top: 4px; flex-wrap: wrap; }
.card__aviso { margin-top: 6px; font-size: 12px; color: var(--aviso); background: var(--aviso-fundo); border-radius: 6px; padding: 4px 8px; }
.card__rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda2); font-size: 12px; }
.avatar--mini { width: 24px; height: 24px; font-size: 11px; }
@media (max-width: 1100px) { .quadro:not(.quadro--largo) { grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; } }

/* ---------- ciclo ---------- */
.etapas { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.etapa { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--painel); border-radius: 999px; font-size: 13px; color: var(--suave); box-shadow: var(--sombra); }
.etapa__n { width: 22px; height: 22px; border-radius: 50%; background: var(--borda2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.etapa--feita { color: var(--ok); } .etapa--feita .etapa__n { background: var(--ok-fundo); color: var(--ok); }
.etapa--atual { color: #fff; background: var(--marca); font-weight: 600; } .etapa--atual .etapa__n { background: #fff; color: var(--marca); }
.colunas--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .colunas--2-1 { grid-template-columns: 1fr; } }
.painel--etapa { border-left: 5px solid var(--marca); }
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: end; }
.form-grade label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.form-grade label.check, .check { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 14px; }
.form-grade input, .form-grade select, .form-grade textarea, .form-evento select, .form-evento input, .form-evento textarea, .linha-form select {
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: 14px; background: var(--painel-2); color: var(--texto); width: 100%; }
.form-grade textarea, .form-evento textarea { resize: vertical; }
/* checkbox/radio não são campos de texto: não esticar nem colocar borda */
.form-grade input[type=checkbox], .form-grade input[type=radio], .check input[type=checkbox], .check input[type=radio],
.check-grupo input[type=checkbox], .check-grupo input[type=radio] {
  width: auto; flex: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  accent-color: var(--marca); width: 16px; height: 16px; cursor: pointer;
}
.form-grade label.check, .check { cursor: pointer; }
/* selects dos formulários com a mesma seta dos filtros (sem o visual nativo) */
.form-grade select, .form-evento select, .linha-form select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 32px;
  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='%235C5A55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.form-grade .btn, .form-grade .check-grupo, .form-grade label:has(textarea) { grid-column: 1 / -1; }
.form-grade .btn { justify-self: start; }
.check-grupo { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--suave); }
.linha-form { display: flex; gap: 8px; } .linha-botoes { display: flex; gap: 8px; margin-bottom: 8px; }
.form-evento { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.form-evento .linha-form select { flex: 1; } .form-evento .linha-form input { width: 170px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.evento { display: grid; grid-template-columns: 120px 110px 1fr; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--borda2); font-size: 14px; }
.evento__quando { color: var(--suave); font-size: 12.5px; } .evento__quem { font-weight: 600; font-size: 13px; }
.evento--sistema .evento__corpo { color: var(--suave); font-style: italic; }
.evento__corpo .tag { margin-right: 4px; }
.lista-anexos { list-style: none; margin: 0; padding: 0; } .lista-anexos li { padding: 6px 0; border-top: 1px solid var(--borda2); } .lista-anexos li:first-child { border-top: 0; }
.lista-anexos .sub { display: block; font-size: 12px; color: var(--suave); }
.tabela--limpa { box-shadow: none; } .tabela--limpa td { padding: 6px 4px; }
@media (max-width: 640px) { .form-grade { grid-template-columns: 1fr; } .evento { grid-template-columns: 1fr; } }

.card__aviso--andamento { color: var(--info); background: var(--info-fundo); }
.card__aviso--atencao { color: #92400e; background: #fef3c7; }        /* sem parcela vencida — revisar e encaminhar */
.pilula--revisar { background: #fef3c7; color: #92400e; }             /* idem, na pílula do topo */

.linha-tempo--limite .evento--extra { display: none; }

/* ---------- ajustes de organização (28/09) ---------- */
.dados--compacta { grid-template-columns: 90px 1fr; gap: 5px 12px; font-size: 13.5px; }
.painel__acoes { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda2); flex-wrap: wrap; }
.painel__acoes form { display: inline; }
button.link-suave { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.form-grade--1 { grid-template-columns: 1fr; }
.tag--legado { background: #ede9fe; color: #6d28d9; }
.tag--andamento { background: #e0f2fe; color: #075985; }
/* Tags/pílulas DENTRO do card podem quebrar linha e nunca estouram a largura do card
   (ex.: "Aguardando pagamento", "Cancelar protocolo na ONR" no kanban estreito). */
.card { overflow: hidden; }
.card .tag { white-space: normal; max-width: 100%; }
.card__linha > * { min-width: 0; max-width: 100%; }
.card__linha .tag { align-items: flex-start; text-align: left; line-height: 1.3; }
/* recolher/expandir coluna do kanban */
.coluna__topo { user-select: none; }
.coluna--recolhida .coluna__cards { display: none; }
.coluna--recolhida { flex: 0 0 46px !important; min-width: 46px !important; align-self: flex-start; }
.coluna--recolhida .coluna__nome, .coluna--recolhida .coluna__meta { display: none; }
.coluna--recolhida .coluna__topo { padding: 4px 6px; }
.coluna--recolhida .coluna__topo::after { content: '▸'; margin-left: 6px; color: var(--suave); }
.coluna:not(.coluna--recolhida) .coluna__topo::after { content: '▾'; margin-left: 6px; color: var(--suave); }
.sigla-emp { font-weight: 700; color: var(--texto2); letter-spacing: .3px; }
.card--prazo90 { border-color: var(--perigo, #d92d20); box-shadow: 0 0 0 1px var(--perigo, #d92d20) inset; }
/* Setas ‹ › para caminhar entre as etapas do kanban (quando o quadro é mais largo que a tela) */
.quadro-nav { position: fixed; top: 52%; transform: translateY(-50%); z-index: 60; width: 44px; height: 44px;
  border-radius: 999px; border: 1px solid var(--linha, #d8d5d0); background: #fff; color: var(--texto2);
  box-shadow: 0 3px 12px rgba(17,24,39,.18); font-size: 26px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0 0 3px; }
.quadro-nav--esq { left: 10px; } .quadro-nav--dir { right: 10px; }
.quadro-nav:hover { border-color: var(--marca); color: var(--marca); box-shadow: 0 4px 16px rgba(17,24,39,.24); }
@media (max-width: 700px) { .quadro-nav { width: 38px; height: 38px; font-size: 22px; } }
.impugnacao-item { border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.impugnacao-item--aberta { border-color: var(--aviso); background: var(--aviso-fundo); }  /* andamento atual / negociação (ex.: aguardando pagamento, em renegociação) */
.evento--adimpla .evento__corpo { opacity: .92; }
.linha-tempo .evento:first-child { border-top: 0; }
details > summary { cursor: pointer; }

.faixa-adimpla { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--texto2); }

/* ---------- kanban registrado (9 colunas) ---------- */
.quadro--largo .coluna { flex: 0 0 235px; min-width: 235px; }
.etapas--largo { overflow-x: auto; }
.sub-titulo { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: 18px 0 8px; }


/* ---------- trilha de passos (ciclo registrado) ---------- */
.trilha { list-style: none; margin: 0 0 14px; padding: 0; }
.passo { display: grid; grid-template-columns: 34px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.passo:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 30px; bottom: -2px; width: 2px; background: var(--borda); }
.passo__marca { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; z-index: 1; border: 2px solid var(--borda); background: var(--painel); color: var(--suave); }
.passo--feito > .passo__marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.passo--atual > .passo__marca { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 0 0 4px var(--marca-suave); }
.passo__corpo { padding-top: 4px; min-width: 0; }
.passo__cabeca { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.passo__titulo { font-weight: 600; font-size: 15px; }
.passo--pendente .passo__titulo { color: var(--suave); font-weight: 500; }
.passo__resumo { font-size: 13px; color: var(--ok); }
/* Cartão da meta semanal (home + página de parados) */
.meta-semanal { margin: 0 0 18px; }
.meta-card { display: block; text-decoration: none; color: inherit; border-radius: 14px; padding: 16px 20px; border: 1px solid var(--borda); background: var(--painel); box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s; }
a.meta-card:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.meta-card--ok { border-left: 5px solid var(--ok); }
.meta-card--alerta { border-left: 5px solid var(--perigo); }
.meta-card__topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-card__rotulo { font-weight: 600; font-size: 14px; color: var(--texto2, var(--suave)); }
.meta-card__status { font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; color: #fff; text-transform: uppercase; letter-spacing: .3px; }
.meta-card--ok .meta-card__status { background: var(--ok); }
.meta-card--alerta .meta-card__status { background: var(--perigo); }
.meta-card__numero { margin: 8px 0 2px; font-size: 34px; font-weight: 800; line-height: 1; }
.meta-card--ok .meta-card__numero .num { color: var(--ok); }
.meta-card--alerta .meta-card__numero .num { color: var(--perigo); }
.meta-card__alvo { font-size: 15px; font-weight: 600; color: var(--suave); }
.meta-card__sub { font-size: 12.5px; color: var(--texto2, var(--suave)); margin-top: 2px; }
.card__resp { cursor: pointer; }
.card__resp:hover { outline: 2px solid var(--marca); outline-offset: 1px; }
.cartao--link { text-decoration: none; color: inherit; display: block; }
.cartao__valor.valor-ok { color: var(--ok); }
.cartao__valor.valor-alerta { color: var(--perigo); }
.filtro-ativo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--texto2, var(--suave)); }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--painel); border: 1px solid var(--borda); font-weight: 600; }
.chip-filtro a { text-decoration: none; color: var(--suave); font-weight: 700; }
.chip-filtro a:hover { color: var(--perigo); }
/* "?" de ajuda por etapa — o que é e o que falta para a próxima (popover, sem empurrar o layout) */
.passo__ajuda { position: relative; display: inline-flex; align-self: center; }
.passo__ajuda > summary { list-style: none; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--borda); color: var(--texto2, var(--suave)); font-size: 11px; font-weight: 700; line-height: 1; user-select: none; transition: background .15s, color .15s; }
.passo__ajuda > summary::-webkit-details-marker { display: none; }
.passo__ajuda > summary::marker { content: ''; }
.passo__ajuda > summary:hover, .passo__ajuda[open] > summary { background: var(--marca); color: #fff; }
.passo__ajuda-texto { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(330px, 78vw); padding: 10px 12px; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--texto2, var(--suave)); }
.passo__form { margin-top: 12px; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; box-shadow: var(--sombra); }
.passo__form .texto-suave { margin: 0 0 12px; }
.passo--atual .passo__form { border-color: var(--marca); }
.desvios { margin-top: 12px; border-top: 1px solid var(--borda2); padding-top: 10px; }

/* ============ responsivo ============ */
@media (max-width: 820px) {
  .topo__linha { height: auto; flex-wrap: wrap; padding: 8px 0; gap: 8px 14px; }
  .marca { order: 1; }
  .topo__usuario { order: 2; margin-left: auto; }
  .menu { order: 3; flex: 1 0 100%; width: 100%; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
  .menu a { white-space: nowrap; }
  .marca span::before { display: none; }
  .cabecalho-pagina { flex-direction: column; align-items: stretch; }
  .cabecalho-pagina form, .cabecalho-pagina .btn { width: 100%; justify-content: center; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros input, .filtros select, .filtros .btn { width: 100%; min-width: 0; flex-basis: auto; }
  .filtros--inline { flex-direction: row; flex-wrap: wrap; }
  .resumo { grid-template-columns: 1fr; }
  .faixas { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi--destaque { grid-column: 1 / -1; }
  .colunas, .colunas--2-1 { grid-template-columns: 1fr; }
  /* kanban: colunas viram faixas roláveis lado a lado */
  .quadro, .quadro--largo { scroll-snap-type: x proximate; -webkit-overflow-scrolling: touch; }
  .coluna, .quadro--largo .coluna { flex: 0 0 82%; min-width: 82%; scroll-snap-align: start; }
  .coluna--recolhida, .quadro--largo .coluna--recolhida { flex: 0 0 46px !important; min-width: 46px !important; }
  h1 { font-size: 20px; }
  .cartao__valor { font-size: 22px; }
  /* tabela larga: cada linha vira um cartão */
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td { display: block; width: 100%; }
  .tabela--cartoes tr { border-bottom: 8px solid var(--fundo); padding: 6px 4px; }
  .tabela--cartoes td { border: 0; padding: 3px 12px; text-align: left !important; }
  .tabela--cartoes td::before { content: attr(data-rot); display: inline-block; min-width: 120px; color: var(--suave); font-size: 12px; }
}
@media (max-width: 460px) {
  .faixas, .kpis { grid-template-columns: 1fr; }
  .coluna, .quadro--largo .coluna { flex-basis: 90%; min-width: 90%; }
  .evento { grid-template-columns: 1fr; gap: 2px; }
  .dados { grid-template-columns: 1fr; }
}

/* Mini-tabela de prévia (definição de valores do leilão) */
.mini-tabela{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.mini-tabela td{padding:7px 10px;border-bottom:1px solid var(--linha,#e6e4e0)}
.mini-tabela td:last-child{text-align:right;white-space:nowrap}
.mini-tabela tr:last-child td{border-bottom:0}

/* Zona de colar print / arrastar imagem */
.zona-print{border:1.5px dashed var(--linha,#d8d5d0); border-radius:12px; padding:12px 14px; font-size:13px;
  color:var(--texto2); background:var(--painel2,#fbfaf8); cursor:pointer; outline:none; transition:border-color .15s, background .15s;}
.zona-print:focus,.zona-print--hover{border-color:var(--marca,#fe5009); background:#fff;}
.zona-print--ok{border-style:solid; border-color:var(--ok,#2e7d57);}
.zona-print i{color:var(--marca,#fe5009); margin-right:4px;}
.zona-print__preview{margin-top:8px;}
.zona-print__preview img{max-height:120px; border-radius:8px; display:block;}

/* Documentos por etapa (Fase 3B): widget compacto dentro de cada etapa */
.anexos-etapa{margin-top:10px; border-top:1px dashed var(--linha,#d8d5d0); padding-top:10px;}
.anexos-etapa__rotulo{margin:0 0 6px; font-size:12px; font-weight:600;}
.lista-anexos--mini li{padding:4px 0; font-size:13px;}
.form-anexo-etapa{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.form-anexo-etapa select, .form-anexo-etapa input[type=file]{font-size:12.5px; max-width:230px;}
.zona-print--mini{padding:7px 10px; font-size:12px; flex:1 1 180px; min-width:160px;}
.zona-print--mini .zona-print__preview img{max-height:70px;}
.passo__anexos{background:var(--painel2,#fbfaf8);}
/* Linha de custo dentro da etapa / no resumo */
.custo-linha{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:3px 0; flex-wrap:wrap;}
.custo-linha + .custo-linha{border-top:1px solid var(--borda2,#eee);}
.custo-linha__desc{flex:1 1 120px; min-width:0;}
.custo-linha__acoes{display:inline-flex; gap:7px; margin-left:auto;}

/* ---- Upload moderno (substitui o "Escolher arquivo / Nenhum arquivo escolhido" nativo) ---- */
/* Botão nativo do file input, para os que não usam o .dropfile */
input[type=file]{font-size:12.5px; color:var(--suave);}
input[type=file]::file-selector-button{
  font:inherit; font-size:12px; font-weight:600; padding:7px 13px; margin-right:10px;
  border:1px solid var(--linha,#d8d5d0); border-radius:9px; background:#fff; color:var(--texto2);
  cursor:pointer; transition:border-color .12s, color .12s, box-shadow .12s;}
input[type=file]::file-selector-button:hover{border-color:var(--marca,#fe5009); color:var(--marca,#fe5009);}
/* Área de upload premium: clicar, arrastar ou colar print. O <input> fica por cima, invisível. */
.dropfile{position:relative; display:flex; align-items:center; gap:9px; flex:1 1 220px; min-width:170px;
  border:1.5px dashed var(--linha,#d8d5d0); border-radius:11px; padding:10px 13px; font-size:12.5px;
  color:var(--texto2); background:var(--painel2,#fbfaf8); cursor:pointer; outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s;}
.dropfile:hover, .dropfile:focus, .dropfile:focus-within, .dropfile--hover, .dropfile.zona-print--hover{
  border-color:var(--marca,#fe5009); background:#fff; box-shadow:0 2px 10px rgba(254,80,9,.08);}
.dropfile--ok, .dropfile.zona-print--ok{border-style:solid; border-color:var(--ok,#2e7d57); background:#fff;}
.dropfile input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.dropfile > i{color:var(--marca,#fe5009); font-size:15px; flex:0 0 auto;}
.dropfile__txt{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dropfile .zona-print__preview{position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.dropfile .zona-print__preview img{max-height:34px; border-radius:6px; display:block;}

/* Checklist de documentos exigidos por etapa */
.checklist-docs{background:var(--painel2,#fbfaf8); border:1px solid var(--linha,#d8d5d0); border-radius:10px; padding:10px 12px; margin-bottom:12px;}
.checklist{list-style:none; margin:0; padding:0; font-size:13px;}
.checklist li{padding:3px 0; display:flex; align-items:center; gap:7px;}
.checklist li.ok{color:var(--ok,#2e7d57);}
.checklist li.falta{color:var(--texto);}
.checklist li i{width:16px; text-align:center;}
.checklist li.ok i{color:var(--ok,#2e7d57);}
.checklist li.falta i{color:var(--perigo,#c0392b);}

/* leilão: resultado (cartões de opção) e obrigações pós-leilão */
.opcoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;}
.opcao{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--linha,#d8d5d0); border-radius:10px; background:var(--painel2,#fbfaf8); cursor:pointer; font-size:13.5px;}
.opcao input{margin-top:3px;}
.opcao small{display:block; color:var(--suave); font-size:12px; margin-top:2px;}
.opcao--ativa{border-color:var(--marca,#FE5009); box-shadow:0 0 0 2px rgba(254,80,9,.15);}
.obrigacoes{display:flex; flex-direction:column; gap:8px;}
.obrigacao{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--linha,#d8d5d0); border-radius:10px; background:var(--painel2,#fbfaf8); font-size:13.5px;}
.obrigacao > i{color:var(--suave); font-size:16px;}
.obrigacao small{display:block; color:var(--suave); font-size:12px; margin-top:2px;}
.obrigacao input[type=date]{font:inherit; padding:5px 8px; border:1px solid var(--linha,#d8d5d0); border-radius:8px; background:#fff;}
.obrigacao--ok{border-color:var(--ok,#2e7d57);}
.obrigacao--ok > i{color:var(--ok,#2e7d57);}
.obrigacao--direcao{border-style:dashed;}
@media (max-width:640px){ .obrigacao{grid-template-columns:22px 1fr;} .obrigacao > input, .obrigacao > span, .obrigacao > label{grid-column:2;} }