/* =====================================================================
   Área interna — layout de painel (barra lateral + cabeçalho + blocos),
   inspirado no Adomx e ajustado à identidade do clube (verde e cáqui).
   Carregado depois de _head.html, cujas variáveis e fontes reaproveita.
   ===================================================================== */
:root{
  --bg:#0b1411; --side:#08100d; --panel:#101c17; --panel-head:#0d1813;
  --line:#1e3429; --line-soft:rgba(30,52,41,.6);
  --ok:#8cc37a; --ok-soft:rgba(140,195,122,.14);
  --danger:#e07a6f; --danger-soft:rgba(224,122,111,.12);
  --warn:#e3b45c; --warn-soft:rgba(227,180,92,.12);
  --side-w:248px; --top-h:60px; --r:6px; --r-sm:4px;
}
body{background:var(--bg); padding:0}

/* ---------- ícones (static/icons.svg) ---------- */
.ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px}
.ic.k{fill:currentColor; stroke:none}
.btn .ic{width:16px; height:16px}
.btn-sm .ic{width:14px; height:14px}
.btn-lg .ic{width:20px; height:20px}

/* ---------- estrutura ---------- */
.side{position:fixed; inset:0 auto 0 0; width:var(--side-w); background:var(--side);
  border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:50;
  transition:transform .22s ease}
.side .brand{display:flex; align-items:center; gap:12px; height:var(--top-h); padding:0 20px;
  border-bottom:1px solid var(--line); text-decoration:none}
.side .brand img{height:36px}
.side .brand .name{font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:15px; line-height:1; color:var(--text)}
.side .brand .name small{display:block; color:var(--gold); font-size:9px; letter-spacing:.32em; margin-top:4px}
.side nav{flex:1; overflow-y:auto; padding:14px 0 20px; scrollbar-width:thin}
.side .grp{font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.24em;
  font-size:10px; color:#5d7266; padding:16px 22px 6px}
.side nav a{position:relative; display:flex; align-items:center; gap:12px; padding:10px 22px;
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; transition:color .15s, background .15s}
.side nav a .ic{width:19px; height:19px}
.side nav a:hover{color:var(--text); background:rgba(255,255,255,.02)}
.side nav a.on{color:var(--gold-bright); background:linear-gradient(90deg,var(--gold-soft),transparent 85%)}
.side nav a.on::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--gold)}
.side .foot{border-top:1px solid var(--line); padding:14px 20px; display:flex; align-items:center; gap:10px}
.avatar{width:34px; height:34px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); background:var(--surface2); border:1px solid var(--line);
  font-family:"Oswald",sans-serif; font-weight:600; font-size:14px; color:var(--gold)}
.side .foot .u{flex:1; min-width:0; line-height:1.25}
.side .foot .u b{display:block; font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side .foot .u span{font-size:11.5px; color:var(--muted)}
.side .foot form{margin:0}

.shell{margin-left:var(--side-w); min-height:100vh; display:flex; flex-direction:column}
.top{position:sticky; top:0; z-index:30; height:var(--top-h); display:flex; align-items:center; gap:14px;
  padding:0 28px; background:rgba(11,20,17,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .burger, .top .mini-brand{display:none}
.top .mini-brand img{height:32px; display:block; filter:drop-shadow(0 0 1px rgba(236,233,218,.85))}
.top .crumb{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top .crumb b{color:var(--text); font-weight:600}
.top .spacer{flex:1}
.stage-chip{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted);
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r-sm); padding:7px 12px;
  text-decoration:none; white-space:nowrap}
.stage-chip b{color:var(--text); font-weight:600}
.stage-chip .dot{width:8px; height:8px}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer}
.iconbtn:hover{color:var(--text); border-color:var(--khaki)}
.scrim{display:none}

main.content{flex:1; width:100%; max-width:1180px; padding:26px 28px 48px}

/* ---------- cabeçalho de página ---------- */
h1.pg{font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:26px; line-height:1.1; margin:0 0 6px; color:var(--text)}
.lead{color:var(--muted); font-size:14px; margin:0 0 22px; max-width:80ch}
.lead b{color:var(--gold-bright); font-weight:600}
.lead a{color:var(--gold)}

/* ---------- blocos (box-head / box-body do Adomx) ---------- */
.box{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin-bottom:18px; color:var(--text)}
.box > h2:first-child, .box > summary:first-child{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-18px -20px 16px; padding:13px 20px; background:var(--panel-head);
  border-bottom:1px solid var(--line); border-radius:var(--r) var(--r) 0 0;
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:14px; color:var(--text)}
.box > h2:first-child::before{content:""; width:7px; height:7px; flex:none; background:var(--gold);
  transform:rotate(45deg)}
.box h2{font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:14px; margin:0 0 12px}
details.box:not([open]) > summary:first-child{margin-bottom:-18px; border-bottom:none; border-radius:var(--r)}
details.box > summary{list-style:none}
details.box > summary::-webkit-details-marker{display:none}
.box.warn{border-color:rgba(227,180,92,.4)}
.box.warn > h2:first-child{color:var(--warn)}
.box.warn > h2:first-child::before{background:var(--warn)}
.box.danger{border-color:rgba(224,122,111,.35)}
.box.danger > summary:first-child, .box.danger > h2:first-child{color:var(--danger)}
a.box{text-decoration:none; transition:border-color .15s, transform .15s}
a.box:hover{border-color:var(--khaki)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid2 > .box{margin-bottom:0}
.grid2 + .box, .grid2 + .grid2, .grid2 + details{margin-top:18px}

/* atalhos da página inicial */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.tile{display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; text-decoration:none; color:var(--text); transition:border-color .15s}
.tile:hover{border-color:var(--khaki)}
.tile .ico{width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); background:var(--gold-soft); color:var(--gold)}
.tile .ico .ic{width:22px; height:22px}
.tile b{display:block; font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:15px; margin:1px 0 4px}
.tile span{color:var(--muted); font-size:12.5px; line-height:1.4}
.sec-title{font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.24em;
  font-size:11px; color:var(--muted); margin:26px 0 12px}

/* indicadores, com cantoneiras de mira */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:8px}
.kpi{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.kpi::before, .kpi::after{content:""; position:absolute; width:10px; height:10px; border-color:var(--gold); border-style:solid; opacity:.7}
.kpi::before{top:-1px; left:-1px; border-width:2px 0 0 2px; border-top-left-radius:var(--r)}
.kpi::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-bottom-right-radius:var(--r)}
.kpi .v{font-family:"Oswald",sans-serif; font-weight:600; font-size:36px; line-height:1; color:var(--gold-bright);
  font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted); font-size:11.5px; margin-top:8px; letter-spacing:.12em; text-transform:uppercase}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; font-size:13px; line-height:1; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface2); color:var(--text); cursor:pointer;
  padding:10px 16px; text-decoration:none; transition:background .15s, border-color .15s, filter .15s}
.btn:hover{border-color:var(--khaki)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line)}
.btn-gold{background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:600}
.btn-gold:hover{filter:brightness(1.08); border-color:var(--gold)}
.btn-danger{background:var(--danger-soft); color:var(--danger); border-color:rgba(224,122,111,.35)}
.btn-danger:hover{border-color:var(--danger)}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 11px; font-size:11.5px; gap:5px}
.btn-lg{padding:16px 24px; font-size:16px}
.btn-block{width:100%; justify-content:center}
form.inline{display:inline}

/* ---------- formulários ---------- */
label{font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.1em;
  font-size:11px; color:var(--muted); display:block; margin-bottom:6px}
input[type=text],input[type=password],input[type=number],input[type=search],select{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
  padding:10px 12px; font-family:"Inter",sans-serif; font-size:15px; color:var(--text);
  transition:border-color .15s, box-shadow .15s}
input:focus,select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
input::placeholder{color:#55685d}
.f{margin-bottom:14px}
.frow{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; align-items:end}
.search{position:relative}
.search input{padding-left:40px; text-transform:uppercase}
.search::before{content:""; position:absolute; left:13px; top:50%; width:16px; height:16px; transform:translateY(-50%);
  background:var(--gold); pointer-events:none; --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  -webkit-mask:var(--lupa) center/contain no-repeat; mask:var(--lupa) center/contain no-repeat}

/* ---------- listas ---------- */
.list{display:flex; flex-direction:column; gap:8px}
.item{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px; color:var(--text)}
a.item:hover{border-color:var(--khaki)}
.item .who{flex:1; min-width:0}
.item .nm{font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.02em;
  font-size:16px; line-height:1.15}
.item .meta{color:var(--muted); font-size:12.5px; margin-top:3px}
.item .go{color:var(--muted)}
.item.done{opacity:.72}

.tag{display:inline-flex; align-items:center; gap:5px; font-family:"Oswald",sans-serif; font-weight:500;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; border-radius:var(--r-sm); padding:3px 8px;
  background:var(--gold-soft); color:var(--gold); white-space:nowrap}
.tag.ok{background:var(--ok-soft); color:var(--ok)}
.tag.wait{background:rgba(138,154,141,.1); color:var(--muted)}
.tag.red{background:var(--danger-soft); color:var(--danger)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.sep{height:1px; background:var(--line); margin:16px 0}
.hide{display:none !important}
.note{display:flex; gap:10px; align-items:flex-start; border:1px solid rgba(227,180,92,.35);
  background:var(--warn-soft); color:#ead39f; border-radius:var(--r-sm); padding:11px 14px; font-size:13.5px}
.note .ic{color:var(--warn); margin-top:1px}

/* abas internas */
.sub-tabs{display:flex; gap:0; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid var(--line)}
.sub-tabs button{display:inline-flex; align-items:center; gap:7px; font-family:"Oswald",sans-serif; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; font-size:13px; color:var(--muted); background:none; border:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; padding:11px 16px; cursor:pointer}
.sub-tabs button:hover{color:var(--text)}
.sub-tabs button.on{color:var(--gold-bright); border-bottom-color:var(--gold)}

/* avisos */
.flash, .toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:10px; max-width:min(92vw,520px);
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--r-sm); padding:12px 18px; font-size:14px; font-weight:500;
  box-shadow:0 12px 32px rgba(0,0,0,.45)}
.flash{animation:flashout 5s forwards}
@keyframes flashout{0%,80%{opacity:1}100%{opacity:0; visibility:hidden}}
.toast{opacity:0; pointer-events:none; transition:opacity .25s}
.toast.show{opacity:1}
.toast.err{border-left-color:var(--danger); color:#f3c4be}

.conn{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.dot{width:9px; height:9px; flex:none; border-radius:50%; background:#a5473f}
.dot.on{background:var(--ok); box-shadow:0 0 0 0 rgba(140,195,122,.5); animation:pulseok 2s infinite}
@keyframes pulseok{0%{box-shadow:0 0 0 0 rgba(140,195,122,.5)}70%{box-shadow:0 0 0 8px rgba(140,195,122,0)}100%{box-shadow:0 0 0 0 rgba(140,195,122,0)}}

/* ---------- tabelas ---------- */
table.plain{width:100%; min-width:0; border-collapse:collapse; font-size:14px}
table.plain th{text-align:left; font-family:"Oswald",sans-serif; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; font-size:11px; color:var(--muted); padding:10px 12px; background:var(--panel-head);
  border-bottom:1px solid var(--line); white-space:nowrap}
table.plain td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; font-size:14px}
table.plain tbody tr:hover{background:rgba(202,190,114,.035)}
table.plain tr:last-child td{border-bottom:none}
.box > table.plain, .box > .tbl-scroll{margin:0 -20px; width:calc(100% + 40px)}
.box > table.plain:last-child, .box > .tbl-scroll:last-child{margin-bottom:-18px}
.box > table.plain th:first-child, .box > table.plain td:first-child,
.box > .tbl-scroll th:first-child, .box > .tbl-scroll td:first-child{padding-left:20px}
.box > table.plain th:last-child, .box > table.plain td:last-child,
.box > .tbl-scroll th:last-child, .box > .tbl-scroll td:last-child{padding-right:20px}
.num{font-variant-numeric:tabular-nums; font-family:"Oswald",sans-serif; letter-spacing:.02em}

/* ---------- responsivo: barra lateral vira gaveta ---------- */
@media (max-width:980px){
  .side{transform:translateX(-100%); box-shadow:none}
  body.nav-open .side{transform:none; box-shadow:12px 0 40px rgba(0,0,0,.5)}
  body.nav-open .scrim{display:block; position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.5)}
  .shell{margin-left:0}
  .top{padding:0 14px; gap:10px}
  .top .burger, .top .mini-brand{display:inline-flex}
  main.content{padding:20px 16px 40px}
}
@media (max-width:640px){
  .grid2{grid-template-columns:1fr}
  .top .crumb{display:none}
  .stage-chip{min-width:0; overflow:hidden; text-overflow:ellipsis}
  .stage-chip .pfx{display:none}
  h1.pg{font-size:22px}
  .box{padding:16px}
  .box > h2:first-child, .box > summary:first-child{margin:-16px -16px 14px; padding:12px 16px}
  details.box:not([open]) > summary:first-child{margin-bottom:-16px}
  .box > table.plain, .box > .tbl-scroll{margin:0 -16px; width:calc(100% + 32px)}
  .box > table.plain:last-child, .box > .tbl-scroll:last-child{margin-bottom:-16px}
  .box > table.plain th:first-child, .box > table.plain td:first-child,
  .box > .tbl-scroll th:first-child, .box > .tbl-scroll td:first-child{padding-left:16px}
}