/* Classes das primitivas de kernel/components.js.
   Existem para que nenhum atributo style="" seja escrito no HTML — e o que
   permite a CSP dispensar 'unsafe-inline' em style-src. Apenas os valores
   realmente calculados (largura/altura das barras) continuam vindo por
   data-css e sao aplicados por kernel/dom.js. */

.largura-total { width: 100%; }

/* Celulas de tabela agrupada */
.cel-topo { vertical-align: top; }
.cel-grupo { vertical-align: top; font-weight: 700; }
.cel-nowrap { white-space: nowrap; }
.cel-total { vertical-align: top; font-weight: 900; }
.cel-primeira-do-grupo { font-weight: 800; }
.list-table td.cel-topo:not(.cel-primeira-do-grupo) { font-weight: 500; }
.list-table th.col-num { text-align: right; }

/* Barra vertical com projecao */
.vbar-value-proj { color: #0057d9; font-style: italic; }
.vbar-track-proj { flex-direction: column; justify-content: flex-end; }
.vbar-sombra {
  width: 100%;
  background: rgba(0, 87, 217, 0.12);
  border: 1px dashed rgba(0, 87, 217, 0.55);
  border-radius: 4px 4px 0 0;
}
.vbar-real {
  width: 100%;
  background: linear-gradient(180deg, #0b7cff, #0057d9);
  border-radius: 4px 4px 0 0;
}
/* Quando ha sombra de projecao acima, a barra real perde o arredondamento
   superior para as duas encostarem sem emenda. */
.vbar-real-continua { border-radius: 0 0 0 0; }

/* Campo de busca padrao (kernel/busca.js) */
.campo-busca { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.campo-busca .busca-lista { flex: 1 1 220px; min-width: 0; padding-right: 30px; }
.campo-busca input { min-height:40px; border:1px solid #d9e0ec; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(31,46,79,.03); }
.campo-busca input:focus { border-color:#5b7ee5; box-shadow:0 0 0 3px rgba(57,96,212,.12); outline:0; }
.busca-limpar {
  position: absolute; right: 8px; top: 6px;
  appearance: none; border: 0; background: transparent;
  font-size: 18px; line-height: 1; color: #64748b; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.busca-limpar:hover { background: #e2e8f0; color: #0f172a; }
.busca-limpar:focus-visible { outline: 2px solid #0b7cff; outline-offset: 1px; }
.busca-contagem { font-size: 12px; font-weight: 600; color: #64748b; white-space: nowrap; }
.busca-contagem[data-estado="vazio"] { color: #991b1b; }
.busca-contagem[data-estado="ok"] { color: #166534; }

.premium-module { max-width:1440px; margin:0 auto; }
.premium-module-head { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:23px 25px; margin-bottom:18px; border-radius:16px; color:#fff; background:linear-gradient(118deg,#172033,#283d72); box-shadow:0 14px 28px rgba(31,48,91,.13); }
.premium-module-head h2 { margin:4px 0; color:#fff; font-size:23px; letter-spacing:-.025em; }.premium-module-head p { margin:0; color:#dce6ff; font-size:13px; }.premium-kicker,.premium-card-head span { font-size:10px; font-weight:850; letter-spacing:.12em; color:#b9cbff; }.premium-action { cursor:pointer; padding:10px 14px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); border-radius:9px; font:inherit; font-size:12px; font-weight:800; }.premium-action:hover { background:rgba(255,255,255,.18); }
.premium-work-card { border:1px solid #e2e8f0; border-radius:15px; padding:20px; box-shadow:0 5px 16px rgba(31,46,79,.04); }.premium-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }.premium-card-head span { color:#6d7f9f; }.premium-card-head p { margin:4px 0; color:#738097; font-size:12px; }.premium-grid .chart-card { border-radius:15px; border-color:#e1e7f0; box-shadow:0 4px 15px rgba(31,46,79,.04); }
@media(max-width:700px) { .premium-module-head,.premium-card-head { align-items:flex-start; flex-direction:column; }.premium-action { width:100%; }.premium-work-card { padding:16px; } }

/* Card de estatistica clicavel (kernel/components.js -> atalhoStat). Compacto,
   serve como atalho/notificacao. Reutilizavel por qualquer modulo. */
.stat-atalho { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 13px; background:#fff; border:1px solid #e1e8f2; border-radius:11px; box-shadow:0 2px 7px rgba(25,35,58,.03); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s; }
.stat-atalho:hover { border-color:#9fb6dd; box-shadow:0 5px 14px rgba(25,35,58,.09); transform:translateY(-1px); }
.stat-atalho:focus-visible { outline:2px solid #0b7cff; outline-offset:1px; }
.stat-atalho-icone { flex:none; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-size:18px; background:rgba(0,87,217,.08); color:#0057d9; }
.stat-atalho-corpo { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.stat-atalho-corpo small { font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:800; color:#6b7a99; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-atalho-corpo b { font-size:19px; font-weight:900; color:#111827; margin-top:1px; }
.stat-atalho.alerta .stat-atalho-icone { background:rgba(214,40,40,.1); color:#c62828; }
.stat-atalho.alerta .stat-atalho-corpo b { color:#c62828; }
.stat-atalho.ativo { border-color:#0057d9; box-shadow:0 0 0 1px #0057d9, 0 5px 14px rgba(0,87,217,.14); }
.stat-atalho.ativo .stat-atalho-icone { background:#0057d9; color:#fff; }