/* ── Design Tokens ──────────────────────────── */
:root{
  --bg:#F0F2F5;
  --surface:#ffffff;
  --surface2:#F8F9FB;
  --border:#E4E8EF;
  --border2:#CBD2DC;
  --text:#0D1117;
  --text2:#4A5568;
  --text3:#8A95A3;
  --sidebar:#0D1117;
  --sidebar2:#1A1F2E;
  --topbar:#ffffff;
  --input-bg:#ffffff;
  --input-border:#DDE2EA;
  --blue:#1cc7c9;
  --blue-light:#e0fafb;
  --brand:#1cc7c9;
  --brand-rgb:28,199,201;
  --brand-light:#e0fafb;
  --green:#16A34A;
  --red:#DC2626;
  --orange:#F97316;
  --yellow:#D97706;
  --purple:#7C3AED;
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  --shadow-lg:0 20px 60px rgba(0,0,0,.14),0 8px 20px rgba(0,0,0,.08);
  --transition:150ms cubic-bezier(.4,0,.2,1);
  --transition-md:220ms cubic-bezier(.4,0,.2,1);

  /* Kanban column colors */
  --col-afazer:#64748B;
  --col-andamento:#1cc7c9;
  --col-revisao:#F97316;
  --col-aprovado:#8B5CF6;
  --col-concluido:#16A34A;
}
body.dark{
  --bg:#0F1117;
  --surface:#181C27;
  --surface2:#1F2437;
  --border:#2C3450;
  --border2:#3A4566;
  --text:#F2F4FF;
  --text2:#B8C0D8;
  --text3:#7A85A0;
  --muted:#7A85A0;
  --sidebar:#0B0E17;
  --sidebar2:#0F1117;
  --topbar:#181C27;
  --input-bg:#1F2437;
  --input-border:#2C3450;
  --blue-light:rgba(28,199,201,.18);
  --tag-bg:#1F2437;
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow:0 4px 12px rgba(0,0,0,.6);
  --shadow-md:0 8px 24px rgba(0,0,0,.7);
  --shadow-lg:0 20px 60px rgba(0,0,0,.8);
  /* Kanban: cores dessaturadas no dark */
  --col-afazer:#667080;
  --col-andamento:#158e90;
  --col-revisao:#B06D2E;
  --col-aprovado:#6B4DA8;
  --col-concluido:#2D7A4F;
}

body.dark .kanban-card{background:#1F2437;border-color:#2C3450;}
body.dark .kanban-card:hover{border-color:#3A4566;}
body.dark .tbl th{background:#131720;}
body.dark .kanban-col{background:#1C2333;}
body.dark .modal{background:#181C27;border:1px solid #2C3450;}
body.dark .section{background:#181C27;border-color:#2C3450;}
body.dark input,body.dark select,body.dark textarea{background:#1F2437;color:#F2F4FF;border-color:#2C3450;}
body.dark .nav-item{color:rgba(255,255,255,.45);}
body.dark .nav-item:hover{color:rgba(255,255,255,.8);}
body.dark .nav-item.active{color:#fff;}
/* Dark: dessatura os badges de prioridade e cliente */
body.dark .badge{filter:saturate(.55) brightness(.9);}
/* Dark: btn-blk usa surface2 pra não ficar branco sobre branco */
body.dark .btn-blk{background:#2C3450;color:#F2F4FF;}
body.dark .btn-blk:hover{background:#3A4566;box-shadow:none;}

/* ── Reset & Base ───────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  transition:background var(--transition-md),color var(--transition-md);
  font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font-family:inherit;font-size:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(28,199,201,.12);}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px;}
select,input,textarea{color:var(--text);background:var(--input-bg);}

/* ── Layout ─────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden;}

/* ── Sidebar ────────────────────────────────── */
.sidebar{
  width:220px;background:var(--sidebar);
  display:flex;flex-direction:column;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.04);
}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:var(--radius-sm);
  margin:1px 8px;cursor:pointer;
  color:rgba(255,255,255,.38);font-size:12px;font-weight:500;
  transition:color var(--transition),background var(--transition);
  overflow:hidden;
}
.nav-item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--brand);border-radius:0 3px 3px 0;
  transition:height var(--transition-md);
}
.nav-item:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.04);}
.nav-item.active{color:#fff;background:rgba(var(--brand-rgb,28,199,201),.18);font-weight:600;}
.nav-item.active::before{height:60%;}
.nav-icon{
  width:28px;height:28px;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:background var(--transition);
  flex-shrink:0;
}
.nav-item.active .nav-icon{background:rgba(var(--brand-rgb,28,199,201),.3);}
.nav-item:hover .nav-icon{background:rgba(255,255,255,.06);}

/* ── Main ───────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

/* ── Topbar ─────────────────────────────────── */
.topbar{
  background:var(--topbar);border-bottom:1px solid var(--border);
  padding:0 24px;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
}

/* ── Content ────────────────────────────────── */
.content-fullscreen{
  margin-left: 0 !important;
  padding-top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}
.content{flex:1;overflow:auto;padding:20px 24px;}

/* ── Modal ──────────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  z-index:999;padding:16px;
  animation:fadeOverlay .15s ease;
  backdrop-filter:blur(2px);
}
@keyframes fadeOverlay{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--surface);border-radius:var(--radius);
  padding:28px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
  animation:modalIn .2s cubic-bezier(.34,1.56,.64,1);
  border:1px solid var(--border);
}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-wide{max-width:720px;}
.modal-trello{max-width:820px;}

/* ── Inputs ─────────────────────────────────── */
.inp{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--input-border);border-radius:var(--radius-xs);
  font-size:12px;font-family:inherit;box-sizing:border-box;
  background:var(--input-bg);color:var(--text);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.inp::placeholder{color:var(--text3);}
/* Variante minimalista (underline) — usada no modal de criação de demanda */
.inp-min{
  width:100%;padding:9px 2px;
  border:none;border-bottom:1px solid var(--border);border-radius:0;
  font-size:13px;font-family:inherit;box-sizing:border-box;
  background:transparent;color:var(--text);
  transition:border-color var(--transition);
}
.inp-min:focus{outline:none;border-bottom-color:var(--blue);}
.inp-min::placeholder{color:var(--text3);}
/* mantém o ícone nativo de calendário/relógio visível e clicável */
.inp-min[type="date"],.inp-min[type="time"]{cursor:pointer;}

/* ── Buttons ────────────────────────────────── */
.btn{
  padding:9px 18px;border-radius:var(--radius-xs);
  font-size:12px;font-weight:600;cursor:pointer;border:none;
  transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition);
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{opacity:.92;}
.btn:active{transform:scale(.97);}
.btn-sm{padding:5px 12px;font-size:11px;}
.btn-blk{background:var(--text);color:#fff;}
.btn-blk:hover{box-shadow:0 4px 12px rgba(0,0,0,.2);}
.btn-blu{background:var(--blue);color:#002e30;}
.btn-blu:hover{box-shadow:0 4px 12px rgba(28,199,201,.35);}
.btn-grn{background:var(--green);color:#fff;}
.btn-grn:hover{box-shadow:0 4px 12px rgba(22,163,74,.3);}
.btn-red{background:var(--red);color:#fff;}
.btn-out{background:transparent;color:var(--text);border:1.5px solid var(--border);}
.btn-out:hover{background:var(--surface2);border-color:var(--border2);}
.btn-dgr{background:#FEF2F2;color:var(--red);border:1.5px solid #FCA5A5;}
body.dark .btn-dgr{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.3);}

/* ── Table ──────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{
  padding:10px 14px;text-align:left;font-size:10px;font-weight:700;
  color:var(--text3);border-bottom:1px solid var(--border);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  background:var(--surface2);
}
.tbl th:first-child{border-radius:var(--radius-xs) 0 0 0;}
.tbl th:last-child{border-radius:0 var(--radius-xs) 0 0;}
.tbl td{
  padding:11px 14px;font-size:12px;
  border-bottom:1px solid var(--border);
  color:var(--text);transition:background var(--transition);
}
.tbl tbody tr:hover td{background:var(--surface2);}
.tbl tbody tr:last-child td{border-bottom:none;}

/* ── KPI Cards ──────────────────────────────── */
.kpi{
  background:var(--surface);border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:none;border:1px solid var(--border);
  transition:transform var(--transition-md),border-color var(--transition-md);
  cursor:default;
}
.kpi:hover{transform:translateY(-1px);border-color:var(--brand);}
.kpi-val{font-size:24px;font-weight:650;color:var(--text);margin-bottom:2px;letter-spacing:-.3px;line-height:1.1;}
.kpi-lbl{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text3);}
.kpi-sub{font-size:11px;color:var(--text3);margin-top:4px;}
.kpi-icon{
  width:40px;height:40px;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}

/* ── Badge ──────────────────────────────────── */
.badge{
  padding:3px 9px;border-radius:99px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}

/* ── Section ────────────────────────────────── */
.section{
  background:var(--surface);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);
  margin-bottom:14px;border:1px solid var(--border);
}

/* ── Tab buttons ────────────────────────────── */
.tab-btn{
  padding:11px 16px;border:none;background:none;
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;
  color:var(--text3);
  transition:color var(--transition),border-color var(--transition);
}
.tab-btn:hover{color:var(--text2);}

/* ── Kanban ─────────────────────────────────── */
.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;}
.kanban-col{border-radius:var(--radius);background:var(--surface2);padding:10px;border:1px solid var(--border);display:flex;flex-direction:column;}
.kanban-col-hd{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;padding:8px 4px 10px;
  border-bottom:2px solid var(--border);
}
.kanban-card{
  background:var(--surface);border-radius:var(--radius-sm);
  padding:14px;cursor:pointer;
  box-shadow:var(--shadow-sm);margin-bottom:8px;
  border:1px solid var(--border);
  border-left:5px solid transparent;
  transition:transform var(--transition-md),box-shadow var(--transition-md),border-color var(--transition);
  animation:cardIn .22s cubic-bezier(.34,1.2,.64,1);
  position:relative;
}
@keyframes cardIn{from{opacity:0;transform:translateY(-8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.kanban-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.kanban-card:hover .card-quick-actions{opacity:1;transform:translateY(0);}
.kanban-card.prio-urgente{border-left-color:#DC2626;box-shadow:var(--shadow-sm),inset 3px 0 12px rgba(220,38,38,.06);}
.kanban-card.prio-alta{border-left-color:#F97316;box-shadow:var(--shadow-sm),inset 3px 0 12px rgba(249,115,22,.05);}
.kanban-card.prio-media{border-left-color:#D97706;}
.kanban-card.prio-baixa{border-left-color:#94A3B8;}
.kanban-card.dragging{opacity:.5;transform:scale(.98);}
.kanban-col.drag-over{background:var(--blue-light);border-color:var(--blue);}
.card-quick-actions{
  opacity:0;transform:translateY(4px);
  transition:opacity var(--transition),transform var(--transition);
  display:flex;gap:4px;
}

/* ── Calendar ───────────────────────────────── */
.cal-hd{display:grid;grid-template-columns:repeat(7,1fr);background:var(--sidebar);border-radius:var(--radius-sm) var(--radius-sm) 0 0;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-cell{
  min-height:90px;padding:6px;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--surface);transition:background var(--transition);
}
.cal-cell:hover{background:var(--surface2);}

/* ── Login ──────────────────────────────────── */
.login-wrap{min-height:100vh;background:var(--sidebar);display:flex;align-items:center;justify-content:center;width:100%;}

/* ── Trello layout ──────────────────────────── */
.trello-body{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start;}
.trello-section{margin-bottom:22px;}
.trello-section-title{
  display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;color:var(--text3);
  margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em;
}
.sec-min{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--text2);
  margin-bottom:7px;
}
.trello-sidebar-btn{
  width:100%;padding:8px 12px;border-radius:var(--radius-xs);
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:11px;font-weight:600;cursor:pointer;
  text-align:left;margin-bottom:6px;
  transition:background var(--transition),border-color var(--transition);
}
.trello-sidebar-btn:hover{background:var(--border);border-color:var(--border2);}

/* ── Progress bar ───────────────────────────── */
.prog-bar{background:var(--border);border-radius:99px;height:5px;overflow:hidden;}
.prog-fill{height:100%;border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1);}

/* ── Labels ─────────────────────────────────── */
.lbl{
  display:block;font-size:10px;font-weight:700;
  color:var(--text2);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ── Toast ──────────────────────────────────── */
.toast{
  position:fixed;top:20px;right:20px;
  padding:12px 20px;border-radius:var(--radius-sm);
  font-weight:600;font-size:12px;z-index:9999;color:#fff;
  box-shadow:var(--shadow-md);
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;gap:8px;
}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── Grid utils ─────────────────────────────── */
.field{margin-bottom:14px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}

/* ── TV/Misc ────────────────────────────────── */
.tv-progress{position:fixed;bottom:0;left:0;right:0;height:3px;background:var(--border);z-index:100;}
.tv-progress-fill{height:100%;background:var(--blue);transition:width 1s linear;}

/* ── Animations ─────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
@keyframes checkPop{0%{transform:scale(0);}60%{transform:scale(1.3);}100%{transform:scale(1);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.page-enter{animation:fadeIn .22s ease;}
.btn{transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition);}

/* ── Mini chart bars ────────────────────────── */
.mini-bar{display:flex;align-items:flex-end;gap:2px;height:32px;}
.mini-bar-item{
  flex:1;border-radius:2px 2px 0 0;min-width:4px;
  transition:height .4s ease;
}

/* ── Dashboard sparkline ────────────────────── */
.spark-line{display:flex;align-items:flex-end;gap:3px;height:40px;padding:0 2px;}
.spark-bar{
  flex:1;border-radius:3px 3px 0 0;
  background:currentColor;opacity:.8;
  transition:height .4s cubic-bezier(.4,0,.2,1),opacity var(--transition);
  min-height:2px;
}
.spark-bar:hover{opacity:1;}

/* ── Drag handle ────────────────────────────── */
.drag-handle{
  cursor:grab;color:var(--text3);font-size:14px;
  padding:2px;border-radius:4px;
  transition:color var(--transition),background var(--transition);
}
.drag-handle:hover{color:var(--text2);background:var(--surface2);}
.drag-handle:active{cursor:grabbing;}

/* ═══════════════════════════════════════════
   MOBILE / PWA — Responsive
   ═══════════════════════════════════════════ */

/* Desktop: hide mobile kanban, show desktop */
.kanban-mobile-wrap {
  display: none;
}
.kanban-desktop {
  display: grid;
}



/* Bottom nav hidden on desktop */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {

  /* Mobile: hide desktop kanban, show mobile slider */
  /* Simple horizontal scroll instead of complex slider */

  /* Simple mobile kanban: horizontal scroll */
  .kanban-desktop {
    display: none !important;
  }



  .kanban-mobile-wrap {
    display: none !important;
  }

  /* Dots */
  .kanban-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 12px;
  }
  .kanban-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all .2s;
  }
  .kanban-dot.active {
    width: 18px;
    border-radius: 3px;
    background: #1cc7c9;
  }

  /* Slider */
  .kanban-slider {
    display: flex !important;
    height: 100%;
    align-items: flex-start;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    touch-action: pan-y;
  }

  /* Each slide = full screen width */
  .kanban-slide {
    min-width: 100vw;
    width: 100vw;
    min-height: 100%;
    flex-shrink: 0;
    padding: 0 14px 80px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  /* Column header */
  .kanban-col-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text3);
    border-bottom: 2px solid var(--border);
    margin-bottom: 10px;
  }

  /* Hide desktop sidebar */
  .sidebar {
    display: none !important;
  }

  /* Main content fills screen */
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    padding-bottom: 70px !important;
  }

  /* Bottom navigation bar */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 200;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text3);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 48px;
  }
  .bottom-nav-item.active { color: #1cc7c9; }
  .bottom-nav-item i { font-size: 20px; }

  /* Page padding */
  .page-enter {
    padding: 12px 12px 0 !important;
  }

  /* Sections */
  .section {
    border-radius: 12px !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* KPI cards smaller padding on mobile */
  .kpi {
    padding: 12px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .kpi-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* Grids: max 2 cols */
  /* Force all grids to max 2 cols on mobile */
  div[style*="grid"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  div[style*="repeat(2,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
  div[style*="repeat(3,1fr)"],
  div[style*="repeat(4,1fr)"],
  div[style*="repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
  div[style*="1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
  div[style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }

  /* Prevent body overflow */
  body, html { overflow-x: hidden !important; }

  /* Full width inputs */
  .inp { width: 100% !important; box-sizing: border-box !important; }

  /* Modals full screen */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* (regra de flex-wrap global removida — causava quebra em layouts de linha única) */

  /* Fechar mês button: hide text on mobile, icon only */
  .btn-fechar-mes span { display: none !important; }

  /* ── Fix crítico: content não esconde atrás da nav ── */
  .content {
    padding: 12px 12px 80px !important;
  }

  /* ── Topbar: compacto no mobile ──────────────────── */
  .topbar {
    padding: 0 12px !important;
    height: 48px !important;
  }

  /* ── Tabelas: scroll horizontal ─────────────────── */
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tbl th, .tbl td {
    white-space: nowrap;
  }

  /* ── Tab buttons: não cortam ─────────────────────── */
  .tab-btn {
    white-space: nowrap;
    padding: 10px 10px !important;
    font-size: 9px !important;
    letter-spacing: .04em !important;
  }

  /* ── Trello layout: coluna única no mobile ────────── */
  .trello-body {
    grid-template-columns: 1fr !important;
  }

  /* ── Grid utilities: max 2 colunas ───────────────── */
  .grid3 { grid-template-columns: 1fr 1fr !important; }
  .grid5 { grid-template-columns: 1fr 1fr !important; }

  /* ── Toast: acima da nav inferior ────────────────── */
  .toast {
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: 12px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  /* ── Botões: touch target mínimo ─────────────────── */
  .btn { min-height: 38px; }

  /* ── Kanban mobile: dead-code cleanup ───────────── */
  .kanban-mobile-wrap { display: block !important; }

  /* ── Financeiro: oculta PeriodNav global no dashboard (ele tem nav própria) ── */
  .fin-period-nav-top { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   BOLD — Personalidade & Animações
   ══════════════════════════════════════════════════════ */

/* ── Sidebar com gradiente de marca ─────────────────── */
.sidebar{
  background:linear-gradient(180deg,#0f1520 0%,#0D1117 60%) !important;
  position:relative;overflow:hidden;
  /* Preservar propriedades de layout essenciais */
  width:220px;display:flex;flex-direction:column;flex-shrink:0;
}
.sidebar::before{
  content:"";position:absolute;top:-60px;left:-40px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(28,199,201,.13) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Nav pill deslizante ─────────────────────────────── */
.nav-item{
  transition:color 180ms ease,background 180ms ease,transform 120ms ease !important;
}
.nav-item:active{transform:scale(.97);}
.nav-item.active{
  background:linear-gradient(90deg,rgba(28,199,201,.22),rgba(28,199,201,.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(28,199,201,.18);
}
.nav-item.active .nav-icon{
  background:rgba(28,199,201,.28) !important;
  box-shadow:0 0 10px rgba(28,199,201,.25);
}
.nav-item.active::before{height:65% !important;}
.nav-item:hover{transform:translateX(2px);}

/* ── Botões com ripple ───────────────────────────────── */
.btn{position:relative;overflow:hidden;}
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:scale(0);animation:rippleAnim .5s linear;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0;}}

/* ── Scrollbar com cor de marca ──────────────────────── */
::-webkit-scrollbar-thumb{background:rgba(28,199,201,.35) !important;border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(28,199,201,.6) !important;}

/* ── Dark mode com textura sutil ─────────────────────── */
body.dark{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-attachment:fixed;
}

/* ── KPI cards com hover lift ────────────────────────── */
.kpi{
  transition:transform 200ms ease,border-color 200ms ease !important;
  position:relative;
}
.kpi:hover{
  transform:translateY(-1px) !important;
  border-color:var(--brand) !important;
}

/* ── Kanban cards com glow colorido por coluna ───────── */
.kanban-card{
  transition:transform 160ms cubic-bezier(.34,1.56,.64,1),
             box-shadow 180ms ease,
             border-color 180ms ease !important;
}
.kanban-card:hover{
  transform:translateY(-3px) scale(1.01) !important;
}
/* Glow por status — aplicado via JS inline no card */
.kanban-card.glow-andamento:hover{box-shadow:0 8px 24px rgba(28,199,201,.18) !important;}
.kanban-card.glow-revisao:hover{box-shadow:0 8px 24px rgba(249,115,22,.18) !important;}
.kanban-card.glow-aprovado:hover{box-shadow:0 8px 24px rgba(139,92,246,.18) !important;}
.kanban-card.glow-concluido:hover{box-shadow:0 8px 24px rgba(22,163,74,.18) !important;}

/* ── Page transitions direcionais ────────────────────── */
@keyframes slideInRight{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:translateX(0);}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:translateX(0);}}
@keyframes slideInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.page-enter{animation:slideInRight .22s cubic-bezier(.4,0,.2,1) !important;}
.page-enter.dir-back{animation:slideInLeft .22s cubic-bezier(.4,0,.2,1) !important;}
.page-enter.dir-up{animation:slideInUp .18s ease !important;}

/* ── Toast com barra de progresso ───────────────────── */
.toast-bar{
  position:absolute;bottom:0;left:0;height:3px;
  background:rgba(255,255,255,.4);border-radius:0 0 8px 8px;
  animation:toastBar 3s linear forwards;
}
@keyframes toastBar{from{width:100%;}to{width:0%;}}

/* ── Skeleton loaders ────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:6px;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── Estados vazios com personalidade ────────────────── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  padding:40px 20px;gap:12px;text-align:center;
}
.empty-state-icon{
  font-size:40px;animation:floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.empty-state-title{font-size:14px;font-weight:700;color:var(--text);}
.empty-state-sub{font-size:12px;color:var(--text3);max-width:240px;line-height:1.5;}

/* ── TV: transições de slide ─────────────────────────── */
@keyframes tvSlideIn{from{opacity:0;transform:scale(.98) translateY(16px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes tvChartFill{from{opacity:0;transform:scaleY(0);transform-origin:bottom;}to{opacity:1;transform:scaleY(1);}}
.tv-slide-enter{animation:tvSlideIn .6s cubic-bezier(.34,1.56,.64,1);}
.tv-chart-bar{animation:tvChartFill .8s cubic-bezier(.34,1.56,.64,1) both;}

/* ── Confetti canvas ─────────────────────────────────── */
#bold-confetti{
  position:fixed;inset:0;pointer-events:none;
  z-index:99999;display:none;
}

/* ── AnimNum (contador animado) ──────────────────────── */
.anim-num{
  display:inline-block;
  transition:transform .1s ease;
}

/* ── Pulse para timer ativo ──────────────────────────── */
@keyframes bold-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(28,199,201,.4);}
  50%{box-shadow:0 0 0 5px rgba(28,199,201,0);}
}

/* ── Topbar border gradient ──────────────────────────── */
.topbar{
  border-bottom:1px solid var(--border) !important;
  background:linear-gradient(90deg,var(--topbar) 0%,var(--topbar) 100%) !important;
  position:relative;
}
.topbar::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(28,199,201,.3),transparent);
  opacity:.5;
}

/* ── Section hover highlight ─────────────────────────── */
.section{transition:box-shadow 200ms ease,border-color 200ms ease;}
.section:hover{box-shadow:var(--shadow) !important;}

/* ── Logo shimmer ────────────────────────────────────── */
@keyframes logoShimmer{
  0%{background-position:200% 0;}
  50%{background-position:-200% 0;}
  100%{background-position:-200% 0;}
}

/* ── TV: Animações de gráfico ────────────────────────── */
@keyframes tvBarGrow{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
@keyframes tvNumPop{
  from{opacity:0;transform:scale(.7) translateY(8px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes tvLineDraw{
  to{stroke-dashoffset:0;}
}
@keyframes tvFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* ── Dashboard: animações de gráfico ─────────────────── */
@keyframes dashBarGrow{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}
@keyframes dashBarH{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
@keyframes dashNumPop{
  from{opacity:0;transform:translateY(6px) scale(.8);}
  to{opacity:1;transform:translateY(0) scale(1);}
}