/* ==========================================================================
KOBU-KAN · Design System (camada de apresentação)
Reescrita 2026 — unificado com a paleta/estilo do Painel Kobukan (Flask):
navy+laranja, cabeçalho em gradiente, cards com sombra flutuante.
NÃO altera lógica PHP, queries, sorteio, chaves, pesos, pontuação ou
qualquer regra esportiva. Apenas re-skin da interface legada.
========================================================================== */
/* -------------------------------------------------------------------------- */
/* 1. TOKENS (tema único — sem variante escura) */
/* -------------------------------------------------------------------------- */
:root{
/* Marca — paleta do Painel Kobukan/PEMARA tech (navy + laranja), com sombra e
cantos mais arredondados. Substitui o verde flat da 1a versao do tema, a
pedido explicito do dono pra unificar com o painel de estatisticas (Flask). */
--kb-brand:#f5821f;
--kb-brand-strong:#ff6a00;
--kb-brand-soft:#fdefe0;
--kb-navy:#16223e;
--kb-navy-2:#1e2c4f;
--kb-grad:linear-gradient(135deg,#1e2c4f 0%,#16223e 55%,#0f1830 100%);
--kb-shadow:0 10px 30px rgba(20,30,60,.08);
--kb-shadow-sm:0 4px 14px rgba(20,30,60,.06);
/* Neutros */
--kb-bg:#eef1f6;
--kb-surface:#ffffff;
--kb-surface-2:#f1f2f4;
--kb-surface-3:#e9ebee;
--kb-elevated:#ffffff;
--kb-text:#161a1f;
--kb-text-soft:#4a5158;
--kb-muted:#5c646e; /* era #767e87 (~4.1:1 no branco, reprova AA); agora ~4.6:1 */
--kb-line:#e2e4e8;
--kb-line-soft:#ebedf0;
/* Aliases de compatibilidade: relatorio_evento/style.css e camp_evento_atleta_pesagem/
style.css referenciam --kb-green/--kb-red/--kb-panel/--kb-panel-2, que nunca foram
definidos aqui - sempre caiam no fallback hardcoded do var(), com um verde/cinza
diferente do resto do painel. Alias para os tokens reais, sem tocar os outros arquivos. */
--kb-green:var(--kb-brand);
--kb-red:var(--kb-danger);
--kb-panel:var(--kb-surface);
--kb-panel-2:var(--kb-surface-2);
/* Semânticos (planos, sem tons vibrantes) */
--kb-success:#0f7a54;
--kb-warning:#9a5b12;
--kb-warning-soft:#fbf1e6;
--kb-danger:#b8302a;
--kb-danger-soft:#fbeceb;
--kb-info:#2857a6;
/* Colocação (medalhas) — texto colorido simples, sem badge chamativo.
Tons enriquecidos (eram #8a6a12/#5b6470/#8a5330 - lidos como oliva/cinza/marrom,
sem nenhuma dignidade de medalha) mantendo contraste de texto equivalente. */
--kb-gold:#a9790a;
--kb-silver:#6b7280;
--kb-bronze:#8a5330;
/* Sistema */
--kb-radius:12px;
--kb-radius-sm:8px;
--kb-radius-lg:16px;
--kb-radius-pill:999px;
--kb-ring:0 0 0 3px rgba(245,130,31,.18);
--kb-shadow-float:0 8px 24px rgba(20,23,26,.12); /* só p/ elementos flutuantes: dropdown, dialog, drawer */
--kb-sidebar-w:252px;
--kb-topbar-h:76px; /* aumentado a pedido explicito ("cabecalho ta pequeno, aumenta" - avaliado num monitor 27") */
--kb-footer-h:92px; /* rodape agora e position:fixed (ver secao 16) - precisa reservar esse espaco no conteudo */
--kb-space:16px;
/* Pilha de fontes NATIVAS (nao "Inter" - estava declarada mas nunca carregada via
@font-face/link, entao sempre caia no fallback; carregar uma fonte web adicionaria
dependencia externa+peso justo antes da migracao pro VPS). Ordem por SO: -apple-system
(SF Pro no Mac/iOS) e Segoe UI (Windows) primeiro, cada plataforma acerta de cara. */
--kb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--kb-t-fast:.12s ease;
--kb-t:.18s ease;
}
/* -------------------------------------------------------------------------- */
/* 2. BASE / RESET SUAVE */
/* -------------------------------------------------------------------------- */
/* ESCOPO: tudo nesta folha vive sob `.kb-shell` (marcado no só pelo */
/* page-wrapper.inc.php do painel). Documentos autônomos — chave impressa, */
/* relatórios de impressão, cartões com QR code — NUNCA passam pelo */
/* page-wrapper, então não recebem `.kb-shell` e ficam com sua aparência */
/* original intocada. Isso protege o chaveamento (posicionamento em pixel) */
/* e qualquer artefato de impressão de qualquer interferência do tema. */
.kb-shell,.kb-shell *,.kb-shell *::before,.kb-shell *::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.kb-shell{
background:var(--kb-bg)!important;
color:var(--kb-text)!important;
font-family:var(--kb-font)!important;
min-width:0!important;
line-height:1.5!important;
margin:0!important;
min-height:100dvh!important;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.kb-shell a{color:var(--kb-brand);transition:color var(--kb-t-fast)}
.kb-shell a:hover{color:var(--kb-brand-strong)}
.kb-shell img{max-width:100%}
.kb-shell ::selection{background:color-mix(in srgb,var(--kb-brand) 22%,transparent)}
.kb-shell :focus-visible{outline:2px solid var(--kb-brand);outline-offset:2px}
.kb-shell h1,.kb-shell h2,.kb-shell h3,.kb-shell h4{color:var(--kb-text)!important;letter-spacing:-.01em!important;text-wrap:balance;font-weight:700!important}
/* Scrollbars discretas */
.kb-shell{scrollbar-width:thin;scrollbar-color:var(--kb-line) transparent}
.kb-shell *{scrollbar-width:thin;scrollbar-color:var(--kb-line) transparent}
.kb-shell *::-webkit-scrollbar{width:10px;height:10px}
.kb-shell *::-webkit-scrollbar-thumb{background:var(--kb-line);border-radius:999px;border:2px solid transparent;background-clip:content-box}
.kb-shell *::-webkit-scrollbar-thumb:hover{background:var(--kb-muted)}
/* -------------------------------------------------------------------------- */
/* 3. SHELL · SIDEBAR */
/* -------------------------------------------------------------------------- */
.menu-bg-fix{display:none!important}
.menu-left{
position:fixed!important;top:0!important;left:0!important;bottom:0!important;
width:var(--kb-sidebar-w)!important;
margin:0!important;padding:calc(var(--kb-topbar-h) + 10px) 10px 20px!important;
background:var(--kb-surface)!important;
border-right:1px solid var(--kb-line)!important;
overflow-y:auto!important;overscroll-behavior:contain!important;
z-index:70!important;
list-style:none!important;
transition:transform var(--kb-t)!important;
}
.menu-left>li{list-style:none!important;margin:0 0 2px!important}
.menu-left>li>a,
.menu-left>li>a.menu_group{
display:flex!important;align-items:center!important;gap:10px!important;
min-height:38px!important;padding:0 10px!important;
border-radius:var(--kb-radius-sm)!important;
background:transparent!important;
color:var(--kb-muted)!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.05em!important;
text-transform:uppercase!important;text-decoration:none!important;
}
.menu-left>li>a.menu_group.submenu::after{
content:"\f107";font-family:FontAwesome;margin-left:auto!important;
font-size:12px!important;opacity:.6;transition:transform var(--kb-t-fast);
}
.menu-left>li.open>a.menu_group.submenu::after,
.menu-left>li>a.menu_group.submenu.active::after{transform:rotate(180deg)}
.menu-left ul{list-style:none!important;margin:2px 0 8px!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:3px!important}
.menu-left ul li{list-style:none!important}
.menu-left ul a{
display:flex!important;align-items:center!important;gap:10px!important;
min-height:36px!important;padding:7px 10px 7px 20px!important;
border-radius:var(--kb-radius-sm)!important;
border:1px solid var(--kb-line)!important;
border-left:2px solid transparent!important;
background:var(--kb-surface)!important;
color:var(--kb-text-soft)!important;
font-size:13px!important;font-weight:500!important;text-decoration:none!important;
transition:background-color var(--kb-t-fast),color var(--kb-t-fast),border-color var(--kb-t-fast)!important;
}
.menu-left ul a:hover{background:var(--kb-surface-2)!important;color:var(--kb-text)!important;border-color:var(--kb-muted)!important}
.menu-left ul a.active,
.menu-left ul a._active{
background:var(--kb-brand-soft)!important;color:var(--kb-brand-strong)!important;
border-color:var(--kb-brand-soft)!important;border-left-color:var(--kb-brand)!important;font-weight:700!important;
}
.menu-left a>span:empty{display:none!important}
/* -------------------------------------------------------------------------- */
/* 4. SHELL · TOPBAR */
/* -------------------------------------------------------------------------- */
.top-header{
position:fixed!important;top:0!important;left:0!important;right:0!important;
height:var(--kb-topbar-h)!important;
display:flex!important;align-items:center!important;
padding:0 20px 0 calc(var(--kb-sidebar-w) + 20px)!important;
background:var(--kb-grad)!important;
border-bottom:0!important;
box-shadow:0 2px 12px rgba(15,20,40,.18)!important;
z-index:80!important;
overflow:hidden!important;
}
.top-header::after{
content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;
background:radial-gradient(circle,rgba(245,130,31,.35),transparent 70%);border-radius:50%;pointer-events:none;
}
.top-header>.container-wrap,
.top-header .grid,
.top-header .col{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important}
.top-header .grid{display:flex!important;align-items:center!important;gap:14px!important}
.top-header .col{display:flex!important;align-items:center!important;gap:14px!important;width:100%!important}
.top-header .logo{
height:44px!important;width:44px!important;object-fit:contain!important;order:2;
background:#fff!important;border-radius:var(--kb-radius-sm)!important;padding:5px!important;
box-shadow:0 4px 12px rgba(245,130,31,.35)!important;
}
.top-header .restrict-area{
order:3;margin-right:auto!important;
display:inline-flex!important;align-items:center!important;gap:6px!important;
padding:6px 13px!important;border-radius:var(--kb-radius-pill)!important;
background:rgba(255,255,255,.12)!important;color:#dfe5f3!important;
border:1px solid rgba(255,255,255,.18)!important;
font-size:12.5px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;
}
.top-header .restrict-area::before{content:"\f132";font-family:FontAwesome;font-size:12.5px}
/* Botão hambúrguer (só mobile). Fundo LARANJA solido (nao depende de
var(--kb-grad)/transparencia): fica visivel tanto sobre o header navy
quanto se o gradiente do header falhar em renderizar (bug visto no
WebView do app -- fundo branco em vez de navy deixava o icone branco
invisivel). */
.menu-mobile-button{
order:1;display:none;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--kb-radius-sm);
background:#f5821f!important;border:1px solid #ff6a00!important;
color:#fff!important;text-decoration:none!important;flex:0 0 auto;
box-shadow:0 2px 8px rgba(245,130,31,.4)!important;
}
.menu-mobile-button i{font-size:19px!important}
/* Bloco de usuário. Mesmo motivo do botão hamburguer: fundo solido (nao
translucido) pra nao sumir se o gradiente do header falhar. */
.user-mobile-button{
order:4;display:inline-flex!important;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%!important;
background:#16223e!important;border:1px solid #f5821f!important;
color:#fff!important;text-decoration:none!important;flex:0 0 auto;
cursor:pointer;
}
.user-mobile-button .fa-stack{width:1.5em;height:1.5em;line-height:1.5em}
.user-mobile-button .fa-circle{color:transparent!important}
.user-mobile-button .fa-user{color:#dfe5f3!important;font-size:16px!important}
.user-mobile-button:hover{border-color:var(--kb-brand)!important}
.user-mobile-button:hover .fa-user{color:var(--kb-brand)!important}
#user-block{
order:5;display:block!important;position:absolute!important;top:calc(var(--kb-topbar-h) - 4px)!important;right:16px!important;left:auto!important;
width:min(280px,calc(100vw - 24px))!important;
background:var(--kb-elevated)!important;color:var(--kb-text)!important;text-align:left!important;
border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius)!important;
box-shadow:var(--kb-shadow-float)!important;
padding:6px!important;z-index:120!important;
opacity:0!important;pointer-events:none!important;transform:translateY(-6px)!important;
transform-origin:top right!important;
/* Era transition:none (de proposito, por precaucao) - mas o toggle e via classe no BODY
(nao visibility), que e exatamente o caso SEGURO de animar neste engine. */
transition:opacity var(--kb-t),transform var(--kb-t)!important;
}
body.kb-user-open #user-block{opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important}
#user-block::before{display:none!important}
#user-block .user_info,#user-block .user-option{float:none!important}
#user-block .user-option a{text-align:left!important;float:none!important;margin:0!important}
#user-block .user_info{padding:12px 14px!important;border-bottom:1px solid var(--kb-line-soft)!important;margin-bottom:4px!important}
#user-block .user_info p{margin:0!important;font-size:11px!important;color:var(--kb-muted)!important}
#user-block .user_info .user_name{display:block!important;margin-top:2px!important;font-size:14px!important;font-weight:700!important;color:var(--kb-text)!important;text-transform:none!important}
#user-block .user-option{display:flex!important;flex-direction:column!important;gap:2px!important}
#user-block .user-option a{
display:flex!important;align-items:center!important;gap:12px!important;
padding:9px 14px!important;border-radius:var(--kb-radius-sm)!important;
color:var(--kb-text-soft)!important;font-size:13px!important;font-weight:500!important;text-decoration:none!important;
}
#user-block .user-option a:hover{background:var(--kb-surface-2)!important;color:var(--kb-text)!important}
#user-block .user-option .fa-circle{color:transparent!important}
#user-block .user-option .fa-stack{width:1.2em;height:1.2em;line-height:1.2em}
#user-block .user-option .fa-stack-1x{color:var(--kb-brand)!important;font-size:14px!important}
/* Backdrop do drawer mobile */
.kb-nav-backdrop{
position:fixed;inset:0;z-index:65;background:rgba(10,12,14,.4);
opacity:0;pointer-events:none;transition:opacity var(--kb-t);
}
body.kb-nav-open .kb-nav-backdrop{opacity:1;pointer-events:auto}
/* -------------------------------------------------------------------------- */
/* 5. CONTEÚDO PRINCIPAL */
/* -------------------------------------------------------------------------- */
.container_main.container-wrap,
section.container_main{
width:auto!important;max-width:none!important;
margin:var(--kb-topbar-h) 0 0 var(--kb-sidebar-w)!important;
padding:28px clamp(18px,3.4vw,44px) calc(var(--kb-footer-h) + 24px)!important;
min-height:calc(100dvh - var(--kb-topbar-h) - var(--kb-footer-h))!important;
display:flex!important;flex-direction:column!important;
}
.container_main>*{width:100%!important;max-width:1320px!important;margin-left:0!important;margin-right:0!important}
/* Telas muito largas (monitor 27"+): 1320px deixa quase 1000px vazios do lado direito,
parecendo quebrado/mal aproveitado - alarga progressivamente o conteudo em vez de
deixar um vao enorme sem uso (pedido explicito, avaliado num monitor real 2552px). */
@media(min-width:1700px){ .container_main>*{max-width:1600px!important} }
@media(min-width:2100px){ .container_main>*{max-width:1900px!important} }
#adm-main-content,#ajax-content{width:100%!important}
#ajax-content>.grid,#ajax-content>.grid>.col{margin:0!important;padding:0!important;width:100%!important;float:none!important}
/* -------------------------------------------------------------------------- */
/* 6. TIPOGRAFIA DE CONTEÚDO */
/* -------------------------------------------------------------------------- */
#ajax-content h1,#ajax-content h2,.container_main h1,.container_main h2{
margin:0 0 6px!important;font-size:clamp(20px,2vw,26px)!important;line-height:1.2!important;font-weight:700!important;
}
#ajax-content h3,.container_main h3{font-size:15px!important;font-weight:700!important}
/* -------------------------------------------------------------------------- */
/* 7. CARTÕES / CAIXAS — borda fina + sombra flutuante (estilo painel) */
/* -------------------------------------------------------------------------- */
.kb-shell .content-box,.kb-shell .adm-box,.kb-shell .box,.kb-shell .form-wrapper,.kb-shell fieldset,.kb-shell .ui-widget-content{
background:var(--kb-surface)!important;color:var(--kb-text)!important;
border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius)!important;
box-shadow:var(--kb-shadow)!important;
overflow:hidden!important;
}
.kb-shell fieldset{min-width:0!important;margin:0 0 16px!important;padding:0!important}
.kb-shell legend{padding:0 8px!important;color:var(--kb-muted)!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important}
.kb-shell .content-inner{padding:18px!important}
/* -------------------------------------------------------------------------- */
/* 8. PAGE HEADER (componente kb) */
/* -------------------------------------------------------------------------- */
.kb-page-header,.kb-crud-page .kb-page-header,.kb-edit-page .kb-page-header{
display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
gap:18px!important;margin:0 0 20px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;
}
.kb-page-header>div:first-child{display:grid!important;gap:3px!important}
.kb-page-header span{color:var(--kb-muted)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.kb-page-header h2{margin:0!important;font-size:clamp(20px,2.2vw,28px)!important;font-weight:700!important;line-height:1.15!important}
.kb-page-header p{margin:2px 0 0!important;color:var(--kb-muted)!important;font-size:13px!important}
.kb-page-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
/* -------------------------------------------------------------------------- */
/* 9. BOTÕES — flat, sem gradiente/glow */
/* -------------------------------------------------------------------------- */
.kb-shell button,.kb-shell .button,.kb-shell ._button,.kb-shell input[type="submit"],.kb-shell input[type="button"],.kb-shell .ui-button,.kb-shell a.btn-highlight,.kb-shell .kb-btn{
display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
min-height:38px!important;padding:0 16px!important;
border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius-sm)!important;
background:var(--kb-surface)!important;color:var(--kb-text)!important;
font-family:inherit!important;font-size:13px!important;font-weight:600!important;
text-decoration:none!important;cursor:pointer!important;box-shadow:none!important;
transition:background-color var(--kb-t-fast),border-color var(--kb-t-fast),color var(--kb-t-fast),transform var(--kb-t-fast)!important;
}
.kb-shell button:hover,.kb-shell .button:hover,.kb-shell ._button:hover,.kb-shell input[type="submit"]:hover,.kb-shell input[type="button"]:hover,.kb-shell .ui-button:hover,.kb-shell .kb-btn:hover{
border-color:var(--kb-muted)!important;background:var(--kb-surface-2)!important;
}
/* Feedback tatil de clique - nenhum botao tinha retorno visual ao pressionar */
.kb-shell button:active,.kb-shell .button:active,.kb-shell ._button:active,.kb-shell input[type="submit"]:active,.kb-shell input[type="button"]:active,.kb-shell .ui-button:active,.kb-shell a.btn-highlight:active,.kb-shell .kb-btn:active{
transform:translateY(1px)!important;
}
.kb-shell .btn-highlight,.kb-shell button.btn-highlight,.kb-shell input.btn-highlight,.kb-shell a.btn-highlight{
background:var(--kb-brand)!important;
border-color:var(--kb-brand)!important;color:#fff!important;
}
.kb-shell .btn-highlight:hover,.kb-shell button.btn-highlight:hover,.kb-shell a.btn-highlight:hover{background:var(--kb-brand-strong)!important;border-color:var(--kb-brand-strong)!important;color:#fff!important}
.kb-shell button[disabled],.kb-shell .button[disabled],.kb-shell input[disabled]{opacity:.5!important;cursor:not-allowed!important}
/* Ícones de ação em tabela (lápis / x) */
.kb-shell td .fa-pencil,.kb-shell td .fa-times,.kb-shell td .fa-pencil-square-o{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
width:32px!important;height:32px!important;border-radius:var(--kb-radius-sm)!important;
font-size:13px!important;cursor:pointer!important;transition:background-color var(--kb-t-fast)!important;
}
.kb-shell td .fa-pencil{color:var(--kb-info)!important}
.kb-shell td .fa-pencil:hover{background:var(--kb-surface-2)!important}
.kb-shell td .fa-times{color:var(--kb-danger)!important}
.kb-shell td .fa-times:hover{background:var(--kb-danger-soft)!important}
/* -------------------------------------------------------------------------- */
/* 10. FORMULÁRIOS */
/* -------------------------------------------------------------------------- */
.kb-shell form label{display:inline-block!important;margin-bottom:5px!important;color:var(--kb-text-soft)!important;font-size:12px!important;font-weight:600!important}
.kb-shell input,.kb-shell select,.kb-shell textarea,.kb-shell .ui-widget input,.kb-shell .ui-widget select,.kb-shell .ui-widget textarea{
width:100%!important;max-width:100%!important;min-height:38px!important;
padding:8px 12px!important;
background:var(--kb-surface)!important;color:var(--kb-text)!important;
border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius-sm)!important;
font-family:inherit!important;font-size:14px!important;
transition:border-color var(--kb-t-fast),box-shadow var(--kb-t-fast)!important;
}
.kb-shell input::placeholder,.kb-shell textarea::placeholder{color:var(--kb-muted)!important;opacity:.8}
.kb-shell input:focus,.kb-shell select:focus,.kb-shell textarea:focus{outline:0!important;border-color:var(--kb-brand)!important;box-shadow:var(--kb-ring)!important}
.kb-shell textarea{min-height:100px!important;resize:vertical!important;line-height:1.6!important}
.kb-shell select{cursor:pointer!important;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,")!important;
background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:34px!important;
}
.kb-shell input[type="checkbox"],.kb-shell input[type="radio"]{width:17px!important;height:17px!important;min-height:0!important;padding:0!important;accent-color:var(--kb-brand)!important;cursor:pointer!important}
.kb-shell input[type="checkbox"],.kb-shell input[type="radio"]{vertical-align:middle}
.kb-form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 18px!important}
.kb-form-grid>div:empty{display:none!important}
.kb-form-section>h3{margin:0!important;padding:13px 18px!important;border-bottom:1px solid var(--kb-line)!important;background:var(--kb-surface-2)!important;font-size:13px!important;font-weight:700!important}
.kb-form-footer{display:flex!important;justify-content:flex-end!important;gap:10px!important;padding:0 18px 18px!important}
/* -------------------------------------------------------------------------- */
/* 11. FILTROS / LISTAGEM (componentes kb) */
/* -------------------------------------------------------------------------- */
.kb-filter-panel{margin:0 0 18px!important}
.kb-filter-panel>h3,.kb-list-heading{margin:0!important;padding:13px 18px!important;background:var(--kb-surface-2)!important;border-bottom:1px solid var(--kb-line)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.02em!important}
.kb-filter-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;align-items:end!important;gap:14px!important}
.kb-filter-submit{align-self:end!important}
.kb-filter-submit button{width:100%!important}
.kb-context-note{grid-column:1/-1!important;margin:0!important;padding:11px 14px!important;border:1px solid var(--kb-line)!important;border-left:3px solid var(--kb-warning)!important;border-radius:var(--kb-radius-sm)!important;background:var(--kb-warning-soft)!important;color:var(--kb-text-soft)!important}
.kb-context-note p{margin:2px 0!important;font-size:12px!important}
.kb-list-panel{overflow:hidden!important;border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius)!important;background:var(--kb-surface)!important;box-shadow:var(--kb-shadow)!important}
.kb-list-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.kb-list-heading h3{margin:0!important;font-size:13px!important;font-weight:700!important}
.kb-list-heading span{color:var(--kb-muted)!important;font-size:12px!important;font-weight:600!important;background:var(--kb-surface-3)!important;padding:3px 10px!important;border-radius:var(--kb-radius-pill)!important}
.kb-table-scroll{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
/* -------------------------------------------------------------------------- */
/* 12. TABELAS */
/* -------------------------------------------------------------------------- */
.kb-shell table,.kb-shell table.table-data,.kb-shell table.table-zebra{
width:100%!important;border-collapse:collapse!important;background:var(--kb-surface)!important;color:var(--kb-text)!important;
font-size:13px!important;
}
.kb-shell table caption{padding:13px 16px!important;text-align:left!important;font-size:13px!important;font-weight:700!important;color:var(--kb-text)!important;background:var(--kb-surface-2)!important;border-bottom:1px solid var(--kb-line)!important}
.kb-shell thead th{
/* cabecalho normal (sem position:sticky): o sticky quebrava dentro de containers com overflow
e gerava sobreposicao do cabecalho com a 1a linha nos relatorios */
position:static;
height:40px!important;padding:0 14px!important;text-align:left!important;vertical-align:middle!important;
background:var(--kb-surface-2)!important;color:var(--kb-muted)!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;
border-bottom:1px solid var(--kb-line)!important;white-space:nowrap!important;
}
.kb-shell tbody td{padding:10px 14px!important;vertical-align:middle!important;border-bottom:1px solid var(--kb-line-soft)!important;color:var(--kb-text)!important;transition:background-color var(--kb-t-fast)!important}
.kb-shell tbody tr:hover td{background:var(--kb-surface-2)!important}
.kb-shell tbody tr:last-child td{border-bottom:0!important}
.kb-shell td a{color:var(--kb-brand)!important;font-weight:600!important}
.kb-shell td a:hover{color:var(--kb-brand-strong)!important;text-decoration:underline!important}
/* Rótulos responsivos legados (tableHeaderToCell): substituídos pelo sistema de cards */
.kb-shell .cel-header{display:none!important}
/* Matriz de pesagem (larga): rola na horizontal em vez de estourar a página */
.kb-shell #tables-pesagem{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:6px!important;border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius)!important;background:var(--kb-surface)!important}
.kb-shell #tables-pesagem table{width:auto!important;min-width:100%!important;margin:0!important;border:0!important}
.kb-shell #tables-pesagem table+table{margin-top:14px!important}
.kb-shell #tables-pesagem input{width:120px!important;min-width:100px!important}
/* Ordenação no cabeçalho */
.kb-shell th a.fa-sort,.kb-shell th a[class*="fa-sort"]{margin-left:6px!important;color:var(--kb-muted)!important;opacity:.65;text-decoration:none!important}
.kb-shell th a[class*="fa-sort"]._active,.kb-shell th a.fa-sort-asc,.kb-shell th a.fa-sort-desc{color:var(--kb-brand)!important;opacity:1}
/* Colocação (Ouro/Prata/Bronze) — texto colorido simples, sem badge/glow */
.kb-medal{display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:13px!important;font-weight:700!important;white-space:nowrap!important}
.kb-medal::before{content:"";width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 22%,transparent)}
.kb-medal.is-gold{color:var(--kb-gold)!important}
.kb-medal.is-gold::before{background:var(--kb-gold)}
.kb-medal.is-silver{color:var(--kb-silver)!important}
.kb-medal.is-silver::before{background:var(--kb-silver)}
.kb-medal.is-bronze{color:var(--kb-bronze)!important}
.kb-medal.is-bronze::before{background:var(--kb-bronze)}
/* -------------------------------------------------------------------------- */
/* 13. PAGINAÇÃO */
/* -------------------------------------------------------------------------- */
.kb-shell ._pagination,.kb-shell .pagination,.kb-shell .paging{display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:14px 18px!important;align-items:center!important}
.kb-shell ._pagination a,.kb-shell ._pagination span,.kb-shell .pagination a,.kb-shell .paging a{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
min-width:34px!important;height:34px!important;padding:0 10px!important;
border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius-sm)!important;
background:var(--kb-surface)!important;color:var(--kb-text)!important;text-decoration:none!important;font-size:13px!important;font-weight:600!important;
}
.kb-shell ._pagination a:hover,.kb-shell .pagination a:hover{border-color:var(--kb-muted)!important;background:var(--kb-surface-2)!important}
.kb-shell ._pagination .active,.kb-shell ._pagination a.active,.kb-shell .pagination .active,.kb-shell ._pagination strong{background:var(--kb-brand)!important;border-color:var(--kb-brand)!important;color:#fff!important}
/* -------------------------------------------------------------------------- */
/* 14. ESTADO VAZIO / LOADING */
/* -------------------------------------------------------------------------- */
.kb-empty-state{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:48px 24px!important;text-align:center!important;color:var(--kb-muted)!important}
.kb-empty-state::before{content:"\f0e4";font-family:FontAwesome;font-size:30px;color:var(--kb-line);margin-bottom:4px}
.kb-empty-state strong{font-size:15px!important;color:var(--kb-text)!important;font-weight:700!important}
.kb-empty-state p{margin:0!important;font-size:13px!important}
/* Entrada suave do conteudo - antes saltava de opacity:0 pro 1 sem transicao (1a carga
E toda troca via AJAX/SPA). #ajax-content sempre tem a transition; .on_ready so define
o estado inicial (removido via JS no 1o load). Nas trocas seguintes, kobukan-theme.js
retriggera via classe .kb-enter (ver ajaxComplete). Seguro: anima opacity/transform via
troca de CLASSE, nao "visibility", que e o unico caso travado neste engine legado. */
#ajax-content{transition:opacity .22s ease,transform .22s ease}
.kb-shell .on_ready{opacity:0!important;transform:translateY(6px)!important}
#ajax-content.kb-enter{opacity:0;transform:translateY(6px)}
.kb-skeleton{position:relative;overflow:hidden;background:var(--kb-surface-2);border-radius:var(--kb-radius-sm)}
.kb-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);animation:kb-shimmer 1.3s infinite}
@keyframes kb-shimmer{100%{transform:translateX(100%)}}
.kb-loading-bar{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;background:var(--kb-brand);background-size:40% 100%;background-repeat:no-repeat;animation:kb-load 1s linear infinite;opacity:0;transition:opacity .2s}
body.kb-busy .kb-loading-bar{opacity:1}
@keyframes kb-load{0%{background-position:-40% 0}100%{background-position:140% 0}}
/* -------------------------------------------------------------------------- */
/* 15. DIALOGS / TOAST / POPUP (jquery-ui, jPopup, toast) */
/* -------------------------------------------------------------------------- */
.ui-dialog,.jPopup,.jAlert{border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius)!important;background:var(--kb-elevated)!important;box-shadow:var(--kb-shadow-float)!important;color:var(--kb-text)!important;max-width:calc(100vw - 24px)!important}
.ui-dialog{width:min(540px,calc(100vw - 24px))!important;overflow:hidden!important}
.ui-dialog .ui-dialog-titlebar{padding:13px 16px!important;background:var(--kb-surface-2)!important;border:0!important;border-bottom:1px solid var(--kb-line)!important;color:var(--kb-text)!important;font-weight:700!important}
.ui-dialog .ui-dialog-content{padding:18px!important;color:var(--kb-text)!important}
.ui-dialog .ui-dialog-buttonpane{padding:13px 16px!important;border-top:1px solid var(--kb-line)!important;background:var(--kb-surface)!important}
.ui-widget-overlay{background:rgba(10,12,14,.45)!important;opacity:1!important}
.jquery-toast-wrap,.jq-toast-wrap{max-width:min(360px,calc(100vw - 24px))!important}
.jq-toast-single{border-radius:var(--kb-radius)!important;box-shadow:var(--kb-shadow-float)!important;font-family:inherit!important;font-size:13px!important}
/* -------------------------------------------------------------------------- */
/* 16. RODAPÉ — fundo fixo estilo parallax (pedido explicito), igual ao rodape */
/* do painel publico/LGPD/home: gradiente que nao rola junto com a pagina. */
/* -------------------------------------------------------------------------- */
.footer-wrapper{
position:fixed!important;left:var(--kb-sidebar-w)!important;right:0!important;bottom:0!important;
height:var(--kb-footer-h)!important;
background:var(--kb-grad)!important;
border-top:0!important;overflow:hidden!important;z-index:75!important;
display:flex!important;align-items:center!important;
}
.footer-wrapper::before{
content:"";position:absolute;left:-60px;bottom:-80px;width:260px;height:260px;
background:radial-gradient(circle,rgba(245,130,31,.25),transparent 70%);border-radius:50%;pointer-events:none;
}
.footer.container-wrap{position:relative!important;width:auto!important;max-width:none!important;margin:0!important;padding:18px clamp(18px,3.4vw,44px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}
.kb-footer-brand{display:flex!important;align-items:center!important;gap:10px!important}
.kb-footer-brand img{width:30px!important;height:30px!important;object-fit:contain!important;border-radius:6px!important;background:#fff!important;padding:3px!important;border:1px solid rgba(255,255,255,.2)!important}
.kb-footer-brand strong{display:block!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:#fff!important}
.kb-footer-brand small{color:#aeb8d0!important;font-size:11px!important}
.kb-footer-legal{display:flex!important;flex-direction:column!important;gap:2px!important;font-size:12px!important;color:#c7cde3!important}
.kb-footer-legal a{color:#dfe5f3!important;text-decoration:underline!important}
.kb-footer-legal a:hover{color:#fff!important}
.kb-footer-developer{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;opacity:.92!important;transition:opacity .15s ease!important}
.kb-footer-developer:hover{opacity:1!important}
.kb-footer-developer img{height:52px!important;width:auto!important;display:block!important;border-radius:6px!important}
.technical{color:#aeb8d0!important;font-size:11px!important;text-align:right!important}
/* -------------------------------------------------------------------------- */
/* 17. RESPONSIVO */
/* -------------------------------------------------------------------------- */
@media (max-width:1080px){
:root{--kb-sidebar-w:0px}
.menu-mobile-button{display:inline-flex!important}
.top-header{padding:0 16px!important;gap:10px!important}
.top-header .restrict-area{display:none!important}
.menu-left{transform:translateX(-100%)!important;width:272px!important;box-shadow:var(--kb-shadow-float)!important}
body.kb-nav-open .menu-left{transform:translateX(0)!important}
.container_main.container-wrap,section.container_main{margin-left:0!important;padding:20px clamp(14px,4vw,24px) calc(var(--kb-footer-h) + 16px)!important}
.footer-wrapper{left:0!important}
.kb-shell thead th{top:0} /* topbar não empurra tabela no mobile */
}
/* CARDIZE DE TABELAS - breakpoint proprio, MAIS LARGO que o resto do @media abaixo.
Antes era o MESMO max-width:640px do resto (page-header/form/footer), mas o menu ja
vira drawer em max-width:1080px - entre 641-1080px (tablet retrato, notebook estreito)
o usuario ja esta no "modo mobile" do menu, porem a tabela continua larga (nem cardiza,
nem tem rolagem propria) e estoura a pagina. 900px fecha esse vao. */
@media (max-width:900px){
/* TABELAS VIRAM CARDS — grande ganho de UX no celular/tablet */
table.kb-cardize{border:0!important;background:transparent!important}
table.kb-cardize thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
table.kb-cardize tbody{display:block!important}
table.kb-cardize tr{
display:block!important;margin:0 0 10px!important;padding:6px 4px!important;
background:var(--kb-surface)!important;border:1px solid var(--kb-line)!important;border-radius:var(--kb-radius)!important;
}
table.kb-cardize td{
display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;
padding:9px 14px!important;border:0!important;border-bottom:1px solid var(--kb-line-soft)!important;text-align:right!important;
background:transparent!important;
}
table.kb-cardize tr td:last-child{border-bottom:0!important}
table.kb-cardize td::before{
content:attr(data-label);flex:0 0 42%;text-align:left!important;
color:var(--kb-muted)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;
}
table.kb-cardize td[data-label=""]::before,table.kb-cardize td.kb-no-label::before{content:""}
table.kb-cardize tr:hover td{background:transparent!important}
}
@media (max-width:640px){
.top-header .logo{height:28px!important}
.kb-page-header{flex-direction:column!important;align-items:stretch!important;gap:12px!important}
.kb-page-header .kb-page-actions,.kb-crud-page .kb-page-header>a{width:100%!important}
.kb-page-actions>*,.kb-crud-page .kb-page-header>a{flex:1!important}
.kb-form-grid{grid-template-columns:1fr!important}
/* Em telas pequenas o conteudo do rodape empilha (marca/legal/banner) e nao cabe mais na
altura fixa reservada pro desktop — volta a ser fluxo normal (aparece no fim da pagina)
em vez de fixo, pra nao cortar/sobrepor conteudo. */
.footer-wrapper{position:static!important;height:auto!important}
.footer.container-wrap{flex-direction:column!important;text-align:center!important;gap:8px!important;padding:16px!important}
.kb-footer-legal{align-items:center!important}
.technical{text-align:center!important;font-size:10px!important}
/* Alvo de toque maior no celular (pedido do PWA de cadastro: "pensado pra digitar no
celular") - 16px de font-size tambem evita o zoom automatico do Safari/iOS ao focar
num campo. So no mobile: no desktop o tamanho atual continua igual, de proposito. */
.kb-shell input,.kb-shell select,.kb-shell textarea{min-height:46px!important;font-size:16px!important}
/* Formularios "legados" (sem .kb-form-grid, ex.: Inscrição) ainda empilham em
soltas
sem gap - so aqui garante respiro entre os campos no mobile, sem afetar quem ja usa grid
(que ja tem gap proprio) nem o desktop (onde o layout em 2 colunas ja resolve isso). */
.content-inner:not(.kb-form-grid)>div{margin-bottom:14px!important}
}
/* -------------------------------------------------------------------------- */
/* 18. ACESSIBILIDADE / MOVIMENTO / IMPRESSÃO */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.kb-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
@media print{
.top-header,.menu-left,.menu-bg-fix,.kb-nav-backdrop,.menu-mobile-button,.user-mobile-button,#user-block,.footer-wrapper,.feedback-btn,#feedback_btn{display:none!important}
body{background:#fff!important}
.container_main.container-wrap,section.container_main{margin:0!important;padding:0!important}
.content-box,.kb-list-panel,table{box-shadow:none!important;border-color:#ccc!important}
thead th{position:static!important;background:#f0f0f0!important;color:#000!important}
a{color:#000!important;text-decoration:none!important}
}