/* ── Marca Manusis4 — o mesmo molde dos apps de tarefas e fluxo ─────────────
   Tokens, menu lateral, barra superior, cartões, KPIs, tabelas, abas, janelas e
   avisos copiados de app-gestao-tarefas/public/index.html (30/09/2026).
   Laranja = ação e destaque. Azul = estrutura. Canaro nos títulos, Montserrat no
   resto. Fontes e ícones servidos daqui mesmo (a CSP fecha font-src em 'self'). */
@font-face{font-family:"Canaro";src:url("brand/fonts/Canaro-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Canaro";src:url("brand/fonts/Canaro-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Montserrat";src:url("brand/fonts/Montserrat-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("brand/fonts/Montserrat-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url("brand/fonts/Montserrat-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("brand/fonts/Montserrat-Bold.woff2") format("woff2");font-weight:700 900;font-display:swap}
.fa { font-family: "Font Awesome 6 Free"; font-weight: 900; }

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand-green:#8DC63F;--brand-yellow:#FFCB05;--brand-orange:#F58220;
  --brand-red:#CE181E;--brand-magenta:#A50575;--brand-blue:#009BDF;
  --hive-green:#00A651;--hive-amber:#FCAF17;--hive-orange:#E45620;
  --hive-pink:#EE2D67;--hive-purple:#564894;--hive-blue:#006CB7;
  --primary:#F58220;--primary-dark:#D96D12;--primary-light:#FDEBD9;
  --accent:#00873F;--accent-bright:#00A651;--accent-dark:#006B32;--accent-soft:#E3F4E8;
  --bg:#F1F4F6;--surface:#FFFFFF;--surface-2:#F8FAFB;
  --text:#1F2227;--text-muted:#6B7178;--text-light:#ADB3B9;
  --border:#E4E8EB;--border-light:#F1F4F6;
  --success:#00A651;--warning:#FCAF17;--error:#CE181E;--info:#00873F;
  --sidebar-bg:#1F2227;--sidebar-bg-2:#26292F;
  --sidebar-w:240px;--sidebar-w-collapsed:64px;
  --radius:8px;--radius-sm:6px;
  --shadow:0 1px 2px rgba(31,34,39,.06);
  --shadow-md:0 4px 12px rgba(31,34,39,.08);
  --shadow-lg:0 16px 40px rgba(31,34,39,.16);
  --focus:0 0 0 3px rgba(0,155,223,.22);
  --font-titulo:"Canaro","Montserrat",sans-serif;
  --font-texto:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
  --hexagono:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
}
body{font-family:var(--font-texto);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:inherit;font-size:14px}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Layout: menu lateral + barra superior + conteúdo ─────────────────────── */
#app{display:flex;width:100%;height:100vh;overflow:hidden;position:fixed;inset:0}
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);display:flex;flex-direction:column;transition:width .2s,min-width .2s;overflow:hidden;z-index:100}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);min-width:var(--sidebar-w-collapsed)}
.sidebar-logo{padding:20px 18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sidebar-logo .logo-completo{height:30px;width:auto;display:block}
.sidebar-logo .logo-cubo{height:32px;width:auto;display:none}
.sidebar.collapsed .sidebar-logo{align-items:center;padding:18px 0 14px}
.sidebar.collapsed .logo-completo,.sidebar.collapsed .sidebar-logo-sub{display:none}
.sidebar.collapsed .logo-cubo{display:block}
.sidebar-logo-sub{color:var(--primary);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto;overflow-x:hidden}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:rgba(255,255,255,.72);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;border:none;background:none;width:100%;text-align:left;font-size:13px;font-weight:500;margin-bottom:2px;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(245,130,32,.14);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--primary)}
.nav-item.active i{color:var(--primary)}
.nav-item i{width:20px;text-align:center;font-size:15px;flex-shrink:0}
.nav-label{white-space:nowrap;overflow:hidden}
.nav-badge{margin-left:auto;background:var(--primary);color:#fff;border-radius:20px;font-size:10px;font-weight:700;padding:1px 7px}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-badge{display:none}
.sidebar-footer{padding:12px 8px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:inset 0 3px 0 var(--accent);gap:12px}
.topbar-left{display:flex;align-items:center;gap:16px;min-width:0}
.topbar-title{font-family:var(--font-titulo);font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-right input{width:220px;padding:6px 10px}
.tela{flex:1;overflow-y:auto;padding:24px;min-width:0;overflow-x:hidden}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;cursor:pointer}
.avatar{width:32px;height:35px;clip-path:var(--hexagono);background:var(--primary-light);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.carregando{color:var(--text-muted);padding:40px 0;text-align:center}

/* ── Botões ───────────────────────────────────────────────────────────────── */
.botao{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:13px;transition:background .15s,border-color .15s,color .15s;cursor:pointer;background:var(--primary);color:#fff;text-decoration:none;white-space:nowrap}
.botao:hover{background:var(--primary-dark);text-decoration:none}
.botao:active{transform:translateY(1px)}
.botao:focus-visible,.btn-icon:focus-visible,.nav-item:focus-visible{outline:none;box-shadow:var(--focus)}
.botao.secundario{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.botao.secundario:hover{background:var(--border-light)}
.botao.perigo{background:#FBE0E1;color:var(--error);border:1px solid #F4B8BA}
.botao.sucesso{background:#EAF6DC;color:#00873F;border:1px solid #BFE39A}
.botao.pequeno{padding:5px 10px;font-size:12px}
.botao:disabled{opacity:.55;cursor:not-allowed}
.btn-icon{padding:7px 9px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);position:relative}
.btn-icon:hover{background:var(--border);color:var(--text)}
.btn-icon .ponto{position:absolute;top:-5px;right:-5px;background:var(--error);color:#fff;border-radius:50%;min-width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0 3px}
.botao-link{background:none;border:0;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px}
.botao-link:hover{text-decoration:underline}
.remover{background:none;border:0;color:var(--text-muted);font-size:17px;cursor:pointer;padding:4px 6px;line-height:1}
.remover:hover{color:var(--error)}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Cartões, cabeçalho de página, textos ─────────────────────────────────── */
.cartao{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:20px}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-20px -20px 16px}
.card-title{font-family:var(--font-titulo);font-size:15px;min-width:0;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.card-title i{color:var(--primary)}
.cartao + .cartao,.cartao + h2,.kpis + .cartao,.cartao + table,.linha-graficos + .cartao,.cartao + .leitura{margin-top:16px}
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sobrancelha{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--primary)}
.sobrancelha a{color:var(--primary)}
h1,h2,h3,.titulo-acesso{font-family:var(--font-titulo);color:var(--text)}
h1{font-size:22px;font-weight:700;margin:2px 0 4px;letter-spacing:-.01em}
h2{font-size:16px;font-weight:700;margin:24px 0 10px}
h3{font-size:14px}
.sub{color:var(--text-muted);font-size:13px}
.dica{color:var(--text-muted);font-size:12px;margin-top:3px}
.vazio,.empty-state{text-align:center;padding:40px 24px;color:var(--text-muted)}
.empty-state i{font-size:36px;margin-bottom:10px;display:block;color:var(--border)}
.empty-state p{font-size:14px;font-weight:600;color:var(--text)}
.texto-vermelho{color:var(--error);font-weight:700}
.texto-laranja{color:#C4620F;font-weight:700}
.rolagem{overflow-x:auto}
pre{white-space:pre-wrap;font-size:12px;background:var(--surface-2);padding:8px;border-radius:6px}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.chip.ok{background:#EAF6DC;color:#00873F}
.chip.rascunho{background:#FBE0E1;color:#B0141A}
.chip.alerta{background:#FFF4D6;color:#9A6A00}
.chip.cinza{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}

/* ── Formulários ──────────────────────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
label small{font-weight:400;color:var(--text-muted)}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);outline:none;transition:border .15s}
input[type=checkbox],input[type=radio]{width:auto}
input:focus,select:focus,textarea:focus{border-color:var(--accent-bright);box-shadow:var(--focus)}
textarea{resize:vertical;min-height:64px}
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.grade .inteiro{grid-column:1/-1}
.invalido{border-color:var(--error)!important;background:#FBE0E1}
.erro-campo{color:var(--error);font-size:12px;margin-top:3px}
.caixa{display:inline-flex;gap:6px;align-items:center;font-weight:500;font-size:13px;margin:0 14px 6px 0;cursor:pointer}
.caixas{display:flex;flex-wrap:wrap;margin-top:6px}
.caixas.colunas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 12px}
.codigo-previsto{margin-top:14px;padding:10px 12px;background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:6px;font-weight:600;color:var(--accent-dark);font-size:13px}

/* ── Mensagens e avisos flutuantes ────────────────────────────────────────── */
.mensagem{padding:10px 14px;border-radius:var(--radius-sm);margin:0 0 14px;font-size:13px}
.mensagem.erro{background:#FBE0E1;color:#B0141A;border:1px solid #F4B8BA}
.mensagem.ok{background:#EAF6DC;color:#00873F;border:1px solid #BFE39A}
.mensagem.alerta{background:#FFF6EF;color:#B4530F;border:1px solid #F9C99B}
.mensagem ul{margin:6px 0 0 18px}
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:var(--radius);background:var(--sidebar-bg);color:#F1F4F6;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;min-width:260px;max-width:420px;animation:slideIn .2s ease;border-left:4px solid var(--accent-bright)}
.toast.success{border-left-color:var(--hive-green)}.toast.error{border-left-color:var(--brand-red)}.toast.warning{border-left-color:var(--hive-amber)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
table.lista{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.lista th{text-align:left;padding:10px 14px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;background:var(--surface-2);border-bottom:1px solid var(--border)}
.lista td{padding:12px 14px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.lista tr:last-child td{border-bottom:none}
.lista tr:hover td{background:var(--surface-2)}
.lista tr.clicavel{cursor:pointer}
.numero{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}

/* ── Abas (pílula, como nos outros apps) ──────────────────────────────────── */
.abas{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:var(--radius);border:1px solid var(--border);margin:0 0 20px;overflow-x:auto}
.abas button{padding:7px 16px;border-radius:var(--radius-sm);border:none;background:none;font-weight:600;font-size:13px;color:var(--text-muted);cursor:pointer;white-space:nowrap}
.abas button[aria-selected="true"]{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}

/* ── Filtros ──────────────────────────────────────────────────────────────── */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filtros select,.filtros input{width:auto;padding:7px 12px;font-size:13px}
.busca{position:relative}
.busca i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:13px}
.filtros .busca input{padding-left:32px;width:260px}

/* ── KPIs (como no app de tarefas: barra à esquerda e ícone) ──────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}
.kpi-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:150px;min-width:0}
.kpi-card .barra{position:absolute;left:0;top:0;bottom:0;width:4px}
.kpi-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
.kpi-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.kpi-icone{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.kpi-value{font-family:var(--font-titulo);font-size:30px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.5px}
.kpi-sub{font-size:11px;color:var(--text-muted);margin-top:4px}
.tag-periodo{align-self:flex-start;white-space:nowrap;font-size:10px;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);border-radius:20px;padding:2px 8px;margin-top:8px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);min-width:0}
.kpi-rotulo{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.kpi-valor{font-family:var(--font-titulo);font-size:24px;font-weight:700;overflow-wrap:anywhere}

/* ── Gráficos do painel ───────────────────────────────────────────────────── */
.linha-graficos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.linha-2{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
svg text{font-family:var(--font-texto)}

/* ── Filas de pendência ───────────────────────────────────────────────────── */
.fila{border-left:4px solid var(--primary)}
.alertas{border-left-color:var(--error)}
.item-fila{display:grid;grid-template-columns:170px 1fr;gap:2px 14px;padding:10px 4px;border-top:1px solid var(--border-light);color:var(--text);text-decoration:none}
.item-fila:hover{background:var(--surface-2);text-decoration:none}

/* ── Janela modal (como no app de tarefas: faixa laranja em cima) ─────────── */
.modal-fundo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.modal{background:var(--surface);border-radius:var(--radius);width:100%;max-width:560px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.modal.modal-largo{max-width:1000px}
.modal-cabeca{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 3px 0 var(--primary);border-radius:var(--radius) var(--radius) 0 0}
.modal-cabeca h2{margin:0;font-size:18px}
.modal-corpo{padding:20px 24px;overflow-y:auto}
.modal-rodape{padding:14px 24px;border-top:1px solid var(--border);justify-content:flex-end}
.previa{width:100%;height:75vh;border:1px solid var(--border);border-radius:var(--radius);background:#fff}

/* ── Trilha ───────────────────────────────────────────────────────────────── */
.trilha{list-style:none;padding:0;margin:0;border-left:2px solid var(--border)}
.trilha li{padding:0 0 16px 16px;position:relative}
.trilha li::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
.trilha .quando{font-size:12px;color:var(--text-muted)}
dl.dados{display:grid;grid-template-columns:200px 1fr;gap:8px 16px}
dl.dados dt{font-weight:600}

/* ── Documento: etapas, leitura, comentários ──────────────────────────────── */
.painel-acoes{margin:0 0 16px;border-left:4px solid var(--accent)}
.etapas{margin-bottom:16px}
.lista-etapas{list-style:none;padding:0;margin:6px 0 0}
.lista-etapas li{padding:6px 0;border-top:1px solid var(--border-light)}
.leitura{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 24px 24px;box-shadow:var(--shadow)}
.leitura p,.leitura li{margin:4px 0}
.leitura ul,.leitura ol{padding-left:20px}
.titulo-secao{color:var(--accent);border-bottom:2px solid var(--primary);padding-bottom:4px;margin-top:26px}
.subtitulo{color:var(--primary);text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin:16px 0 6px;font-family:var(--font-texto);font-weight:700}
.tabela-doc{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}
.tabela-doc th{background:var(--accent);color:#fff;text-align:left;padding:6px 8px;font-size:12px}
.tabela-doc td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.tabela-doc tr:nth-child(even) td{background:#F4F6F9}
.comentarios{margin:8px 0 4px}
.comentario{background:#FFF8E6;border-left:3px solid var(--brand-yellow);padding:8px 10px;border-radius:4px;margin-bottom:6px;font-size:13px}
.mermaid-alvo{background:#fff;border:1px dashed var(--border);border-radius:8px;padding:10px;overflow-x:auto}
.mermaid-alvo svg{max-width:100%;height:auto}
.apontamentos li{margin:6px 0}

/* ── Editor ───────────────────────────────────────────────────────────────── */
.barra-editor{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--sidebar-bg);color:#fff;padding:10px 14px;border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow-md)}
.barra-editor .botao.secundario{background:transparent;color:#fff;border-color:#4A4F57}
.barra-editor .botao-link{color:#C8CCD4}
.status-salvo{font-size:12px;color:#9FE0B8;margin-right:auto}
.status-salvo.pendente{color:var(--brand-yellow)}
.status-salvo.erro{color:#FF9C9C}
.editor{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.lateral{position:sticky;top:48px;display:flex;flex-direction:column;gap:12px}
.checagem{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--text-muted);border-radius:var(--radius);padding:12px;font-size:12.5px}
.checagem.ok{border-left-color:var(--success)}
.checagem.bloqueada{border-left-color:var(--error)}
.checagem ul{padding-left:16px;margin:6px 0}
.lista-bloqueios a{color:var(--error);font-weight:700}
.lista-avisos a{color:#C4620F;font-weight:700}
.indice-secoes{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px}
.indice-secoes a{color:var(--text);font-size:12.5px;padding:4px 6px;border-radius:4px}
.indice-secoes a:hover{background:var(--surface-2);text-decoration:none}
.secao-edicao{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin:10px 0;transition:box-shadow .3s;scroll-margin-top:70px}
.secao-edicao.destaque{box-shadow:0 0 0 3px var(--primary)}
.secao-topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.secao-topo .subtitulo{margin-top:0}
.obrigatoria{color:var(--error)}
.linha-lista{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.linha-lista textarea{flex:1}
.num-lista{font-weight:700;color:var(--primary);min-width:44px;padding-top:8px;font-size:12px}
.tabela-edicao{width:100%;border-collapse:collapse;margin-bottom:8px}
.tabela-edicao th{text-align:left;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:4px;white-space:nowrap}
.tabela-edicao td{padding:3px;vertical-align:top}
.tabela-edicao textarea{min-height:38px}
.tabela-edicao.raci select{min-width:64px}
.tabela-edicao .linha-alerta td{background:#FBE0E1}
.acoes-linha{white-space:nowrap;width:1%}
textarea.codigo{font-family:Consolas,monospace;font-size:12px}
.mermaid-previa{min-height:80px}
.sugestao{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin:10px 0}
.sugestao-corpo{margin-top:6px;font-size:13px}

/* ── Modelos (templates) ──────────────────────────────────────────────────── */
.icone-arquivo{width:34px;height:38px;clip-path:var(--hexagono);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.arquivo-linha{display:flex;align-items:center;gap:10px}
.soltar{border:2px dashed var(--border);border-radius:var(--radius);padding:22px;text-align:center;color:var(--text-muted);cursor:pointer;background:var(--surface-2);display:block}
.soltar.sobre{border-color:var(--primary);background:var(--primary-light)}
.soltar i{font-size:26px;color:var(--primary);display:block;margin-bottom:6px}
.soltar input{display:none}

/* ── Tela de entrada: capa dos decks, igual aos apps de tarefas e fluxo ──── */
body.modo-acesso #sidebar,body.modo-acesso .topbar{display:none}
body.modo-acesso .tela{padding:0}
.capa-acesso{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg,#2B303B 0%,#1C1F28 100%)}
.capa-acesso .malha{position:absolute;left:0;right:0;bottom:0;width:100%;min-width:1100px;opacity:.07;pointer-events:none;user-select:none}
.capa-acesso .faixa-capa{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8DC63F,#FFCB05,#F58220,#CE181E,#A50575,#564894)}
.hexagono-capa{position:absolute;aspect-ratio:1/1.16;pointer-events:none;display:block}
.cartao-acesso{position:relative;background:#fff;border-radius:8px;padding:40px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:4px solid var(--primary)}
.logo-acesso{height:38px;display:block}
.titulo-acesso{font-size:24px;line-height:1.2;margin:0}
.cartao-acesso input{padding:12px 14px;margin-bottom:10px}
.cartao-acesso label{color:#33373D}
input.codigo-acesso{font-size:22px;letter-spacing:8px;text-align:center;font-family:monospace}
.botao-acesso{width:100%;justify-content:center;padding:13px;font-size:15px;margin-top:8px}
.link-acesso{text-align:center;margin:14px 0 0}
.link-acesso a{color:var(--accent);font-weight:600;font-size:13px}
.rodape-acesso{text-align:center;color:var(--text-light);font-size:11px;margin:20px 0 0}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Responsivo (mesmos pontos de quebra do app de tarefas) ───────────────── */
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1024px){.linha-graficos{grid-template-columns:1fr 1fr}.linha-2{grid-template-columns:1fr}}
@media(max-width:900px){.editor{grid-template-columns:1fr}.lateral{position:static}.indice-secoes{display:none}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){
  .sidebar{position:fixed;height:100vh;z-index:200;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar.collapsed{width:var(--sidebar-w);min-width:var(--sidebar-w)}
  .sidebar.collapsed .nav-label{display:inline}
  .mobile-overlay.visible{display:block}
  .tela{padding:12px}
  .topbar{padding:0 12px}
  .topbar-title{font-size:15px}
  .topbar-right input{width:130px}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi-card{padding:12px;min-height:130px}
  .kpi-value{font-size:22px}
  .linha-graficos{grid-template-columns:1fr}
  .grade{grid-template-columns:1fr}
  dl.dados{grid-template-columns:1fr}
  .filtros .busca{flex:1 1 100%}
  .filtros .busca input{width:100%}
  table.lista thead{display:none}
  table.lista tr{display:block;border-top:1px solid var(--border);padding:8px 0}
  table.lista td{display:block;border:0;padding:3px 12px}
  .item-fila{grid-template-columns:1fr}
  .leitura{padding:4px 12px 16px}
  .tabela-edicao thead{display:none}
  .tabela-edicao tr{display:block;border-top:1px solid var(--border);padding:6px 0}
  .tabela-edicao td{display:block}
  .hexagono-capa{display:none}
  .cartao-acesso{padding:28px 22px}

}

/* ── App de Diagnóstico ────────────────────────────────────────────────────── */
.chip.azul{background:var(--accent-soft);color:var(--accent-dark)}
.chip.vermelho{background:#FBE0E1;color:#B0141A}
.chip.faixa{border:0}
.mensagem.info{background:var(--accent-soft);color:var(--accent-dark);border:1px solid #B5DDF4}
.texto-verde{color:var(--success)}
.faixa-azul{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,#006B32 0%,#00873F 55%,#00A651 100%);color:#fff;border-radius:var(--radius);
  padding:20px 24px;margin:0 0 16px;box-shadow:var(--shadow-md)}
.faixa-azul h1{margin:0;font-family:var(--font-titulo);font-size:22px;color:#fff}
.faixa-azul p{margin:6px 0 0;color:rgba(255,255,255,.85);font-size:13px;max-width:680px}
.progresso{position:relative;display:flex;align-items:center;gap:8px;min-width:110px}
.progresso::before{content:"";position:absolute;left:0;right:38px;height:8px;border-radius:4px;background:var(--border)}
.progresso-barra{position:relative;height:8px;border-radius:4px;background:var(--primary);min-width:2px;max-width:calc(100% - 38px);transition:width .4s}
.progresso span{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted);min-width:30px;text-align:right}
.faixa-status{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* assistente do novo diagnóstico */
.passos{display:flex;gap:8px;list-style:none;margin:0 0 16px;padding:0;flex-wrap:wrap}
.passos li{display:flex;align-items:center;gap:8px;flex:1 1 160px;padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-size:13px;font-weight:600}
.passos li.atual{border-color:var(--primary);color:var(--text);box-shadow:0 0 0 2px var(--primary-light)}
.passos li.feito{color:var(--success)}
.passo-num{width:26px;height:28px;clip-path:var(--hexagono);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:800;flex-shrink:0}
.passos li.atual .passo-num{background:var(--primary);color:#fff}
.passos li.feito .passo-num{background:#EAF6DC;color:#00873F}
.opcoes-cartao{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.opcao-cartao{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;min-height:44px}
.opcao-cartao input{position:absolute;opacity:0;pointer-events:none}
.opcao-cartao.escolhida{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}
.opcao-cartao:focus-within{box-shadow:var(--focus)}
.pesos-previa{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* ficha de números */
.bloco-ficha{border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 0 8px;background:var(--surface)}
.bloco-ficha summary{cursor:pointer;padding:12px 14px;font-weight:700;min-height:44px;box-sizing:border-box}
.linhas-ficha{padding:0 14px 12px}
.linha-ficha{display:grid;grid-template-columns:minmax(200px,2fr) minmax(90px,1fr) minmax(140px,2fr) minmax(140px,1fr);gap:8px;
  align-items:center;padding:8px 0;border-top:1px solid var(--border-light)}
.rotulo-ficha{font-size:13px}
fieldset.conjunto{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin:0}
fieldset.conjunto legend{font-weight:700;font-size:13px;padding:0 6px}
.grupo-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tabela-pesos input.entrada-peso{width:64px;text-align:right}
.tabela-pesos input.entrada-curta{width:130px}
/* tema escuro */
:root[data-theme="dark"]{
  --bg:#15171A;--surface:#1F2227;--surface-2:#26292F;--text:#E8EAED;--text-muted:#A5ABB2;--text-light:#6B7178;
  --border:#33373D;--border-light:#2A2D33;--primary-light:#3A2A1A;--accent-soft:#12301E;--accent-dark:#7FD39A;--accent:#3FBF73;--accent-bright:#5ED08B;
  --shadow:0 1px 2px rgba(0,0,0,.4);--shadow-md:0 4px 12px rgba(0,0,0,.4)}
:root[data-theme="dark"] body{background:var(--bg);color:var(--text)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--surface-2);color:var(--text);border-color:var(--border)}
:root[data-theme="dark"] .chip.ok,:root[data-theme="dark"] .mensagem.ok{background:#16341F;color:#8FD9A4;border-color:#24502F}
:root[data-theme="dark"] .chip.alerta,:root[data-theme="dark"] .mensagem.alerta{background:#3A2E12;color:#F2C46B;border-color:#5A4718}
:root[data-theme="dark"] .chip.rascunho,:root[data-theme="dark"] .chip.vermelho,:root[data-theme="dark"] .mensagem.erro{background:#3D1A1C;color:#F29A9E;border-color:#5C2629}
:root[data-theme="dark"] .mensagem.info{border-color:#1F4A6B}
:root[data-theme="dark"] .topbar{background:var(--surface);border-color:var(--border)}
/* celular primeiro: alvos de toque de 44 px e tabelas em cartões */
@media(max-width:768px){
  .botao,.btn-icon,.nav-item{min-height:44px}
  .botao.pequeno{min-height:40px;padding:8px 12px}
  input,select,textarea{min-height:44px;font-size:16px}
  .faixa-azul{padding:16px}
  .faixa-azul h1{font-size:18px}
  .linha-ficha{grid-template-columns:1fr 1fr}
  .linha-ficha .rotulo-ficha{grid-column:1/-1}
  .passos li{flex:1 1 40px;justify-content:center}
  .passos .passo-nome{display:none}
  .passos li.atual .passo-nome{display:inline}
  table.lista td[data-rotulo]:not([data-rotulo=""])::before{content:attr(data-rotulo);display:block;font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:2px}
  .tabela-pesos thead{display:table-header-group}
  .tabela-pesos tr{display:table-row}
  .tabela-pesos td{display:table-cell}
  .tabela-pesos td::before{display:none!important}
}

/* ── Celular de verdade (correção de 14/10/2026, teste dele no aparelho) ─────
   100vh no celular conta a área atrás da barra do navegador: o fim da tela e os
   botões ficavam escondidos e não havia como rolar até eles. dvh = altura visível. */
#app{height:100vh;height:100dvh}
.main{min-height:0}
.tela{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.modal-fundo{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media(max-width:768px){
  .sidebar{height:100vh;height:100dvh}
  .tela{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* janela vira tela cheia: corpo rola e os botões ficam sempre visíveis embaixo */
  .modal-fundo{padding:0;align-items:stretch}
  .modal,.modal.modal-largo{max-width:none;border-radius:0;height:100vh;height:100dvh;max-height:100dvh}
  .modal-cabeca{border-radius:0;padding:12px 16px;flex:0 0 auto}
  .modal-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px}
  .modal-rodape{flex:0 0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);
    display:flex;flex-wrap:wrap;gap:8px}
  .modal-rodape .botao{flex:1 1 auto;justify-content:center;min-height:44px}
  /* cartões menores no celular */
  .kpi-card{min-height:0;padding:10px 12px}
  .kpi-valor{font-size:20px}
  .cartao{padding:14px}
}

/* ── Celular: a página rola como um site (14/10/2026, 2ª correção) ───────────
   Com o app preso na altura da tela, a barra inferior de navegadores como o
   Samsung Internet cobria o fim das telas e os botões. Agora o documento rola e o
   navegador desconta as próprias barras; o topo fica grudado, o menu é gaveta. */
@media(max-width:768px){
  html,body{height:auto;overflow-x:clip}      /* clip, não hidden: hidden quebra o topo grudado (sticky) */
  #app{position:static;display:block;height:auto;min-height:100vh;overflow:visible}
  .main{display:block;overflow:visible;min-height:0}
  .topbar{position:sticky;top:0;z-index:150}
  .tela{overflow:visible;min-height:0;padding:12px 12px calc(32px + env(safe-area-inset-bottom))}
  .sidebar{position:fixed;top:0;bottom:0;height:auto}
  .mobile-overlay{position:fixed;inset:0}
  /* janelas: ocupam a tela visível inteira (top/bottom 0, sem vh), corpo rola, botões presos embaixo */
  .modal-fundo{position:fixed;top:0;left:0;right:0;bottom:0;padding:0;align-items:stretch}
  .modal,.modal.modal-largo{height:100%;max-height:none}
  /* cabeçalho de página mais enxuto */
  .page-header,.cabeca{gap:8px}
  .cabeca .acoes,.page-header .acoes{width:100%;display:flex;flex-wrap:wrap;gap:6px}
  .cabeca .acoes .botao,.page-header .acoes .botao{flex:1 1 auto;justify-content:center;min-height:44px}
  input,select,textarea{max-width:100%;font-size:16px}       /* 16px: o iPhone não dá zoom ao tocar */
  img,svg,canvas,table{max-width:100%}
}

/* ficha de números no celular: valor e confiança lado a lado, fonte na linha inteira */
@media(max-width:768px){.linha-ficha{display:grid !important;grid-template-columns:1fr 1fr;gap:6px}.linha-ficha .rotulo-ficha{grid-column:1 / -1}.linha-ficha > input:nth-of-type(2){grid-column:1 / -1;grid-row:3}.linha-ficha select{min-width:0;width:100%}}

/* ── Cores (14/10/2026): verde no lugar do azul e tema escuro legível ─────────
   Título sobre faixa colorida é sempre branco (o h2 herdava o preto do tema claro). */
.cp-tema-cabeca h2,.cp-tema-cabeca,.faixa-azul h1,.faixa-azul h2,.faixa-azul p{color:#fff}
:root[data-theme="dark"] .cp-tema-cabeca{background:linear-gradient(135deg,#0B4A27,#00733A)}
/* fundos claros escritos à mão viram tons escuros no tema escuro */
:root[data-theme="dark"] .rs-limitada td{background:#3A2E12;color:var(--text)}
:root[data-theme="dark"] .cp-aviso-regra{background:#3A2E12;border-color:#5A4718;color:#F2C46B}
:root[data-theme="dark"] .cp-mini{background:var(--surface-2)}
:root[data-theme="dark"] .tabela-doc tr:nth-child(even) td{background:var(--surface-2)}
:root[data-theme="dark"] .comentario{background:#332B14;color:var(--text)}
:root[data-theme="dark"] .botao.perigo,:root[data-theme="dark"] .invalido,
:root[data-theme="dark"] .tabela-edicao .linha-alerta td{background:#3D1A1C;color:#F29A9E;border-color:#5C2629}
:root[data-theme="dark"] .mensagem.alerta{background:#3A2A1A;color:#F5B57A;border-color:#5A3A1A}
:root[data-theme="dark"] .cartao-acesso{background:var(--surface);color:var(--text)}
:root[data-theme="dark"] table td,:root[data-theme="dark"] table th{color:var(--text)}
:root[data-theme="dark"] .lista th,:root[data-theme="dark"] table th{background:var(--surface-2)}
:root[data-theme="dark"] .lista td,:root[data-theme="dark"] .rs-tabela td{background:transparent}
:root[data-theme="dark"] .lista tr:hover td{background:#2C3036}
:root[data-theme="dark"] .rs-obs{background:var(--surface-2);color:var(--text)}
:root[data-theme="dark"] .cp-opcao.ativo{background:#3A2A1A}
:root[data-theme="dark"] .kpi-icon,:root[data-theme="dark"] .kpi-icone{filter:brightness(.85)}

/* ── M360 (15/10/2026): marca do app, menu do celular mais estreito, login compacto ─ */
.sidebar-logo .logo-m360{height:30px;width:auto;display:block;margin-top:2px}
.sidebar.collapsed .logo-m360{display:none}
.marcas-acesso{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo-m360-acesso{height:40px;width:auto;display:block}
.marcas-acesso .logo-acesso{height:20px;opacity:.85}
.cartao-acesso{max-width:380px;padding:28px 28px 20px}
.titulo-acesso{font-size:20px;margin-top:18px}
.cartao-acesso form > div:first-child{margin-top:0}
.rodape-acesso{margin-top:14px}
@media(max-width:768px){
  /* gaveta do menu: 72% da tela, no máximo 260 px, itens mais baixos */
  .sidebar{width:min(72vw,260px);min-width:0}
  .sidebar.collapsed{width:min(72vw,260px)}
  .sidebar-logo{padding:14px 14px 10px}
  .sidebar-logo .logo-completo{height:24px}
  .sidebar-logo .logo-m360{height:26px}
  .sidebar-nav{padding:8px 6px}
  .nav-item{padding:8px 10px;gap:10px;font-size:14px;min-height:42px}
  /* login: cartão menor, sem os hexágonos grandes por cima */
  .capa-acesso{align-items:flex-start;padding:24px 16px}
  .capa-acesso .hexagono-capa,.capa-acesso > svg{display:none}
  .cartao-acesso{max-width:none;padding:20px 18px 14px;margin-top:4vh}
  .logo-m360-acesso{height:34px}
  .titulo-acesso{font-size:18px;margin-top:14px}
  .cartao-acesso input{padding:10px 12px;margin-bottom:6px}
  .botao-acesso{padding:11px}
}