@font-face{
    font-family:"Red Hat Text";
    src:url("./fonts/redhat/RedHatText-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Red Hat Text";
    src:url("./fonts/redhat/RedHatText-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Red Hat Text";
    src:url("./fonts/redhat/RedHatText-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Red Hat Display";
    src:url("./fonts/redhat/RedHatDisplay-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Red Hat Display";
    src:url("./fonts/redhat/RedHatDisplay-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Red Hat Display";
    src:url("./fonts/redhat/RedHatDisplay-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"Red Hat Display";
    src:url("./fonts/redhat/RedHatDisplay-Black.ttf") format("truetype");
    font-weight:900;
    font-style:normal;
    font-display:swap;
  }

  :root{
    --app-font: "Red Hat Text", "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --app-display-font: "Red Hat Display", "Red Hat Text", "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --module-sidebar-width:232px;
    --module-sidebar-collapsed-width:44px;
    --dashboard-head:#0F2D64;
    --dashboard-head-text:#FFFFFF;
    --dashboard-total:#F8FAFC;
    --dashboard-blue-row:#EAF7FC;
    --dashboard-green-row:#ECF8E8;
    --bg: #F2F4F7;
    --surface: #FFFFFF;
    --sidebar: #141B24;
    --sidebar-muted: #7C8AA0;
    --sidebar-active: #223247;
    --accent: #3E6C8C;
    --accent-soft: #E4EDF3;
    --text: #1B222B;
    --text-muted: #647085;
    --border: #E2E6EC;

    --p1: #B84039; --p1-bg: #FBE7E5;
    --p2: #D9822B; --p2-bg: #FBEFE0;
    --p3: #B99416; --p3-bg: #FBF3D9;
    --p4: #5B7590; --p4-bg: #E9EEF3;
    --p5: #9AA3AF; --p5-bg: #EEF0F2;

    --sub: #B98A1B; --sub-bg: #FDF3DC;
    --dev: #B84039; --dev-bg: #FBE7E5;
    --ate: #287A4E; --ate-bg: #E4F5EC;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:var(--app-font);
    font-weight:400;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
  }
  .app{
    display:grid;
    /* minmax(0,1fr) permite que a coluna encolha abaixo do conteúdo,
       habilitando overflow-x nos filhos (tabelas largas) */
    grid-template-columns: var(--module-sidebar-width) minmax(0, 1fr);
    min-height:100vh;
  }
  .app.has-module-sidebar-toggle{
    position:relative;
    transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1);
  }
  .app.module-sidebar-collapsed{
    grid-template-columns:var(--module-sidebar-collapsed-width) minmax(0, 1fr);
  }
  .app.module-sidebar-collapsed > .sidebar{
    padding:10px 6px !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
    overflow:hidden !important;
    opacity:1;
    pointer-events:auto;
    gap:0;
    align-items:center;
  }
  .app.module-sidebar-collapsed > .sidebar > :not(.module-sidebar-toggle){
    opacity:0;
    transform:translateX(-8px);
    pointer-events:none;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .module-sidebar-toggle{
    position:absolute;
    top:12px;
    right:10px;
    z-index:22;
    width:30px;
    height:30px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.82);
    box-shadow:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:inherit;
  }
  .module-sidebar-toggle span::before{ content:"‹"; font-size:18px; line-height:1; }
  .app.module-sidebar-collapsed > .sidebar .module-sidebar-toggle{
    top:12px;
    right:7px;
    background:rgba(255,255,255,.12);
  }
  .app.module-sidebar-collapsed > .module-sidebar-toggle span::before{ content:"›"; }
  .app.module-sidebar-collapsed > .sidebar .module-sidebar-toggle span::before{ content:"›"; }
  .app > main{ min-width:0; }

  /* SIDEBAR ------------------------------------------------------ */
  .sidebar{
    background:var(--sidebar);
    color:#fff;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    gap:28px;
    /* Acompanha a rolagem: fica colada ao topo e ocupa a altura da viewport */
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:1;   /* abaixo do rail (35) */
    align-self:start;
  }
  .sidebar::-webkit-scrollbar{ width:6px; }
  .sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .brand{
    display:flex; align-items:center; gap:10px;
    padding:0 8px;
  }
  .brand-mark{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(135deg, var(--accent), #6FA0BE);
    display:flex;align-items:center;justify-content:center;
    font-weight:700; font-size:13px; color:#fff;
  }
  .brand-name{font-family:var(--app-display-font); font-weight:700; font-size:14.5px; letter-spacing:0;}
  .brand-sub{font-size:11px; color:var(--sidebar-muted); margin-top:1px;}

  nav{display:flex; flex-direction:column; gap:2px;}
  .nav-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--sidebar-muted); padding:10px 10px 4px;
  }
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:8px;
    color:#C3CBD8; text-decoration:none; font-size:13.5px;
    cursor:pointer; border:1px solid transparent;
  }
  .nav-item svg{opacity:.75; flex-shrink:0;}
  .nav-item.active{
    background:var(--sidebar-active); color:#fff;
    border-color:#2E4258;
  }
  .nav-item.active svg{opacity:1;}
  .nav-item.disabled{ color:#5A6472; cursor:default; }
  .nav-tag{
    margin-left:auto; font-size:9.5px; padding:2px 6px;
    border-radius:999px; background:#2A3746; color:#9FB0C4;
  }

  .profile-block{
    margin-top:auto; padding-top:16px; border-top:1px solid #263140;
  }
  .profile-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--sidebar-muted); margin-bottom:8px;}
  .profile-toggle{
    display:flex; background:#1D2733; border-radius:8px; padding:3px; gap:3px;
  }
  .profile-toggle button{
    flex:1; padding:7px 8px; border:none; border-radius:6px;
    background:transparent; color:#8B96A6; font-size:12.5px; font-weight:500;
    cursor:pointer; font-family:inherit;
  }
  .profile-toggle button.active{ background:var(--accent); color:#fff; }
  .profile-note{font-size:11px; color:var(--sidebar-muted); margin-top:10px; line-height:1.5;}

  /* MAIN ----------------------------------------------------------- */
  main{padding:26px 32px 60px; min-width:0;}

  .top-row{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:6px; gap:20px;
  }
  h1{font-family:var(--app-display-font); font-size:20px; margin:0 0 4px; font-weight:700; letter-spacing:0;}
  .subtitle{color:var(--text-muted); font-size:13px; margin:0;}
  .scope-pill{
    font-size:11px; font-weight:600; color:var(--accent);
    background:var(--accent-soft); padding:5px 10px; border-radius:999px;
    white-space:nowrap;
  }

  .toolbar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:20px 0 16px;
  }
  .chip{
    border:1px solid var(--border); background:var(--surface);
    padding:6px 12px; border-radius:999px; font-size:12.5px;
    color:var(--text-muted); cursor:pointer; font-weight:500;
  }
  .chip.active{ background:var(--text); color:#fff; border-color:var(--text); }
  .search{
    margin-left:auto; border:1px solid var(--border); background:var(--surface);
    border-radius:8px; padding:7px 12px; font-size:12.5px; color:var(--text-muted);
    min-width:200px;
  }
  .btn-primary{
    border:none; background:var(--accent); color:#fff; font-weight:600;
    font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:default;
    opacity:.55;
  }

  /* TABLE ------------------------------------------------------------ */
  .table-card{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    /* Scroll interno nos dois eixos: a barra horizontal fica sempre acessível,
       sem precisar rolar a página inteira até o fim. */
    overflow:hidden;
    max-height:calc(100vh - 260px);
    min-height:220px;
    position:relative;
  }
  .table-card::-webkit-scrollbar{ width:10px; height:10px; }
  .table-card::-webkit-scrollbar-thumb{ background:var(--text-muted); border-radius:5px; }
  .table-card::-webkit-scrollbar-thumb:hover{ background:var(--text-muted); }
  .table-card::-webkit-scrollbar-track{ background:var(--bg); border-radius:5px; }
  .table-card::-webkit-scrollbar-corner{ background:var(--bg); }

  /* As alturas fixas por calc() foram substituídas por um layout flex
     abaixo — mais robusto a conteúdo de cabeçalho de altura variável. */

  /* ── LAYOUT FLEX: Compensações / CNPJ / Pauta / Cadastro ──────────────
     main vira uma coluna flex do tamanho da viewport. A "view" ativa
     (título+toolbar+tabela) recebe flex:1 e repassa o espaço restante
     para .table-card, que é quem realmente rola nos dois eixos. Assim,
     a barra de rolagem horizontal fica sempre na borda inferior do que
     está visível na tela — nunca no fim da lista de registros — e o
     cabeçalho da tabela some da tela apenas dentro do próprio scroll
     interno da tabela (nunca no fim da página). ────────────────────── */
  #modulo-compensacoes main,
  #modulo-pauta main,
  #modulo-cadastro main,
  #modulo-posvendas main{
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow-y:auto;   /* válvula de segurança para cabeçalhos muito altos */
    overflow-x:hidden;
  }

  #view-compensacoes, #view-cnpj, #view-dashboards,
  #pauta-view-tabela, #pauta-view-dashboards,
  #cad-view-tabela, #cad-view-dashboards,
  #pv-view-tabela, #pv-view-dash{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;   /* permite que o filho (table-card) encolha e role */
  }

  #modulo-compensacoes .table-card,
  #modulo-pauta .table-card,
  #modulo-cadastro .table-card,
  #modulo-posvendas .table-card{
    flex:1;
    min-height:220px;
    max-height:none;   /* sobrepõe o calc() fixo da regra base .table-card */
    overflow:hidden;
  }
  #modulo-posvendas .table-card{
    overflow-x:scroll;
    overflow-y:auto;
    scrollbar-gutter:stable both-edges;
  }


  /* Cabeçalho sempre visível durante a rolagem vertical.
     !important garante precedência sobre as regras de th dos media queries. */
  .table-card .data-table thead th,
  .data-table thead th,
  .g-table thead th,
  .class-result-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:3 !important;
    background:var(--surface);
    box-shadow:inset 0 -1px 0 var(--border);
  }
  /* Checkbox de seleção total precisa ficar acima das células */
  .data-table thead th.col-check{ z-index:4; }

  /* Garantir contraste do cabeçalho sobre as linhas ao rolar */
  .data-table thead{ position:relative; z-index:3; }
  .table-scroll{
    width:100%;
    height:100%;
    overflow-x:scroll;
    overflow-y:auto;
    scrollbar-gutter:stable both-edges;
    border-radius:inherit;
  }
  table{ border-collapse:collapse; width:100%; min-width:1900px; }
  /* O min-width acima existe para as tabelas largas de dados (Compensações,
     Pós-Vendas etc.). As tabelas do painel de gestores são pequenas e devem
     acompanhar a largura disponível, sem forçar rolagem horizontal. */
  #tela-gestores table, .g-table{ min-width:0 !important; }
  thead th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--border); white-space:nowrap;
    background:var(--surface); position:sticky; top:0;
  }
  tbody td{
    padding:11px 14px; border-bottom:1px solid var(--border);
    font-size:12.5px; white-space:nowrap; vertical-align:middle;
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:#FAFBFD; }
  .mono{ font-family:var(--app-font); font-variant-numeric:tabular-nums; font-size:12px; color:var(--text-muted); }
  .col-admin{ display:table-cell; }
  body.perfil-analista .col-admin{ display:none; }

  .prio-cell{ display:flex; align-items:center; gap:8px; }
  .prio-bar{ width:4px; height:22px; border-radius:3px; flex-shrink:0; }
  .badge{
    display:inline-flex; align-items:center; padding:3px 9px; border-radius:6px;
    font-size:11.5px; font-weight:600;
  }
  .status-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
  .status-badge::before{ content:""; width:6px; height:6px; border-radius:50%; }

  .valor{ font-family:var(--app-font); font-variant-numeric:tabular-nums; font-weight:500; }
  .resp{ display:flex; align-items:center; gap:7px; }
  .avatar{ width:20px;height:20px;border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .obs{ color:var(--text-muted); font-style:italic; max-width:180px; overflow:hidden; text-overflow:ellipsis; }

  /* LEGEND + DASHBOARD PREVIEW ---------------------------------------- */
  .below{ display:grid; grid-template-columns: 1fr 300px; gap:20px; margin-top:22px; align-items:start; }
  #view-compensacoes .below{
    grid-template-columns:1fr;
    gap:14px;
    margin:0 0 14px;
    order:-1;
  }
  #view-compensacoes .top-row{ order:-4; }
  #view-compensacoes .toolbar{ order:-3; }
  #view-compensacoes > p{ order:-2; }
  #view-compensacoes #toast{ order:-1; }
  .legend-card, .summary-card{
    background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  }
  .legend-card h3, .summary-card h3{ font-size:12.5px; margin:0 0 12px; font-weight:600; }
  #view-compensacoes .legend-card{ display:none; }
  #view-compensacoes .roadmap{ display:none; }
  #view-compensacoes .below .summary-card{ max-width:none; padding:12px 14px; }
  #view-compensacoes .summary-card h3{ margin-bottom:8px; }
  #view-compensacoes .summary-grid{ grid-template-columns:repeat(4, minmax(120px, 1fr)); }
  #view-compensacoes .summary-footnote{ display:none; }
  .legend-row{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-muted); padding:5px 0; }
  .legend-row .dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

  .summary-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .summary-tile{ border:1px solid var(--border); border-radius:9px; padding:10px 12px; }
  .summary-tile .num{ font-size:18px; font-weight:700; font-family:var(--app-font); font-variant-numeric:tabular-nums; }
  .summary-tile .lbl{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
  .summary-footnote{ font-size:11px; color:var(--text-muted); margin-top:12px; line-height:1.5; }

  .roadmap{
    margin-top:22px; background:var(--surface); border:1px dashed var(--border);
    border-radius:12px; padding:16px 20px;
  }
  .roadmap h3{ font-size:12.5px; margin:0 0 10px; font-weight:600; }
  .roadmap ul{ margin:0; padding-left:18px; font-size:12.5px; color:var(--text-muted); line-height:1.9; }

  /* DASHBOARDS / STATUS --------------------------------------------- */
  .status-tabs{ display:flex; gap:8px; margin:18px 0 20px; }
  #view-dashboards > .top-row,
  #pauta-view-dashboards > .top-row,
  #cad-view-dashboards > .top-row,
  #pv-view-dash > .top-row,
  .dashboard-header{
    align-items:flex-start;
    gap:14px;
    padding:14px 16px;
    margin:0 0 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
  }
  #view-dashboards > .top-row h1,
  #pauta-view-dashboards > .top-row h1,
  #cad-view-dashboards > .top-row h1,
  #pv-view-dash > .top-row h1,
  .dashboard-header h1{
    font-size:18px;
    line-height:1.2;
  }
  #view-dashboards > .top-row .subtitle,
  #pauta-view-dashboards > .top-row .subtitle,
  #cad-view-dashboards > .top-row .subtitle,
  #pv-view-dash > .top-row .subtitle,
  .dashboard-header .subtitle{
    max-width:860px;
    line-height:1.45;
  }
  .status-tab{
    padding:7px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); font-size:12.5px; font-weight:600;
    color:var(--text-muted); cursor:pointer;
  }
  .status-tab.active{ background:var(--text); color:#fff; border-color:var(--text); }

  .agencia-select{
    border:1px solid var(--border); background:var(--surface); border-radius:8px;
    padding:7px 12px; font-size:12.5px; color:var(--text); margin-bottom:14px;
  }

  .status-block{ margin-bottom:26px; }
  .status-block h3{ font-size:12.5px; margin:0 0 10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }

  table.status-table{
    border-collapse:separate;
    border-spacing:0;
    width:max-content;
    min-width:max-content;
    table-layout:fixed;
    background:var(--surface);
    border:1px solid var(--dashboard-head);
    overflow:hidden;
  }
  table.status-table th{
    text-align:center; font-family:var(--app-display-font); font-size:11px; text-transform:uppercase; letter-spacing:0;
    color:var(--dashboard-head-text); padding:0 12px; border-bottom:1px solid #061C42;
    background:var(--dashboard-head); white-space:nowrap;
    height:60px;
    min-width:148px;
    width:148px;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.18);
  }
  table.status-table td{
    padding:0 12px; border-bottom:1px dashed #AEB7C2; font-size:12.5px; vertical-align:middle;
    height:38px;
    min-width:148px;
    width:148px;
    text-align:center;
    box-shadow:inset -1px 0 0 #C8D0DA;
  }
  table.status-table th:first-child,
  table.status-table td.row-label{
    position:sticky;
    left:0;
    z-index:4;
    min-width:248px;
    width:248px;
    background:var(--surface);
    box-shadow:inset -1px 0 0 #C8D0DA, inset 0 -1px 0 #C8D0DA;
  }
  table.status-table thead th:first-child{
    z-index:6;
    background:var(--dashboard-head);
    color:var(--dashboard-head-text);
  }
  table.status-table td.row-label{ font-family:var(--app-display-font); font-weight:700; color:#111827; white-space:normal; line-height:1.25; text-align:center; text-transform:uppercase; }
  table.status-table .row-sub{ font-weight:400; color:var(--text-muted); font-size:10.5px; margin-left:3px; }
  table.status-table tr:last-child td{ border-bottom:none; }
  table.status-table td.total-col{ background:var(--dashboard-total); font-weight:700; }
  table.status-table tbody tr:nth-child(7),
  table.status-table tbody tr:nth-child(8){ background:var(--dashboard-blue-row); }
  table.status-table tbody tr:nth-child(9),
  table.status-table tbody tr:nth-child(10){ background:var(--dashboard-green-row); }
  table.status-table tbody tr:nth-child(7) td.row-label,
  table.status-table tbody tr:nth-child(8) td.row-label{ background:var(--dashboard-blue-row); }
  table.status-table tbody tr:nth-child(9) td.row-label,
  table.status-table tbody tr:nth-child(10) td.row-label{ background:var(--dashboard-green-row); }
  table.status-table tbody tr:nth-child(even) td{ border-bottom:1px solid #8F99A8; }

  .metric-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:64px; height:100%; }
  .metric-abs{
    font-family:var(--app-font); font-variant-numeric:tabular-nums; font-weight:500; font-size:12.5px;
    color:var(--text); align-self:center;
  }
  table.status-table td.total-col .metric-abs{ font-weight:700; }
  .metric-pct{ font-size:11px; color:#F31212; font-weight:700; margin-top:1px; }

  /* LOGIN --------------------------------------------------------- */
  .login-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--sidebar);
  }
  .login-card{
    background:var(--surface); border-radius:16px; padding:36px 34px;
    width:340px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  }
  .login-card .brand-mark{ margin:0 auto 18px; }
  .login-card h1{ font-size:18px; text-align:center; margin:0 0 4px; }
  .login-card .subtitle{ text-align:center; margin:0 0 24px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:11.5px; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
  .field input{
    width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 11px;
    font-size:13px; font-family:inherit; color:var(--text); box-sizing:border-box;
  }
  .field input:focus{ outline:none; border-color:var(--accent); }
  .field-error{ font-size:11px; color:var(--dev); margin-top:5px; display:none; }
  .field.has-error input{ border-color:var(--dev); }
  .field.has-error .field-error{ display:block; }
  .login-btn{
    width:100%; border:none; background:var(--accent); color:#fff; font-weight:600;
    font-size:13px; padding:10px; border-radius:8px; cursor:pointer; margin-top:6px;
  }
  .login-forgot{
    display:block; text-align:center; margin-top:14px; font-size:12px;
    color:var(--accent); background:none; border:none; cursor:pointer; font-family:inherit;
  }
  .login-note{ font-size:11px; color:var(--text-muted); text-align:center; margin-top:16px; line-height:1.6; }

  /* TELA INICIAL ---------------------------------------------------- */
  .inicial-screen{ min-height:100vh; background:var(--bg); padding:40px 32px 60px; }
  .inicial-header{ margin-bottom:28px; }
  .inicial-header h1{ font-size:20px; margin:0 0 4px; font-weight:700; }
  .inicial-header p{ color:var(--text-muted); font-size:13px; margin:0; }
  .inicial-secao{ margin-bottom:32px; }
  .inicial-secao-titulo{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted);
    font-weight:600; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border);
  }
  .modulos-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:12px;
    max-width:900px;
  }
  .home-grid-sep{
    grid-column:1 / -1;
    height:1px;
    background:var(--border);
    margin:2px 0;
  }
  .modulo-card{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:20px 16px; text-align:center; cursor:pointer; transition:border-color .15s;
  }
  .modulo-card:hover{ border-color:var(--accent); background:var(--accent-soft); }
  .modulo-card.disabled{ cursor:default; opacity:.50; }
  .modulo-card.disabled:hover{ border-color:var(--border); background:var(--surface); }
  .modulo-card.gestor-card{ border-color:#E8D5F0; background:#F9F5FC; }
  .modulo-card.gestor-card:hover{ border-color:#9B6BB5; background:#F3EBF9; }
  .modulo-icon{
    width:42px; height:42px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
  }
  .modulo-card.gestor-card .modulo-icon{ background:#EDE0F5; color:#8050A0; }
  .modulo-card h3{ font-size:12.5px; margin:0 0 3px; font-weight:600; }
  .modulo-card .modulo-tag{ font-size:10px; color:var(--text-muted); }
  .modulo-card.gestor-card .modulo-tag{ color:#9B6BB5; }

  /* PAINEL DE GESTORES (ADMIN) --------------------------------------- */
  #tela-gestores{ min-height:100vh; background:var(--bg); }
  /* #tela-gestores carrega a classe .app (usada pelo mecanismo de exibição
     de telas), mas NÃO deve herdar o grid de duas colunas dos módulos —
     ele tem seu próprio grid interno (.gestores-layout). Sem este reset,
     o painel inteiro era espremido dentro da primeira coluna de 232px. */
  #tela-gestores.app{
    display:block !important;
    grid-template-columns:none !important;
  }
  /* A regra acima tem especificidade de ID e venceria .app.oculto, deixando
     o painel visível mesmo quando outra tela está ativa. Este seletor
     restaura a precedência do ocultamento. */
  #tela-gestores.app.oculto{ display:none !important; }
  /* O painel tem sidebar própria; o deslocamento do rail expandido não deve
     empurrá-lo, senão a área útil perde largura e a tabela estoura. */
  body.rail-expandido #tela-gestores{ margin-left:56px !important; }

  .gestores-layout{
    display:grid;
    /* minmax(0,1fr) permite a coluna encolher abaixo do conteúdo — sem isso,
       uma tabela larga empurra o grid e colapsa a área principal. */
    grid-template-columns:200px minmax(0, 1fr);
    min-height:100vh;
  }
  .gestores-layout > .gestores-main{ min-width:0; }
  .gestores-sidebar{
    background:var(--sidebar); color:#fff; padding:20px 14px; display:flex; flex-direction:column; gap:4px;
    position:sticky; top:0; height:100vh; overflow-y:auto; align-self:start;
  }
  .gestores-sidebar::-webkit-scrollbar{ width:6px; }
  .gestores-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
  .gestores-sidebar .brand{ display:flex; align-items:center; gap:9px; padding:0 6px; margin-bottom:20px; }
  .gestores-sidebar .brand-name{ font-size:13px; font-weight:600; }
  .gestores-sidebar .brand-sub{ font-size:10.5px; color:var(--sidebar-muted); }
  .g-nav-item{
    display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; cursor:pointer;
    font-size:12.5px; color:#C3CBD8; border:1px solid transparent;
  }
  .g-nav-item:hover{ background:#1D2733; }
  .g-nav-item.active{ background:#223247; color:#fff; border-color:#2E4258; }
  .g-nav-label{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--sidebar-muted); padding:10px 10px 4px; }
  .gestores-main{ padding:28px 36px 60px; }
  .gestores-main h1{ font-size:20px; font-weight:700; margin:0 0 4px; letter-spacing:-.2px; }
  .gestores-main .subtitle{ color:var(--text-muted); font-size:13px; margin:0 0 24px; }
  .g-section{ margin-bottom:32px; }
  .g-section h2{ font-size:13px; font-weight:700; margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--border); }
  .g-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin-bottom:16px; }
  .g-card{
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
  }
  .g-card-label{ font-size:12.5px; font-weight:600; }
  .g-card-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; }
  .g-card-badge{
    font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px;
    background:var(--accent-soft); color:var(--accent);
  }
  .g-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  /* Evita que uma tabela larga estoure a largura da página */
  .g-section{ min-width:0; }
  .g-section .g-table{ display:table; table-layout:auto; }
  .g-table-wrap{ overflow-x:auto; border-radius:10px; }
  .g-table th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:9px 14px; background:var(--surface); border-bottom:1px solid var(--border); text-align:left; font-weight:600; }
  .g-table td{ padding:10px 14px; border-bottom:1px solid var(--border); font-size:12.5px; }
  .g-table tr:last-child td{ border-bottom:none; }
  .g-badge-papel{
    font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
    background:var(--accent-soft); color:var(--accent);
  }
  .g-badge-papel.gestor{ background:#EDE0F5; color:#8050A0; }
  .g-btn-acao{ border:1px solid var(--border); background:var(--surface); border-radius:6px; padding:4px 10px; font-size:11px; color:var(--text-muted); cursor:pointer; font-family:inherit; }
  .g-btn-acao:hover{ border-color:var(--accent); color:var(--accent); }
  .g-btn-acao.perigo:hover{ border-color:var(--dev); color:var(--dev); }
  .g-tags-edit{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .g-tag{ font-size:11.5px; background:var(--accent-soft); color:var(--accent); padding:3px 10px; border-radius:999px; display:flex; align-items:center; gap:5px; }
  .g-tag.roxo{ background:#EDE0F5; color:#8050A0; }
  .g-tag.verde{ background:var(--ate-bg); color:var(--ate); }
  .g-tag.laranja{ background:var(--dev-bg); color:var(--dev); }
  .g-tag button{ background:none; border:none; cursor:pointer; color:inherit; font-size:12px; padding:0; line-height:1; opacity:.7; }
  .g-tag button:hover{ opacity:1; }
  .g-add-row{ display:flex; gap:8px; margin-top:10px; }
  .g-add-row input{ border:1px solid var(--border); border-radius:8px; padding:7px 11px; font-size:12.5px; font-family:inherit; flex:1; }
  .g-add-row button{ border:none; background:var(--accent); color:#fff; border-radius:8px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
  .g-modulo-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
  .g-modulo-row:last-child{ border-bottom:none; }
  .g-modulo-nome{ font-weight:600; width:140px; flex-shrink:0; }
  .g-acesso-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
  .g-btn-voltar{ background:none; border:none; color:#C3CBD8; cursor:pointer; font-size:12px; font-family:inherit; display:flex; align-items:center; gap:6px; padding:0 0 0 4px; margin-bottom:16px; }
  .g-btn-voltar:hover{ color:#fff; }

  /* PAUTA ------------------------------------------------------------ */
  select.cell-select{
    border:1px solid var(--border); border-radius:6px; padding:4px 6px; font-size:12px;
    font-family:inherit; color:var(--text); background:var(--surface); max-width:150px;
  }
  input.cell-date{
    border:1px solid var(--border); border-radius:6px; padding:4px 6px; font-size:12px;
    font-family:inherit; color:var(--text); width:118px;
  }
  .tags-cell{ display:flex; flex-wrap:wrap; gap:4px; max-width:180px; }
  .tag-chip{
    font-size:10px; background:var(--accent-soft); color:var(--accent); padding:2px 7px;
    border-radius:999px; white-space:nowrap;
  }
  .multi-btn{
    border:1px dashed var(--border); background:none; border-radius:6px; padding:4px 8px;
    font-size:11px; color:var(--text-muted); cursor:pointer; font-family:inherit;
  }
  .multi-popover{
    position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12); padding:10px; z-index:20; min-width:200px;
  }
  .multi-popover label{ display:flex; align-items:center; gap:7px; font-size:12px; padding:4px 2px; cursor:pointer; }
  .multi-popover .popover-actions{ margin-top:8px; text-align:right; }
  .multi-popover .popover-actions button{
    border:none; background:var(--accent); color:#fff; font-size:11px; padding:5px 10px;
    border-radius:6px; cursor:pointer; font-family:inherit;
  }
  .obs-btn{
    border:1px solid var(--border); background:var(--surface); border-radius:6px; padding:4px 9px;
    font-size:11px; color:var(--text-muted); cursor:pointer; font-family:inherit; max-width:160px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; text-align:left;
  }
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(20,27,36,.5); display:none;
    align-items:center; justify-content:center; z-index:50;
  }
  .modal-backdrop.open{ display:flex; }
  .modal-card{ background:var(--surface); border-radius:14px; padding:22px; width:420px; }
  .modal-card h3{ margin:0 0 12px; font-size:14px; }
  .modal-card textarea{
    width:100%; min-height:140px; border:1px solid var(--border); border-radius:8px; padding:10px;
    font-family:inherit; font-size:12.5px; box-sizing:border-box; resize:vertical;
  }
  .modal-charcount{ font-size:11px; color:var(--text-muted); text-align:right; margin-top:4px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
  .modal-actions button{ border-radius:8px; padding:8px 14px; font-size:12.5px; font-family:inherit; cursor:pointer; }
  .modal-actions .btn-cancel{ border:1px solid var(--border); background:var(--surface); color:var(--text-muted); }
  .modal-actions .btn-save{ border:none; background:var(--accent); color:#fff; font-weight:600; }

  /* FILTROS DE COLUNA + OCULTAR FINALIZADOS --------------------------- */
  .toolbar-check{
    display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted);
    cursor:pointer; user-select:none;
  }
  .toolbar-check input{ cursor:pointer; }
  /* position:relative apenas nas células do corpo — o thead usa sticky */
  tbody td{ position:relative; }
  .th-filter-btn{
    border:none; background:none; cursor:pointer; color:var(--text-muted);
    font-size:10px; margin-left:4px; padding:1px 3px; border-radius:4px;
  }
  .th-filter-btn:hover{ background:var(--accent-soft); color:var(--accent); }
  .th-filter-btn.active{ color:var(--accent); font-weight:700; }
  th[draggable]{ cursor:grab; }
  th[draggable]:active{ cursor:grabbing; }
  th.col-dragging{ opacity:.45; background:var(--accent-soft); }
  th.col-drag-over{ border-left:2px solid var(--accent); background:var(--accent-soft); }
  .filtro-popover{
    position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.15); padding:10px; z-index:30; min-width:190px;
    max-height:260px; display:flex; flex-direction:column;
  }
  .filtro-popover .filtro-lista{ overflow-y:auto; max-height:170px; margin:6px 0; }
  .filtro-popover label{
    display:flex; align-items:center; gap:7px; font-size:12px; padding:3px 2px;
    cursor:pointer; text-transform:none; font-weight:400; color:var(--text);
  }
  .filtro-popover .filtro-acoes{ display:flex; justify-content:space-between; gap:6px; margin-top:6px; }
  .filtro-popover .filtro-acoes button{
    border:none; font-size:11px; padding:5px 9px; border-radius:6px; cursor:pointer; font-family:inherit;
  }
  .filtro-popover .btn-aplicar{ background:var(--accent); color:#fff; }
  .filtro-popover .btn-limpar{ background:none; color:var(--text-muted); }



  /* MODAL ATRIBUIÇÃO ------------------------------------------------- */
  #modal-atribuicao{ z-index:80; }
  .atrib-modal{
    width:600px; max-width:96vw; max-height:86vh; overflow-y:auto;
  }
  .atrib-section{ margin-bottom:20px; }
  .atrib-section h4{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-muted); font-weight:700; margin:0 0 10px;
    padding-bottom:8px; border-bottom:1px solid var(--border);
  }
  .atrib-criterios{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .atrib-crit-chip{
    display:flex; align-items:center; gap:8px; padding:9px 12px;
    border:1px solid var(--border); border-radius:8px; cursor:pointer;
    font-size:12.5px; color:var(--text); background:var(--surface);
    transition:border-color .1s, background .1s;
  }
  .atrib-crit-chip input{ accent-color:var(--accent); cursor:pointer; width:15px; height:15px; flex-shrink:0; }
  .atrib-crit-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
  .atrib-crit-desc{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
  .atrib-analistas{ display:flex; flex-wrap:wrap; gap:8px; }
  .atrib-analista-chip{
    display:flex; align-items:center; gap:8px; padding:8px 12px;
    border:1px solid var(--border); border-radius:20px; cursor:pointer;
    font-size:12.5px; color:var(--text); background:var(--surface);
  }
  .atrib-analista-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
  .atrib-analista-chip input{ accent-color:var(--accent); cursor:pointer; width:14px; height:14px; }
  .atrib-preview{
    background:#F8F9FC; border:1px solid var(--border); border-radius:10px;
    padding:14px 16px; margin-top:12px;
  }
  .atrib-preview-titulo{ font-size:11.5px; font-weight:700; margin-bottom:10px; color:var(--text); }
  .atrib-preview-linha{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px;
  }
  .atrib-preview-linha:last-child{ border-bottom:none; }
  .atrib-preview-nome{ font-weight:600; }
  .atrib-preview-qtd{ color:var(--text-muted); }
  .atrib-preview-badges{ display:flex; gap:4px; flex-wrap:wrap; }
  .atrib-badge{
    font-size:10px; padding:2px 7px; border-radius:999px;
    background:var(--accent-soft); color:var(--accent); font-weight:600;
  }
  .atrib-alerta{
    background:#FFF8E1; border:1px solid #FFD54F; border-radius:8px;
    padding:10px 12px; font-size:12px; color:#795548; margin-top:10px;
  }


  /* RAIL DE NAVEGAÇÃO GLOBAL -------------------------------------- */
  #nav-rail{
    position:fixed; left:0; top:0; bottom:0; width:56px; z-index:35;
    background:var(--sidebar); display:flex; flex-direction:column;
    align-items:center; padding:10px 0; gap:2px;
    box-shadow:2px 0 8px rgba(0,0,0,.18);
    transition:width .2s;
    overflow-x:hidden;   /* impede que os rótulos transbordem sobre a sidebar */
    overflow-y:auto;
  }
  #nav-rail::-webkit-scrollbar{ width:0; }
  #nav-rail:hover{ width:200px; }
  #nav-rail .rail-logo{
    width:36px; height:36px; border-radius:9px; background:var(--accent);
    color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center;
    justify-content:center; flex-shrink:0; margin-bottom:10px;
  }
  #nav-rail .rail-sep{ width:32px; height:1px; background:rgba(255,255,255,.15); margin:4px 0; flex-shrink:0; }
  .rail-item{
    width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px;
    cursor:pointer; border-radius:0; color:rgba(255,255,255,.65);
    font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden;
    position:relative; transition:background .12s, color .12s;
    border:none; border-left:3px solid transparent;
    /* Reset para quando .rail-item é aplicado a um <button> */
    background:none; font-family:inherit; text-align:left; box-sizing:border-box;
  }
  .rail-item:hover{ background:rgba(255,255,255,.12); color:#fff; }
  .rail-item.ativo{ background:rgba(255,255,255,.18); color:#fff; border-left-color:var(--accent); }
  .rail-item svg{ flex-shrink:0; }
  /* Rótulos: largura zero quando recolhido, para não empurrar layout nem vazar */
  .rail-label{
    opacity:0; width:0; overflow:hidden; white-space:nowrap;
    transition:opacity .15s, width .2s; pointer-events:none;
  }
  #nav-rail:hover .rail-label{ opacity:1; width:auto; }
  .rail-section-label{
    font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
    padding:6px 12px 2px; width:100%; overflow:hidden; white-space:nowrap;
    opacity:0; transition:opacity .15s;
  }
  #nav-rail:hover .rail-section-label{ opacity:1; }

  /* Deslocar o conteúdo principal para não cobrir o rail */
  body.com-rail #tela-inicial,
  body.com-rail #tela-gestores,
  body.com-rail .app{ margin-left:56px; transition:margin-left .2s; }

  /* Quando o rail expande (hover), empurra o conteúdo central em vez de
     sobrepor — evita que o painel lateral cubra a sidebar do módulo. */
  body.rail-expandido #tela-inicial,
  body.rail-expandido #tela-gestores,
  body.rail-expandido .app{ margin-left:200px; }
  #nav-rail ~ * { transition:margin-left .2s; }

  /* MÓDULO CORRETOR ----------------------------------------------- */
  #modulo-corretor main{
    display:flex; flex-direction:column; padding:0; overflow:hidden; background:#F8F9FC; position:relative;
  }
  .corretor-layout{
    display:grid; grid-template-columns:1fr 1fr; flex:1; gap:0; overflow:hidden; height:100%;
  }
  .corretor-painel{
    display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border);
  }
  .corretor-painel:last-child{ border-right:none; }
  .corretor-header{
    padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .corretor-header h3{ font-size:13px; font-weight:700; margin:0; }
  .corretor-textarea{
    flex:1; border:none; outline:none; resize:none; padding:18px 20px;
    font-size:13.5px; font-family:inherit; line-height:1.7; background:transparent;
    color:var(--text);
  }
  .corretor-resultado{
    flex:1; padding:18px 20px; font-size:13.5px; line-height:1.7;
    overflow-y:auto; color:var(--text);
  }
  .corretor-texto-final{
    padding:14px 16px; white-space:pre-wrap; background:var(--surface);
    border:1px solid var(--border); border-radius:10px;
  }
  .corretor-correcoes-aplicadas{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
  }
  .corretor-correcoes-aplicadas h4{
    margin:0 0 12px; color:var(--text-muted); font-size:11px;
    font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  }
  .corretor-correcao-item{
    padding:12px 0; border-bottom:1px solid var(--border);
  }
  .corretor-correcao-item:last-child{ border-bottom:none; }
  .corretor-correcao-comparacao{
    display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px;
  }
  .corretor-trecho-original,
  .corretor-trecho-correto{
    padding:2px 5px; border-radius:4px; white-space:pre-wrap;
    overflow-wrap:anywhere;
  }
  .corretor-trecho-original{
    color:var(--nm-err); background:var(--nm-err-c); text-decoration:line-through;
  }
  .corretor-trecho-correto{
    color:var(--nm-ok); background:var(--nm-ok-c);
  }
  .corretor-correcao-seta{ color:var(--text-muted); font-weight:700; }
  .corretor-correcao-motivo,
  .corretor-correcoes-vazio{
    margin:7px 0 0; color:var(--text-muted); font-size:12px; line-height:1.55;
  }
  .corretor-resultado.carregando{
    color:var(--text-muted); font-style:italic;
  }
  .corretor-topbar{
    padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap;
  }
  .corretor-tipo-btn{
    border:1px solid var(--border); background:var(--surface); border-radius:20px;
    padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer;
    font-family:inherit; color:var(--text-muted); transition:all .12s;
  }
  .corretor-tipo-btn.ativo{ border-color:var(--accent); background:var(--accent); color:#fff; }
  .corretor-tipo-btn:hover:not(.ativo){ border-color:var(--accent); color:var(--accent); }
  .corretor-footer{
    padding:10px 16px; background:var(--surface); border-top:1px solid var(--border);
    display:flex; align-items:center; gap:10px; flex-shrink:0;
  }
  .dicio-input{
    border:1px solid var(--border); border-radius:8px; padding:7px 12px;
    font-size:12.5px; font-family:inherit; width:200px;
  }
  .dicio-btn{
    border:none; background:var(--accent); color:#fff; border-radius:8px;
    padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
  }

  /* MÓDULO CLASSIFICADOR ------------------------------------------ */
  #modulo-classificador main{
    display:flex; flex-direction:column; padding:28px 32px 60px; overflow-y:auto;
    background:#F8F9FC;
  }
  .class-url-area{
    border:1px solid var(--border); border-radius:10px; background:var(--surface);
    padding:14px 16px; font-size:13px; font-family:inherit; resize:vertical;
    min-height:120px; width:100%; box-sizing:border-box; line-height:1.7;
  }
  .class-result-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:16px; }
  .class-result-table th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:9px 14px; background:var(--surface); border-bottom:1px solid var(--border); text-align:left; font-weight:600; }
  .class-result-table td{ padding:10px 14px; border-bottom:1px solid var(--border); font-size:12.5px; }
  .class-result-table tr:last-child td{ border-bottom:none; }
  .class-badge{ font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; }


  /* NOTIFICAÇÕES ------------------------------------------------------ */
  .notif-badge{
    position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
    background:#E53935; color:#fff; border-radius:999px; font-size:10px;
    font-weight:800; display:flex; align-items:center; justify-content:center;
    padding:0 4px; line-height:1; border:2px solid var(--sidebar); pointer-events:none;
    animation:badgePop .2s cubic-bezier(.36,.07,.19,.97);
  }
  @keyframes badgePop{ 0%{transform:scale(0)} 70%{transform:scale(1.3)} 100%{transform:scale(1)} }

  /* Badge sobre card de módulo na home */
  .modulo-card{ position:relative; }
  .modulo-card .notif-badge{ top:-6px; right:-6px; }

  /* Badge no rail */
  .rail-item{ position:relative; }

  /* Sininho no topo direito */
  /* #notif-bell e #chat-bubble usam .rail-item — herdam o padrão visual do rail */
  #notif-bell .notif-badge{ position:absolute; top:5px; left:24px; }

  /* Dropdown de notificações */
  #notif-dropdown{
    position:fixed; left:200px; bottom:80px; z-index:91; width:340px;
    background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.22);
    overflow:hidden; display:none;
    animation:slideDown .18s ease;
  }
  @keyframes slideDown{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
  #notif-dropdown.aberto{ display:block; }
  .notif-header{
    padding:12px 16px; background:var(--sidebar); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
  }
  .notif-header h4{ margin:0; font-size:13px; font-weight:700; }
  .notif-limpar{
    background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:6px;
    padding:3px 9px; font-size:11px; cursor:pointer; font-family:inherit;
  }
  .notif-lista{ max-height:360px; overflow-y:auto; }
  .notif-item{
    padding:11px 16px; border-bottom:1px solid #F0F0F0; cursor:pointer;
    transition:background .1s; display:flex; gap:10px; align-items:flex-start;
  }
  .notif-item:hover{ background:#F8F9FC; }
  .notif-item.nao-lida{ background:#EFF6FF; }
  .notif-item.nao-lida:hover{ background:#DBEAFE; }
  .notif-icone{
    width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex;
    align-items:center; justify-content:center; font-size:14px;
  }
  .notif-corpo{ flex:1; min-width:0; }
  .notif-titulo{ font-size:12.5px; font-weight:600; color:var(--text); line-height:1.4; }
  .notif-texto{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
  .notif-hora{ font-size:10.5px; color:#A0AEC0; margin-top:3px; }
  .notif-vazia{ padding:28px 16px; text-align:center; color:#A0AEC0; font-size:12.5px; }

  /* Push notification (toast deslizante) */
  #notif-push-container{
    position:fixed; top:16px; right:16px; z-index:95;
    display:flex; flex-direction:column; gap:8px; pointer-events:none;
  }
  .notif-push{
    background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.2);
    padding:12px 14px; width:300px; display:flex; gap:10px; align-items:flex-start;
    pointer-events:all; cursor:pointer; border-left:4px solid var(--accent);
    animation:pushIn .25s ease;
  }
  @keyframes pushIn{ from{opacity:0;transform:translateX(320px)} to{opacity:1;transform:translateX(0)} }
  .notif-push.saindo{ animation:pushOut .25s ease forwards; }
  @keyframes pushOut{ to{opacity:0;transform:translateX(320px)} }
  .notif-push-icone{ font-size:20px; flex-shrink:0; }
  .notif-push-corpo{ flex:1; }
  .notif-push-titulo{ font-size:12.5px; font-weight:700; color:var(--text); }
  .notif-push-texto{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
  .notif-push-fechar{ background:none; border:none; cursor:pointer; color:#A0AEC0; font-size:14px; padding:0; }
  .notif-push-fechar:hover{ color:var(--text-muted); }


  /* LOGIN — BOTÕES DE PERFIL DE TESTE -------------------------------- */
  .login-perfil-btn{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:16px 10px; border:2px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer; font-family:inherit;
    transition:border-color .15s, background .15s, transform .1s;
    color:var(--text);
  }
  .login-perfil-btn:hover{
    border-color:var(--accent); background:var(--accent-soft);
    transform:translateY(-2px);
  }
  .login-perfil-btn:active{ transform:translateY(0); }
  .login-perfil-btn strong{ font-size:13px; font-weight:700; }
  .login-perfil-btn span:last-child{ font-size:11px; color:var(--text-muted); }


  /* PÓS-VENDAS -------------------------------------------------------- */
  .pv-status-badge{
    font-size:10.5px; padding:3px 8px; border-radius:999px;
    font-weight:700; white-space:nowrap;
  }
  .pv-status-enviado   { background:#E3F2FD; color:#1565C0; }
  .pv-status-recebido  { background:#E8F5E9; color:#2E7D32; }
  .pv-status-devolvido { background:#FFF3E0; color:#E65100; }
  .pv-status-nao-env   { background:#FFEBE6; color:#BF2600; }
  .pv-status-dmip      { background:#F3E5F5; color:#6A1B9A; }

  .pv-prazo-ok       { color:#2E7D32; font-weight:600; }
  .pv-prazo-expirado { color:#BF2600; font-weight:600; }
  .pv-prazo-dentro   { color:#1565C0; font-weight:600; }

  .pv-rcc-sim { color:#2E7D32; font-weight:700; }
  .pv-rcc-nao { color:#BF2600; }

  .pv-dash-cards{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-bottom:22px;
  }
  .pv-dash-card{
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:14px 16px; display:flex; flex-direction:column; gap:4px;
  }
  .pv-dash-card-val{ font-size:28px; font-weight:800; color:var(--accent); }
  .pv-dash-card-lbl{ font-size:12px; color:var(--text-muted); }
  .pv-dash-bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
  .pv-dash-bar-label{ font-size:11.5px; width:200px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pv-dash-bar-track{ flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
  .pv-dash-bar-fill{ height:100%; border-radius:4px; background:var(--accent); transition:width .3s; }
  .pv-dash-bar-count{ font-size:11px; color:var(--text-muted); width:24px; text-align:right; }

  .pv-link{ color:var(--accent); text-decoration:none; font-size:11px; }
  .pv-link:hover{ text-decoration:underline; }

  /* Edição em linha na tabela do Pós-Vendas */
  .pv-cell-text, .pv-cell-date{
    border:1px solid transparent; border-radius:6px; padding:4px 6px;
    font-size:11.5px; font-family:inherit; color:var(--text); background:transparent;
    width:100%; box-sizing:border-box; min-width:110px;
  }
  .pv-cell-text:hover, .pv-cell-date:hover{ border-color:var(--border); background:var(--surface); }
  .pv-cell-text:focus, .pv-cell-date:focus{ border-color:var(--accent); background:var(--surface); outline:none; }
  .pv-drive-cell{ display:flex; align-items:center; gap:4px; }
  .pv-drive-cell .pv-cell-text{ min-width:140px; }
  .pv-drive-open{ flex-shrink:0; text-decoration:none; font-size:13px; }

  /* SOLICITAÇÕES ------------------------------------------------------ */
  .sol-card{
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:14px 16px; margin-bottom:10px; display:flex; gap:14px; align-items:flex-start;
  }
  .sol-card:hover{ box-shadow:0 2px 8px rgba(0,0,0,.07); }
  .sol-prioridade-dot{
    width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:4px;
  }
  .sol-prioridade-urgente { background:#E53935; }
  .sol-prioridade-normal  { background:#1E88E5; }
  .sol-prioridade-baixa   { background:#A0AEC0; }
  .sol-card-body{ flex:1; min-width:0; }
  .sol-card-titulo{ font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:4px; }
  .sol-card-meta{ font-size:11.5px; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; }
  .sol-card-desc{ font-size:12.5px; color:var(--text-muted); margin-top:6px; line-height:1.5; }
  .sol-card-resposta{ margin-top:8px; padding:8px 10px; background:#F8F9FC; border-radius:6px; font-size:12px; color:var(--text); border-left:3px solid var(--accent); }
  .sol-status-badge{ font-size:10.5px; padding:3px 8px; border-radius:999px; font-weight:700; }
  .sol-status-pendente     { background:#FFF3E0; color:#E65100; }
  .sol-status-em_andamento { background:#E3F2FD; color:#1565C0; }
  .sol-status-concluida    { background:#E8F5E9; color:#2E7D32; }
  .sol-status-cancelada    { background:#ECEFF1; color:#546E7A; }
  .sol-tipo-badge{ font-size:10.5px; padding:2px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }



  /* DISPAROS (e-mails em massa) ------------------------------------- */
  .disp-placeholder{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:48px 32px; text-align:center; max-width:640px; margin-top:8px;
  }
  .disp-placeholder-icone{
    width:72px; height:72px; border-radius:50%; background:var(--accent-soft);
    color:var(--accent); display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
  }
  .disp-placeholder h3{
    font-size:16px; font-weight:700; color:var(--text); margin:0 0 8px;
  }
  .disp-placeholder p{
    font-size:13px; color:var(--text-muted); line-height:1.7; margin:0 auto 20px;
    max-width:440px;
  }
  .disp-aguardando{
    display:inline-block; font-size:11.5px; font-weight:600;
    background:#FFF8E1; color:#8D6E00; border:1px solid #FFE082;
    border-radius:999px; padding:6px 16px;
  }


  /* PRESENÇA / STATUS (modelo Teams) ------------------------------- */
  .avatar-presenca{
    position:relative; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
  }
  .presenca-badge{
    position:absolute; right:-1px; bottom:-1px; border-radius:50%;
    background:var(--presenca-cor); border:2px solid var(--surface);
    box-sizing:content-box; display:block;
  }
  /* Os detalhes internos (traço, ponteiro, mala) são posicionados em relação
     à própria bolinha. Sem este isolamento, o ::after escapa e se ancora na
     página, aparecendo como um retângulo solto sobre o texto. */
  .presenca-badge::after{ position:absolute; }
  .presenca-badge{ isolation:isolate; }
  /* Quando o badge aparece solto (fora de um avatar), como nas opções do
     menu, ele precisa de posicionamento próprio para conter o ::after. */
  .presenca-opcao .presenca-badge,
  #chat-modulo-header-status .presenca-badge{ position:relative; right:auto; bottom:auto; }
  /* Variações do indicador, como no Teams */
  .presenca-badge.presenca-vazio{ background:transparent; box-shadow:inset 0 0 0 2px var(--presenca-cor); }
  .presenca-badge.presenca-traco::after{
    content:''; position:absolute; left:22%; right:22%; top:44%; height:12%;
    background:var(--surface); border-radius:1px;
  }
  .presenca-badge.presenca-relogio::after{
    content:''; position:absolute; left:46%; top:24%; width:8%; height:32%;
    background:var(--surface); border-radius:1px; transform-origin:bottom center;
  }
  .presenca-badge.presenca-ferias::after{
    content:''; position:absolute; left:26%; right:26%; top:30%; bottom:30%;
    border:1.5px solid var(--surface); border-radius:1px;
  }
  /* Dentro da sidebar escura o anel do badge acompanha o fundo */
  .sidebar .presenca-badge, #nav-rail .presenca-badge{ border-color:var(--sidebar); }
  .sidebar .presenca-badge.presenca-traco::after,
  .sidebar .presenca-badge.presenca-relogio::after,
  .sidebar .presenca-badge.presenca-ferias::after{ background:var(--sidebar); border-color:var(--sidebar); }
  /* O menu de status fica sobre fundo claro, ainda que esteja dentro da
     sidebar escura no DOM — os detalhes voltam à cor da superfície. */
  #presenca-menu .presenca-badge{ border-color:var(--surface); }
  #presenca-menu .presenca-badge.presenca-traco::after,
  #presenca-menu .presenca-badge.presenca-relogio::after,
  #presenca-menu .presenca-badge.presenca-ferias::after{ background:var(--surface); border-color:var(--surface); }

  /* Botão de status do usuário logado */
  #presenca-botao{
    display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; cursor:pointer; color:#fff; font-family:inherit; text-align:left;
  }
  #presenca-botao:hover{ background:rgba(255,255,255,.12); }
  .presenca-botao-texto{ flex:1; min-width:0; }
  .presenca-botao-nome{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .presenca-botao-status{ font-size:10.5px; color:var(--sidebar-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Menu de seleção de status */
  #presenca-menu{
    display:none; position:absolute; bottom:calc(100% + 8px); left:0; right:0;
    background:var(--surface); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.28);
    border:1px solid var(--border); z-index:60; overflow:hidden;
  }
  #presenca-menu.aberto{ display:block; }
  .presenca-menu-topo{ padding:14px 16px; border-bottom:1px solid var(--border); }
  .presenca-menu-usuario{ display:flex; align-items:center; gap:10px; }
  .presenca-menu-nome{ font-size:13px; font-weight:700; color:var(--text); }
  .presenca-menu-papel{ font-size:11px; color:var(--text-muted); text-transform:capitalize; }
  .presenca-menu-lista{ padding:6px; max-height:320px; overflow-y:auto; }
  .presenca-opcao{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
    cursor:pointer; position:relative;
  }
  .presenca-opcao:hover{ background:var(--accent-soft); }
  .presenca-opcao.ativa{ background:var(--accent-soft); }
  .presenca-opcao .presenca-badge{ flex-shrink:0; }
  .presenca-opcao-texto{ flex:1; min-width:0; }
  .presenca-opcao-rotulo{ font-size:12.5px; font-weight:600; color:var(--text); }
  .presenca-opcao-desc{ font-size:10.5px; color:var(--text-muted); }
  .presenca-check{ color:var(--accent); font-weight:700; }
  .presenca-menu-rodape{ padding:10px 12px; border-top:1px solid var(--border); background:var(--surface); }
  .presenca-mensagem{
    width:100%; border:1px solid var(--border); border-radius:8px; padding:7px 10px;
    font-size:12px; font-family:inherit; box-sizing:border-box;
  }
  .presenca-redefinir{
    width:100%; margin-top:6px; border:1px solid var(--border); background:var(--surface);
    border-radius:8px; padding:6px; font-size:11.5px; cursor:pointer; font-family:inherit;
    color:var(--text-muted);
  }
  .presenca-redefinir:hover{ background:var(--accent-soft); color:var(--accent); }
  .presenca-expediente{ font-size:10px; color:var(--text-muted); margin-top:8px; text-align:center; }

  /* Lista de presença da equipe */
  .presenca-equipe-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer;
  }
  .presenca-equipe-item:hover{ background:rgba(255,255,255,.10); }
  .presenca-equipe-texto{ flex:1; min-width:0; }
  .presenca-equipe-nome{ font-size:12px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .presenca-equipe-status{ font-size:10px; color:var(--sidebar-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .presenca-vazio{ font-size:11px; color:var(--sidebar-muted); padding:8px 10px; }


  /* ACESSIBILIDADE — FOCO VISÍVEL ---------------------------------- */
  /* :focus-visible só aparece na navegação por teclado, sem poluir o
     clique do mouse. Essencial para quem navega por Tab. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  .nav-item:focus-visible,
  .rail-item:focus-visible,
  .modulo-card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:6px;
  }
  /* Em superfícies escuras o contorno precisa de mais contraste */
  .sidebar button:focus-visible,
  .sidebar input:focus-visible,
  #nav-rail *:focus-visible,
  .gestores-sidebar *:focus-visible{
    outline-color:#FFFFFF;
  }

  /* Respeita quem prefere menos animação (acessibilidade do sistema) */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* SELEÇÃO EM LOTE -------------------------------------------------- */
  .col-check{ width:32px; padding:0 8px !important; }
  .row-check{ width:32px; padding:0 8px !important; vertical-align:middle; }
  .col-check input, .row-check input{ cursor:pointer; width:15px; height:15px; accent-color:var(--accent); }
  tr.selecionada{ background:color-mix(in srgb, var(--accent) 8%, white) !important; }
  .lote-toolbar{
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    background:var(--sidebar); color:#fff; border-radius:12px;
    padding:10px 18px; display:flex; align-items:center; gap:12px;
    box-shadow:0 8px 32px rgba(0,0,0,.35); z-index:50;
    animation:slideUp .18s ease; min-width:460px;
  }
  @keyframes slideUp{ from{opacity:0;transform:translateX(-50%) translateY(12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
  .lote-toolbar-count{ font-size:12.5px; font-weight:700; white-space:nowrap; }
  .lote-toolbar-sep{ width:1px; height:20px; background:rgba(255,255,255,.25); }
  .lote-toolbar select{
    border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff;
    border-radius:7px; padding:6px 10px; font-size:12px; font-family:inherit; cursor:pointer; min-width:150px;
  }
  .lote-toolbar select option{ background:var(--sidebar); color:#fff; }
  .lote-toolbar button{
    border:none; border-radius:7px; padding:6px 14px; font-size:12px; font-weight:600;
    cursor:pointer; font-family:inherit; white-space:nowrap;
  }
  .btn-lote-aplicar{ background:var(--accent); color:#fff; }
  .btn-lote-aplicar:hover{ background:#005FBF; }
  .btn-lote-limpar{ background:rgba(255,255,255,.15); color:#fff; }
  .btn-lote-limpar:hover{ background:rgba(255,255,255,.25); }
  .btn-lote-fechar{ background:none; color:rgba(255,255,255,.6); font-size:16px; padding:4px 8px; }
  .btn-lote-fechar:hover{ color:#fff; }

  /* GESTOR (PAUTA) --------------------------------------------------- */
  .col-gestor{ display:none; }
  body.pauta-gestor .col-gestor{ display:table-cell; }
  .th-move-btn{
    border:none; background:none; cursor:pointer; color:var(--text-muted);
    font-size:10px; padding:1px 2px; border-radius:4px;
  }
  .th-move-btn:hover{ background:var(--accent-soft); color:var(--accent); }

  /* CARDS (Trello-like) ------------------------------------------ */
  #modulo-cards{ background:#0052CC; } /* azul do quadro Kanban: identidade visual */
  #modulo-cards .sidebar{ background:rgba(0,0,0,.25); border-right:none; }
  #modulo-cards .sidebar .brand-name,
  #modulo-cards .sidebar .brand-sub,
  #modulo-cards .sidebar .nav-label,
  #modulo-cards .sidebar .nav-item{ color:#fff; }
  #modulo-cards .sidebar .nav-item:hover,
  #modulo-cards .sidebar .nav-item.active{ background:rgba(255,255,255,.2); color:#fff; }
  #modulo-cards .sidebar .profile-label{ color:rgba(255,255,255,.7); }
  #modulo-cards .sidebar .profile-toggle button{ border-color:rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.15); }
  #modulo-cards .sidebar .profile-toggle button.active{ background:rgba(255,255,255,.35); }
  #modulo-cards .sidebar .profile-note{ color:rgba(255,255,255,.6); }
  #modulo-cards .sidebar .g-btn-voltar{ color:rgba(255,255,255,.6); }
  #modulo-cards main{ padding:0; overflow:hidden; display:flex; flex-direction:column; background:transparent; }

  .cards-topbar{
    background:rgba(0,0,0,.25); padding:10px 16px; display:flex; align-items:center;
    gap:12px; flex-shrink:0; backdrop-filter:blur(4px);
  }
  .cards-topbar h1{ font-size:15px; font-weight:700; color:#fff; margin:0; flex:1; }
  .cards-topbar-btn{
    background:rgba(255,255,255,.2); border:none; border-radius:6px; color:#fff;
    padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; gap:6px;
  }
  .cards-topbar-btn:hover{ background:rgba(255,255,255,.32); }
  .cards-topbar-btn.star{ font-size:14px; padding:6px 10px; }

  .cards-scroll{ flex:1; overflow-x:auto; overflow-y:hidden; padding:10px 12px 20px; display:flex; align-items:flex-start; gap:10px; }
  .cards-scroll::-webkit-scrollbar{ height:8px; }
  .cards-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); border-radius:4px; }

  /* LISTA (coluna) */
  .trello-lista{
    background:rgba(235,236,240,1); border-radius:10px; width:268px; flex-shrink:0;
    display:flex; flex-direction:column; max-height:calc(100vh - 160px);
  }
  .trello-lista.drag-over{ outline:2px dashed rgba(255,255,255,.7); }
  .trello-lista-header{
    padding:10px 12px 6px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .trello-lista-titulo{
    font-size:13.5px; font-weight:700; color:var(--text); flex:1; cursor:pointer;
    padding:2px 4px; border-radius:4px; outline:none; border:none; background:transparent; font-family:inherit;
  }
  .trello-lista-titulo:focus{ background:#fff; box-shadow:0 0 0 2px #0052CC; }
  .trello-lista-menu-btn{
    background:none; border:none; cursor:pointer; color:#6B778C; border-radius:6px;
    padding:4px 8px; font-size:16px; line-height:1;
  }
  .trello-lista-menu-btn:hover{ background:var(--border); }
  .trello-lista-cards{ overflow-y:auto; padding:0 8px 6px; flex:1; display:flex; flex-direction:column; gap:8px; }
  .trello-lista-cards::-webkit-scrollbar{ width:6px; }
  .trello-lista-cards::-webkit-scrollbar-thumb{ background:var(--text-muted); border-radius:3px; }

  /* CARD */
  .trello-card{
    background:#fff; border-radius:8px; padding:10px 12px;
    box-shadow:0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
    cursor:grab; position:relative; word-break:break-word;
  }
  .trello-card:hover{ background:var(--bg); box-shadow:0 4px 8px rgba(9,30,66,.2); }
  .trello-card.dragging{ opacity:.5; cursor:grabbing; }
  .trello-card-labels{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
  .trello-label{
    height:8px; border-radius:4px; min-width:40px; flex-shrink:0; cursor:pointer;
  }
  .trello-label.expandida{ height:auto; padding:2px 8px; font-size:10.5px; font-weight:700; color:#fff; min-width:40px; }
  .trello-card-titulo{ font-size:13px; color:var(--text); line-height:1.4; margin:0; }
  .trello-card-footer{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .trello-card-badge{
    display:flex; align-items:center; gap:3px; font-size:11px; color:var(--text-muted);
    background:var(--bg); border-radius:4px; padding:2px 6px;
  }
  .trello-card-members{ display:flex; gap:-4px; margin-left:auto; }
  .trello-member-avatar{
    width:26px; height:26px; border-radius:50%; background:#0052CC; color:#fff;
    font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
  }
  .trello-card-btn-edit{
    display:none; position:absolute; top:6px; right:6px; background:#fff; border:none;
    border-radius:4px; padding:3px 6px; cursor:pointer; font-size:11px; color:var(--text-muted);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  .trello-card:hover .trello-card-btn-edit{ display:block; }
  .trello-card-btn-edit:hover{ background:var(--border); }

  /* ADICIONAR CARD */
  .trello-add-card-btn{
    background:none; border:none; border-radius:6px; padding:8px 10px;
    cursor:pointer; font-size:12.5px; color:var(--text-muted); text-align:left;
    display:flex; align-items:center; gap:6px; width:100%; flex-shrink:0; margin:2px 8px 6px;
    width:calc(100% - 16px);
  }
  .trello-add-card-btn:hover{ background:var(--border); color:var(--text); }
  .trello-add-card-form{
    /* Começa oculto: só aparece ao clicar em "Adicionar um cartão".
       Sem isto, todos os formulários das listas ficam abertos ao mesmo tempo. */
    display:none;
    padding:4px 8px 8px; flex-shrink:0;
  }
  .trello-add-card-textarea{
    width:100%; border:none; border-radius:6px; padding:8px 10px; font-size:13px;
    font-family:inherit; resize:none; box-shadow:0 4px 8px rgba(9,30,66,.2);
    box-sizing:border-box; line-height:1.4; min-height:60px;
  }
  .trello-add-card-textarea:focus{ outline:none; }
  .trello-add-card-actions{ display:flex; align-items:center; gap:6px; margin-top:6px; }
  .trello-btn-salvar{
    background:#0052CC; color:#fff; border:none; border-radius:4px; padding:6px 12px;
    font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
  }
  .trello-btn-salvar:hover{ background:var(--accent); }
  .trello-btn-cancelar{
    background:none; border:none; cursor:pointer; font-size:20px; color:var(--text-muted);
    padding:4px 8px; border-radius:4px; line-height:1;
  }
  .trello-btn-cancelar:hover{ background:var(--border); }

  /* ADICIONAR LISTA */
  .trello-add-lista{
    width:268px; flex-shrink:0; border-radius:10px; padding:8px;
    background:rgba(255,255,255,.24); cursor:pointer;
  }
  .trello-add-lista:hover{ background:rgba(255,255,255,.36); }
  .trello-add-lista-btn{
    background:none; border:none; color:#fff; font-size:13px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px; width:100%;
    font-family:inherit;
  }
  .trello-add-lista-form{ display:none; }
  .trello-add-lista-input{
    width:100%; border:none; border-radius:6px; padding:8px 10px; font-size:13.5px;
    font-family:inherit; box-shadow:0 4px 8px rgba(9,30,66,.2); box-sizing:border-box;
    margin-bottom:6px;
  }
  .trello-add-lista-input:focus{ outline:none; }

  /* MODAL DO CARD */
  .card-modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.52); z-index:200;
    display:flex; align-items:flex-start; justify-content:center;
    padding:48px 8px; overflow-y:auto;
  }
  .card-modal{
    background:var(--bg); border-radius:12px; width:768px; max-width:100%;
    min-height:400px; padding:20px; display:flex; gap:16px; position:relative;
  }
  .card-modal-main{ flex:1; min-width:0; }
  .card-modal-sidebar{ width:180px; flex-shrink:0; }
  .card-modal-close{
    position:absolute; top:12px; right:14px; background:none; border:none;
    font-size:20px; cursor:pointer; color:var(--text-muted); border-radius:6px; padding:4px 8px;
  }
  .card-modal-close:hover{ background:var(--border); }
  .card-modal-titulo-input{
    font-size:18px; font-weight:700; color:var(--text); border:none; background:transparent;
    width:100%; resize:none; font-family:inherit; line-height:1.4; padding:4px;
    border-radius:4px; margin-bottom:12px; outline:none;
  }
  .card-modal-titulo-input:hover{ background:rgba(0,0,0,.05); }
  .card-modal-titulo-input:focus{ background:#fff; box-shadow:0 0 0 2px #0052CC; }
  .card-modal-section{ margin-bottom:16px; }
  .card-modal-section h4{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; margin:0 0 8px; }
  .card-modal-desc{
    background:#fff; border-radius:6px; padding:10px 12px; font-size:13px;
    color:var(--text); min-height:80px; cursor:text; border:1px solid transparent; width:100%; box-sizing:border-box;
  }
  .card-modal-desc:focus{ outline:none; border-color:#0052CC; }
  .card-modal-sidebar-btn{
    display:flex; align-items:center; gap:8px; width:100%; padding:7px 12px;
    background:var(--border); border:none; border-radius:6px; font-size:12.5px; color:var(--text);
    cursor:pointer; font-family:inherit; font-weight:600; margin-bottom:6px; text-align:left;
  }
  .card-modal-sidebar-btn:hover{ background:var(--text-muted); }
  .card-modal-checklist{ margin-top:4px; }
  .checklist-item{ display:flex; gap:8px; align-items:flex-start; padding:4px 0; }
  .checklist-item input[type=checkbox]{ margin-top:2px; flex-shrink:0; accent-color:var(--accent); width:16px; height:16px; }
  .checklist-item label{ font-size:13px; color:var(--text); line-height:1.4; flex:1; cursor:pointer; }
  .checklist-item label.concluida{ text-decoration:line-through; color:var(--text-muted); }
  .checklist-progress{ background:var(--border); border-radius:4px; height:8px; margin:6px 0 10px; overflow:hidden; }
  .checklist-progress-bar{ height:100%; background:#0052CC; border-radius:4px; transition:width .3s; }
  .card-modal-comment-input{
    width:100%; border:1px solid var(--border); border-radius:6px; padding:9px 12px;
    font-size:13px; font-family:inherit; resize:none; box-sizing:border-box;
  }
  .card-modal-comment-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 1px #0052CC; }
  .card-comment{ display:flex; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
  .card-comment:last-child{ border-bottom:none; }
  .card-comment-body{ flex:1; }
  .card-comment-autor{ font-size:12px; font-weight:700; color:var(--text); margin-bottom:3px; }
  .card-comment-texto{ font-size:13px; color:var(--text); }
  .card-comment-hora{ font-size:11px; color:var(--text-muted); margin-top:2px; }
  .label-picker{ display:flex; flex-direction:column; gap:4px; }
  .label-opt{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:4px; cursor:pointer; }
  .label-opt:hover{ background:var(--border); }
  .label-swatch{ width:40px; height:24px; border-radius:4px; }
  .label-opt span{ font-size:12.5px; font-weight:600; }
  .card-date-display{
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:4px;
    font-size:12.5px; font-weight:600; cursor:pointer; border:none; font-family:inherit;
  }
  .card-date-display.vencida{ background:#FFEBE6; color:#BF2600; }
  .card-date-display.hoje{ background:#FFF4E6; color:#974F0C; }
  .card-date-display.ok{ background:#E3FCEF; color:#006644; }
  .card-date-display.sem-data{ background:var(--border); color:var(--text); }

  /* LISTA MENU POPOVER */
  .lista-menu{
    position:absolute; background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25);
    z-index:100; width:200px; padding:8px; top:36px; right:6px;
  }
  .lista-menu-item{
    display:flex; align-items:center; padding:7px 10px; border-radius:6px;
    cursor:pointer; font-size:12.5px; color:var(--text);
  }
  .lista-menu-item:hover{ background:var(--bg); }
  .lista-menu-item.perigo:hover{ background:#FFEBE6; color:#BF2600; }

  /* FILTROS DO TOPBAR */
  .cards-filter-chip{
    background:rgba(255,255,255,.2); border:none; border-radius:6px; color:#fff;
    padding:5px 10px; font-size:11.5px; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; gap:4px;
  }
  .cards-filter-chip.ativo{ background:rgba(255,255,255,.4); font-weight:700; }
  .cards-filter-chip:hover{ background:rgba(255,255,255,.32); }

  /* CHAT ---------------------------------------------------------- */
  /* #chat-bubble: estilos herdados de .rail-item */
  #chat-lista-popover{
    position:fixed; bottom:84px; right:20px; width:280px; max-height:420px; background:var(--surface);
    border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.3); border:1px solid var(--border);
    display:flex; flex-direction:column; overflow:hidden; z-index:44;
  }
  #chat-lista-itens{ overflow-y:auto; }
  #chat-janelas-container{
    position:fixed; bottom:0; right:84px; display:flex; flex-direction:row-reverse;
    align-items:flex-end; gap:8px; z-index:40; max-width:calc(100vw - 100px);
  }
  .chat-janela{
    width:296px; height:420px; background:var(--surface); border-radius:12px 12px 0 0;
    box-shadow:0 12px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden;
    border:1px solid var(--border); border-bottom:none; flex-shrink:0;
  }
  .chat-janela.minimizada{ width:168px; height:auto; }
  .chat-janela.minimizada .chat-header{ cursor:pointer; }
  .chat-janela.cheia{
    position:fixed; inset:16px; width:auto !important; height:auto !important; z-index:60;
    border-radius:14px; border-bottom:1px solid var(--border);
  }
  .chat-header{
    background:var(--sidebar); color:#fff; padding:11px 12px; display:flex; align-items:center;
    justify-content:space-between; flex-shrink:0; gap:8px;
  }
  .chat-header-title{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-header-btns{ display:flex; flex-shrink:0; }
  .chat-header-btns button{ background:none; border:none; color:#C3CBD8; cursor:pointer; font-size:13px; padding:2px 5px; }
  .chat-header-btns button:hover{ color:#fff; }
  .chat-corpo-janela{ flex:1; display:flex; flex-direction:column; min-height:0; }
  .chat-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
  .chat-item:hover{ background:#FAFBFD; }
  .chat-item .chat-avatar{
    width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
  }
  .chat-item-info{ overflow:hidden; }
  .chat-item-nome{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-item-preview{ font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-novo-btns{ display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .chat-novo-btns button{
    flex:1; font-size:11px; padding:6px; border-radius:7px; border:1px solid var(--border); background:var(--surface);
    color:var(--text-muted); cursor:pointer; font-family:inherit;
  }
  .chat-mensagens{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; min-height:0; }
  .chat-bolha{ max-width:78%; padding:8px 11px; border-radius:12px; font-size:12.5px; line-height:1.5; position:relative; }
  .chat-bolha.minha{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:3px; }
  .chat-bolha.outra{ align-self:flex-start; background:#EEF1F4; color:var(--text); border-bottom-left-radius:3px; }
  .chat-bolha .chat-autor{ font-size:10px; font-weight:700; opacity:.75; margin-bottom:2px; display:block; }
  .chat-bolha .chat-hora{ font-size:9.5px; opacity:.65; margin-top:3px; display:block; text-align:right; }
  .chat-bolha.apagada{ font-style:italic; opacity:.65; }
  .chat-bolha .chat-acoes{ display:none; gap:4px; position:absolute; top:-18px; right:0; }
  .chat-bolha.minha:hover .chat-acoes{ display:flex; }
  .chat-acoes button{ background:var(--sidebar); color:#fff; border:none; border-radius:5px; font-size:9px; padding:2px 5px; cursor:pointer; }
  .chat-anexo-chip{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.2); padding:3px 8px; border-radius:8px; font-size:11px; }
  .chat-bolha.outra .chat-anexo-chip{ background:var(--accent-soft); color:var(--accent); }
  .chat-composer{ border-top:1px solid var(--border); padding:8px 10px; display:flex; align-items:center; gap:4px; flex-shrink:0; position:relative; }
  .chat-composer input[type=text]{ flex:1; border:1px solid var(--border); border-radius:20px; padding:8px 12px; font-size:12.5px; font-family:inherit; min-width:0; }
  .chat-composer button{ background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); padding:4px; flex-shrink:0; }
  .chat-composer button:hover{ color:var(--accent); }
  .chat-emoji-picker{
    position:absolute; bottom:46px; left:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.15); padding:8px; grid-template-columns:repeat(7,1fr); gap:2px; z-index:5;
  }
  .chat-emoji-picker span{ cursor:pointer; font-size:16px; padding:3px; text-align:center; border-radius:5px; }
  .chat-emoji-picker span:hover{ background:var(--accent-soft); }
  .chat-gravando{ color:var(--dev) !important; }

  /* Ocultamento à prova de !important — usado por mostrarTela() */
  /* Ocultamento à prova de !important e de media queries.
     Especificidade dupla (.app.oculto = 0,2,0) supera .app (0,1,0),
     garantindo que módulos ocultos permaneçam ocultos em qualquer viewport. */
  .oculto,
  .app.oculto,
  .login-screen.oculto{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE  — breakpoints: 768px (tablet) e 480px (phone)
   Estratégia:
   • 768px  — sidebar colapsa para drawer deslizante, main ocupa 100%
   • 480px  — ajustes de tipografia, grids, modais e módulos específicos
   ══════════════════════════════════════════════════════════════════ */

/* ── OVERLAY do drawer de sidebar ── */
#sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:55; backdrop-filter:blur(2px);
}

/* ==================================================================
   CLASSIFICADOR DE URLS V2.3.15
   ================================================================== */
#modulo-classificador{
  --class-accent:#00796b;
  --class-accent-strong:#00695c;
  --class-accent-soft:color-mix(in srgb, var(--class-accent) 12%, var(--surface));
  --class-ok:#1b7f4d;
  --class-rejected:#b3261e;
  --class-review:#9a6700;
}
#modulo-classificador .class-v2-brand{background:var(--class-accent);}
#modulo-classificador .class-v2-main{
  overflow-y:auto;
  min-width:0;
  padding-bottom:40px;
}
#modulo-classificador .class-v2-sidebar nav{padding-bottom:22px;}
#modulo-classificador .class-v2-nav{
  width:100%;
  border:0;
  background:transparent;
  color:var(--sidebar-muted);
  text-align:left;
  font:inherit;
}
#modulo-classificador .class-v2-nav:hover{background:rgba(255,255,255,.065);color:#fff;}
#modulo-classificador .class-v2-nav.active{background:var(--sidebar-active);color:#fff;}
#modulo-classificador .class-v2-nav span{width:16px;text-align:center;font-size:16px;}
#modulo-classificador .class-v2-history-label{margin-top:18px;}
.class-v2-nav-empty{
  margin:0;
  padding:8px 10px;
  color:var(--sidebar-muted);
  font-size:11.5px;
  line-height:1.45;
}
.class-v2-history-item{
  display:block;
  width:100%;
  margin:0 0 5px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--sidebar-text);
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:background .16s ease,border-color .16s ease;
}
.class-v2-history-item:hover,
.class-v2-history-item.active{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.12);
}
.class-v2-history-item strong,
.class-v2-history-item span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.class-v2-history-item strong{font-size:11.7px;font-weight:700;}
.class-v2-history-item span{margin-top:3px;color:var(--sidebar-muted);font-size:9.8px;}
.class-v2-header,
.class-v2-section-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.class-v2-header{padding-right:132px;}
.class-v2-header h1,
.class-v2-section-heading h2{margin:0;}
.class-v2-section-heading h2{font-size:21px;}
.class-v2-section-heading p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:12.5px;
}
.class-v2-connection{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-muted);
  font-size:10.5px;
}
.class-v2-connection span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8b8b8b;
  box-shadow:0 0 0 3px color-mix(in srgb,#8b8b8b 15%,transparent);
}
.class-v2-connection[data-state="online"] span{background:#1b8f55;box-shadow:0 0 0 3px color-mix(in srgb,#1b8f55 17%,transparent);}
.class-v2-connection[data-state="offline"] span{background:#a36a00;box-shadow:0 0 0 3px color-mix(in srgb,#a36a00 17%,transparent);}
.class-v2-connection[data-state="loading"] span{animation:class-v2-pulse 1.2s ease-in-out infinite;}
@keyframes class-v2-pulse{50%{opacity:.35;transform:scale(.78);}}
.class-v2-toast{
  position:sticky;
  top:4px;
  z-index:20;
  margin:-4px 0 14px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  color:var(--text);
  font-size:12.5px;
}
.class-v2-toast[data-type="success"]{border-color:color-mix(in srgb,var(--class-ok) 35%,var(--border));background:color-mix(in srgb,var(--class-ok) 8%,var(--surface));}
.class-v2-toast[data-type="warning"]{border-color:color-mix(in srgb,var(--class-review) 38%,var(--border));background:color-mix(in srgb,var(--class-review) 8%,var(--surface));}
.class-v2-toast[data-type="error"]{border-color:color-mix(in srgb,var(--class-rejected) 38%,var(--border));background:color-mix(in srgb,var(--class-rejected) 8%,var(--surface));}
.class-v2-view[hidden],
.class-v2-db-form #class-v2-db-field-b[hidden]{display:none!important;}
.class-v2-toolbar-card,
.class-v2-input-card,
.class-v2-results,
.class-v2-consult-form,
.class-v2-consult-result,
.class-v2-db-form,
.class-v2-db-browser{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.class-v2-toolbar-card{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
  padding:12px 14px;
}
.class-v2-list-name{flex:1;max-width:520px;}
.class-v2-list-name label,
.class-v2-input-card>label,
.class-v2-db-form>label,
.class-v2-db-form>div>label{
  display:block;
  margin-bottom:6px;
  color:var(--text-muted);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.025em;
}
.class-v2-input-card>label{color:var(--text);font-size:12px;}
.class-v2-input-card>label span{margin-left:4px;color:var(--text-muted);font-size:10.5px;font-weight:500;}
.class-v2-list-name input,
.class-v2-consult-form input,
.class-v2-db-form input,
.class-v2-db-form select,
.class-v2-db-browser-head input,
.class-v2-filter select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:12.5px;
  outline:none;
}
.class-v2-list-name input,
.class-v2-consult-form input,
.class-v2-db-form input,
.class-v2-db-form select{height:38px;padding:0 11px;}
.class-v2-list-name input:focus,
.class-v2-consult-form input:focus,
.class-v2-db-form input:focus,
.class-v2-db-form select:focus,
.class-v2-db-browser-head input:focus,
.class-v2-filter select:focus,
#modulo-classificador .class-url-area:focus{
  border-color:var(--class-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--class-accent) 15%,transparent);
}
.class-v2-open-list{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:360px;
  padding-left:14px;
  border-left:1px solid var(--border);
}
.class-v2-open-list>div:first-child span,
.class-v2-open-list>div:first-child strong{display:block;}
.class-v2-open-list>div:first-child span{color:var(--text-muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;}
.class-v2-open-list>div:first-child strong{max-width:220px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.class-v2-open-list>div:last-child{display:flex;gap:5px;}
.class-v2-open-list button,
.class-v2-row-actions button,
.class-v2-db-row button{
  border:0;
  background:transparent;
  color:var(--class-accent);
  cursor:pointer;
  font-family:inherit;
  font-size:10.5px;
  font-weight:650;
}
.class-v2-open-list button:disabled{opacity:.4;cursor:not-allowed;}
.class-v2-input-card{padding:15px;}
#modulo-classificador .class-url-area{
  width:100%;
  min-height:148px;
  resize:vertical;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-alt,var(--surface));
  color:var(--text);
  padding:11px 12px;
  font-family:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  font-size:12px;
  line-height:1.55;
  outline:none;
}
.class-v2-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.class-v2-actions #class-status{margin-left:auto;color:var(--text-muted);font-size:11px;}
.class-v2-primary,
.class-v2-secondary{
  min-height:36px;
  border-radius:9px;
  padding:0 14px;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  font-weight:750;
}
.class-v2-primary{
  border:1px solid var(--class-accent);
  background:var(--class-accent);
  color:#fff;
}
.class-v2-primary:hover{background:var(--class-accent-strong);border-color:var(--class-accent-strong);}
.class-v2-secondary{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}
.class-v2-secondary:hover{background:var(--surface-hover,var(--surface));border-color:color-mix(in srgb,var(--text-muted) 45%,var(--border));}
.class-v2-primary:disabled,
.class-v2-secondary:disabled{opacity:.52;cursor:wait;}
.class-v2-save{margin-left:auto;}
.class-v2-results{margin-top:14px;overflow:hidden;}
.class-v2-empty{
  display:flex;
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:24px;
  color:var(--text-muted);
  text-align:center;
}
.class-v2-empty strong{color:var(--text);font-size:13px;}
.class-v2-empty span{max-width:480px;font-size:11.5px;line-height:1.5;}
.class-v2-empty-small{min-height:110px;}
.class-v2-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px 10px;
}
.class-v2-results-head h2{margin:0;font-size:15px;}
.class-v2-results-head>div>span{display:block;margin-top:2px;color:var(--text-muted);font-size:10.5px;}
.class-v2-filter{display:flex;align-items:center;gap:7px;}
.class-v2-filter label{color:var(--text-muted);font-size:10.5px;}
.class-v2-filter select{width:auto;min-width:120px;height:32px;padding:0 9px;}
.class-v2-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0 16px 14px;
}
.class-v2-stats button{
  display:grid;
  grid-template-columns:7px auto 1fr;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.class-v2-stats button>span{width:7px;height:28px;border-radius:99px;}
.class-v2-stats button>span.ok{background:var(--class-ok);}
.class-v2-stats button>span.rejected{background:var(--class-rejected);}
.class-v2-stats button>span.review{background:var(--class-review);}
.class-v2-stats strong{font-size:18px;}
.class-v2-stats small{color:var(--text-muted);font-size:10.5px;}
.class-v2-table-wrap{overflow:auto;border-top:1px solid var(--border);}
.class-v2-table{width:100%;min-width:1060px;border-collapse:collapse;}
.class-v2-table th,
.class-v2-table td{padding:10px 11px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left;}
.class-v2-table th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-alt,var(--surface));
  color:var(--text-muted);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.class-v2-table td{font-size:10.8px;line-height:1.45;}
.class-v2-table td:first-child{width:34px;color:var(--text-muted);}
.class-v2-table td:nth-child(2){width:132px;}
.class-v2-table td:nth-child(3){max-width:230px;}
.class-v2-table td:nth-child(4){max-width:210px;}
.class-v2-table td:nth-child(5){max-width:300px;color:var(--text-muted);}
.class-v2-table td:nth-child(6){width:166px;}
.class-v2-table td a{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--class-accent);font-weight:650;text-decoration:none;white-space:nowrap;}
.class-v2-table td small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:9.5px;white-space:nowrap;}
.class-v2-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:800;
  white-space:nowrap;
}
.class-v2-badge-ok{background:color-mix(in srgb,var(--class-ok) 13%,var(--surface));color:var(--class-ok);}
.class-v2-badge-rejected{background:color-mix(in srgb,var(--class-rejected) 12%,var(--surface));color:var(--class-rejected);}
.class-v2-badge-review{background:color-mix(in srgb,var(--class-review) 13%,var(--surface));color:var(--class-review);}
.class-v2-badge-bet{background:color-mix(in srgb,#7d245f 13%,var(--surface));color:#9a2c76;}
.class-v2-badge-manual{background:color-mix(in srgb,#5c4e9b 13%,var(--surface));color:#6555a9;}
.class-v2-row-actions{display:flex;flex-wrap:wrap;gap:3px 7px;}
.class-v2-row-actions button{padding:1px 0;}
.class-v2-row-actions button:last-child{color:var(--text-muted);}
.class-v2-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:11px;
  border-top:1px solid var(--border);
}
.class-v2-pagination button{
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--text);
  padding:5px 10px;
  cursor:pointer;
  font-family:inherit;
  font-size:10.5px;
}
.class-v2-pagination button:disabled{opacity:.4;cursor:not-allowed;}
.class-v2-pagination span{color:var(--text-muted);font-size:10.5px;}
.class-v2-consult-form{
  display:flex;
  gap:8px;
  max-width:820px;
  padding:14px;
}
.class-v2-consult-form input{flex:1;}
.class-v2-consult-result{max-width:820px;margin-top:12px;}
.class-v2-consult-card{padding:18px;}
.class-v2-consult-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.class-v2-consult-top a{color:var(--class-accent);font-size:15px;font-weight:750;text-decoration:none;}
.class-v2-consult-card dl{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(260px,1.5fr);gap:14px;margin:14px 0;}
.class-v2-consult-card dl div{padding:11px;border:1px solid var(--border);border-radius:10px;}
.class-v2-consult-card dt{color:var(--text-muted);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.class-v2-consult-card dd{margin:5px 0 0;font-size:12px;line-height:1.5;}
.class-v2-consult-actions{display:flex;gap:8px;}
.class-v2-counts{
  display:grid;
  grid-template-columns:repeat(8,minmax(92px,1fr));
  gap:8px;
  margin-bottom:12px;
}
.class-v2-counts div{
  min-width:0;
  padding:11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
}
.class-v2-counts strong,
.class-v2-counts span{display:block;}
.class-v2-counts strong{font-size:17px;}
.class-v2-counts span{margin-top:2px;overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:9.5px;white-space:nowrap;}
.class-v2-database-grid{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:12px;align-items:start;}
.class-v2-db-form{padding:15px;}
.class-v2-db-form h3,
.class-v2-db-browser h3{margin:0;font-size:14px;}
.class-v2-db-form>label,
.class-v2-db-form>div>label{margin-top:12px;}
.class-v2-db-form .class-v2-primary{width:100%;margin-top:14px;}
.class-v2-db-form>p{margin:11px 0 0;color:var(--text-muted);font-size:9.8px;line-height:1.45;}
.class-v2-db-browser{overflow:hidden;}
.class-v2-db-browser-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--border);
}
.class-v2-db-browser-head>div>span{display:block;margin-top:2px;color:var(--text-muted);font-size:10px;}
.class-v2-db-browser-head input{width:230px;height:34px;padding:0 10px;}
.class-v2-db-rows{max-height:560px;overflow:auto;}
.class-v2-db-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:7px 13px;
  border-bottom:1px solid var(--border);
}
.class-v2-db-row:last-child{border-bottom:0;}
.class-v2-db-row>div{min-width:0;}
.class-v2-db-row strong,
.class-v2-db-row span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.class-v2-db-row strong{font-size:11px;}
.class-v2-db-row span{margin-top:2px;color:var(--text-muted);font-size:9.8px;}
.class-v2-db-row button{flex:0 0 auto;color:var(--class-rejected);}
@media(max-width:1180px){
  .class-v2-counts{grid-template-columns:repeat(4,minmax(100px,1fr));}
  .class-v2-open-list{min-width:0;}
}
@media(max-width:900px){
  .class-v2-toolbar-card{align-items:stretch;flex-direction:column;}
  .class-v2-list-name{max-width:none;}
  .class-v2-open-list{padding:10px 0 0;border-top:1px solid var(--border);border-left:0;}
  .class-v2-database-grid{grid-template-columns:1fr;}
  .class-v2-db-rows{max-height:440px;}
}
@media(max-width:700px){
  .class-v2-header,.class-v2-section-heading{align-items:stretch;flex-direction:column;}
  .class-v2-header{padding-right:0;}
  .class-v2-connection{align-self:flex-start;}
  .class-v2-actions #class-status{width:100%;margin-left:0;}
  .class-v2-save{margin-left:0;}
  .class-v2-stats{grid-template-columns:1fr;}
  .class-v2-counts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .class-v2-consult-form{flex-direction:column;}
  .class-v2-consult-card dl{grid-template-columns:1fr;}
  .class-v2-consult-actions{flex-direction:column;}
  .class-v2-db-browser-head{align-items:stretch;flex-direction:column;}
  .class-v2-db-browser-head input{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .class-v2-connection[data-state="loading"] span{animation:none;}
}
#sidebar-overlay.aberto{ display:block; }

/* ── Botão de menu hambúrguer (visível só mobile) ── */
#btn-menu-mobile{
  display:none; position:fixed; top:10px; left:10px; z-index:60;
  background:var(--sidebar); color:#fff; border:none; border-radius:8px;
  width:38px; height:38px; font-size:18px; cursor:pointer;
  align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* ── TABLET / NOTEBOOK PEQUENO (769–1100px) ──────────────────────────
   Faixa em que a sidebar ainda cabe, mas blocos de largura fixa e
   cabeçalhos com muitos itens começam a estourar. ──────────────── */
@media (min-width: 769px) and (max-width: 1100px){
  /* Blocos de duas colunas passam a uma só */
  .below{ grid-template-columns:1fr !important; gap:16px !important; }
  .legend-card, .roadmap{ min-width:0 !important; }

  /* Selo de escopo pode quebrar em vez de empurrar o cabeçalho */
  .scope-pill{ white-space:normal !important; font-size:10.5px !important; }
  .top-row{ gap:12px !important; align-items:flex-start !important; }

  /* Barra superior do quadro Kanban comporta os itens sem estourar */
  .cards-topbar{ flex-wrap:wrap !important; gap:8px !important; }
  #cards-topbar-members{ display:none !important; }

  /* Dashboards com cartões mais estreitos */
  .summary-grid{ gap:12px !important; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

@media (max-width: 768px){

  /* ─── Rail de navegação: ocultar em mobile ─── */
  #nav-rail{ display:none !important; }
  body.com-rail #tela-inicial,
  body.com-rail #tela-gestores,
  body.com-rail .app{ margin-left:0 !important; }

  /* ─── Hambúrguer ─── */
  #btn-menu-mobile{ display:flex; }

  /* ─── .app: de grid 2 colunas para coluna única ───
     :not(.oculto) evita reativar módulos que devem permanecer ocultos */
  .app:not(.oculto){
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:unset !important;
    min-height:100vh;
  }

  /* ─── Sidebar: drawer deslizante ─── */
  .sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:272px !important;
    z-index:56;
    transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
  }
  .sidebar.aberta{
    transform:translateX(0) !important;
  }

  /* ─── Main: ocupa 100% ─── */
  main{
    padding:16px 14px 60px !important;
    min-height:100vh;
  }

  /* ─── Tela inicial ─── */
  #tela-inicial{ padding-top:54px; }
  #tela-gestores{ padding-top:54px; }
  .modulos-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap:10px !important;
  }

  /* ─── Top-row ─── */
  .top-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin-top:48px !important;
  }

  /* ─── Toolbar ─── */
  .toolbar{
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:10px !important;
  }
  .toolbar input[type=text],
  .toolbar input[type=search],
  .toolbar select{
    width:100% !important;
    box-sizing:border-box !important;
  }
  .toolbar .btn-primary,
  .toolbar button{
    flex:1 1 auto;
  }

  /* ─── Tabelas: scroll horizontal obrigatório ─── */
  .table-card{ overflow-x:scroll !important; }
  .table-scroll{
    overflow-x:scroll !important;
    overflow-y:auto !important;
  }
  .data-table{ min-width:640px; }

  /* ─── Lote toolbar ─── */
  .lote-toolbar{
    left:8px !important;
    right:8px !important;
    transform:none !important;
    min-width:unset !important;
    flex-wrap:wrap !important;
    bottom:14px !important;
    gap:8px !important;
  }
  .lote-toolbar select{ min-width:unset !important; flex:1; }

  /* ─── Modais ─── */
  .modal-backdrop{ align-items:flex-end !important; padding:0 !important; }
  .modal-card{
    width:100% !important;
    max-width:100% !important;
    border-radius:16px 16px 0 0 !important;
    max-height:90vh !important;
    overflow-y:auto;
    margin:0 !important;
  }

  /* ─── Card modal (Trello) ─── */
  .card-modal{
    flex-direction:column !important;
    width:100% !important;
    border-radius:16px 16px 0 0 !important;
  }
  .card-modal-sidebar{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .card-modal-sidebar-btn{ flex:1 1 140px; }

  /* ─── Login ─── */
  #perfil-btns{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .login-card{ padding:24px 16px !important; }

  /* ─── Dashboards / KPI grids ─── */
  .kpi-grid,
  .pv-dash-cards{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }

  /* ─── Corretor: de duas colunas para uma ─── */
  .corretor-layout{
    grid-template-columns:1fr !important;
    grid-template-rows:1fr 1fr;
    height:auto !important;
  }
  .corretor-painel:first-child{ border-right:none !important; border-bottom:1px solid var(--border); }
  .corretor-topbar{ flex-wrap:wrap !important; }
  #dic-painel{
    position:fixed !important;
    top:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important;
    z-index:70 !important;
  }

  /* ─── Cards (Trello): listas empilhadas ─── */
  .cards-scroll{
    flex-direction:column !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding:8px !important;
  }
  .trello-lista{ width:100% !important; max-height:none !important; }

  /* ─── Chat: janelas empilhadas ─── */
  #chat-janelas-container{
    right:0 !important;
    left:0 !important;
    flex-direction:column !important;
    max-width:100% !important;
  }
  .chat-janela{ width:100% !important; border-radius:12px 12px 0 0 !important; }

  /* ─── Pós-Vendas ─── */
  #pv-view-tabela .table-card{ overflow-x:scroll !important; }
  #pv-dash-content .pv-dash-cards{
    grid-template-columns:repeat(2,1fr) !important;
  }
  #pv-dash-content > div:last-child{
    grid-template-columns:1fr !important;
  }

  /* ─── Atribuição / modal equilibrada ─── */
  .atrib-criterios{ grid-template-columns:1fr !important; }
  .atrib-modal{ width:100% !important; }

  /* ─── Gestores ─── */
  .g-layout{
    grid-template-columns:1fr !important;
  }
  .g-nav{ border-right:none !important; border-bottom:1px solid var(--border); }
  .g-table{ font-size:11.5px !important; }
  .g-section h2{ font-size:13px !important; }

  /* ─── Notif push: full-width no topo ─── */
  #notif-push-container{
    left:8px !important; right:8px !important; top:8px !important;
  }
  .notif-push{ width:100% !important; box-sizing:border-box; }

  /* ─── Dropdown de notificações: quase full width ─── */
  #notif-dropdown{
    left:8px !important;
    right:8px !important;
    bottom:80px !important;
    width:auto !important;
  }

  /* ─── Primeiro Cadastro ─── */
  #modulo-cadastro main{ padding:16px 12px 60px !important; }

  /* ─── Compensações/Pauta/Cadastro: reverte o layout flex fixo do
       desktop para o fluxo normal de página, mais previsível no toque ─── */
  #modulo-compensacoes main,
  #modulo-pauta main,
  #modulo-cadastro main{
    height:auto !important;
    overflow:visible !important;
  }
  #view-compensacoes, #view-cnpj, #view-dashboards,
  #pauta-view-tabela, #pauta-view-dashboards,
  #cad-view-tabela, #cad-view-dashboards{
    flex:none !important;
    min-height:auto !important;
  }
  #modulo-compensacoes .table-card,
  #modulo-pauta .table-card,
  #modulo-cadastro .table-card{
    flex:none !important;
    max-height:60vh !important;
    min-height:unset !important;
  }

  /* ─── Blocos de duas colunas viram coluna única ─── */
  .below{ grid-template-columns:1fr !important; gap:14px !important; }
  .legend-card, .roadmap{ min-width:0 !important; }

  /* ─── Dashboards: cartões de resumo em coluna única ─── */
  .summary-grid{ grid-template-columns:1fr !important; }
  .summary-card{ padding:14px 16px !important; min-width:0; }
  .summary-card h3{ font-size:12px !important; }
  .summary-card table{ min-width:0 !important; font-size:11px !important; }

  /* ─── Selo de escopo: pode quebrar linha em vez de estourar ─── */
  .scope-pill{
    white-space:normal !important;
    font-size:10px !important;
    padding:4px 9px !important;
    align-self:flex-start;
  }

  /* ─── Barra superior do quadro Kanban: quebra em telas estreitas ─── */
  .cards-topbar{ flex-wrap:wrap !important; gap:8px !important; padding:10px 12px !important; }
  .cards-topbar h1{ flex:1 1 100% !important; font-size:14px !important; }
  #cards-topbar-members{ display:none !important; }

  /* ─── Alvos de toque: mínimo confortável para o dedo ─── */
  .nav-item, .rail-item, .g-nav-item{ min-height:40px; }
  .toolbar button, .btn-primary, .g-btn-acao{ min-height:38px; }

  /* ─── Painel de gestores: botões e conteúdo sem estourar ─── */
  #tela-gestores button{ max-width:100%; white-space:normal; }
  .g-add-row{ flex-wrap:wrap !important; }
  .g-add-row input{ min-width:0 !important; }

  /* ─── Gestores ─── */
  .gestores-layout{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .gestores-sidebar{ 
    border-right:none !important; 
    border-bottom:1px solid var(--border); 
    padding-bottom:8px !important;
  }

  /* ─── Chat popover ─── */
  #chat-lista-popover{
    left:8px !important;
    right:8px !important;
    bottom:70px !important;
    width:auto !important;
    max-width:calc(100vw - 16px) !important;
  }

  /* ─── Notificações dropdown ─── */
  #notif-dropdown{
    left:8px !important;
    right:8px !important;
    bottom:80px !important;
    width:auto !important;
  }

}

/* ── PHONE (<480px): ajustes adicionais ── */
@media (max-width: 480px){

  .modulos-grid{ grid-template-columns:1fr 1fr !important; }
  .modulo-card{ padding:12px 8px !important; }
  .modulo-card h3{ font-size:12px !important; }
  .modulo-icon{ width:38px !important; height:38px !important; }

  /* Tabela: fonte menor */
  .data-table td, .data-table th{ font-size:11px !important; padding:7px 8px !important; }

  /* Kpis: só 1 coluna */
  .kpi-grid{ grid-template-columns:1fr !important; }
  .pv-dash-cards{ grid-template-columns:1fr 1fr !important; }

  /* Modal full screen */
  .modal-card{ max-height:95vh !important; }

  /* Lote toolbar compacto */
  .lote-toolbar{ font-size:11px !important; padding:8px 10px !important; }

  /* Corretor: textarea menor */
  .corretor-textarea{ font-size:12.5px !important; padding:12px !important; }

  /* Trello cards: badge menor */
  .trello-card{ padding:8px 10px !important; }
  .trello-label{ min-width:28px !important; }

  /* Botões de ação menores */
  .btn-primary{ padding:8px 12px !important; font-size:12px !important; }
  .g-btn-acao{ padding:4px 8px !important; font-size:11px !important; }

  /* Headers menores */
  h1{ font-size:17px !important; }
  .brand-name{ font-size:13px !important; }
}