:root{
  --bg:#f4f5fb;
  --card:#ffffff;
  --border:#e5e7eb;
  --muted:#6b7280;
  --text:#111827;
  --accent1:#2563eb;
  --accent2:#1d4ed8;
  --ok:#16a34a;
  --warn:#facc15;
  --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text)}
a{color:inherit; text-decoration:none}
.app{display:grid; grid-template-columns:260px 1fr; min-height:100vh}
.sidebar{border-right:1px solid var(--border);padding:16px;background:linear-gradient(180deg,#f9fafb,#e5edff)}
.brand{display:flex; gap:10px; align-items:center; margin-bottom:16px}
.brand i{font-size:22px}
.brand strong{display:block; font-size:18px}
.muted{color:var(--muted); font-size:12px}
.nav{display:flex; flex-direction:column; gap:8px}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid transparent;color:#1f2937;font-size:14px}
.nav a:hover{background:#e5edff;border-color:var(--border)}
.nav a.active{background:#1d4ed8;border-color:#1d4ed8;color:#ffffff}
.main{padding:16px 24px;background:var(--bg);}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:rgba(255,255,255,.04); padding:6px 10px; border-radius:999px; font-size:12px; color:#cfe1ff}
.section{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px}
.h{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
h1,h2,h3{margin:0 0 10px 0}
.toolbar{display:flex; gap:10px; flex-wrap:wrap}
.btn{background:linear-gradient(180deg,var(--accent1),var(--accent2)); border:0; color:white; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700}
.btn.alt{background:#111827;border:1px solid #111827;color:#ffffff}
.btn.ghost{background:transparent;border:1px dashed var(--border);color:var(--text)}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.field input,.field select,.field textarea{background:#ffffff;color:var(--text);border:1px solid var(--border);padding:10px;border-radius:12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:900px){ .app{grid-template-columns:1fr} .sidebar{position:sticky; top:0; z-index:5} .grid-3,.grid-4{grid-template-columns:1fr} }
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{color:#4b5563;font-weight:600;text-align:left;padding:8px;background:#f3f4f6}
.table td{padding:10px 8px;background:#ffffff;color:var(--text);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.table tr td:first-child{border-left:1px solid var(--border); border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid var(--border); border-top-right-radius:12px; border-bottom-right-radius:12px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px}
.kpi .v{font-size:22px; font-weight:800}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border)}
.badge.ok{color:#b7ffdd; background:rgba(61,220,151,.12); border-color:rgba(61,220,151,.4)}
.badge.warn{color:#ffe0a3; background:rgba(255,209,102,.12); border-color:rgba(255,209,102,.4)}
.badge.danger{color:#ffc1c1; background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.4)}
.auth-wrap{display:flex; align-items:center; justify-content:center}
.login-card{width:min(520px,96vw); background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; margin:20px auto}
.hr{height:1px; background:var(--border); margin:14px 0}
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5)}
.modal .mc{width:min(720px,96vw); background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px}
.modal .mh{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.modal .mb{max-height:70vh; overflow:auto}

.btn.danger{border-color:var(--danger);color:var(--danger)}

.btn i{margin-left:6px;}
.table td .btn + .btn{margin-left:8px;}


/* Projetos: Dias restantes + barra começo/meio/fim */
.pr-deadline{min-width:170px}
.pr-deadline .pr-days{font-size:12px; opacity:.9; margin-bottom:6px; white-space:nowrap}
.pr-bar{position:relative; height:10px; border-radius:999px; background:#e7e7e7; overflow:hidden}
.pr-bar .pr-fill{position:absolute; left:0; top:0; bottom:0; width:0%}
.pr-bar.ok .pr-fill{background:#25a55b}
.pr-bar.warn .pr-fill{background:#f0b429}
.pr-bar.bad .pr-fill{background:#e23d3d}
.pr-ticks{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:0 3px; pointer-events:none}
.pr-ticks span{width:6px; height:6px; border-radius:999px; background:rgba(0,0,0,.18)}
.pr-bar.ok .pr-ticks span{background:rgba(255,255,255,.55)}
.pr-bar.warn .pr-ticks span{background:rgba(255,255,255,.55)}
.pr-bar.bad .pr-ticks span{background:rgba(255,255,255,.55)}


/* Menu: subitem */
.nav a.subitem{padding-left:44px; font-size:13px; opacity:.9}
.nav a.subitem i{opacity:.85}


/* Projetos > Tarefas: destaque por prazo do projeto */
.pt-proj{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pt-badge{display:inline-flex; align-items:center; height:18px; padding:0 8px; border-radius:999px; font-size:12px; line-height:18px; color:#fff; opacity:.95}
.pt-badge.ok{background:#25a55b}
.pt-badge.warn{background:#f0b429}
.pt-badge.bad{background:#e23d3d}
.pt-row-warn td{background:rgba(240,180,41,.08)}
.pt-row-bad td{background:rgba(226,61,61,.10)}


/* Status badge (Projetos > Tarefas) */
.st-badge{display:inline-flex; align-items:center; height:20px; padding:0 10px; border-radius:999px; font-size:12px; line-height:20px; color:#fff; cursor:pointer; user-select:none}
.st-badge.open{background:#6b7280} /* Aberta - cinza */
.st-badge.warn{background:#f0b429} /* Em andamento - amarelo */
.st-badge.ok{background:#25a55b}   /* Concluída - verde */

/* Menu inline do status */
.pt-menu{position:fixed; z-index:9999; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; min-width:180px}
.pt-menu-item{width:100%; text-align:left; border:0; background:transparent; padding:10px 10px; border-radius:10px; cursor:pointer; font-size:14px}
.pt-menu-item:hover{background:rgba(0,0,0,.06)}


/* Switch (ON/OFF) */
.switch{position:relative; display:inline-block; width:46px; height:24px; vertical-align:middle}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#cbd5e1; transition:.2s; border-radius:999px}
.slider:before{position:absolute; content:""; height:18px; width:18px; left:3px; top:3px; background:white; transition:.2s; border-radius:999px}
.switch input:checked + .slider{background:#2563eb}
.switch input:checked + .slider:before{transform:translateX(22px)}
.small-note{font-size:12px; opacity:.85}


/* Cards (Painel do Cliente) */
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.04)}
.card-title{font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:10px}
.card-title i{opacity:.9}

/* Progress bar (Projetos) */
.progress{height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin-top:6px}
.progress span{display:block; height:100%; background:var(--ok)}
.progress.warn span{background:var(--warn)}
.progress.bad span{background:var(--danger)}

@media (max-width: 980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:sticky; top:0}
  .cards{grid-template-columns:1fr}
}



/* Status estilo Notion (Projetos > Tarefas) */
.st-badge{display:inline-flex; align-items:center; gap:8px; height:22px; padding:0 10px; border-radius:999px; font-size:13px; line-height:22px; color:#0f172a; border:1px solid rgba(15,23,42,.10); background:#fff; cursor:pointer; user-select:none}
.st-badge .st-dot{width:8px; height:8px; border-radius:999px; background:#94a3b8}
.st-badge.todo{background:rgba(148,163,184,.18)}
.st-badge.todo .st-dot{background:#94a3b8}
.st-badge.progress{background:rgba(59,130,246,.14)}
.st-badge.progress .st-dot{background:#3b82f6}
.st-badge.done{background:rgba(34,197,94,.14)}
.st-badge.done .st-dot{background:#22c55e}

/* Menu de status (agrupado) */
.pt-menu{position:fixed; z-index:9999; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.14); padding:10px; min-width:240px}
.pt-menu-section{padding:6px 6px 2px}
.pt-menu-h{font-size:12px; color:#64748b; font-weight:800; padding:4px 6px}
.pt-menu-sep{height:1px; background:rgba(15,23,42,.08); margin:8px 6px}
.pt-menu-item{width:100%; text-align:left; border:0; background:transparent; padding:8px 6px; border-radius:12px; cursor:pointer; font-size:14px}
.pt-menu-item:hover{background:rgba(15,23,42,.06)}
.pt-menu-muted{color:#0f172a; opacity:.9}
.pt-menu-item .st-badge{cursor:inherit} /* dentro do menu */



/* Menu simples de status (sem títulos) */
.pt-menu{padding:8px !important; min-width:220px}
.pt-menu-section,.pt-menu-h,.pt-menu-sep,.pt-menu-muted{display:none !important}
.pt-menu-item{padding:8px 8px !important}



/* FORÇA badge pill com bolinha (Projetos > Tarefas) */
.st-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  height:22px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:22px !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:#fff !important;
  cursor:pointer !important;
  user-select:none !important;
}
.st-badge .st-dot{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:#94a3b8 !important;
}
.st-badge.todo{background:rgba(148,163,184,.18) !important;}
.st-badge.todo .st-dot{background:#94a3b8 !important;}
.st-badge.progress{background:rgba(59,130,246,.14) !important;}
.st-badge.progress .st-dot{background:#3b82f6 !important;}
.st-badge.done{background:rgba(34,197,94,.14) !important;}
.st-badge.done .st-dot{background:#22c55e !important;}



/* Congela largura da coluna Status (Projetos • Tarefas) para não "andar" ao trocar o texto */
.pt-tarefas-table table{table-layout:fixed}
.pt-tarefas-table th:nth-child(5),
.pt-tarefas-table td:nth-child(5){width:210px; white-space:nowrap}

/* Reserva sempre o espaço do texto "Em andamento" */
.pt-tarefas-table td:nth-child(5) .st-badge{
  min-width:165px;
  justify-content:flex-start;
}



/* Kanban (Projetos • Telas) */
.kanban{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px}
.kcol{background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:0 16px 40px rgba(15,23,42,.06); overflow:hidden}
.khead{padding:12px 14px; font-weight:900; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); background:rgba(15,23,42,.02)}
.kcount{font-weight:900; color:var(--muted); font-size:12px; padding:3px 8px; border-radius:999px; background:rgba(15,23,42,.06)}
.kbody{padding:12px; min-height:220px}
.kcard{background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:16px; padding:10px 12px; margin-bottom:10px; cursor:pointer; box-shadow:0 10px 22px rgba(15,23,42,.06)}
.kcard:hover{transform:translateY(-1px)}
.ktitle{font-weight:900}
.kmeta{margin-top:4px; color:var(--muted); font-size:12px}
.kcol.drag{outline:3px solid rgba(98,89,202,.25)}
@media (max-width: 980px){ .kanban{grid-template-columns:1fr} }


/* Prazo no card Kanban */
.ktitle{display:flex; align-items:center; justify-content:space-between; gap:10px}
.kprazo{font-size:12px; color:var(--muted); font-weight:800; white-space:nowrap}



/* Kanban • Telas: indicador JSON e label Prazo */
.kprazo{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.kprazo-label{font-size:11px; color:var(--muted); font-weight:900; line-height:1}
.kprazo-date{font-size:12px; color:var(--muted); font-weight:800; line-height:1.1; white-space:nowrap}

.kjson{font-weight:900; font-size:12px}
.kjson.ok{color:#2563eb}   /* azul */
.kjson.bad{color:#ef4444}  /* vermelho */



/* Kanban • Telas: gráfico de dias restantes (abaixo do prazo) */
.kdays{display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:6px}
.kdays-num{font-size:12px; font-weight:900; color:var(--text); line-height:1}
.kdays-bar{width:160px; height:8px; border-radius:999px}
.kdays-bar.progress{margin-top:0}
.kdays-bar.progress span{height:100%}
@media (max-width: 420px){
  .kdays-bar{width:120px}
}



/* Kanban • Telas: JSON + gráfico na mesma linha */
.kbottom{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.kdays-inline{display:flex; align-items:center; gap:10px}
.kdays-inline .kdays-num{font-size:12px; font-weight:900; color:var(--text); white-space:nowrap}
.kdays-inline .kdays-bar{width:160px; height:8px; border-radius:999px}
@media (max-width: 520px){
  .kdays-inline .kdays-bar{width:120px}
}



/* Filtros (Projetos • Telas) */
.filters-row{margin-top:10px}
.filters{display:flex; gap:10px; align-items:flex-end; justify-content:flex-end; flex-wrap:wrap}
.fitem{display:flex; flex-direction:column; gap:6px; min-width:150px}
.fitem.grow{min-width:260px; flex:1}
.fitem label{font-size:12px; font-weight:900; color:var(--muted)}
.fitem input,.fitem select{height:40px}

@media (max-width: 980px){
  .filters{justify-content:flex-start}
  .fitem.grow{min-width:200px}
}


/* Financeiro cards */
.cardlink{text-decoration:none; color:inherit}
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow:0 16px 40px rgba(15,23,42,.06)}
.card-title{font-weight:900; margin-bottom:6px; display:flex; gap:10px; align-items:center}
.card:hover{transform:translateY(-1px)}


/* Financeiro badges */
.fin-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-weight:900; font-size:12px; cursor:pointer; user-select:none; white-space:nowrap}
.fin-badge .dot{width:8px; height:8px; border-radius:50%}
.fin-badge.aberto{background:rgba(245,158,11,.15); color:#92400e}
.fin-badge.aberto .dot{background:#f59e0b}
.fin-badge.pago,.fin-badge.recebido{background:rgba(34,197,94,.15); color:#14532d}
.fin-badge.pago .dot,.fin-badge.recebido .dot{background:#22c55e}
.fin-badge.atrasado{background:rgba(239,68,68,.15); color:#7f1d1d}
.fin-badge.atrasado .dot{background:#ef4444}

.fin-toolbar{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:10px}
.fin-filters{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.fin-filters .fitem{min-width:160px}
.fin-filters .fitem.grow{min-width:220px; flex:1}
.fin-table{margin-top:12px}