/* assets/drill.css — o painel «os dados por trás do número» (SysDrill).
   Tokens da casa SEMPRE com fallback (var(--x, hex)): a folha carrega dentro
   de módulos cujo tokens.css é o mesmo, mas um módulo autónomo sem ele não
   pode ficar transparente. Dark vem dos próprios tokens (html[data-theme]).

   O CANTO INFERIOR DIREITO É RESERVADO (memória canto-inferior-direito-do-
   iframe-e-do-shell): o «?» do shell (fixed bottom:20 right:18..60, z-index
   250) vive na JANELA, por cima deste iframe — nada interativo do painel pode
   viver naquele canto. Por isso o corpo rolável acaba 84px antes do fundo
   (padding) e todas as ações ficam no topo. */

.sdrill{
  position:fixed; top:0; right:0; bottom:0;
  width:min(440px, 92vw);
  background:var(--bg1,#fff);
  border-left:1px solid var(--line,#e2e2e6);
  box-shadow:-12px 0 32px rgba(0,0,0,.10);
  z-index:900;            /* abaixo do ctxmenu (4000) e do modal do módulo */
  display:flex; flex-direction:column;
  font-family:var(--font-ui,-apple-system,'Segoe UI',sans-serif);
  color:var(--text1,#1c1c1f);
}

.sd-head{display:flex; align-items:flex-start; gap:10px;
  padding:14px 16px 10px; border-bottom:1px solid var(--line,#e2e2e6); flex-shrink:0}
.sd-head-txt{flex:1; min-width:0}
.sd-eyebrow{font-family:var(--font-mono,ui-monospace,monospace); font-size:9.5px;
  letter-spacing:.12em; color:var(--text3,#8a8a92)}
.sd-head h2{font-size:15px; font-weight:700; margin:3px 0 0; line-height:1.35}
.sd-valor{font-family:var(--font-mono,ui-monospace,monospace); font-size:19px}
.sd-x{border:0; background:none; font-size:22px; line-height:1; cursor:pointer;
  color:var(--text2,#5c5c66); padding:2px 6px; border-radius:8px}
.sd-x:hover{background:var(--bg2,#f4f4f6)}

/* o corpo rola; os últimos 84px do fundo ficam VAZIOS de propósito (o `?` do
   shell ocupa aquele canto na janela — ver o cabeçalho desta folha) */
.sd-body{flex:1; overflow-y:auto; padding:14px 16px 84px}

.sd-def{font-size:13.5px; line-height:1.55; margin:0 0 12px}
.sd-naosei{font-weight:700}
.sd-body p{font-size:12.5px; line-height:1.5; color:var(--text2,#5c5c66)}
.sd-lista{margin:8px 0 0 18px; font-size:12.5px; line-height:1.7; color:var(--text2,#5c5c66)}

.sd-meta{margin:0 0 12px; font-size:12.5px}
.sd-meta dt{font-family:var(--font-mono,ui-monospace,monospace); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text3,#8a8a92); margin-top:9px}
.sd-meta dd{margin:2px 0 0; line-height:1.5}
.sd-meta code{font-family:var(--font-mono,ui-monospace,monospace); font-size:11.5px;
  background:var(--bg2,#f4f4f6); border:1px solid var(--line,#e2e2e6);
  border-radius:5px; padding:1px 5px}
.sd-nota{display:block; font-size:11.5px; color:var(--text3,#8a8a92); margin-top:3px}
.sd-gap{color:var(--warn,#b8860b); font-style:italic}

.sd-chip{display:inline-block; border:1px solid var(--line,#e2e2e6);
  background:var(--bg2,#f4f4f6); color:var(--accent,#0071e3);
  font-family:var(--font-mono,ui-monospace,monospace); font-size:11.5px;
  border-radius:999px; padding:2px 9px; cursor:pointer}
.sd-chip:hover{border-color:var(--accent,#0071e3)}

.sd-bloco{border:1px solid var(--line,#e2e2e6); border-radius:10px;
  padding:10px 12px; margin:0 0 12px; background:var(--bg2,#f4f4f6)}
.sd-bloco h3{font-size:12px; margin:0 0 4px}
.sd-bloco p{margin:0}
.sd-mono{font-family:var(--font-mono,ui-monospace,monospace); font-size:11px; margin-top:6px}

.sd-linhas h3{font-size:12px; margin:4px 0 6px}
.sd-wrap{overflow-x:auto; border:1px solid var(--line,#e2e2e6); border-radius:10px}
.sd-tb{width:100%; border-collapse:collapse; font-size:12px}
.sd-tb th{position:sticky; top:0; background:var(--bg2,#f4f4f6); text-align:left;
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text3,#8a8a92); padding:6px 8px; border-bottom:1px solid var(--line,#e2e2e6)}
.sd-tb td{padding:5px 8px; border-bottom:1px solid var(--line,#e2e2e6)}
.sd-tb tr:last-child td{border-bottom:0}

.sd-aviso{border:1px dashed var(--line,#e2e2e6); border-radius:10px;
  padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--text2,#5c5c66)}

.sd-donabar{display:flex; align-items:center; gap:10px;
  padding:8px 16px; border-bottom:1px solid var(--line,#e2e2e6); flex-shrink:0}
.sd-dona{flex:1; border:0; width:100%}

/* ── O VISOR AO CENTRO (a outra superfície da regra `ondeAbre`) ────────────
   Uma PÁGINA inteira merece o ecrã todo e tem o seu próprio scroll — abre ao
   centro, embutida e POR CIMA. O painel da direita não se desfaz: fica atrás
   (esbatido, não removido), e por isso não se perde o sítio de onde se veio.
   Acima do painel (900) e do `?` do shell (250), abaixo do ctxmenu (4000).
   As ações vivem TODAS na barra de cima: o canto inferior direito continua a
   ser do `?` do shell, que vive na janela por cima de qualquer iframe. */
.sd-visor{position:fixed; inset:0; z-index:1200; display:flex;
  align-items:center; justify-content:center; padding:28px}
.sd-visor-fundo{position:absolute; inset:0; background:rgba(20,20,24,.34)}
.sd-visor-cx{position:relative; display:flex; flex-direction:column;
  width:min(1180px, 94vw); height:min(860px, 90vh);
  background:var(--bg1,#fff); border:1px solid var(--line,#e2e2e6);
  border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.24); overflow:hidden}
.sd-visor-bar{display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:9px 12px 9px 14px; border-bottom:1px solid var(--line,#e2e2e6);
  background:var(--bg2,#f4f4f6)}
.sd-visor-tit{font-size:12.5px; font-weight:650; color:var(--text1,#1c1c1f)}
.sd-visor-porque{flex:1; margin-top:0}
.sd-visor .sd-dona{flex:1; width:100%; border:0; background:var(--bg1,#fff)}
/* o painel continua LÁ — recuado, nunca fechado */
.sdrill.sd-atras{filter:saturate(.75) brightness(.98); opacity:.55}

/* a AFFORDANCE: com o SysDrill montado, o que é clicável diz que é — sem
   roubar o desenho da página, só o cursor e um anel no hover. O que está
   DECLARADO vale em qualquer página; os «números» de cada página (.kpi nos
   módulos, .stat no Início) chegam pela regra que o motor injeta ao montar,
   porque a folha não pode adivinhar como é que cada ecrã lhes chama. */
.sd-on [data-drill]{cursor:pointer}
.sd-on [data-drill]:hover{outline:1.5px solid var(--accent,#0071e3); outline-offset:1px}