/* ============================================================================
   Kanban da Regulação — RECONSTRUÇÃO v2 (estrutura + mobile)
   Carrega DEPOIS de aurora-p-kanban.css.

   O que este arquivo faz (e o anterior não fazia): dá ESTRUTURA de tela pequena.
   O desenho aprovado (vidro, pílulas, cores) continua vindo do aurora-p-kanban;
   aqui mora a composição — como quadro, abas, filtros, cartão, tarefa e menu se
   recompõem quando a largura acaba.

   Composição por faixa:
     >  980px  desktop: quadro em colunas lado a lado (inalterado).
     <= 980px  quadro vira carrossel com encaixe (uma coluna por vez) + navegação
               de colunas; header e filtros empilham; menu lateral vira gaveta.
     <= 640px  celular: densidade menor, ações em largura total, tarefa em folha
               de tela cheia.

   Escopo: #view-regulacao.aur (mesma especificidade do arquivo base) para o
   painel; .reg-modal-box e o rail sao globais por natureza e estao marcados.
   ============================================================================ */

/* ══════════════════ 1. NAVEGAÇÃO DE COLUNAS (só existe no mobile) ══════════════════ */
/* Emitida por reg/12-kanban-design.js. No desktop as colunas ja estao todas na
   tela — a barra seria ruido, entao ela simplesmente nao aparece. */
#view-regulacao.aur .kb-colnav{ display:none }

@media (max-width:980px){
  #view-regulacao.aur .kb-colnav{
    display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    position:sticky; top:0; z-index:6;
  }
  #view-regulacao.aur .kb-colnav::-webkit-scrollbar{ display:none }
  #view-regulacao.aur .kb-colnav-btn{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
    padding:9px 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
    border:1px solid var(--line); background:var(--kb-surface-2); color:var(--ink-soft);
    transition:background .18s, color .18s, border-color .18s;
  }
  #view-regulacao.aur .kb-colnav-btn b{
    font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px;
    background:rgba(0,0,0,.07);
  }
  body.theme-dark #view-regulacao.aur .kb-colnav-btn b{ background:rgba(255,255,255,.12) }
  #view-regulacao.aur .kb-colnav-btn.is-on{
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    color:var(--kb-on); border-color:transparent; box-shadow:var(--kb-tab-glow);
  }
  #view-regulacao.aur .kb-colnav-btn.is-on b{ background:rgba(255,255,255,.22) }
}

/* ══════════════════ 2. QUADRO: colunas → carrossel com encaixe ══════════════════ */
@media (max-width:980px){
  #view-regulacao.aur .kb-board{
    display:flex !important;           /* vence o grid do arquivo base */
    gap:12px; overflow-x:auto; padding-bottom:8px;
    scroll-snap-type:x mandatory; scroll-padding:0 8px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* o carrossel sangra ate a borda da tela: coluna cheia sem parecer cortada */
    margin-inline:calc(var(--kb-bleed,12px) * -1);
    padding-inline:var(--kb-bleed,12px);
  }
  #view-regulacao.aur .kb-board::-webkit-scrollbar{ display:none }
  #view-regulacao.aur .kb-board > .kb-col,
  #view-regulacao.aur .kb-board > .reg-kanban-column{
    flex:0 0 min(92vw, 420px); min-width:0; scroll-snap-align:center;
    min-height:0;                       /* sem altura morta em coluna vazia */
  }
  /* O cabecalho da coluna vira redundante: a barra de colunas acima ja diz em qual
     coluna voce esta e quantas tarefas ela tem. Numa tela de 360px, repetir isso
     custava uma faixa inteira de altura. */
  #view-regulacao.aur .kb-col-head{ display:none }
  #view-regulacao.aur .kb-col-list{ max-height:none; gap:10px }
  /* aviso de WIP continua — ele nao esta na barra de colunas */
  #view-regulacao.aur .kb-wip{ margin-bottom:8px }
}

/* ══════════════════ 3. HEADER: marca / abas / ações ══════════════════ */
@media (max-width:980px){
  #view-regulacao.aur .kb-top{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:10px 12px; padding:12px 14px; border-radius:18px;
  }
  #view-regulacao.aur .kb-top .brand{ flex:none; min-width:0 }
  #view-regulacao.aur .kb-top .brand-txt h1{ font-size:16px; line-height:1.2 }
  #view-regulacao.aur .kb-actions{ grid-column:2; justify-self:end }
  /* abas ocupam a linha inteira e rolam se nao couberem */
  #view-regulacao.aur .kb-tabs{
    grid-column:1 / -1; align-self:stretch; justify-content:flex-start;
    overflow-x:auto; scrollbar-width:none;
  }
  #view-regulacao.aur .kb-tabs::-webkit-scrollbar{ display:none }
  #view-regulacao.aur .reg-kb-tabs .reg-kb-tab{ flex:1 0 auto; text-align:center }
}
@media (max-width:640px){
  /* Uma coluna por linha: marca, abas e ações em faixas próprias. Antes a marca
     dividia a linha com 5 ícones e o título quebrava em três linhas. */
  #view-regulacao.aur .kb-top{ grid-template-columns:1fr }
  #view-regulacao.aur .kb-top .brand{ display:flex; align-items:center; gap:10px; min-width:0 }
  #view-regulacao.aur .kb-top .brand-txt{ min-width:0 }
  #view-regulacao.aur .kb-top .brand-txt h1{
    font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #view-regulacao.aur .kb-mark{ flex:0 0 auto }
  /* ações: a primária puxa a linha, os ícones ficam encostados à direita */
  /* Uma linha só, sem quebrar: os ícones têm largura fixa e a ação primária
     absorve o resto. Deixar quebrar jogava o "Sair" sozinho numa segunda linha. */
  #view-regulacao.aur .kb-actions{
    grid-column:1; justify-self:stretch;
    display:flex; align-items:center; gap:5px; flex-wrap:nowrap;
  }
  #view-regulacao.aur .kb-actions .btn.primary{
    margin-right:auto; min-height:38px; flex:0 1 auto; min-width:0; white-space:nowrap;
  }
  #view-regulacao.aur .kb-actions .icon-btn{
    flex:0 0 36px; width:36px; min-width:36px; height:36px; min-height:36px;
  }
}
/* telas bem estreitas: o rótulo da ação primária sai, o "+" e a função ficam */
@media (max-width:392px){
  #view-regulacao.aur .kb-actions .btn.primary{ font-size:0; gap:0; padding:9px 13px }
  #view-regulacao.aur .kb-actions .btn.primary svg{ width:17px; height:17px }
  #view-regulacao.aur .kb-sep{ display:none }
  #view-regulacao.aur .kb-idt{ margin-top:3px }
  #view-regulacao.aur .kb-idt .st{ font-size:10px; padding:2px 7px }
}

/* ══════════════════ 4. BARRA DE COMANDO: busca, recortes, modo ══════════════════ */
@media (max-width:980px){
  #view-regulacao.aur .kb-cmd{ padding:10px; border-radius:16px; gap:8px }
  /* Busca ocupa a primeira linha; recortes e modo DIVIDEM a segunda. Empilhar os
     tres custava ~150px de altura antes do primeiro cartao aparecer. */
  #view-regulacao.aur .kb-cmd-row{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  }
  #view-regulacao.aur .kb-search{ flex:1 1 100%; width:100%; min-width:0 }
  #view-regulacao.aur .kb-quick{ flex:0 1 auto; min-width:0 }
  #view-regulacao.aur .kb-seg{ flex:0 0 auto }
  /* pílulas mais justas: é o que faz "Minhas/Atrasadas" e "Quadro/Lista"
     caberem na MESMA linha num aparelho de 360px */
  #view-regulacao.aur .kb-quick .chip,
  #view-regulacao.aur .kb-seg .chip{ padding:7px 11px; font-size:12px }
  #view-regulacao.aur .kb-quick .chip b{ margin-left:3px }
  #view-regulacao.aur .kb-quick,
  #view-regulacao.aur .kb-seg{
    overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; justify-content:flex-start;
  }
  #view-regulacao.aur .kb-quick::-webkit-scrollbar,
  #view-regulacao.aur .kb-seg::-webkit-scrollbar{ display:none }
  #view-regulacao.aur .kb-cmd-row-2{ display:grid; grid-template-columns:1fr; gap:8px }
  #view-regulacao.aur .kb-dept select{ width:100% }
  #view-regulacao.aur .kb-prio .chips{
    display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  }
  #view-regulacao.aur .kb-prio .chips::-webkit-scrollbar{ display:none }
  #view-regulacao.aur .kb-prio .chip{ flex:0 0 auto }
  #view-regulacao.aur .kb-cmd-end{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
}

/* ══════════════════ 4b. RITMO VERTICAL ══════════════════ */
/* Uma escala de espaçamento só para tela pequena. O painel foi desenhado para
   1600px, onde 14–18px de respiro é elegante; em 360px o mesmo respiro empurra
   o conteúdo para fora da dobra. Aqui a escala cai para 8–10px, sem encostar
   os blocos uns nos outros. */
@media (max-width:640px){
  #view-regulacao.aur .reg-kb-shell{ gap:10px }
  #view-regulacao.aur .kb-content{ gap:10px }
  #view-regulacao.aur .kb-top{ gap:8px 10px; padding:11px 12px }
  #view-regulacao.aur .kb-tabs{ padding:4px; border-radius:14px }
  #view-regulacao.aur .reg-kb-tabs .reg-kb-tab{ padding:8px 14px; font-size:12.5px }
  #view-regulacao.aur .kb-colnav{ padding:0 0 6px; gap:6px }
  #view-regulacao.aur .kb-colnav-btn{ padding:8px 12px }
  #view-regulacao.aur .kb-board{ gap:10px; padding-bottom:6px }
  #view-regulacao.aur .kb-col{ padding:10px }
  #view-regulacao.aur .kb-col-list{ gap:9px }
  #view-regulacao.aur .kb-cmd-end{ font-size:12px }
  /* a faixa fixa "Homologação" cobre o rodapé do quadro: devolve o espaço */
  #view-regulacao.aur .kb-board{ scroll-padding-bottom:0 }
  #view-regulacao.aur .kb-content{ padding-bottom:34px }
}

/* ══════════════════ 4c. "MAIS FILTROS" (dobra da segunda faixa) ══════════════════ */
/* No desktop o <details> nasce aberto (reg/12 _kbWide) e o resumo some: a barra
   volta a ser exatamente a de antes. No celular ele nasce fechado. */
#view-regulacao.aur .kb-more{ display:contents }
#view-regulacao.aur .kb-more-sum{ display:none }

@media (max-width:980px){
  #view-regulacao.aur .kb-more{ display:block }
  #view-regulacao.aur .kb-more-sum{
    display:flex; align-items:center; gap:7px; cursor:pointer; list-style:none;
    font-size:12.5px; font-weight:600; color:var(--ink-soft);
    padding:8px 2px 2px; user-select:none;
  }
  #view-regulacao.aur .kb-more-sum::-webkit-details-marker{ display:none }
  /* seta própria: gira ao abrir */
  #view-regulacao.aur .kb-more-sum::after{
    content:""; width:7px; height:7px; margin-left:2px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,-2px); transition:transform .2s;
  }
  #view-regulacao.aur .kb-more[open] .kb-more-sum::after{ transform:rotate(-135deg) translate(-3px,0) }
  /* ponto de aviso: fechado, ainda dá para saber que há filtro ligado */
  #view-regulacao.aur .kb-more-dot{
    width:7px; height:7px; border-radius:50%; background:var(--brand2); display:inline-block;
  }
  #view-regulacao.aur .kb-more[open] .kb-cmd-row-2{ margin-top:8px }
}

/* ══════════════════ 5. CARTÃO ══════════════════ */
@media (max-width:640px){
  #view-regulacao.aur .kb-card{ padding:12px; gap:9px }
  #view-regulacao.aur .kb-card-title{ font-size:14px }
  /* alvo de toque de verdade: 40px de altura nos dois botoes do rodape */
  #view-regulacao.aur .kb-card-act .btn,
  #view-regulacao.aur .kb-card-act .icon-btn{ min-height:40px; min-width:40px }
  #view-regulacao.aur .kb-card-meta{ gap:5px }
}

/* ══════════════════ 6. TAREFA: modal → folha de tela cheia ══════════════════ */
/* .reg-modal-box e global (reg/07.js ensureModalRoot). No celular a janela larga
   nao faz sentido: vira uma folha que sobe do rodape e ocupa a tela. */
@media (max-width:640px){
  .reg-modal-box{
    max-width:100% !important; width:100% !important;
    max-height:100dvh; height:100dvh; margin:0; border-radius:0;
    display:flex; flex-direction:column;
  }
  .reg-modal-box > *{ min-height:0 }
  .tv3{ gap:12px }
  .tv3-head{ flex-wrap:wrap; gap:10px }
  .tv3-title{ font-size:17px; line-height:1.25; width:100% }
  .tv3-who{ width:100% }
  .tv3-chips{ gap:6px }
  /* barras de acao: botao ocupa a linha, sem fila de alvos minusculos */
  .tv3-flow, .tv3-tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .tv3-flow .btn, .tv3-tools .btn{ width:100%; justify-content:center; min-height:42px }
}
@media (max-width:420px){
  .tv3-flow, .tv3-tools{ grid-template-columns:1fr }
}

/* ══════════════════ 7. MENU LATERAL: rail → gaveta ══════════════════ */
/* O rail (#reg-rail-fixed / #intranet-reg-rail / .mod-nav) e compartilhado por
   todos os painéis. Ate 980px ele sai do fluxo e vira gaveta, aberta pelo botao
   flutuante que js/app/mobile-nav.js injeta. Acima disso, nada muda. */
@media (max-width:980px){
  :is(#intranet-reg-rail, #reg-rail-fixed, .mod-nav){
    position:fixed; top:0; left:0; z-index:120;
    height:100dvh; width:min(84vw, 290px); max-width:290px;
    border-radius:0 22px 22px 0; padding:16px 12px 20px;
    transform:translateX(-102%);
    transition:transform .28s cubic-bezier(.22,.7,.3,1);
    overscroll-behavior:contain; overflow-y:auto;
  }
  body.rail-open :is(#intranet-reg-rail, #reg-rail-fixed, .mod-nav){ transform:none }
  /* na gaveta o rail nasce expandido: rotulo ao lado do icone, sem depender de hover */
  body.rail-open :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-label,
  body.rail-open .mod-nav .mod-nav-label{ opacity:1; width:auto }

  /* o conteudo deixa de reservar a coluna do rail */
  body.reg-shell-on{ padding-left:0 !important }

  /* botao flutuante (injetado) */
  .rail-fab{
    position:fixed; z-index:121; left:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    width:48px; height:48px; border-radius:16px; border:1px solid rgba(143,175,87,.28);
    background:linear-gradient(180deg, rgb(44,54,26), rgb(28,35,16)); color:#fff;
    display:grid; place-items:center; cursor:pointer;
    box-shadow:0 14px 30px -10px rgba(0,0,0,.55);
  }
  .rail-fab:active{ transform:scale(.96) }
  body.rail-open .rail-fab{ left:auto; right:12px }

  .rail-scrim{
    position:fixed; inset:0; z-index:119; border:0; padding:0;
    background:rgba(12,16,8,.5); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .28s;
  }
  body.rail-open .rail-scrim{ opacity:1; pointer-events:auto }
}
@media (min-width:981px){
  .rail-fab, .rail-scrim{ display:none }
}

/* ══════════════════ 8. LISTA (modo lista do quadro) ══════════════════ */
@media (max-width:980px){
  #view-regulacao.aur .kb-listwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  #view-regulacao.aur .kb-listwrap table{ min-width:640px }
}

/* ══════════════════ 9. CORREÇÕES DE CASCATA ══════════════════
   Auditoria 03/ago: cinco regras deste arquivo NUNCA valeram no celular, vencidas
   por !important ou por especificidade maior vinda de outras folhas. Ficam por
   último, com a especificidade necessária para ganhar. Cada bloco cita quem vence.

   O caminho definitivo é tirar essas decisões dos arquivos de origem (16/05.css e
   aurora-p-kanban.css) — mas eles são compartilhados por outros painéis, então o
   conserto mora aqui até haver janela para mexer lá. */

/* 9.1 — Caixa do painel. Perdia para 16/05.css:87-91
   (margin:18px 22px 40px 0 !important): margem esquerda ZERO e 22px só à direita,
   deixando o conteúdo colado na borda da tela. */
@media (max-width:980px){
  body.reg-shell-on #view-regulacao .reg-shell,
  body.reg-shell-on #view-regulacao .reg-task-shell{
    width:auto !important; max-width:none !important;
    margin:12px 12px 28px !important;
  }
  /* --kb-bleed nunca foi definida: o quadro caía no fallback de 12px e sangrava
     para FORA da tela pela esquerda, decepando a primeira coluna. */
  #view-regulacao.aur .reg-kb-shell{ --kb-bleed:12px }
}

/* 9.2 — Gaveta do menu. Perdia para 16/05.css:79-96
   (#reg-rail-fixed.reg-rail-fixed = 1,1,0 contra o :is() daqui = 1,0,0):
   a "gaveta de 290px" era uma tira de 62px em z-index 45, ATRÁS do véu (119).
   Abria e não dava para tocar em nada. */
@media (max-width:980px){
  #reg-rail-fixed.reg-rail-fixed,
  #intranet-reg-rail.intranet-reg-rail{
    position:fixed !important; left:0 !important; top:0 !important;
    width:min(84vw,290px) !important; max-width:290px !important;
    height:100dvh !important; z-index:120 !important;
    border-radius:0 22px 22px 0 !important;
    flex-direction:column !important; flex-wrap:nowrap !important;
    transform:translateX(-102%);
  }
  body.rail-open #reg-rail-fixed.reg-rail-fixed,
  body.rail-open #intranet-reg-rail.intranet-reg-rail{ transform:none }
  /* aurora-shell.css:382 deitava os itens em linha (padrão antigo, do tempo em que
     o rail virava faixa horizontal no mobile). Dentro da gaveta eles voltam a ser
     coluna — sem isto o menu abre com os ícones embrulhados e estourando. */
  :is(#intranet-reg-rail, #reg-rail-fixed){
    flex-direction:column !important; flex-wrap:nowrap !important; height:100dvh !important;
  }
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-scroll{
    flex-direction:column !important; flex-wrap:nowrap !important; width:100% !important;
  }
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-item{ min-height:48px }
}

/* 9.3 — Folha da tarefa. Perdia para 12-modais.css (4x !important): a tarefa
   abria como caixa de ~348x432 com 12px de véu em volta, cantos redondos e 44px
   de padding lateral. O .reg-modal-box também carrega a classe .modal-box
   (reg/10.js), por isso aquelas regras o alcançam. */
@media (max-width:640px){
  #reg-modal.modal-overlay{ padding:0 !important; align-items:flex-end !important }
  #reg-modal .reg-modal-box{
    width:100% !important; max-width:100% !important;
    height:100dvh !important; max-height:100dvh !important;
    margin:0 !important; border-radius:0 !important;
    padding:14px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }
  /* barra de ações em duas colunas: perdia para .aur .au-toolbar{display:flex}
     (0,2,0) — o #reg-modal na frente resolve. */
  #reg-modal .tv3-flow, #reg-modal .tv3-tools{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  #reg-modal .tv3-flow .btn, #reg-modal .tv3-tools .btn{
    width:100%; justify-content:center; min-height:42px;
  }
}
@media (max-width:420px){
  #reg-modal .tv3-flow, #reg-modal .tv3-tools{ grid-template-columns:1fr }
}

/* 9.4 — Ordem do header. aurora-p-kanban.css:303-304 (@820) põe order:3 nas abas
   e margin-left:auto nas ações; a margem auto engole o espaço livre ANTES do
   alinhamento, então o justify-self da grade daqui era ignorado e as abas
   apareciam DEPOIS da linha de ações. */
@media (max-width:640px){
  #view-regulacao.aur .kb-top .kb-tabs{ order:0 }
  #view-regulacao.aur .kb-top .kb-actions{ margin-left:0 }
}

/* 9.5 — A barra de colunas grudava no topo sem fundo: os cartões passavam
   visíveis pelos vãos entre as pílulas. */
@media (max-width:980px){
  #view-regulacao.aur .kb-colnav{
    background:var(--ground,rgba(246,248,240,.92));
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    margin-inline:calc(var(--kb-bleed,12px) * -1);
    padding-inline:var(--kb-bleed,12px);
  }
}
body.theme-dark #view-regulacao.aur .kb-colnav{ background:rgba(18,22,12,.92) }

/* ══════════════════ 10. COMPOSIÇÃO DE CELULAR (design aprovado) ══════════════════
   Reconstruído a partir do mockup "Painel Kanban Regulação" renderizado em 363px.
   O desenho NÃO usa carrossel de colunas nem barras flutuantes — ele EMPILHA:
   cada controle em largura total, na própria caixa arredondada, e as colunas uma
   abaixo da outra com cabeçalho e contador. Previsível e sem gesto escondido.

   Ritmo do design: caixa branca, raio 16-18px, 14px de respiro entre blocos,
   alvo de 48px. Nada de fila horizontal rolável. */

/* as barras flutuantes que eu havia inventado saem de cena */
#view-regulacao.aur .kb-mtop,
#view-regulacao.aur .kb-mbot{ display:none }

@media (max-width:980px){
  /* ---------- casca ---------- */
  #view-regulacao.aur .reg-kb-shell{ gap:14px }
  #view-regulacao.aur .kb-content{ gap:14px; padding:0 0 34px }

  /* ---------- cabeçalho: marca em cima, abas em faixa própria ---------- */
  #view-regulacao.aur .kb-top{
    display:flex; flex-direction:column; align-items:stretch; gap:12px;
    padding:14px; border-radius:18px;
  }
  #view-regulacao.aur .kb-top .brand{ display:flex; align-items:center; gap:11px; min-width:0 }
  #view-regulacao.aur .kb-top .brand-txt h1{ font-size:17px; line-height:1.25 }
  #view-regulacao.aur .kb-tabs{
    order:0; display:grid; grid-template-columns:1fr 1fr; gap:6px;
    padding:5px; border-radius:16px; overflow:visible;
  }
  #view-regulacao.aur .reg-kb-tabs .reg-kb-tab{
    min-height:34px; font-size:13px; padding:0 11px; border-radius:13px;
  }
  #view-regulacao.aur .kb-actions{
    display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin-left:0;
  }
  #view-regulacao.aur .kb-actions .btn.primary{ flex:1 1 auto; min-height:34px; justify-content:center }
  #view-regulacao.aur .kb-actions .icon-btn{ flex:0 0 44px; width:36px; height:36px; min-width:36px; min-height:36px }
  #view-regulacao.aur .kb-sep{ display:none }

  /* ---------- filtros: um controle por linha, largura total ---------- */
  #view-regulacao.aur .kb-cmd{
    position:static; transform:none; box-shadow:none; max-height:none; overflow:visible;
    display:flex; flex-direction:column; gap:10px;
    padding:14px; border-radius:18px;
  }
  #view-regulacao.aur .kb-cmd-head,
  #view-regulacao.aur .kb-cmd-bd{ display:none }
  #view-regulacao.aur .kb-cmd-row,
  #view-regulacao.aur .kb-cmd-row-2{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
  }
  #view-regulacao.aur .kb-search{ width:100%; min-height:36px; border-radius:13px }
  /* "Minhas" e "Atrasadas": uma linha cada, como no desenho */
  /* recortes lado a lado: sao um par de leitura ("minhas" x "atrasadas"),
     empilhar custava uma linha inteira sem ganhar clareza */
  #view-regulacao.aur .kb-quick{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible;
  }
  #view-regulacao.aur .kb-quick .chip{
    width:100%; min-height:36px; justify-content:center; border-radius:13px;
    font-size:13.5px; padding:0 10px; gap:5px;
  }
  #view-regulacao.aur .kb-quick .chip b{ margin-left:0 }
  #view-regulacao.aur .kb-seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible }
  #view-regulacao.aur .kb-seg .chip{ min-height:34px; justify-content:center; border-radius:14px; font-size:14px }
  #view-regulacao.aur .kb-dept select{ width:100%; min-height:36px; border-radius:13px }
  /* prioridade: 2 por linha, sem fila rolável */
  #view-regulacao.aur .kb-prio .chips{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible;
  }
  #view-regulacao.aur .kb-prio .chip{ min-height:34px; justify-content:center; border-radius:14px; font-size:13.5px }
  #view-regulacao.aur .kb-cmd-end{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px;
  }
  #view-regulacao.aur .kb-cmd-end .btn{ min-height:36px }

  /* ---------- quadro: colunas EMPILHADAS, não carrossel ---------- */
  #view-regulacao.aur .kb-board{
    display:flex !important; flex-direction:column; gap:14px;
    overflow:visible; margin:0; padding:0; scroll-snap-type:none;
  }
  #view-regulacao.aur .kb-board > .kb-col,
  #view-regulacao.aur .kb-board > .reg-kanban-column{
    flex:0 0 auto; width:100%; min-width:0; min-height:0; padding:14px; border-radius:18px;
  }
  /* cabeçalho da coluna volta: barra de acento + nome + contador */
  #view-regulacao.aur .kb-col-head{
    display:flex; align-items:center; gap:10px; position:static;
    margin:0 0 12px; padding:0 0 0 12px; background:transparent; backdrop-filter:none;
    border-left:4px solid var(--brand2); border-radius:0;
  }
  #view-regulacao.aur .kb-col-head h3{ font-size:15px; font-weight:700; margin:0 }
  #view-regulacao.aur .kb-col-head .st{ margin-left:auto; font-size:12px; padding:4px 11px }
  #view-regulacao.aur .kb-col-list{ display:flex; flex-direction:column; gap:12px; max-height:none }
  #view-regulacao.aur .kb-colnav{ display:none }
}

/* ══════════════════ 11. O CARTÃO (design aprovado) ══════════════════
   No mockup cada informação tem a própria caixa e o cartão respira: linha de
   identificação, título grande, categoria, prazo/responsável, e a ação primária
   ocupando a largura inteira com o rótulo escrito. */
@media (max-width:980px){
  #view-regulacao.aur .kb-card{
    padding:14px; gap:9px; border-radius:15px; border-left-width:1px;
  }
  #view-regulacao.aur .kb-card-top{ gap:8px }
  #view-regulacao.aur .kb-card .proto{ font-size:12px; padding:4px 10px; border-radius:8px }
  #view-regulacao.aur .kb-card .prio{ display:inline-flex; font-size:11px; padding:4px 10px; border-radius:8px }
  #view-regulacao.aur .kb-card-title{
    font-size:15px; line-height:1.3; font-weight:700;
  }
  /* chips da meta: um bloco por linha, largura total, como no desenho */
  #view-regulacao.aur .kb-card-meta{ display:flex; flex-direction:column; gap:8px }
  #view-regulacao.aur .kb-card-meta .st{
    width:100%; min-height:30px; display:flex; align-items:center;
    font-size:12.5px; padding:0 12px; border-radius:12px;
  }
  #view-regulacao.aur .kb-card .kb-att{ align-self:flex-start }
  /* rodapé: responsável em cima, ação primária larga embaixo */
  #view-regulacao.aur .kb-card-foot{
    display:flex; flex-direction:column; align-items:stretch; gap:11px; flex-wrap:wrap;
  }
  #view-regulacao.aur .kb-resp{ display:flex; align-items:center; gap:9px; min-width:0 }
  #view-regulacao.aur .kb-resp b{
    display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* as duas acoes do cartao dividem a linha: "Iniciar" (proximo passo) e "Abrir"
     (so ver). Empilhadas, cada cartao ganhava 50px de altura sem ganhar clareza. */
  #view-regulacao.aur .kb-card-act{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin:0;
  }
  #view-regulacao.aur .kb-card-act .btn,
  #view-regulacao.aur .kb-card-act .icon-btn,
  #view-regulacao.aur .kb-card .kb-flow{
    width:100%; min-height:36px; justify-content:center; border-radius:13px;
    font-size:13px; font-weight:600; padding:0 8px; max-width:none; gap:6px;
    white-space:nowrap; overflow:hidden;
  }
  #view-regulacao.aur .kb-flow-lbl{ display:inline; font-size:13.5px; font-weight:600 }
}

/* ══════════════════ 12. A TAREFA ABERTA ══════════════════ */

/* 12.1 — BUG, e vale em qualquer tela: o cabeçalho da tarefa pinta o texto de
   BRANCO sobre um fundo de vidro claro (rgba(255,255,255,.62)). Título, nome do
   responsável e legenda ficam invisíveis. O desenho previa faixa escura que não
   chegou; como o fundo é claro, quem muda é a tinta. */
#reg-modal .tv3-head,
#reg-modal .tv3-title,
#reg-modal .tv3-who b{ color:var(--ink) }
#reg-modal .tv3-who .au-hint{ color:var(--ink-soft) }

@media (max-width:980px){
  /* 12.2 — o topo da folha para de rolar: protocolo e X sempre alcançáveis.
     O overflow mora na .reg-modal-box; passa para o corpo, senão o cabeçalho sobe
     junto com o conteúdo e o único jeito de fechar é rolar de volta. */
  #reg-modal .reg-modal-box{ overflow:hidden; display:flex; flex-direction:column }
  #reg-modal .reg-modal-head{
    flex:0 0 auto; padding-bottom:10px; margin-bottom:2px;
    border-bottom:1px solid var(--line);
  }
  #reg-modal .reg-modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain }

  /* 12.3 — o cabeçalho da tarefa custava 175px de uma folha de 468. Vira uma
     linha de identificação: status, título e responsável, sem moldura própria. */
  #reg-modal .tv3-head{
    display:block; padding:12px 0 10px; background:transparent; box-shadow:none; border:0;
  }
  #reg-modal .tv3-pill{ margin-bottom:8px }
  #reg-modal .tv3-title{ font-size:17px; line-height:1.3; margin:0 }
  #reg-modal .tv3-who{ margin-top:10px }
  #reg-modal .tv3-av{ width:30px; height:30px; font-size:11px }

  /* 12.4 — as ferramentas param de ser uma parede: viram dois por linha, e a
     ação de fluxo (o próximo passo) fica sozinha e larga, acima delas. */
  #reg-modal .tv3-flow{ display:grid; grid-template-columns:1fr; gap:8px }
  #reg-modal .tv3-flow .btn{ width:100%; justify-content:center; min-height:40px; font-size:14.5px }
  #reg-modal .tv3-tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  #reg-modal .tv3-tools .btn{ width:100%; justify-content:center; min-height:36px }
  #reg-modal .tv3-section{ padding:12px }
  #reg-modal .tv3-chips{ gap:6px }
}
/* as ferramentas da tarefa ficam lado a lado tambem no aparelho estreito:
   sao acoes curtas (Anexos, Comentarios, Historico...), nao precisam de linha inteira */
@media (max-width:400px){
  #reg-modal .tv3-tools{ grid-template-columns:1fr 1fr; gap:7px }
  #reg-modal .tv3-tools .btn{ font-size:12.5px; padding:0 8px }
}

/* quem pediu menos movimento nao ganha o deslize da gaveta nem o encaixe do quadro */
@media (prefers-reduced-motion:reduce){
  :is(#intranet-reg-rail, #reg-rail-fixed, .mod-nav){ transition:none }
  #view-regulacao.aur .kb-board{ scroll-behavior:auto }
}

/* O corte antigo de 392px escondia o rótulo do botão primário (font-size:0). Na
   composição do design a ação é larga e ESCRITA em qualquer largura. */
@media (max-width:392px){
  #view-regulacao.aur .kb-actions .btn.primary{ font-size:13.5px; gap:7px; padding:0 14px }
  #view-regulacao.aur .kb-idt .st{ font-size:11px; padding:3px 8px }
}

/* ══════════════════ 13. COLUNAS DOBRÁVEIS (só no celular) ══════════════════
   Com volume, empilhar as colunas inteiras vira rolagem cega: para chegar em
   "Em andamento" era preciso passar por todas as tarefas de "A fazer". Aqui a
   coluna vira sanfona — os cabeçalhos e as contagens ficam sempre à vista e só
   uma coluna abre por vez. No desktop as colunas continuam lado a lado, abertas. */
#view-regulacao.aur .kb-col-chev{ display:none }

@media (max-width:980px){
  #view-regulacao.aur .kb-col{ padding:12px 14px }
  #view-regulacao.aur .kb-col-head{
    cursor:pointer; user-select:none; min-height:40px; margin:0; padding:0 0 0 12px;
  }
  /* fechada: só o cabeçalho ocupa espaço */
  #view-regulacao.aur .kb-col:not(.is-aberta) .kb-col-list,
  #view-regulacao.aur .kb-col:not(.is-aberta) .kb-wip{ display:none }
  #view-regulacao.aur .kb-col.is-aberta .kb-col-head{ margin-bottom:12px }
  #view-regulacao.aur .kb-col-chev{
    display:block; width:8px; height:8px; margin-left:10px; flex:0 0 auto;
    border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s;
  }
  #view-regulacao.aur .kb-col.is-aberta .kb-col-chev{ transform:rotate(-135deg) translate(-3px,-1px) }
  #view-regulacao.aur .kb-col-head .st{ margin-left:auto }
  /* teto de cartões desenhados: o resto vem por demanda */
  #view-regulacao.aur .kb-col-mais{ width:100%; min-height:36px; justify-content:center; font-size:13px }
  #view-regulacao.aur .kb-col:focus-within .kb-col-head{ outline:none }
}

/* a gaveta rola por dentro quando a lista de modulos passa da altura da tela */
@media (max-width:980px){
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-scroll{
    overflow-y:auto; min-height:0; flex:1 1 auto;
  }
}

/* ══════════════════ 14. ALINHAMENTO DENTRO DA GAVETA ══════════════════
   O rail nasceu como trilho de ÍCONES de 78px, onde centralizar é o certo. Dentro
   da gaveta de 290px ele é um menu escrito: ícone e rótulo têm que começar na
   mesma margem esquerda, senão cada linha parece pendurada no meio. */
@media (max-width:980px){
  :is(#intranet-reg-rail, #reg-rail-fixed){
    align-items:stretch !important; padding:16px 10px 20px !important;
  }
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-item{
    justify-content:flex-start !important; text-align:left;
    gap:12px; padding:0 12px !important; width:100%;
  }
  /* o rótulo deixa de ser um resto de 36px e ocupa a linha */
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-label{
    opacity:1 !important; width:auto !important; flex:1 1 auto; min-width:0;
    text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-item svg,
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-item i{ flex:0 0 auto }
  /* a logo acompanha a mesma margem, sem ficar centrada sozinha no topo */
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-logo{
    margin:0 0 14px 2px !important;
  }
  /* títulos de grupo e rodapé do menu na mesma margem */
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-group,
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-sep,
  :is(#intranet-reg-rail, #reg-rail-fixed) .reg-rail-foot{
    text-align:left; padding-left:14px;
  }
}

/* a gaveta obedece aos DOIS gatilhos: o botão flutuante (body.rail-open) e o
   "Painéis" da barra inferior da Intranet (.sidebar-open na view) */
@media (max-width:980px){
  .sidebar-open #intranet-reg-rail.intranet-reg-rail,
  .sidebar-open #reg-rail-fixed.reg-rail-fixed{ transform:none }
}