/* =====================================================================
   style.css — folha de estilo única do Gestão de Salão.
   Trocar a marca inteira do painel é mexer aqui (paleta em :root),
   não em cada tela (padrão "assets de marca" do playbook Portal).
   Design system herdado do motor XBee, paleta trocada.
   ===================================================================== */
:root{
  /* Paleta Gestão de Salão: ameixa escura + rosé. Trocar a marca inteira
     é mexer aqui, não em cada tela. */
  --dark:#241c26; --accent:#b76e79; --accent-dark:#8f4f5c;
  --paper:#fffafb; --panel:#f6f0f2; --line:#ead9de; --muted:#6f6270;
  --st-pend-fg:#6f6270; --st-pend-bg:#eeeaee;
  --st-andamento-fg:#1f5fa8; --st-andamento-bg:#e3ecfa;
  --st-concluido-fg:#1f7a3d; --st-concluido-bg:#e3f2e1;
  --st-travado-fg:#b3401f; --st-travado-bg:#fbe4de;
  --st-ciclo-fg:#8f4f5c; --st-ciclo-bg:#f7e3e7;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--panel);color:var(--dark);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:inherit;}

/* ---- Topbar ---- */
header.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;background:var(--paper);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dark);}
.brand .logo{width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;}
.brand .logo-img{height:30px;width:auto;display:block;}
.brand .name{font-weight:800;font-size:16px;}
.brand .name span{color:var(--accent-dark);}
.brand .name{white-space:nowrap;}
/* Com o menu cheio, o subtítulo da marca é a primeira coisa a sair:
   nome do salão em uma linha vale mais que enfeite. */
@media (max-width:1500px){ .brand .name span{display:none;} }
@media (max-width:1200px){ .topnav a{font-size:12.5px;padding:6px 8px;} }
.topbar-actions{display:flex;gap:10px;align-items:center;}
.user-chip{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;}
.user-chip .papel{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--st-ciclo-bg);color:var(--st-ciclo-fg);padding:2px 8px;border-radius:20px;}

/* ---- Botões ---- */
.btn{border:none;border-radius:8px;padding:9px 16px;font-size:13.5px;font-weight:600;
  cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block;}
.btn-primary{background:var(--dark);color:#fff;}
.btn-primary:hover{background:#000;}
.btn-ghost{background:transparent;color:var(--dark);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--panel);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-dark);}

main{max-width:1180px;margin:0 auto;padding:28px 32px 60px;}
footer.foot{max-width:1180px;margin:0 auto;padding:0 32px 40px;font-size:12px;color:var(--muted);}

/* ---- Alerta / flash ---- */
.alerta{background:#fff8ec;border:1px solid #f0dfae;border-left:4px solid var(--accent);
  border-radius:8px;padding:12px 16px;font-size:13.5px;margin-bottom:20px;}
.erro{background:var(--st-travado-bg);border:1px solid #f0c4b8;border-left:4px solid var(--st-travado-fg);
  border-radius:8px;padding:12px 16px;font-size:13.5px;margin-bottom:16px;color:#7a2a15;}

/* ---- Formulários ---- */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:26px;max-width:420px;margin:6vh auto 0;}
.form-card h1{font-size:20px;margin:0 0 4px;}
.form-card .sub{color:var(--muted);font-size:13.5px;margin:0 0 20px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:14px;font-family:inherit;background:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.login-wrap{display:flex;flex-direction:column;min-height:100vh;background:var(--panel);}
.login-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px;}

@media (max-width:640px){
  main{padding:20px 16px 40px;}
  header.topbar{padding:14px 16px;}
}

/* ===================== Dashboard ===================== */
.view-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.view-title h1{font-size:22px;margin:0;}
.view-sub{color:var(--muted);font-size:14px;margin:0 0 22px;}
.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.summary-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.summary-card .n{font-size:24px;font-weight:800;}
.summary-card .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.client-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;
  cursor:pointer;transition:box-shadow .15s,transform .15s;text-decoration:none;color:var(--dark);display:block;}
.client-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px);}
.client-card .row-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.avatar{width:38px;height:38px;border-radius:50%;background:#efe6cf;color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto;}
.client-card h3{font-size:15.5px;margin:0 0 2px;}
.client-card .niche{font-size:12.5px;color:var(--muted);}
.status-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.pill-pendente{color:var(--st-pend-fg);background:var(--st-pend-bg);}
.pill-andamento{color:var(--st-andamento-fg);background:var(--st-andamento-bg);}
.pill-concluido{color:var(--st-concluido-fg);background:var(--st-concluido-bg);}
.pill-travado{color:var(--st-travado-fg);background:var(--st-travado-bg);}
.pill-aguardando_ciclo{color:var(--st-ciclo-fg);background:var(--st-ciclo-bg);}
.progress-line{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px;}
.progress-track{height:7px;background:#eee8d6;border-radius:6px;overflow:hidden;margin-bottom:12px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:6px;}
.card-footer{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;}
.card-footer .next{color:var(--dark);font-weight:600;}
.card-footer .arrow{color:var(--accent-dark);font-weight:700;}

/* ===================== Detalhe / timeline ===================== */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;
  text-decoration:none;cursor:pointer;margin-bottom:10px;}
.back-link:hover{color:var(--dark);}
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;flex-wrap:wrap;gap:14px;}
.detail-title{display:flex;align-items:center;gap:12px;}
.detail-title .avatar{width:46px;height:46px;font-size:17px;}
.detail-title h1{font-size:21px;margin:0;}
.detail-title .niche{font-size:13px;color:var(--muted);}
.next-callout{background:#fff8ec;border:1px solid #f0dfae;border-left:4px solid var(--accent);
  border-radius:8px;padding:12px 16px;font-size:13.5px;margin-bottom:22px;}
.next-callout strong{color:var(--accent-dark);}
.timeline{position:relative;}
.phase-item{display:flex;gap:16px;padding-bottom:22px;position:relative;}
.phase-item:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--line);}
.phase-marker{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;border:2px solid var(--line);background:var(--paper);z-index:1;}
.phase-marker.concluido{background:var(--st-concluido-fg);border-color:var(--st-concluido-fg);color:#fff;}
.phase-marker.andamento{background:var(--st-andamento-fg);border-color:var(--st-andamento-fg);color:#fff;}
.phase-marker.travado{background:var(--st-travado-fg);border-color:var(--st-travado-fg);color:#fff;}
.phase-marker.aguardando_ciclo{background:var(--st-ciclo-fg);border-color:var(--st-ciclo-fg);color:#fff;}
.phase-body{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.phase-body.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.phase-body.banner-clickable{cursor:pointer;transition:box-shadow .15s,border-color .15s;}
.phase-body.banner-clickable:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.08);}
.banner-hint{font-size:11.5px;color:var(--accent-dark);font-weight:600;margin-top:10px;opacity:.85;}
.phase-body.banner-clickable:hover .banner-hint{opacity:1;text-decoration:underline;}
.phase-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.phase-row h4{margin:0;font-size:14.5px;}
.phase-meta{font-size:12px;color:var(--muted);margin-top:3px;}
.phase-file{font-family:Consolas,Menlo,monospace;font-size:11.5px;background:var(--panel);padding:2px 7px;border-radius:4px;color:#5b5747;}
.status-select{font-size:11.5px;font-weight:700;border-radius:20px;border:none;padding:4px 10px;cursor:pointer;font-family:inherit;}
.btn-detail{background:var(--panel);color:var(--accent-dark);border:1px solid var(--line);border-radius:7px;
  padding:4px 11px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;}
.btn-detail:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ===================== Modal Ajuda rápida ===================== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,17,10,.55);z-index:100;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal-panel{background:var(--paper);border-radius:14px;max-width:640px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;}
.modal-head{background:var(--dark);color:#fff;padding:20px 26px;position:relative;}
.modal-head .eyebrow-m{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#d9c088;margin:0 0 4px;font-weight:700;}
.modal-head h2{margin:0;font-size:19px;}
.modal-head .skills-m{font-size:12px;color:#cfc9b8;margin-top:6px;}
.modal-head .skills-m code{background:rgba(255,255,255,.12);color:#f3ead0;padding:1px 6px;border-radius:4px;}
.modal-close{position:absolute;top:14px;right:16px;background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;opacity:.75;}
.modal-close:hover{opacity:1;}
.modal-body{padding:22px 26px 26px;max-height:70vh;overflow-y:auto;}
.modal-body h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-dark);margin:20px 0 8px;}
.modal-body h3:first-child{margin-top:0;}
.prompt-box{background:#2b2b2b;color:#f3ead0;border-radius:8px;padding:12px 14px;font-family:Consolas,Menlo,monospace;font-size:13px;}
.step-list{margin:0;padding-left:20px;}
.step-list li{margin-bottom:8px;font-size:13.5px;}
.file-chip{font-family:Consolas,Menlo,monospace;font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 10px;color:#5b5747;display:inline-block;}
.modal-note{background:#fff8ec;border:1px solid #f0dfae;border-left:4px solid var(--accent);border-radius:6px;padding:10px 14px;font-size:13px;margin-top:6px;}

/* ===================== Execução (tarefas) ===================== */
.exec-head{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
.exec-head .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark);font-weight:700;margin:0 0 4px;}
.exec-head h1{margin:0;font-size:20px;}
.exec-head .sub{font-size:12.5px;color:var(--muted);margin-top:6px;}
.exec-head .sub code{background:var(--panel);color:#5b5747;padding:1px 6px;border-radius:4px;font-size:11.5px;}
.exec-progress{font-size:13px;color:var(--muted);margin:0 0 18px;}
.exec-progress-track{height:8px;background:#eee8d6;border-radius:6px;overflow:hidden;margin-top:6px;}
.exec-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));}
.task-card{background:var(--paper);border:1px solid var(--line);border-left:5px solid #9a958a;border-radius:10px;padding:16px 18px;margin-bottom:14px;}
.task-card.andamento{border-left-color:var(--st-andamento-fg);}
.task-card.concluido{border-left-color:var(--st-concluido-fg);background:#f7fbf6;}
.task-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.task-top .num{font-weight:800;color:var(--accent-dark);font-size:12px;}
.task-top h3{margin:2px 0 0;font-size:14.5px;font-weight:600;}
.task-status-pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.task-status-pill.pendente{color:var(--st-pend-fg);background:var(--st-pend-bg);}
.task-status-pill.andamento{color:var(--st-andamento-fg);background:var(--st-andamento-bg);}
.task-status-pill.concluido{color:var(--st-concluido-fg);background:var(--st-concluido-bg);}
.task-forms{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.task-forms form{margin:0;}
.task-btn{border:none;border-radius:7px;padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.task-btn.iniciar{background:var(--st-andamento-fg);color:#fff;}
.task-btn.concluir{background:var(--st-concluido-fg);color:#fff;}
.task-btn.salvar{background:var(--panel);color:var(--accent-dark);}
.task-btn.reabrir{background:transparent;color:#a3402a;text-decoration:underline;padding:6px 4px;}
.task-btn:disabled{opacity:.4;cursor:not-allowed;}
.task-times{font-size:11.5px;color:var(--muted);margin-top:8px;}
.task-locked{font-size:11.5px;color:var(--muted);font-style:italic;}
.task-save{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;}
.task-save .linha{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.task-save label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:3px;}
.task-save select,.task-save input[type=text]{border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:13px;font-family:inherit;min-width:190px;background:#fff;}
.task-save textarea{width:100%;min-height:60px;border:1px solid var(--line);border-radius:6px;padding:8px;font-family:inherit;font-size:12.5px;resize:vertical;margin-top:6px;}
.resp-ro{font-size:12.5px;color:var(--dark);}

/* ===================== Tabelas (equipe / produtividade) ===================== */
.tabela{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13.5px;}
.tabela th,.tabela td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);}
.tabela th{background:var(--panel);color:#5b5747;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.tabela tr:last-child td{border-bottom:none;}
.tabela tr.inativo td{opacity:.5;}
.topnav{display:flex;gap:4px;align-items:center;margin-right:6px;}
.topnav a{font-size:13px;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:7px;}
.topnav a:hover{background:var(--panel);color:var(--dark);}

/* ===================== Quadro (Bloco 8) ===================== */
.filtro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.filtro .rot{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-right:2px;}
.chip{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer;text-decoration:none;}
.chip.on{background:var(--dark);color:#fff;border-color:var(--dark);}
.chip.soon{opacity:.6;cursor:default;}
.chip .soon-b{font-size:9.5px;background:#eee8d6;color:#7a7461;border-radius:10px;padding:1px 6px;margin-left:5px;font-weight:700;text-transform:uppercase;}

.grupo{margin-bottom:26px;}
.grupo-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-left:2px;}
.grupo-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.grupo-titulo{font-weight:800;font-size:14px;}
.grupo-count{font-size:12px;color:var(--muted);background:#eee8d6;border-radius:20px;padding:1px 9px;font-weight:700;}

.board{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;border-left:4px solid var(--line);}
.board.g-andamento{border-left-color:var(--st-andamento-fg);}
.board.g-travado{border-left-color:var(--st-travado-fg);}
.board.g-aguardando{border-left-color:var(--st-ciclo-fg);}
.board.g-pendente{border-left-color:var(--st-pend-fg);}
.board.g-concluido{border-left-color:var(--st-concluido-fg);}
.board-scroll{overflow-x:auto;}
.quadro-tab{width:100%;border-collapse:collapse;font-size:13px;min-width:1080px;}
.quadro-tab thead th{background:#f6f1e4;color:#5b5747;font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);font-weight:700;}
.quadro-tab tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.quadro-tab tbody tr:last-child td{border-bottom:none;}
.quadro-tab tbody tr:hover{background:#fdf7f8;}

.cli{display:flex;align-items:center;gap:10px;}
.logo-cli{width:34px;height:34px;border-radius:9px;background:#efe6cf;color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex:0 0 auto;}
.cli .nome{font-weight:700;font-size:13.5px;}
.cli .nicho{font-size:11.5px;color:var(--muted);}

.proj{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:7px;white-space:nowrap;}
.proj .pd{width:8px;height:8px;border-radius:50%;}

.pill.pri-alta,.pri-alta{color:#b3401f;}
.pill.pri-media,.pri-media{color:#9a6a12;}
.pill.pri-baixa,.pri-baixa{color:#1f5fa8;}
.pill.pri-alta{background:#fbe4de;}
.pill.pri-media{background:#faedd0;}
.pill.pri-baixa{background:#e3ecfa;}
.pri-select{font-size:11.5px;font-weight:700;border:none;border-radius:20px;padding:4px 10px;cursor:pointer;font-family:inherit;}
.pri-select.pri-alta{background:#fbe4de;}
.pri-select.pri-media{background:#faedd0;}
.pri-select.pri-baixa{background:#e3ecfa;}

.prog{min-width:110px;}
.prog-line{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:3px;}
.prog-track{height:7px;background:#eee8d6;border-radius:6px;overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:6px;}

.fase-nome{font-weight:600;font-size:12.5px;}
.fase-hint{font-size:11px;margin-top:3px;}
.fase-hint.and{color:var(--st-andamento-fg);}
.fase-hint.trav{color:var(--st-travado-fg);}
.fase-hint.ciclo{color:var(--st-ciclo-fg);}
.fase-hint.pend{color:var(--muted);}

.resp{display:flex;align-items:center;gap:9px;}
.foto-ini{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#c98a3b,#9a6412);color:#fff;font-weight:700;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.18);border:2px solid #fff;}
.resp .rn{font-weight:600;font-size:12.5px;}
.resp.vazio{color:var(--muted);font-style:italic;font-size:12.5px;}

.prazo{font-size:12.5px;}
.prazo .data{font-weight:700;}
.plano .dur{font-weight:700;font-size:12.5px;}
.plano .pecas{color:var(--muted);font-size:11.5px;}

/* Foto de perfil (avatar real) */
.foto-img{border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.18);flex:0 0 auto;display:inline-block;vertical-align:middle;}
.user-chip .foto-img,.user-chip .foto-ini{margin-right:2px;}

/* Histórico mensal (detalhe do cliente) */
.hist-mes{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:10px;}
.hist-mes summary{cursor:pointer;font-size:13.5px;color:var(--dark);}
.hist-mes summary:hover{color:var(--accent-dark);}
.hist-mes[open] summary{margin-bottom:4px;}

/* ==================== Demandas avulsas (Bloco 9) ==================== */
.dem-wrap{margin:32px 0 8px;}
.dem-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.dem-badge{flex:none;background:var(--st-travado-bg);color:var(--st-travado-fg);
  font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap;}
.dem-nova{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;margin:12px 0;}
.dem-nova summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent-dark);}
.dem-nova[open] summary{margin-bottom:10px;}
.dem-form .dem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.dem-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;
  font-weight:600;color:var(--muted);}
.dem-form .dem-full{grid-column:1 / -1;}
.dem-form .req{color:var(--st-travado-fg);}
.dem-form input,.dem-form textarea,.dem-form select{font:inherit;font-size:13.5px;
  font-weight:400;color:var(--dark);padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;width:100%;box-sizing:border-box;}
.dem-form textarea{resize:vertical;}
.dem-vazio{color:var(--muted);font-size:13.5px;font-style:italic;
  background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:16px;}
.dem-tabela td{vertical-align:top;}
.dem-desc{font-size:12.5px;color:var(--muted);margin-top:3px;}
.dem-meta{font-size:11.5px;color:var(--muted);margin-top:3px;}
.dem-fechada{opacity:.55;}
.dem-com{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.dem-com-incluido{color:var(--st-concluido-fg);background:var(--st-concluido-bg);}
.dem-com-extra{color:var(--accent-dark);background:var(--st-ciclo-bg);}
.dem-status{font:inherit;font-size:12.5px;font-weight:600;padding:5px 8px;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;}
.dem-st-aberta{color:var(--st-pend-fg);background:var(--st-pend-bg);}
.dem-st-em_producao{color:var(--st-andamento-fg);background:var(--st-andamento-bg);}
.dem-st-aprovacao{color:var(--st-ciclo-fg);background:var(--st-ciclo-bg);}
.dem-st-concluida{color:var(--st-concluido-fg);background:var(--st-concluido-bg);}
.dem-st-cancelada{color:var(--st-travado-fg);background:var(--st-travado-bg);}
/* Contador de demandas no Quadro */
.dem-tag{display:inline-block;font-size:11px;font-weight:700;text-decoration:none;
  color:var(--st-travado-fg);background:var(--st-travado-bg);padding:1px 7px;
  border-radius:20px;margin-left:6px;vertical-align:middle;}
.dem-tag:hover{filter:brightness(.95);}
@media(max-width:640px){.dem-form .dem-grid{grid-template-columns:1fr;}}

/* Abas da ficha do cliente (Processo / Demandas / Histórico) */
.abas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);
  margin:4px 0 22px;}
.aba{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:14px;font-weight:700;color:var(--muted);padding:10px 18px;
  border:2px solid transparent;border-bottom:none;border-radius:10px 10px 0 0;
  margin-bottom:-2px;}
.aba:hover{color:var(--dark);background:var(--panel);}
.aba.on{color:var(--dark);background:var(--paper);
  border-color:var(--line);border-bottom:2px solid var(--paper);}
/* Contador estilo WhatsApp: vermelho = tem pendência pra fazer */
.aba-n{background:#d33b2c;color:#fff;font-size:11.5px;font-weight:800;
  min-width:19px;height:19px;padding:0 5px;border-radius:20px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
/* Caixa "Extras do mês" (cobrança) */
.extras-box{background:#fff8ec;border:1px solid #f0dfae;border-left:4px solid var(--accent);
  border-radius:10px;padding:12px 16px;margin:12px 0;}
.extras-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;}
.extras-count{background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
  padding:3px 10px;border-radius:20px;white-space:nowrap;}
.extras-list{list-style:none;margin:10px 0 6px;padding:0;}
.extras-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px dashed #eaddb8;font-size:13px;}
.extras-list li:last-child{border-bottom:none;}
.extras-t{font-weight:600;color:var(--dark);}
.extras-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.extras-hint{font-size:11.5px;color:var(--muted);margin:4px 0 0;}

/* Data + hora "menorzinha" no Solicitado (demandas/extras) */
.hora-mini{font-size:11px;color:var(--muted);font-weight:600;}
.extras-quando{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;}
.extras-quando .hora-mini{font-size:10.5px;}
.dem-hint-inline{font-weight:400;font-size:10.5px;color:var(--accent-dark);
  background:var(--st-ciclo-bg);padding:1px 6px;border-radius:10px;margin-left:4px;}

/* ==================== Cockpit (Bloco 10) ==================== */
/* Tudo prefixado com ck- pra não colidir com nada das outras telas. */
.ck-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--st-ciclo-bg);display:inline-block;margin-right:9px;vertical-align:middle;}
.ck-mes{font-size:12.5px;font-weight:700;color:var(--accent-dark);background:var(--st-ciclo-bg);
  border:1px solid #ecdcb0;padding:6px 13px;border-radius:20px;}
.view-title h1{display:flex;align-items:center;}

/* KPIs */
.ck-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:26px;}
.ck-kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 16px;}
.ck-k-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:8px;}
.ck-k-n{font-size:26px;font-weight:800;line-height:1.05;}
.ck-k-hint{font-size:11.5px;color:var(--muted);margin-top:7px;}
.ck-kpi.alert{border-left:4px solid var(--st-travado-fg);}
.ck-kpi.alert .ck-k-n{color:var(--st-travado-fg);}
.ck-kpi.warn{border-left:4px solid var(--st-ciclo-fg);}
.ck-kpi.warn .ck-k-n{color:var(--st-ciclo-fg);}
.ck-kpi.ok{border-left:4px solid var(--st-concluido-fg);}
.ck-kpi.money{border-left:4px solid var(--accent);background:linear-gradient(180deg,#fffdf6,#fff8ec);}
.ck-kpi.money .ck-k-n{color:var(--accent-dark);font-size:22px;}

/* layout 2 colunas */
.ck-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start;}
.ck-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:20px;}
.ck-panel h2{font-size:15px;margin:0 0 3px;display:flex;align-items:center;gap:8px;}
.ck-p-sub{font-size:12px;color:var(--muted);margin:0 0 14px;}
.ck-badge{font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px;margin-left:auto;}
.ck-badge.red{background:var(--st-travado-bg);color:var(--st-travado-fg);}
.ck-badge.gold{background:var(--accent);color:#fff;}
.ck-vazio{font-size:13px;color:var(--muted);background:#faf7ef;border:1px dashed var(--line);border-radius:10px;padding:14px;}

/* clientes em risco */
.ck-risk{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--dark);}
.ck-risk:last-of-type{border-bottom:none;}
.ck-risk:hover{background:#fdf7f8;}
.ck-logo{width:38px;height:38px;border-radius:10px;background:#efe6cf;color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;}
.ck-risk-body{flex:1;min-width:0;}
.ck-risk-name{font-weight:700;font-size:14px;}
.ck-risk-reason{font-size:12.5px;color:var(--muted);margin-top:2px;}
.ck-tag{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.02em;flex:0 0 auto;}
.ck-rt-travado,.ck-rt-prazo{background:var(--st-travado-bg);color:var(--st-travado-fg);}
.ck-rt-contrato{background:var(--st-ciclo-bg);color:var(--st-ciclo-fg);}

/* tabela atrasadas */
.ck-tab{width:100%;border-collapse:collapse;font-size:13px;}
.ck-tab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#5b5747;
  font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);}
.ck-tab td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.ck-tab tr:last-child td{border-bottom:none;}
.ck-t-cli{font-weight:700;}
.ck-fase-chip{font-family:Consolas,Menlo,monospace;font-size:11px;background:var(--panel);padding:2px 7px;border-radius:4px;color:#5b5747;white-space:nowrap;}
.ck-venceu{color:var(--st-travado-fg);font-weight:700;font-size:12.5px;white-space:nowrap;}
.ck-mini-resp{display:flex;align-items:center;gap:7px;}
.ck-mini-resp .foto-ini,.ck-mini-resp .foto-img{width:26px;height:26px;font-size:10px;}
.ck-sem{color:var(--muted);font-style:italic;font-size:12px;}

/* extras a cobrar */
.ck-extras-li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 2px;border-bottom:1px dashed #eaddb8;color:var(--dark);}
.ck-extras-li:hover{background:#fffaf0;}
.ck-ex-t{font-size:13px;font-weight:600;}
.ck-ex-t small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px;}
.ck-ex-warn{color:var(--st-travado-fg);font-weight:700;}
.ck-ex-v{font-weight:800;font-size:13.5px;color:var(--accent-dark);white-space:nowrap;}
.ck-extras-total{display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;padding-top:12px;border-top:2px solid var(--line);}
.ck-lbl{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.ck-val{font-size:22px;font-weight:800;color:var(--accent-dark);}
.ck-btn-soon{display:block;text-align:center;background:var(--panel);color:var(--accent-dark);border-radius:8px;
  padding:10px;font-size:12.5px;font-weight:700;margin-top:14px;opacity:.7;cursor:not-allowed;}

/* carga equipe */
.ck-load{padding:11px 2px;border-bottom:1px solid var(--line);}
.ck-load:last-child{border-bottom:none;}
.ck-load-top{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.ck-load-name{font-weight:700;font-size:13px;flex:1;}
.ck-load-count{font-size:12px;color:var(--muted);font-weight:700;}
.ck-load-track{height:8px;background:#eee8d6;border-radius:6px;overflow:hidden;}
.ck-load-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-dark));}
.ck-load-fill.hot{background:linear-gradient(90deg,#d9663a,#b3401f);}
.ck-load-tag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;}
.ck-load-tag.hot{background:var(--st-travado-bg);color:var(--st-travado-fg);}
.ck-load-tag.ok{background:var(--st-concluido-bg);color:var(--st-concluido-fg);}

@media (max-width:900px){
  .ck-kpi-row{grid-template-columns:repeat(2,1fr);}
  .ck-cols{grid-template-columns:1fr;}
}
/* botão de fechamento no cockpit (substitui o "em breve") */
.ck-btn-fechar{display:block;text-align:center;background:var(--accent);color:#fff;border-radius:8px;
  padding:10px;font-size:12.5px;font-weight:700;margin-top:14px;text-decoration:none;}
.ck-btn-fechar:hover{background:var(--accent-dark);}

/* ==================== Fechamento financeiro (Bloco 11) ==================== */
.fz-resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 20px;}
.fz-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.fz-card .fz-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:7px;}
.fz-card .fz-n{font-size:22px;font-weight:800;}
.fz-card.money{border-left:4px solid var(--accent);}   .fz-card.money .fz-n{color:var(--accent-dark);}
.fz-card.warn{border-left:4px solid var(--st-ciclo-fg);} .fz-card.warn .fz-n{color:var(--st-ciclo-fg);}
.fz-card.ok{border-left:4px solid var(--st-concluido-fg);} .fz-card.ok .fz-n{color:var(--st-concluido-fg);}
.fz-acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.fz-hint{font-size:12px;color:var(--muted);max-width:520px;}
.fz-vazio{font-size:13.5px;color:var(--muted);background:#faf7ef;border:1px dashed var(--line);border-radius:10px;padding:18px;line-height:1.6;}
.fz-cliente{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;overflow:hidden;}
.fz-cli-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#fdf7f8;border-bottom:1px solid var(--line);}
.fz-cli-nome{display:flex;align-items:center;gap:11px;font-weight:800;font-size:15px;}
.fz-logo{width:34px;height:34px;border-radius:9px;background:#efe6cf;color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;}
.fz-cli-right{display:flex;align-items:center;gap:16px;}
.fz-sub{font-weight:800;font-size:16px;color:var(--accent-dark);}
.fz-print{font-size:12.5px;font-weight:700;color:var(--accent-dark);text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:6px 11px;}
.fz-print:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.fz-tab{width:100%;border-collapse:collapse;font-size:13px;}
.fz-tab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#5b5747;font-weight:700;padding:9px 18px;border-bottom:1px solid var(--line);}
.fz-tab td{padding:11px 18px;border-bottom:1px solid var(--line);vertical-align:middle;}
.fz-tab tr:last-child td{border-bottom:none;}
.fz-desc{font-weight:600;}
.fz-nowrap{white-space:nowrap;}
.fz-valor{font-weight:800;white-space:nowrap;}
.fz-cancelado{opacity:.5;text-decoration:line-through;}
.fz-cat{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;}
.fz-cat-mensalidade{background:var(--st-andamento-bg);color:var(--st-andamento-fg);}
.fz-cat-extra{background:var(--st-ciclo-bg);color:var(--accent-dark);}
.fz-cat-avulso{background:var(--st-pend-bg);color:var(--st-pend-fg);}
.fz-sit{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;}
.fz-sit small{font-weight:600;opacity:.85;}
.fz-sit-projetado{background:var(--st-pend-bg);color:var(--st-pend-fg);}
.fz-sit-dia{background:var(--st-concluido-bg);color:var(--st-concluido-fg);}
.fz-sit-atraso{background:var(--st-ciclo-bg);color:var(--accent-dark);}
.fz-sit-vencido{background:var(--st-travado-bg);color:var(--st-travado-fg);}
.fz-sit-cancelado{background:var(--st-pend-bg);color:var(--st-pend-fg);}
.fz-btn{border:none;border-radius:7px;padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}
.fz-btn.recebido{background:var(--st-concluido-fg);color:#fff;}
.fz-btn.desfazer{background:transparent;color:var(--muted);text-decoration:underline;padding:6px 4px;}
@media (max-width:900px){ .fz-resumo{grid-template-columns:repeat(2,1fr);} }

/* Contas a pagar (Etapa 2) */
.cp-rec{font-size:10px;font-weight:700;color:var(--accent-dark);background:var(--st-ciclo-bg);padding:1px 7px;border-radius:10px;margin-left:6px;white-space:nowrap;}
.cp-tipo{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;}
.cp-tipo-custo_fixo{background:var(--st-andamento-bg);color:var(--st-andamento-fg);}
.cp-tipo-custo_variavel{background:var(--st-ciclo-bg);color:var(--accent-dark);}
.cp-tipo-investimento{background:var(--st-concluido-bg);color:var(--st-concluido-fg);}
.cp-tipo-saida_nao_op{background:var(--st-pend-bg);color:var(--st-pend-fg);}
.cp-edit{background:var(--panel);color:var(--accent-dark);text-decoration:none;margin-left:2px;}
.cp-del{background:transparent;color:var(--st-travado-fg);text-decoration:underline;padding:6px 4px;}

/* ==================== DRE / Resultado (Etapa 3) ==================== */
.dre-wrap{overflow-x:auto;}
.dre-tab{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13.5px;min-width:560px;}
.dre-tab th{text-align:left;background:var(--panel);color:#5b5747;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:10px 16px;border-bottom:1px solid var(--line);font-weight:700;}
.dre-tab td{padding:10px 16px;border-bottom:1px solid var(--line);}
.dre-tab .num,.dre-tab th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.dre-lin.neg td:first-child{color:var(--muted);}
.dre-sub td{background:#fdf7f8;font-weight:700;}
.dre-tot td{background:var(--dark);color:#fff;font-weight:800;font-size:15px;border-bottom:none;}
.dre-tot td.pos{color:#8fe0a6;} .dre-tot td.neg2{color:#f0a58f;}
.dre-tab td.pos{color:var(--st-concluido-fg);font-weight:700;} .dre-tab td.neg2{color:var(--st-travado-fg);font-weight:700;}
.dre-tab .pct{color:var(--muted);font-size:12.5px;}
.dre-tab.ano th,.dre-tab.ano td{padding:8px 16px;}
.dre-vazio-mes td{color:#bcb7a8;}
.dre-mes-atual td{background:#fff8ec;}
.dre-ano-tot td{background:var(--panel);font-weight:800;border-bottom:none;border-top:2px solid var(--line);}
.dre-bar-track{height:9px;background:#eee8d6;border-radius:6px;overflow:hidden;}
.dre-bar{height:100%;border-radius:6px;}
.dre-bar.pos{background:linear-gradient(90deg,#3ba55d,var(--st-concluido-fg));}
.dre-bar.neg{background:linear-gradient(90deg,#d9663a,var(--st-travado-fg));}
.dre-cat td{background:#fffdf9;font-size:12.5px;color:var(--muted);border-bottom:1px solid #f2ecdd;}
.dre-cat td:first-child{padding-left:34px;}
.dre-cat td.num{color:var(--dark);}
.dre-cat td.pct{color:var(--muted);}

/* Painel Financeiro (Etapa E) */
.dash-hint{font-size:11.5px;color:var(--muted);margin-top:7px;}
.dash-alerta{color:var(--st-travado-fg);font-weight:700;}
.fz-card .fz-n.res-pos{color:var(--st-concluido-fg);}
.fz-card .fz-n.res-neg{color:var(--st-travado-fg);}
.fz-card .fz-n.neg-t{color:var(--st-travado-fg);}
.dash-sub-hint{font-size:11px;font-weight:700;color:var(--st-travado-fg);background:var(--st-travado-bg);padding:2px 8px;border-radius:20px;margin-left:auto;}
.dash-bloco-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.dash-bloco-t.in{color:var(--st-concluido-fg);}
.dash-bloco-t.out{color:var(--st-travado-fg);}
.dash-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);color:var(--dark);text-decoration:none;}
.dash-item:last-child{border-bottom:none;}
.dash-item:hover{background:#fdf7f8;}
.dash-il{display:flex;flex-direction:column;min-width:0;}
.dash-il strong{font-size:13px;}
.dash-il small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
.dash-ir{text-align:right;white-space:nowrap;flex:0 0 auto;}
.dash-v{display:block;font-weight:800;font-size:13px;}
.dash-v.in{color:var(--st-concluido-fg);}
.dash-v.out{color:var(--st-travado-fg);}
.dash-d{font-size:11px;color:var(--muted);}
.dash-d.venc{color:var(--st-travado-fg);font-weight:700;}
.dash-vazio{font-size:12.5px;color:var(--muted);font-style:italic;padding:4px 2px;}

/* Sub-navegação do Módulo Financeiro */
.fin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;border-bottom:2px solid var(--line);}
.fin-nav a{font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:none;padding:9px 15px;
  border-radius:9px 9px 0 0;border:2px solid transparent;border-bottom:none;margin-bottom:-2px;}
.fin-nav a:hover{background:var(--panel);color:var(--dark);}
.fin-nav a.on{color:var(--accent-dark);background:var(--paper);border-color:var(--line);border-bottom:2px solid var(--paper);}
.fz-receber-form{margin:0;display:inline-flex;align-items:center;gap:4px;vertical-align:middle;}
.fz-data-in{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:11.5px;font-family:inherit;background:#fff;}

/* Cadastro / plano de contas (Etapa B) */
.cad-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.cad-bloco{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.cad-bloco h2{font-size:15px;margin:0 0 12px;}
.cad-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.cad-add input[type=text],.cad-add select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13.5px;background:#fff;}
.cad-add input[type=text]{flex:1;min-width:150px;}
.cad-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cad-sub{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:6px;}
.cad-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13px;}
.cad-item:last-child{border-bottom:none;}
.cad-item.inat span{color:#bcb7a8;text-decoration:line-through;}
.cad-tipo{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent-dark);background:var(--st-ciclo-bg);padding:1px 6px;border-radius:10px;margin-left:4px;}
.cad-acoes{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.cad-toggle{border:none;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.cad-toggle.on{background:var(--st-concluido-bg);color:var(--st-concluido-fg);}
.cad-toggle.off{background:var(--st-pend-bg);color:var(--st-pend-fg);}
.cad-del{border:none;background:transparent;color:var(--st-travado-fg);font-size:16px;line-height:1;cursor:pointer;font-weight:700;padding:0 4px;}
.cad-vazio{font-size:12.5px;color:var(--muted);font-style:italic;padding:6px 0;}
@media (max-width:760px){ .cad-cols,.cad-grid2{grid-template-columns:1fr;} }

/* =====================================================================
   MENU EM GRUPOS

   O menu tinha 16 links numa linha só e já não cabia. Agora são 6
   entradas, e as que agrupam abrem no CLIQUE, não no passar do mouse:
   menu que abre sozinho quando o mouse cruza a tela é fonte de clique
   errado, e no touch nem existe hover.
   ===================================================================== */
.topnav{display:flex;gap:2px;align-items:center;margin-right:6px;}
.tn-link,.tn-btn{font-size:13.5px;color:var(--muted);text-decoration:none;padding:8px 11px;border-radius:9px;
  background:none;border:none;font-family:inherit;font-weight:500;cursor:pointer;line-height:1.2;
  display:flex;align-items:center;gap:5px;white-space:nowrap;}
.tn-link:hover,.tn-btn:hover{background:var(--panel);color:var(--dark);}
.tn-link.on,.tn-btn.on{background:var(--dark);color:#fff;font-weight:700;}
.tn-seta{font-size:9px;opacity:.65;margin-left:1px;}
.tn-grupo{position:relative;}
.tn-grupo.aberto>.tn-btn{background:var(--panel);color:var(--dark);}
.tn-grupo.aberto>.tn-btn.on{background:var(--dark);color:#fff;}
.tn-drop{display:none;position:absolute;top:calc(100% + 7px);left:0;min-width:216px;z-index:90;
  background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:6px;
  box-shadow:0 18px 46px rgba(0,0,0,.16);}
.tn-grupo.aberto .tn-drop{display:block;}
.tn-drop a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--dark);text-decoration:none;}
.tn-drop a:hover{background:var(--panel);}
.tn-drop a.on{background:var(--dark);color:#fff;font-weight:700;}
.tn-badge{font-size:10.5px;font-weight:800;border-radius:20px;padding:1px 7px;line-height:1.5;flex:0 0 auto;}
/* Bolinha no grupo: tem pendência lá dentro, sem dizer quanto ainda. */
.tn-pt{width:7px;height:7px;border-radius:50%;background:#d33b2c;display:inline-block;margin-left:1px;}

/* Sanduíche e atalhos: só existem no celular */
.mob-btn,.mob-atalhos{display:none;}
.mob-btn{position:relative;background:none;border:1px solid var(--line);border-radius:10px;
  width:40px;height:40px;padding:0 10px;cursor:pointer;flex-direction:column;justify-content:center;gap:4px;flex:0 0 auto;}
.mob-btn span{display:block;height:2px;background:var(--dark);border-radius:2px;}
.mob-btn .mob-pt{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:#d33b2c;border:2px solid var(--paper);}
.mob-atalhos{gap:4px;}
.mob-atalhos a{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;font-size:17px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto;}
.mob-atalhos a.on{background:var(--dark);border-color:var(--dark);}

/* ---- Gaveta ---- */
.gav-fundo{display:none;position:fixed;inset:0;background:rgba(20,14,20,.42);z-index:95;}
.gav-fundo.on{display:block;}
.gaveta{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:86vw;background:var(--paper);
  z-index:96;transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.2);}
.gaveta.aberta{transform:translateX(0);}
.gav-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;border-bottom:1px solid var(--line);}
.gav-quem{display:flex;align-items:center;gap:9px;font-size:14px;min-width:0;}
.gav-quem b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gav-x{background:none;border:none;font-size:27px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;}
.gav-nav{flex:1;overflow-y:auto;padding:10px 10px 18px;-webkit-overflow-scrolling:touch;}
.gav-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:16px 10px 6px;}
.gav-link{display:flex;align-items:center;gap:2px;
  padding:12px 11px;border-radius:10px;text-decoration:none;color:var(--dark);font-size:14.5px;font-weight:600;}
/* O badge é o único que vai pra direita; o resto fica colado no ícone. */
.gav-link .tn-badge{margin-left:auto;}
.gav-link.sub{font-weight:500;padding-left:15px;}
.gav-link.on{background:var(--dark);color:#fff;}
.gav-link:active{background:var(--panel);}
.gav-ic{margin-right:9px;}
.gav-pe{padding:13px 16px;border-top:1px solid var(--line);}
.gav-pe .btn{width:100%;text-align:center;}

/* =====================================================================
   BLOCO Responsivo / Mobile

   A causa raiz do "card esticando pra fora da tela": filho de grid e de
   flex nasce com min-width:auto, ou seja, ele se recusa a ficar menor
   que o conteúdo. Uma tabela larga dentro de um card dentro de um grid
   empurra tudo e a página inteira ganha rolagem lateral.
   O min-width:0 abaixo é o que autoriza o card a encolher e deixar a
   rolagem acontecer onde ela deve: dentro do .rolagem.
   ===================================================================== */
.grid2>*,.kpi-row>*,.cad-cols>*,.cad-grid2>*,.summary-row>*,
.aj-wrap>*,.dem-grid>*,.ck-kpi-row>*,.fz-resumo>*{min-width:0;}
.bloco{max-width:100%;overflow-wrap:break-word;}
.bloco>table,.bloco>.rolagem{max-width:100%;}

@media (max-width:900px){
  .topnav{display:none;}
  .mob-btn{display:flex;}
  .mob-atalhos{display:flex;}
  header.topbar{padding:12px 16px;gap:10px;}
  .brand .logo-img{height:26px;}
  .brand .name{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw;}
  .topbar-actions{gap:7px;}
  .user-chip{display:none;}
  .topbar-actions>.btn-ghost{display:none;}
}

@media (max-width:640px){
  /* Cards de resumo em 2 colunas */
  .summary-row{grid-template-columns:repeat(2,1fr);}
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:9px;}
  .kpi{padding:11px 12px;}
  .kpi b{font-size:18px;}
  /* Cabeçalhos podem quebrar em vez de espremer */
  .view-title{flex-wrap:wrap;gap:10px;}
  .fz-cli-head{flex-wrap:wrap;}
  main{padding:16px 12px 40px;}
  .bloco{padding:14px 13px;border-radius:12px;}
  /* Tabela larga rola dentro do card, nunca empurrando a página */
  .fz-tab{display:block;width:100%;white-space:nowrap;overflow:auto !important;-webkit-overflow-scrolling:touch;}
  /* Campo de formulário: 16px evita o zoom automático do iPhone */
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=date],input[type=time],input[type=tel],select,textarea{font-size:16px;}
  /* Alvo de toque decente nos botões de linha */
  .acoes-linha .btn{padding:9px 13px;}
}

/* =====================================================================
   AGENDA — o coração do sistema. Grade leve, sem canvas, sem biblioteca.
   Colunas por profissional, blocos coloridos por status, arrastar pra
   remarcar. Tudo CSS grid + um pouco de JS nativo.
   ===================================================================== */
.ag-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;}
.ag-bar .sp{flex:1;}
.ag-nav{display:flex;align-items:center;gap:6px;}
.ag-nav a,.ag-nav button{border:1px solid var(--line);background:var(--paper);color:var(--dark);
  border-radius:9px;padding:8px 13px;font-size:13.5px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;}
.ag-nav a:hover{background:var(--panel);}
.ag-hoje{font-size:15px;font-weight:800;text-transform:capitalize;}
.ag-modo{display:flex;gap:6px;}
.ag-modo a{font-size:12.5px;font-weight:800;padding:7px 14px;border-radius:20px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted);text-decoration:none;}
.ag-modo a.on{background:var(--dark);color:#fff;border-color:var(--dark);}

.ag-wrap{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:auto;}
.ag-grade{display:grid;min-width:640px;}
.ag-cab{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line);
  padding:11px 10px;font-size:12.5px;font-weight:800;text-align:center;}
.ag-cab small{display:block;font-weight:600;color:var(--muted);font-size:11px;margin-top:2px;}
.ag-hora{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:4px 8px;font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;}
.ag-cel{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2px;position:relative;min-height:34px;}
.ag-cel.livre{cursor:pointer;}
.ag-cel.livre:hover{background:#fdf4f6;}
.ag-cel.fora{background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 6px,#fff 6px,#fff 12px);}
/* Intervalo do salão: faixa clara e sem clique. Quem olha entende na hora. */
.ag-cel.almoco{background:repeating-linear-gradient(135deg,#f3ecdf,#f3ecdf 7px,#fbf7ef 7px,#fbf7ef 14px);cursor:not-allowed;}
.ag-bloco{display:block;border-radius:8px;padding:5px 8px;font-size:12px;line-height:1.3;
  text-decoration:none;color:var(--dark);border-left:4px solid;overflow:hidden;cursor:grab;}
.ag-bloco b{display:block;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ag-bloco span{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ag-bloco.dragging{opacity:.45;}
.ag-cel.alvo{background:#e3f2e1;outline:2px dashed var(--st-concluido-fg);outline-offset:-3px;}
.st-agendado{background:var(--st-pend-bg);border-color:var(--st-pend-fg);}
.st-confirmado{background:var(--st-andamento-bg);border-color:var(--st-andamento-fg);}
.st-em_atendimento{background:var(--st-ciclo-bg);border-color:var(--accent);}
.st-concluido{background:var(--st-concluido-bg);border-color:var(--st-concluido-fg);}
.st-faltou{background:var(--st-travado-bg);border-color:var(--st-travado-fg);}
.st-cancelado{background:#f2f2f2;border-color:#b9b2b5;text-decoration:line-through;}
.ag-bloqueio{background:repeating-linear-gradient(45deg,#eeeaee,#eeeaee 5px,#f8f5f8 5px,#f8f5f8 10px);
  border-radius:8px;padding:5px 8px;font-size:11.5px;color:var(--muted);font-weight:700;}
.ag-legenda{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 0;font-size:12px;color:var(--muted);}
.ag-legenda i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
.ag-vazio{padding:34px 16px;text-align:center;color:var(--muted);font-size:13.5px;}

/* Painel lateral de marcação e edição */
.ag-painel{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:94vw;background:var(--paper);
  border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(0,0,0,.14);z-index:90;
  transform:translateX(100%);transition:transform .18s ease;overflow-y:auto;}
.ag-painel.open{transform:translateX(0);}
.ag-painel .ap-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:2;}
.ag-painel .ap-head h2{font-size:16px;margin:0;}
.ag-painel .ap-body{padding:18px;}
.ap-fechar{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);line-height:1;}
.ap-servicos{border:1px solid var(--line);border-radius:10px;max-height:230px;overflow-y:auto;background:#fff;}
.ap-serv{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;}
.ap-serv:last-child{border-bottom:none;}
.ap-serv input{margin:0;}
.ap-serv .nm{flex:1;}
.ap-serv .mt{color:var(--muted);font-size:11.5px;white-space:nowrap;}
.ap-total{display:flex;justify-content:space-between;align-items:center;background:var(--panel);
  border-radius:10px;padding:11px 14px;margin:12px 0;font-size:13.5px;font-weight:800;}
.ap-aviso{background:#fff8ec;border:1px solid #f0dfae;border-left:4px solid var(--accent);
  border-radius:9px;padding:11px 13px;font-size:12.5px;margin:10px 0;}
.ap-quimica{background:var(--st-travado-bg);border:1px solid #f0c4b8;border-left:4px solid var(--st-travado-fg);
  border-radius:9px;padding:11px 13px;font-size:12.5px;margin:10px 0;color:#7a2a15;}
.ap-linha{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.ap-linha:last-child{border-bottom:none;}
.ap-linha b{font-weight:700;}
.ap-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ap-acoes button, .ap-acoes a{border:1px solid var(--line);background:var(--paper);border-radius:9px;
  padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;color:var(--dark);}
.ap-acoes button.ok{background:var(--st-concluido-bg);border-color:var(--st-concluido-fg);color:var(--st-concluido-fg);}
.ap-acoes button.warn{background:var(--st-travado-bg);border-color:var(--st-travado-fg);color:var(--st-travado-fg);}
.ap-acoes button.prim{background:var(--accent);border-color:var(--accent);color:#fff;}

/* KPI simples reaproveitado em várias telas */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px;}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.kpi b{display:block;font-size:22px;line-height:1.1;}
.kpi span{color:var(--muted);font-size:12px;}
.kpi.alert b{color:var(--st-travado-fg);}
.kpi.ok b{color:var(--st-concluido-fg);}

/* Barra de ocupação por profissional */
.oc-linha{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);}
.oc-linha:last-child{border-bottom:none;}
.oc-nome{width:150px;font-size:13.5px;font-weight:700;flex:0 0 auto;}
.oc-track{flex:1;height:9px;background:var(--panel);border-radius:20px;overflow:hidden;}
.oc-fill{height:100%;background:var(--accent);border-radius:20px;}
.oc-fill.hot{background:var(--st-travado-fg);}
.oc-pct{width:52px;text-align:right;font-size:12.5px;color:var(--muted);flex:0 0 auto;}

/* Tabelas e listas de cadastro */
.busca-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;}
.busca-bar input[type=text]{flex:1;min-width:200px;padding:10px 13px;border:1px solid var(--line);
  border-radius:9px;font-size:14px;font-family:inherit;background:var(--paper);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:760px){.grid2{grid-template-columns:1fr;}}
.bloco{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px;}
.bloco h2{font-size:15px;margin:0 0 12px;}
.aviso-quimica{background:var(--st-travado-bg);border:1px solid #f0c4b8;border-left:4px solid var(--st-travado-fg);
  border-radius:10px;padding:13px 15px;font-size:13.5px;color:#7a2a15;margin-bottom:16px;}
.aviso-quimica b{display:block;margin-bottom:3px;}
.tag{display:inline-block;white-space:nowrap;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 8px;border-radius:20px;background:var(--panel);color:var(--muted);}

/* Caixa de seleção nunca herda o width:100% dos campos de texto. */
.field input[type=checkbox], .field input[type=radio],
.ap-serv input[type=checkbox], table input[type=checkbox]{
  width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--accent);
}
.field input[type=color]{width:64px;padding:3px;}
/* Legenda de status: quadradinho com a cor de cada situação. */
.ag-legenda i{border:1px solid rgba(0,0,0,.12);}

/* Painel de marcação em 3 passos: cliente, serviço, horário que cabe. */
.ap-passo{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:20px 0 10px;}
.ap-passo:first-child{margin-top:0;}
.ap-num{width:21px;height:21px;border-radius:50%;background:var(--dark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;flex:0 0 auto;}
.ap-slots{border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px 0;max-height:290px;overflow-y:auto;}
.ap-slots-vazio{padding:16px 14px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.ap-slot-grupo{padding:10px 13px;border-bottom:1px solid var(--line);}
.ap-slot-grupo:last-child{border-bottom:none;}
.ap-slot-quem{font-size:12.5px;font-weight:800;margin-bottom:8px;}
.ap-slot-est{font-weight:600;color:var(--muted);font-size:11px;background:var(--panel);
  padding:1px 7px;border-radius:20px;margin-left:5px;}
.ap-slot-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ap-chip{border:1px solid var(--line);background:var(--paper);color:var(--dark);border-radius:8px;
  padding:7px 11px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.ap-chip:hover{background:var(--panel);}
.ap-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
#ap-btn:disabled{background:var(--panel);color:var(--muted);cursor:not-allowed;border:1px solid var(--line);}

/* Botão de ação destrutiva: existe, mas não convida. */
.btn-perigo{background:transparent;color:var(--st-travado-fg);border:1px solid #f0c4b8;}
.btn-perigo:hover{background:var(--st-travado-bg);}

/* Tabela larga não estoura o card: rola na horizontal dentro dele.
   Sem min-width fixo: dentro de uma coluna estreita (card lado a lado)
   um mínimo de 640px cortava o conteúdo em vez de ajudar. A tabela se
   acomoda no espaço que tem, e quando não couber mesmo, rola. */
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px;max-width:100%;}
.rolagem .tabela{min-width:0;}
.acoes-linha{display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}

/* =====================================================================
   MOBILE, A PALAVRA FINAL

   Este bloco fica no fim do arquivo de propósito: regra de CSS empatada
   em especificidade é decidida por ordem, e o que está aqui precisa
   ganhar de tudo que veio antes.

   A ideia é simples: NADA empurra a página pro lado. Tabela larga rola
   dentro do próprio card, com uma sombra na borda avisando que tem mais
   coisa pra direita. Rolagem invisível é rolagem que ninguém usa.
   ===================================================================== */
@media (max-width:900px){
  /* Qualquer tabela, esteja ela dentro do .rolagem ou solta no card,
     ganha rolagem própria e para de empurrar a tela. */
  .tabela,.dre-tab,.fc-tab,.fz-tab,.dem-tabela{
    display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .rolagem{max-width:100%;}
  .rolagem .tabela,.dre-tab,.fc-tab,.fz-tab,.tabela{min-width:0;}
  .tabela th,.tabela td{padding:9px 10px;}
  /* Sombra na direita: sinal de que a tabela continua. */
  .rolagem,.tabela,.dre-tab,.fc-tab{
    background-image:linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 12px);
    background-position:right center;background-repeat:no-repeat;background-size:12px 100%;
    background-attachment:local;}
  /* Barra de ocupação: nome em cima, barra embaixo, sem espremer. */
  .oc-linha{flex-wrap:wrap;gap:6px 10px;}
  .oc-nome{width:auto;flex:1 1 100%;}
  .oc-track{flex:1 1 auto;}
  /* Painéis laterais viram folha de baixo pra cima, do jeito que o
     dedo espera no celular. */
  .ag-painel{width:100% !important;max-width:100% !important;}
  /* Barra de filtros empilha em vez de estourar. */
  .ag-bar,.busca-bar{gap:8px;}
  .ag-bar form,.busca-bar{width:100%;}
  .ag-bar select,.ag-bar input[type=date]{flex:1 1 auto;min-width:0;}
  .abas{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .abas .aba{flex:0 0 auto;white-space:nowrap;}
}

@media (max-width:640px){
  .grid2{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  /* Botão em linha vira largura cheia quando sozinho no card. */
  .bloco>form>.btn{width:100%;text-align:center;}
  img.aj-print{max-width:100%;height:auto;}
}

@media (max-width:400px){
  /* Duas colunas de KPI seguram até 320px. Uma coluna só empurra o
     conteúdo da tela pra baixo e obriga a rolar pra ver o que importa. */
  .kpi b{font-size:16.5px;}
  .kpi span{font-size:11px;}
  .kpi{padding:10px;}
  .brand .name{max-width:30vw;}
}

/* =====================================================================
   TABELA VIRA CARTÃO NO CELULAR

   A classe .gs-card é posta pelo JS do _topo.php, que copia o nome da
   coluna do <th> pro atributo data-rot de cada célula. Aqui a tabela
   deixa de ser tabela: cada linha vira um cartão com rótulo e valor
   lado a lado. Some a rolagem lateral cega, e some a quebra de palavra
   no meio ("EM ABER TO"), que era o que estava acontecendo.
   ===================================================================== */
@media (max-width:640px){
  table.gs-card,table.gs-card tbody,table.gs-card tfoot,
  table.gs-card tr,table.gs-card td{display:block;width:auto;max-width:100%;}
  table.gs-card{border:none;background:none;overflow:visible;background-image:none;}
  table.gs-card thead{display:none;}
  table.gs-card tbody tr{border:1px solid var(--line);border-radius:12px;background:var(--paper);
    margin:0 0 10px;padding:4px 0;overflow:hidden;}
  /* Grid e não flex: no grid a coluna do valor recebe minmax(0,1fr) e
     pode encolher de verdade. No flex ela travava no tamanho do texto
     e espremia tudo numa tira fina do lado direito. */
  table.gs-card td{border-bottom:1px solid var(--line);padding:9px 13px;white-space:normal;
    display:grid;grid-template-columns:33% minmax(0,1fr);gap:6px 12px;align-items:baseline;
    text-align:right;justify-items:end;}
  /* No grid, cada filho vira item e esticaria na coluna inteira: é o que
     fazia a etiqueta "MENSAL" virar uma barra de ponta a ponta. */
  table.gs-card td>*{justify-self:end;}
  table.gs-card tbody tr td:last-child{border-bottom:none;}
  table.gs-card td:before{content:attr(data-rot);justify-self:start;font-size:10.5px;font-weight:800;text-align:left;
    text-transform:uppercase;letter-spacing:.03em;color:var(--muted);line-height:1.5;}
  /* Célula com texto comprido (nome da conta, do cliente) fica melhor
     com o rótulo em cima e o texto usando a linha inteira. */
  table.gs-card td.gs-largo{grid-template-columns:1fr;text-align:left;gap:3px;justify-items:start;}
  table.gs-card td.gs-largo>*{justify-self:start;}
  /* Coluna sem título (a dos botões) ocupa a largura toda. */
  table.gs-card td:not([data-rot]){display:block;}
  table.gs-card td:not([data-rot]):before{display:none;}
  table.gs-card .acoes-linha{justify-content:flex-start;}
  table.gs-card .acoes-linha .btn{flex:1 1 auto;text-align:center;}
  /* Rodapé de total continua legível, só que empilhado. */
  table.gs-card tfoot tr{display:block;border:1px solid var(--line);border-radius:12px;
    background:var(--panel);margin:0 0 10px;padding:4px 0;}
  table.gs-card tfoot td{display:flex;justify-content:space-between;gap:12px;text-align:left !important;
    border-bottom:1px solid var(--line);}
  table.gs-card tfoot tr td:last-child{border-bottom:none;}
  table.gs-card tfoot td:empty{display:none;}
}