/* =========================================================================
   ui-kit.css — Fase 1 de melhoria do frontend (rotas, navegação, Fila, ficha)
   Carregado DEPOIS do <style> principal de index.html — só acrescenta e afina,
   sempre a partir dos mesmos tokens (--ink, --surface, --border, …), por isso
   herda sozinho o tema claro/escuro. Nenhuma cor literal fora dos tokens.
   ========================================================================= */

:root{
  --topbar-h:58px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --z-menu:70; --z-drawer:60; --z-modal:90;
}

/* Um <button> nunca herda a cor do texto (só a família de letra) — sem isto,
   qualquer botão sem variante fica com a cor por omissão do browser (preto),
   ilegível em fundo escuro. As variantes (.btn-primary, …) continuam a
   definir a sua própria cor, por serem mais específicas. */
button{color:var(--ink);}
button:disabled{cursor:not-allowed;}

/* Campos url/search sem estilo no CSS base (ficavam pequenos e com fundo claro
   no tema escuro) — mesmo aspeto dos restantes campos. */
input[type=url], input[type=search]{
  font:inherit; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;
}

/* ---------- Acessibilidade ---------- */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:100; background:var(--surface); color:var(--ink);
  border:2px solid var(--green); border-radius:8px; padding:8px 14px; font-weight:700; font-size:.85rem; text-decoration:none;
}
.skip-link:focus{top:8px;}
[role=tab]:focus-visible, .nav button:focus-visible, .tabbar button:focus-visible,
.chip button:focus-visible, .menu-acoes-painel button:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
body.no-scroll{overflow:hidden;}

/* ---------- Botões: primário, secundário, perigo, bloqueado, ação em massa ---------- */
.btn-secondary{background:var(--surface-2); border-color:var(--border); color:var(--ink);}
.btn-secondary:hover{background:var(--border);}
.btn-danger:hover{background:var(--red-soft);}
.btn-danger-solid{background:var(--red); border-color:var(--red); color:var(--on-accent);}
.btn-danger-solid:hover{filter:brightness(.92);}
.btn-blocked, .btn[aria-disabled=true]{opacity:.55; cursor:not-allowed; border-style:dashed;}
.btn-bulk{background:var(--blue-soft); border-color:var(--blue); color:var(--blue);}
.btn-bulk:hover{filter:brightness(.96);}
.bulk-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; margin-bottom:12px;
  background:var(--blue-soft); border:1px solid var(--blue); border-radius:var(--radius); color:var(--ink); font-size:.86rem; font-weight:600;
}

/* ---------- Estados: carregamento, sucesso, vazio, erro ---------- */
.state-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:36px 20px; color:var(--muted); border:1px dashed var(--border); border-radius:var(--radius); background:var(--surface);
}
.state-box .ic{font-size:1.9rem; line-height:1;}
.state-box strong{color:var(--ink);}
.state-box.state-erro{border-color:var(--red); background:var(--red-soft); color:var(--ink);}
.state-box.state-sucesso{border-color:var(--green); background:var(--green-soft); color:var(--ink);}
.spinner{
  width:26px; height:26px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--green);
  animation:ui-spin .8s linear infinite;
}
@keyframes ui-spin{to{transform:rotate(360deg);}}

/* ---------- Chips de filtros ativos ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 0;}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 12px; border-radius:100px;
  background:var(--green-soft); color:var(--green-deep); font-size:.8rem; font-weight:700; border:1px solid var(--border); max-width:100%;
}
.chip span{overflow-wrap:anywhere;}
.chip button{
  border:none; background:var(--surface); color:var(--ink); width:22px; height:22px; border-radius:50%; cursor:pointer;
  font-size:.8rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chip button:hover{background:var(--red-soft); color:var(--red);}
.chip-limpar{border:none; background:none; color:var(--muted); font-weight:700; font-size:.8rem; cursor:pointer; text-decoration:underline; padding:4px 6px;}
.chip-limpar:hover{color:var(--ink);}

/* ---------- Fila de inscrições ---------- */
.fila-toolbar{display:grid; grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(150px,1fr) auto; gap:12px; align-items:end;}
.fila-toolbar .busca{display:flex; gap:8px;}
.fila-toolbar .busca input{flex:1; min-width:0;}
.mais-filtros{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);}
@media (max-width:900px){ .fila-toolbar{grid-template-columns:1fr 1fr;} .fila-toolbar .busca-campo{grid-column:1/-1;} .fila-toolbar .btn-mais{grid-column:1/-1;} }
@media (max-width:340px){ .fila-toolbar{grid-template-columns:1fr;} }

/* Tabela com cabeçalho fixo dentro do seu próprio contentor de scroll (o
   .main não é um scroller real, por isso "position:sticky" ao viewport não
   funcionaria) — só há scroll vertical, nunca horizontal. */
.twrap-sticky{max-height:min(72vh,780px); overflow:auto; overflow-x:hidden;}
.twrap-sticky thead th{position:sticky; top:0; z-index:2; background:var(--surface-2); box-shadow:0 1px 0 var(--border);}

.tbl-fila table{table-layout:auto; width:100%;}
.tbl-fila th, .tbl-fila td{white-space:normal; overflow-wrap:anywhere; vertical-align:middle;}
.tbl-fila th.col-ref, .tbl-fila td.col-ref{width:1%; white-space:nowrap;}
.tbl-fila th.col-estado, .tbl-fila td.col-estado{width:1%; white-space:nowrap;}
.tbl-fila th.col-acoes, .tbl-fila td.col-acoes{width:1%; white-space:nowrap; text-align:right;}
.tbl-fila th.col-acoes{text-align:right;}
.tbl-fila tr.fila-linha{cursor:pointer;}
.tbl-fila .sub{display:block; color:var(--muted); font-size:.76rem; font-weight:500; margin-top:1px;}
.tbl-fila .flags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.tbl-fila .btn-toggle{padding:2px 8px; font-size:.9rem; line-height:1.2;}
.tbl-fila tr.fila-detalhe:hover{background:var(--surface);}
.tbl-fila tr.fila-detalhe td{cursor:default; background:var(--surface-2);}
.detalhe-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 18px; font-size:.84rem;}
.detalhe-grid .k{display:block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
.acoes-cell{display:inline-flex; gap:6px; align-items:center; justify-content:flex-end;}

@media (max-width:1020px){
  .tbl-fila thead{display:none;}
  .tbl-fila table, .tbl-fila tbody{display:block; width:100%;}
  .tbl-fila tr.fila-linha{
    display:grid; grid-template-columns:1fr auto; grid-template-areas:"ref estado" "atleta atleta" "acoes acoes";
    gap:6px 10px; padding:12px; border-bottom:1px solid var(--border);
  }
  .tbl-fila td{display:block; border:none; padding:0; width:auto;}
  .tbl-fila td.col-toggle{display:none;}
  .tbl-fila td.col-ref{grid-area:ref;}
  .tbl-fila td.col-atleta{grid-area:atleta;}
  .tbl-fila td.col-estado{grid-area:estado; text-align:right;}
  .tbl-fila td.col-acoes{grid-area:acoes; text-align:left;}
  .tbl-fila .acoes-cell{justify-content:flex-start;}
  .tbl-fila tr.fila-detalhe{display:block; padding:12px; background:var(--surface-2); border-bottom:1px solid var(--border);}
  .tbl-fila tr.fila-detalhe td{display:block; padding:0;}
}

/* ---------- Menu de ações (painel flutuante — nunca alarga nem parte a tabela) ---------- */
.menu-acoes-painel{
  position:fixed; z-index:var(--z-menu); min-width:210px; max-width:min(92vw,300px); padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
}
.menu-acoes-painel button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 12px; border:none; background:none;
  border-radius:8px; color:var(--ink); font-weight:600; font-size:.85rem; cursor:pointer; white-space:normal;
}
.menu-acoes-painel button:hover{background:var(--surface-2);}

/* ---------- Navegação lateral agrupada (desktop) ---------- */
.nav .navgroup-label{padding:16px 12px 4px;}
.nav .navgroup-label:first-child{padding-top:4px;}
.nav button{line-height:1.25;}
.nav button span.lbl{min-width:0; overflow-wrap:anywhere;}

/* ---------- Navegação mobile/tablet: 4 destinos + gaveta ---------- */
.nav-sheet-overlay, .nav-sheet{display:none;}
@media (max-width:820px){
  .tabbar button{min-height:52px; font-size:.7rem; padding:6px 2px; gap:1px; white-space:normal; text-align:center; line-height:1.15;}
  .tabbar button .ic{font-size:1.3rem;}
  .tabbar button[aria-expanded=true]{color:var(--green);}
  .nav-sheet-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:var(--z-drawer);}
  .nav-sheet{
    display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-drawer) + 1);
    max-height:82vh; background:var(--surface); color:var(--ink); border-top:3px solid var(--gold-bright);
    border-radius:18px 18px 0 0; box-shadow:var(--shadow); padding:0 0 env(safe-area-inset-bottom);
  }
  .nav-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 8px;}
  .nav-sheet-head strong{font-family:'Barlow Condensed'; font-size:1.25rem;}
  .nav-sheet-body{overflow-y:auto; padding:0 14px 18px; display:flex; flex-direction:column; gap:14px;}
  .nav-sheet-grupo h4{font-family:'Plus Jakarta Sans'; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:6px 4px 6px;}
  .nav-sheet-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .nav-sheet-item{
    display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 12px; text-align:left; cursor:pointer;
    border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink); font-weight:700; font-size:.86rem; line-height:1.25;
  }
  .nav-sheet-item .ic{font-size:1.2rem; flex-shrink:0;}
  .nav-sheet-item span.lbl{min-width:0; overflow-wrap:anywhere;}
  .nav-sheet-item.active{background:var(--green-soft); color:var(--green-deep); border-color:var(--green);}
}
@media (max-width:360px){ .nav-sheet-grid{grid-template-columns:1fr;} }

/* ---------- Ficha do processo: abas ---------- */
.ficha-tabs{
  display:flex; gap:2px; border-bottom:1px solid var(--border); margin:18px 0 18px; overflow-x:auto; scrollbar-width:thin;
  position:sticky; top:var(--topbar-h); background:var(--bg); z-index:12;
}
.ficha-tabs button{
  padding:10px 14px; border:none; background:none; font-weight:700; font-size:.86rem; color:var(--muted);
  border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap; flex-shrink:0; position:relative;
}
.ficha-tabs button:hover{color:var(--ink);}
.ficha-tabs button[aria-selected=true]{color:var(--green-deep); border-bottom-color:var(--green);}
.ficha-tabs .tab-aviso{
  display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%; background:var(--amber); vertical-align:middle;
}
.ficha-tabs .tab-aviso.critico{background:var(--red);}
.ficha-tabs .tab-gestao{color:var(--gold-deep);}

#painel-ficha{outline:none;}
#painel-ficha > .card:first-child, #painel-ficha > .state-box:first-child{margin-top:0 !important;}
.resumo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;}
.resumo-card{
  display:flex; flex-direction:column; gap:6px; text-align:left; padding:14px 16px; cursor:pointer; font:inherit;
  background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
}
.resumo-card:hover{background:var(--surface-2);}
.resumo-card .topo{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.resumo-card .titulo{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.resumo-card .valor{font-family:'Barlow Condensed'; font-size:1.5rem; font-weight:700; line-height:1.1;}
.resumo-card .nota{font-size:.78rem; color:var(--muted);}
.resumo-card .ver{font-size:.74rem; font-weight:700; color:var(--green);}
.resumo-card.aviso{border-color:var(--amber);}
.resumo-card.critico{border-color:var(--red);}

/* ---------- Modal de confirmação ---------- */
.ui-modal-overlay{position:fixed; inset:0; z-index:var(--z-modal); background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px;}
.ui-modal{
  width:min(480px,100%); max-height:90vh; overflow-y:auto; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:22px;
}
.ui-modal h3{font-size:1.35rem; margin:0 0 8px;}
.ui-modal p{margin:0 0 12px; font-size:.9rem; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;}
.ui-modal .field{margin:12px 0;}
/* Botões sempre visíveis no fundo do modal, mesmo quando o conteúdo faz scroll. */
.ui-modal .acoes{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin:16px -22px -22px; padding:12px 22px;
  position:sticky; bottom:-22px; background:var(--surface); border-top:1px solid var(--border); border-radius:0 0 16px 16px;
}
.ui-modal.perigo{border-color:var(--red);}
.ui-modal.largo{width:min(680px,100%);}
.rej-resumo{background:var(--surface-2); border-radius:10px; padding:10px 12px; margin:6px 0 12px; overflow-wrap:anywhere;}
.rej-aviso{background:var(--amber-soft); color:var(--ink); border:1px solid var(--amber); border-radius:10px; padding:10px 12px; font-size:.86rem; font-weight:600; margin-bottom:12px;}
.rej-alertas{background:var(--red-soft); color:var(--ink); border:1px solid var(--red); border-radius:10px; padding:10px 12px; font-size:.86rem; margin:12px 0;}
.rej-alertas ul{margin:6px 0 4px; padding-left:18px;}
.rej-preview{border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface-2); font-size:.84rem; max-height:220px; overflow:auto;}
.rej-preview pre{margin:8px 0 6px; white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; color:var(--ink);}
.rej-prev-cab{padding-bottom:6px; border-bottom:1px dashed var(--border); overflow-wrap:anywhere;}

/* ---------- Dashboard: pendências prioritárias ---------- */
.pend-zero{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem;}
.pend-zero .chip-zero{
  border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:100px; padding:4px 10px;
  font-size:.76rem; font-weight:700; cursor:pointer;
}
.pend-zero .chip-zero:hover{background:var(--surface-2); color:var(--ink);}
.atalhos-emjogo{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin-bottom:18px;}

/* ---------- 404 / 403 ---------- */
.pagina-estado{max-width:520px; margin:60px auto; text-align:center;}
.pagina-estado .codigo{font-family:'Barlow Condensed'; font-size:4.5rem; font-weight:700; line-height:1; color:var(--gold);}

@media print{
  .skip-link, .nav-sheet, .nav-sheet-overlay, .ficha-tabs, .menu-acoes-painel, .ui-modal-overlay{display:none !important;}
}