/* Gestão de demandas — as cores e fontes vêm de Ajustes (variáveis definidas pelo app.js). */
:root {
  --fundo: #C9CCD1;
  --cartao: #000000;
  --cartao-2: #141414;
  --linha: rgba(255,255,255,.09);
  --texto: #FFFFFF;
  --texto-fundo: #0B0B0C;
  --suave: rgba(255,255,255,.55);
  --destaque: #007BFF;
  --raio: 32px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-num: "Inter", system-ui, sans-serif;
  --aba-h: 44px;
  --prio: #FFD43B;
  --prio-texto: #111;
  --risco: #FF2D87;
  --largura-cartao: 360px;
  --altura-barra: 58px;
  --tam-num: 64px;
  --altura-logo: 32px;
  --gutter: clamp(16px, 3vw, 32px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto-fundo);
  font-family: var(--fonte); font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
  min-height: 100vh;
  background-size: cover; background-position: center; background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
.oculto { display: none !important; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca-ponto { width: 14px; height: 14px; border-radius: 50%; background: var(--destaque); box-shadow: 18px 0 0 var(--cartao), 36px 0 0 color-mix(in srgb, var(--cartao) 30%, transparent); margin-right: 36px; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.marca-logo { height: var(--altura-logo); width: auto; max-width: 180px; object-fit: contain; flex: none; }
.marca-txt b { font-weight: 600; font-size: 17px; letter-spacing: -.04em; white-space: nowrap; }
.marca-txt small { font-size: 12px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: 4px; background: var(--cartao); padding: 5px; border-radius: 999px; margin: 0 auto; }
.nav a { display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; text-decoration: none; color: var(--suave); font-weight: 500; font-size: 14px; transition: background .2s, color .2s; white-space: nowrap; }
.nav a:hover { color: var(--texto); }
.nav a.ativo { background: var(--cartao-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
.nav a.ativo svg { color: var(--destaque); }
.topo-acoes { display: flex; align-items: center; gap: 12px; }
.salvo { font-size: 12px; opacity: .55; white-space: nowrap; }
.salvo.erro { color: #c0271d; opacity: 1; font-weight: 600; }

/* ---------- Botões e campos ---------- */
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 600; font-size: 14px; background: var(--cartao); color: var(--texto); transition: transform .15s, opacity .15s, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-claro { background: var(--destaque); color: #fff; }
.btn-fantasma { background: var(--cartao-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-perigo { background: #c0271d; color: #fff; }
.btn-escuro { background: var(--cartao); color: var(--texto); }
.btn-p { padding: 8px 13px; font-size: 13px; }
.ico-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--cartao-2); color: var(--suave); box-shadow: inset 0 0 0 1px var(--linha); transition: color .2s, background .2s, transform .15s; flex: none; }
.ico-btn:hover { color: var(--texto); transform: translateY(-1px); }
.ico-btn.ligado { color: var(--prio-texto); background: var(--prio); box-shadow: none; }
.ico-btn:disabled { opacity: .3; pointer-events: none; }
.ico-btn svg { width: 17px; height: 17px; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-size: 12px; font-weight: 500; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.campo input, .campo select, .campo textarea, .entrada {
  width: 100%; background: var(--cartao-2); border: 1px solid var(--linha); color: var(--texto);
  border-radius: 14px; padding: 11px 13px; outline: none; transition: border-color .2s; min-height: 44px;
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { border-color: var(--destaque); }
.campo input[type=color] { padding: 4px; height: 44px; cursor: pointer; }
.campo input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--destaque); min-height: 28px; }
input[type=datetime-local], input[type=date], input[type=number] { color-scheme: var(--esquema, dark); }
.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grade-campos .largo { grid-column: 1 / -1; }

/* Segmentado (abas pequenas) */
.seg { display: inline-flex; background: var(--cartao); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; color: var(--suave); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.seg button.ativo { background: var(--cartao-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
.seg-claro { background: color-mix(in srgb, var(--cartao) 8%, transparent); }
.seg-claro button { color: color-mix(in srgb, var(--texto-fundo) 65%, transparent); }
.seg-claro button.ativo { background: var(--cartao); color: var(--texto); }

/* ---------- Página ---------- */
.app { padding: 8px var(--gutter) 80px; max-width: 1360px; margin: 0 auto; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 18px 0 28px; }
.cabeca h1 { font-family: var(--fonte-num); font-weight: 300; font-size: clamp(44px, 7vw, 84px); letter-spacing: -.09em; line-height: .95; margin: 0; }
.cabeca p { margin: 8px 0 0; opacity: .65; font-size: 15px; }
.rotulo { font-size: 14px; font-weight: 500; letter-spacing: -.04em; }
.secao-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 38px 0 12px; }
.secao-t h2 { font-size: 20px; font-weight: 600; letter-spacing: -.04em; margin: 0; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros .entrada { width: auto; min-width: 0; background: var(--cartao); border-color: transparent; border-radius: 999px; padding: 9px 16px; min-height: 40px; font-size: 14px; }
.filtros input.entrada { width: 200px; }
.vazio { padding: 48px 20px; text-align: center; opacity: .6; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--cartao); color: var(--texto); border-radius: calc(var(--raio) * .75); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; border: 0; transition: transform .2s; }
button.kpi:hover { transform: translateY(-2px); }
.kpi small { color: var(--suave); font-size: 13px; font-weight: 500; }
.kpi b { font-family: var(--fonte-num); font-weight: 300; font-size: clamp(40px, 4.6vw, 58px); letter-spacing: -.09em; line-height: 1; }
.kpi i { font-style: normal; font-size: 12px; color: var(--suave); }
.kpi .ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* ---------- Cartão em pasta (forma da referência) ---------- */
.pasta {
  position: relative; background: var(--cartao); color: var(--texto);
  border-radius: var(--raio) 0 var(--raio) 0;
  border-bottom-left-radius: 0;
  margin-top: var(--aba-h); margin-bottom: 34px;
}
.pasta-aba {
  position: absolute; right: 0; bottom: calc(100% - 1px); height: calc(var(--aba-h) + 1px);
  width: min(62%, 300px); background: var(--cartao);
  border-radius: calc(var(--raio) * .8) var(--raio) 0 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 12px 0 22px;
}
.pasta-aba::before {
  content: ""; position: absolute; right: 100%; bottom: 0; width: 26px; height: 26px;
  background: radial-gradient(circle at 0 0, transparent 25.5px, var(--cartao) 26px);
}
.pasta-aba .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
.pasta-pe {
  position: absolute; left: 0; top: calc(100% - 1px); height: 35px; width: min(44%, 170px);
  background: var(--cartao); border-radius: 0 0 calc(var(--raio) * .8) var(--raio);
  display: flex; align-items: center; gap: 6px; padding: 0 0 6px 24px;
}
.pasta-pe::after {
  content: ""; position: absolute; left: 100%; top: 0; width: 26px; height: 26px;
  background: radial-gradient(circle at 100% 100%, transparent 25.5px, var(--cartao) 26px);
}
.pasta-pe .bolinha { width: 12px; height: 12px; border-radius: 50%; background: var(--vazio, #1C1C1C); flex: none; }
.pasta-corpo { padding: 16px; }

/* Arte em ondas (gerada no canvas, na cor do cliente) */
.arte { position: relative; border-radius: calc(var(--raio) * .5); overflow: hidden; background: #050505 center/cover no-repeat; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 18px 16px; }
.arte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55)); pointer-events: none; }
.arte > * { position: relative; z-index: 1; }
.arte h3 { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }

/* ---------- Demanda ---------- */
.grade-demandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-cartao)), 1fr)); column-gap: 18px; }
.dem { transition: transform .25s; }
.dem.concluida { opacity: .55; }
.dem-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.dem-titulo { margin: 0; font-size: clamp(19px, 2vw, 23px); font-weight: 600; letter-spacing: -.04em; line-height: 1.12; cursor: pointer; overflow-wrap: anywhere; }
.dem-titulo:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dem-desc { margin: 6px 0 0; color: var(--suave); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip.forte { color: var(--texto); }
.chip.risco { background: var(--risco); color: #fff; box-shadow: none; }
.chip.prio { background: var(--prio); color: var(--prio-texto); box-shadow: none; }
.chip.status-sel { padding: 0; }
.chip .ponto-status { width: 7px; height: 7px; border-radius: 50%; margin-left: 10px; flex: none; }
.chip select { background: none; border: 0; color: inherit; padding: 5px 8px 5px 2px; font-size: 12px; font-weight: 500; outline: none; cursor: pointer; }
.chip select option { color: #000; }

.contagem { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 20px 4px 10px; }
.contagem b { font-family: var(--fonte-num); font-weight: 300; font-size: clamp(min(46px, var(--tam-num)), 6vw, var(--tam-num)); letter-spacing: -.1em; line-height: .9; font-variant-numeric: tabular-nums; }
.contagem b em { font-style: normal; font-size: .5em; letter-spacing: -.04em; color: var(--suave); margin: 0 .35em 0 .08em; }
.contagem > span + span { color: var(--suave); font-size: 13px; text-align: right; }

/* Barra de regressão */
.regresso { position: relative; height: var(--altura-barra); border-radius: min(18px, calc(var(--altura-barra) / 2)); background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; }
.regresso-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width .9s cubic-bezier(.2,.7,.2,1), background-color .9s; }
.regresso-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 2px, transparent 2px 10px); mix-blend-mode: overlay; }
.regresso-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); gap: 10px; font-variant-numeric: tabular-nums; }
.regresso-marcas { position: absolute; inset: 0; display: flex; pointer-events: none; }
.regresso-marcas i { flex: 1; border-right: 1px dashed rgba(255,255,255,.12); }
.regresso-marcas i:last-child { border: 0; }
.regresso.atrasada .regresso-fill { animation: pulsa 1.4s ease-in-out infinite; width: 100% !important; }
@keyframes pulsa { 50% { opacity: .55; } }
.dem-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 12px; }
.dem-acoes .esq { margin-right: auto; display: flex; gap: 8px; align-items: center; }
.horas { font-size: 12px; color: var(--suave); }
.horas-barra { height: 4px; width: 90px; border-radius: 4px; background: var(--cartao-2); overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 6px; }
.horas-barra i { display: block; height: 100%; background: var(--texto); border-radius: inherit; }

/* Lista compacta */
.lista { display: flex; flex-direction: column; gap: 8px; }
.linha { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) minmax(120px, .7fr) minmax(220px, 2fr) auto; align-items: center; gap: 14px; background: var(--cartao); color: var(--texto); border-radius: 20px; padding: 10px 12px 10px 12px; }
.linha .regresso { height: 38px; border-radius: 12px; }
.linha .regresso-txt { font-size: 12px; padding: 0 12px; }
.linha .nome { min-width: 0; }
.linha .nome b { display: block; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.linha .nome small { color: var(--suave); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.linha .quando { font-size: 13px; color: var(--suave); }
.linha .quando b { display: block; color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; }
.cor-cli { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.compl { display: inline-flex; gap: 3px; }
.compl i { width: 7px; height: 7px; border-radius: 50%; background: var(--vazio, #2a2a2a); }

/* ---------- Clientes ---------- */
.grade-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--largura-cartao) - 20px)), 1fr)); column-gap: 18px; }
.cli { cursor: pointer; transition: transform .25s; }
.cli:hover { transform: translateY(-3px); }
.cli .arte { min-height: 170px; }
.cli-num { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 18px 6px 4px; }
.cli-num b { font-family: var(--fonte-num); font-weight: 300; font-size: clamp(48px, 6vw, 64px); letter-spacing: -.1em; line-height: .9; }
.cli-num span { color: var(--suave); font-size: 13px; text-align: right; }
.cli-novo { border: 2px dashed color-mix(in srgb, var(--texto-fundo) 25%, transparent); border-radius: var(--raio); display: grid; place-items: center; min-height: 280px; margin-top: var(--aba-h); margin-bottom: 34px; background: none; color: var(--texto-fundo); font-weight: 600; gap: 8px; align-content: center; opacity: .7; transition: opacity .2s; }
.cli-novo:hover { opacity: 1; }
.cli-cab { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 64px; }
.cli-cab .arte { min-height: 220px; }
.cli-cab .arte h3 { font-size: clamp(30px, 5vw, 56px); font-weight: 300; letter-spacing: -.08em; }
.cli-info { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 4px 2px; }

/* ---------- Agenda ---------- */
.barra-agenda { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.nav-data { display: flex; align-items: center; gap: 8px; }
.nav-data .ico-btn { background: var(--cartao); color: var(--texto); }
.nav-data strong { font-size: 18px; font-weight: 600; letter-spacing: -.04em; min-width: 0; }
.painel-preto { background: var(--cartao); color: var(--texto); border-radius: var(--raio); padding: 14px; }

.dia-horas { display: grid; grid-template-columns: 64px 1fr; }
.dia-horas .h { font-size: 12px; color: var(--suave); padding: 10px 8px 0 4px; border-top: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.dia-horas .slot { border-top: 1px solid var(--linha); min-height: 52px; padding: 6px 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.dia-horas .agora-linha { position: absolute; left: -64px; right: 0; height: 2px; background: #FF3B30; z-index: 2; }
.dia-horas .agora-linha::before { content: ""; position: absolute; left: 58px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; }
.evento { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; min-width: 0; border-left: 4px solid var(--cor, var(--destaque)); text-align: left; color: var(--texto); border-top: 0; border-right: 0; border-bottom: 0; width: 100%; }
.evento:hover { background: color-mix(in srgb, var(--cartao-2) 80%, #fff 6%); }
.evento .t { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; flex: none; }
.evento .n { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.evento .mini { width: 46px; height: 6px; border-radius: 6px; background: var(--vazio, #222); overflow: hidden; flex: none; }
.evento .mini i { display: block; height: 100%; }
.evento.feito { opacity: .45; text-decoration: line-through; }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sem-dia { background: var(--cartao); color: var(--texto); border-radius: 22px; padding: 12px 10px; min-height: 280px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sem-dia.hoje { box-shadow: inset 0 0 0 2px var(--destaque); }
.sem-dia header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.sem-dia header small { color: var(--suave); text-transform: capitalize; font-size: 12px; }
.sem-dia header b { font-family: var(--fonte-num); font-weight: 300; font-size: 34px; letter-spacing: -.08em; line-height: 1; }
.carga { padding: 0 4px; }
.carga small { font-size: 11px; color: var(--suave); display: flex; justify-content: space-between; }
.carga-barra { height: 6px; border-radius: 6px; background: var(--cartao-2); overflow: hidden; margin-top: 4px; }
.carga-barra i { display: block; height: 100%; border-radius: inherit; }
.sem-dia .evento { flex-direction: column; align-items: flex-start; gap: 4px; }
.sem-dia .evento .n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; }
.sem-dia .evento .mini { width: 100%; }

.mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mes .dsem { font-size: 12px; text-align: center; opacity: .6; padding-bottom: 4px; text-transform: capitalize; }
.mes-dia { background: var(--cartao); color: var(--texto); border-radius: 16px; min-height: 112px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; border: 0; text-align: left; }
.mes-dia.fora { opacity: .35; }
.mes-dia.hoje { box-shadow: inset 0 0 0 2px var(--destaque); }
.mes-dia > b { font-weight: 400; font-size: 15px; letter-spacing: -.04em; }
.mes-dia .ev { font-size: 11px; padding: 3px 6px; border-radius: 6px; background: var(--cartao-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--cor); }
.mes-dia .mais { font-size: 11px; color: var(--suave); }

.ano { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ano-mes { background: var(--cartao); color: var(--texto); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border: 0; text-align: left; min-width: 0; }
.ano-mes.atual { box-shadow: inset 0 0 0 2px var(--destaque); }
.ano-mes small { color: var(--suave); text-transform: capitalize; font-size: 13px; }
.ano-mes b { font-family: var(--fonte-num); font-weight: 300; font-size: 48px; letter-spacing: -.1em; line-height: .9; }
.ano-mes .pontos { display: flex; flex-wrap: wrap; gap: 4px; min-height: 10px; }
.ano-mes .pontos i { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Linha do tempo (Gantt) ---------- */
.gantt-caixa { background: var(--cartao); color: var(--texto); border-radius: var(--raio); padding: 12px 0 12px 12px; overflow: hidden; }
.gantt { display: grid; grid-template-columns: 220px 1fr; }
.gantt-nomes { border-right: 1px solid var(--linha); position: relative; z-index: 2; background: var(--cartao); }
.gantt-rolagem { overflow-x: auto; overflow-y: hidden; scrollbar-color: #333 transparent; }
.gantt-trilho { position: relative; }
.gantt-escala { display: flex; height: 44px; border-bottom: 1px solid var(--linha); position: sticky; top: 0; }
.gantt-escala div { flex: none; font-size: 11px; color: var(--suave); padding: 6px 6px 0; border-left: 1px solid var(--linha); white-space: nowrap; overflow: hidden; text-transform: capitalize; }
.gantt-escala div b { display: block; color: var(--texto); font-weight: 500; font-size: 12px; }
.gantt-escala div.hoje b { color: var(--destaque); }
.g-cab { height: 44px; border-bottom: 1px solid var(--linha); display: flex; align-items: flex-end; padding: 0 12px 8px 4px; font-size: 12px; color: var(--suave); }
.g-grupo { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--linha); white-space: nowrap; overflow: hidden; }
.g-nome { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; font-size: 13px; border-bottom: 1px solid var(--linha); cursor: pointer; min-width: 0; }
.g-nome span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-linha-grupo { height: 34px; border-bottom: 1px solid var(--linha); background: rgba(255,255,255,.02); }
.g-linha { height: 46px; border-bottom: 1px solid var(--linha); position: relative; }
.g-barra { position: absolute; top: 9px; height: 28px; border-radius: 10px; background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; cursor: pointer; min-width: 8px; }
.g-barra i { position: absolute; inset: 0 auto 0 0; }
.g-barra span { position: relative; z-index: 1; font-size: 11px; font-weight: 600; padding: 0 8px; line-height: 28px; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.g-barra.prio { box-shadow: inset 0 0 0 2px var(--prio); }
.g-agora { position: absolute; top: 0; bottom: 0; width: 2px; background: #FF3B30; z-index: 1; pointer-events: none; }
.g-agora::before { content: "agora"; position: absolute; top: 52px; left: 0; font-size: 10px; font-weight: 700; color: #fff; background: #FF3B30; padding: 3px 7px; border-radius: 0 999px 999px 0; text-transform: uppercase; letter-spacing: .06em; }
.g-grade { position: absolute; top: 44px; bottom: 0; left: 0; right: 0; display: flex; pointer-events: none; }
.g-grade i { flex: none; border-left: 1px solid rgba(255,255,255,.04); }

/* ---------- Ajustes ---------- */
.ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.ajustes .pasta-corpo { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.ajustes h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.ajustes p.ajuda { margin: -8px 0 0; color: var(--suave); font-size: 13px; }
.previa-barras { display: flex; flex-direction: column; gap: 8px; }
.previa-barras .regresso { height: 38px; border-radius: 12px; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Modal ---------- */
.modal { border: 0; padding: 0; background: transparent; color: var(--texto); width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; }
.modal::backdrop { background: rgba(10,10,12,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal .pasta { margin-bottom: 0; max-height: calc(100dvh - 24px - var(--aba-h)); display: flex; flex-direction: column; border-bottom-left-radius: var(--raio); }
.modal-corpo { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.modal-corpo h2 { margin: 0; font-family: var(--fonte-num); font-size: clamp(32px, 5vw, 44px); font-weight: 300; letter-spacing: -.08em; line-height: 1; }
.modal-pe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 22px 20px; border-top: 1px solid var(--linha); }
.modal-pe .esq { margin-right: auto; }
.estrelas { display: flex; gap: 6px; }
.estrelas button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); font-weight: 600; }
.estrelas button.ativo { background: var(--destaque); color: #fff; box-shadow: none; }
.alternar { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; border-radius: 14px; background: var(--cartao-2); border: 1px solid var(--linha); }
.alternar input { width: 20px; height: 20px; accent-color: var(--destaque); flex: none; }
.modal .alternar input { accent-color: var(--prio); }
.alternar b { font-weight: 600; }
.alternar small { display: block; color: var(--suave); font-size: 12px; }
.cores-cli { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cores-cli button { width: 32px; height: 32px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.cores-cli button.ativo { box-shadow: 0 0 0 2px var(--cartao), 0 0 0 4px #fff; }

.aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: var(--cartao); color: var(--texto); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso button { background: none; border: 0; color: var(--destaque); font-weight: 700; padding: 0; }

/* ---------- Modo edição de textos ---------- */
.barra-edicao { position: fixed; left: 50%; top: 84px; transform: translate(-50%, -20px); z-index: 45; display: flex; align-items: center; gap: 14px; background: var(--cartao); color: var(--texto); padding: 8px 8px 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
body.editando .barra-edicao { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.editando [data-t][contenteditable] { outline: 1.5px dashed color-mix(in srgb, var(--destaque) 75%, transparent); outline-offset: 3px; border-radius: 4px; cursor: text; -webkit-user-select: text; user-select: text; }
body.editando [data-t][contenteditable]:hover { background: color-mix(in srgb, var(--destaque) 14%, transparent); }
body.editando [data-t][contenteditable]:focus { outline-style: solid; background: color-mix(in srgb, var(--destaque) 18%, transparent); }
body.editando [data-acao="modo-edicao"] { background: var(--destaque); color: #fff; }
.sub-solto { margin: 18px 0 24px; opacity: .65; }

/* ---------- Ajustes: abas, envios, paleta, status ---------- */
.seg-ajustes { margin: -6px 0 22px; }
.ajustes-largo { grid-column: 1 / -1; }
.ajustes h4.grupo-textos { margin: 14px 0 -4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--destaque); }
.envio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 64px; border: 1.5px dashed var(--linha); border-radius: 16px; cursor: pointer; transition: border-color .2s, background .2s; background: var(--cartao-2); }
.envio:hover, .envio.arrastando { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 10%, var(--cartao-2)); }
.envio.enviando { opacity: .5; pointer-events: none; }
.envio img { height: 44px; max-width: 120px; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#2a2a2a 0 25%, #1c1c1c 0 50%) 0 0/12px 12px; flex: none; }
.envio-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cartao); color: var(--suave); flex: none; }
.envio-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.envio-txt b { font-weight: 600; font-size: 14px; }
.envio-txt small { color: var(--suave); font-size: 12px; }
.paleta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.paleta-item { position: relative; }
.paleta-item input { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao-2); padding: 3px; cursor: pointer; }
.paleta-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--cartao-2); color: var(--suave); display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s; box-shadow: 0 0 0 2px var(--cartao); }
.paleta-item:hover button { opacity: 1; }
.paleta-item button svg { width: 11px; height: 11px; }
.chip-x { background: none; border: 0; color: inherit; padding: 0; display: inline-grid; place-items: center; opacity: .6; }
.chip-x svg { width: 12px; height: 12px; }
.lista-status { display: flex; flex-direction: column; gap: 8px; }
.linha-status { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.linha-status.linha-compl { grid-template-columns: 44px minmax(0, 1fr); }
.linha-status input[type=color] { width: 52px; height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao-2); padding: 3px; cursor: pointer; }
.linha-status .nivel { width: 44px; height: 44px; border-radius: 12px; background: var(--destaque); color: #fff; display: grid; place-items: center; font-weight: 600; }
.entrada-esc { width: 100%; background: var(--cartao-2); border: 1px solid var(--linha); color: var(--texto); border-radius: 14px; padding: 11px 13px; outline: none; min-height: 44px; }
.entrada-esc:focus { border-color: var(--destaque); }
.cor-livre { width: 56px; height: 36px; padding: 2px; border-radius: 10px; background: var(--cartao-2); border: 1px solid var(--linha); cursor: pointer; }

/* ---------- Formato simples (sem abas de pasta) ---------- */
.cartao-simples .pasta { border-radius: var(--raio); margin-top: 0; margin-bottom: 18px; }
.cartao-simples .pasta-aba { position: static; width: auto; height: auto; background: none; border-radius: 0; padding: 14px 16px 0 22px; }
.cartao-simples .pasta-aba::before, .cartao-simples .pasta-pe::after { display: none; }
.cartao-simples .pasta-pe { position: static; width: auto; height: auto; background: none; border-radius: 0; padding: 0 22px 18px; }
.cartao-simples .cli-novo { margin-top: 0; margin-bottom: 18px; }
.cartao-simples .cli-cab { margin-bottom: 18px; }
.cartao-simples .modal .pasta { border-radius: var(--raio); }

/* ---------- Demandas fixas ---------- */
.lista-rotinas { display: flex; flex-direction: column; gap: 10px; }
.rotina { background: var(--cartao-2); border: 1px solid var(--linha); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rotina.pausada { opacity: .55; }
.rotina-topo { display: flex; gap: 8px; align-items: center; }
.rotina-topo .entrada-esc { flex: 1; min-width: 0; background: var(--cartao); font-weight: 600; }
.liga-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); white-space: nowrap; cursor: pointer; }
.liga-mini input { accent-color: var(--destaque); width: 18px; height: 18px; }
.rotina-dias { display: flex; gap: 6px; flex-wrap: wrap; }
.rotina-dias button { border: 0; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; background: var(--cartao); color: var(--suave); box-shadow: inset 0 0 0 1px var(--linha); }
.rotina-dias button.ativo { background: var(--destaque); color: #fff; box-shadow: none; }
.rotina-campos { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.3fr); gap: 8px; }
.rotina-campos .campo input, .rotina-campos .campo select { background: var(--cartao); }
input[type=time] { color-scheme: var(--esquema, dark); }
.evento.fantasma { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); border-left-style: dashed; opacity: .7; }
.evento.fantasma .mini { visibility: hidden; }
.mes-dia .ev.fantasma { background: transparent; border-left-style: dashed; opacity: .7; }

/* ---------- Tela de senha (versão online) ---------- */
.login { position: fixed; inset: 0; z-index: 80; background: var(--fundo); display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; }
.login-caixa { width: min(440px, 100%); margin: var(--aba-h) 0 34px; }
.login-caixa .pasta-corpo { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.login-caixa h1 { margin: 0; font-family: var(--fonte-num); font-weight: 300; font-size: clamp(44px, 9vw, 64px); letter-spacing: -.09em; line-height: .95; }
.login-caixa .ajuda { margin: 0; color: var(--suave); font-size: 14px; }
.login-caixa .btn { width: 100%; padding: 14px; margin-top: 4px; }
.login-caixa .btn:disabled { opacity: .5; }
.login-erro { margin: 0; min-height: 1em; color: #FF6B60; font-size: 13px; font-weight: 600; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .kpi { padding: 16px 14px 14px; }
  .nav a span { display: none; }
  .nav a { padding: 10px 13px; }
  .ano { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ajustes { grid-template-columns: minmax(0, 1fr); }
  .semana { grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .sem-dia { scroll-snap-align: start; }
  .linha { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .linha .quando { display: none; }
  .linha .regresso { grid-column: 1 / -1; grid-row: 2; }
  .gantt { grid-template-columns: 150px 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 14px; }
  .topo { padding-top: max(12px, env(safe-area-inset-top)); backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fundo); }
  .nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 40; }
  .nav a { padding: 12px 15px; }
  .nav a svg { width: 20px; height: 20px; }
  .topo { justify-content: space-between; }
  .topo-acoes .btn span { display: none; }
  .topo-acoes .btn { padding: 11px; }
  .salvo { display: none; }
  .marca { flex: 1; overflow: hidden; }
  .marca-txt b { overflow: hidden; text-overflow: ellipsis; }
  .marca-logo { max-width: 110px; }
  .seg-ajustes { scrollbar-width: none; }
  .barra-edicao { top: auto; bottom: 96px; }
  .seg-ajustes { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .seg-ajustes button { white-space: nowrap; }
  .linha-status { grid-template-columns: 44px minmax(0, 1fr) auto auto auto; gap: 6px; }
  .linha-status .ico-btn { width: 32px; height: 32px; }
  .app { padding-bottom: 110px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:first-child { grid-column: 1 / -1; }
  .grade-campos { grid-template-columns: minmax(0, 1fr); }
  .rotina-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mes { gap: 3px; }
  .mes-dia { min-height: 64px; padding: 5px; border-radius: 10px; }
  .mes-dia .ev { font-size: 0; padding: 0; height: 5px; border-left: 0; background: var(--cor); }
  .mes-dia > b { font-size: 13px; }
  .ano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gantt { grid-template-columns: 112px 1fr; }
  .g-nome { padding-left: 8px; font-size: 12px; }
  .filtros { width: 100%; }
  .filtros input.entrada { flex: 1 1 100%; width: 100%; }
  .filtros select.entrada { flex: 1 1 40%; }
  .pasta-aba { width: min(78%, 300px); }
  .modal { width: 100vw; max-height: 100dvh; margin: auto 0 0; max-width: 100vw; }
  .modal .pasta { border-radius: var(--raio) 0 0 0; max-height: calc(100dvh - var(--aba-h) - 10px); }
  .modal-corpo, .modal-pe { padding-left: 16px; padding-right: 16px; }
  .modal-pe { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .aviso { bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}