/* =========================================================================
   LTC Foz — Design System (Soft UI Evolution)
   Tipografia: Fira Sans (texto) + Fira Code (números/tabular)
   Semáforo verde/âmbar/vermelho RESERVADO ao significado de capacidade.
   Marca em ink/navy + acento dourado para não colidir com os estados.
   ========================================================================= */

:root {
  /* Marca / superfícies (semânticos, não hex soltos nos componentes) */
  --brand-ink: #0f172a;
  --brand-ink-2: #1e293b;
  --brand-accent: #b7791f;      /* dourado ajustado p/ contraste AA sobre branco */
  --brand-accent-soft: #fef7e6;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --fg: #0f172a;
  --fg-muted: #566072;
  --border: #e3e8ef;
  --ring: #b7791f;

  /* Semáforo de CAPACIDADE (uso exclusivo) */
  --cap-free: #16a34a;   --cap-free-bg: #ecfdf3;   --cap-free-bd: #bbf7d0;
  --cap-warn: #b45309;   --cap-warn-bg: #fffbeb;   --cap-warn-bd: #fde68a;
  --cap-full: #dc2626;   --cap-full-bg: #fef2f2;   --cap-full-bd: #fecaca;
  --cap-over: #ea580c;   --cap-over-bg: #fff7ed;   --cap-over-bd: #fed7aa;

  /* Escala de espaçamento (density ~7: compacto para dashboard) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;

  /* Sombras Soft UI (mais suaves que flat, mais claras que neumorfismo) */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow: 0 2px 8px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.05);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);

  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px; line-height: 1.55;
  color: var(--fg); background: var(--bg);
}
.mono, .num { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

h1,h2,h3 { line-height: 1.2; margin: 0 0 var(--sp-2); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 var(--sp-3); color: var(--fg-muted); }
a { color: var(--brand-ink); }

/* Acessibilidade: foco sempre visível */
:where(a,button,input,select,[tabindex]):focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.stack { display: grid; gap: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.spread { justify-content: space-between; }
.muted { color: var(--fg-muted); }
.small { font-size: .82rem; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .inner { display: flex; align-items: center; gap: var(--sp-5); height: 60px; }
.brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; letter-spacing: -.02em; color: var(--brand-ink); text-decoration: none; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-ink), var(--brand-ink-2)); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.nav { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; }
.nav a { color: var(--fg-muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: .92rem; font-weight: 500; transition: background .2s var(--ease), color .2s var(--ease); }
.nav a:hover { background: var(--surface-2); color: var(--fg); }
.nav a.active { color: var(--brand-ink); background: var(--brand-accent-soft); }

/* ---------- Buttons ---------- */
.btn { --_bg: var(--brand-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--_bg); color: #fff; border: 1px solid transparent; border-radius: 10px;
  padding: 10px 16px; font: inherit; font-weight: 600; font-size: .92rem; min-height: 44px;
  box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { --_bg: transparent; color: var(--brand-ink); border-color: var(--border); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.accent { --_bg: var(--brand-accent); }

/* ---------- Cards / KPIs ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-5); }
.kpi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }
@media (min-width: 720px) { .kpi-grid { grid-template-columns: repeat(4,1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .15s var(--ease); }
.kpi:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi .v { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.kpi .l { font-size: .78rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .spark { height: 3px; border-radius: 2px; margin-top: 10px; background: linear-gradient(90deg, var(--brand-accent), transparent); }

/* ---------- Court schedule grid ---------- */
.grid-scroll { overflow-x: auto; border-radius: var(--radius); }
.schedule { display: grid; gap: var(--sp-2); min-width: 640px; }
.schedule .head { font-weight: 700; text-align: center; padding: 6px 0; color: var(--fg); }
.schedule .time { display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: var(--fg-muted); }
.slot { position: relative; border-radius: var(--radius-sm); padding: 10px; min-height: 84px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .15s var(--ease); cursor: pointer; }
.slot:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.slot .lvl { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .82rem; }
.slot .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.slot .cap { font-size: 1.1rem; font-weight: 700; margin-top: 4px; }
.slot .meta { font-size: .74rem; color: var(--fg-muted); margin-top: 2px; }
.slot .empty { color: var(--fg-muted); font-size: .8rem; }
.slot.is-empty { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, #f0f2f5 8px, #f0f2f5 16px); cursor: default; box-shadow: none; }
.slot.is-empty:hover { transform: none; box-shadow: none; }

/* Estado de capacidade — cor + faixa lateral + badge com ícone e texto (nunca só cor) */
.slot[data-state="free"] { border-color: var(--cap-free-bd); }
.slot[data-state="warn"] { border-color: var(--cap-warn-bd); background: var(--cap-warn-bg); }
.slot[data-state="full"] { border-color: var(--cap-full-bd); background: var(--cap-full-bg); }
.slot[data-state="over"] { border-color: var(--cap-over-bd); background: var(--cap-over-bg); }
.slot::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:4px; background: var(--border); }
.slot[data-state="free"]::before { background: var(--cap-free); }
.slot[data-state="warn"]::before { background: var(--cap-warn); }
.slot[data-state="full"]::before { background: var(--cap-full); }
.slot[data-state="over"]::before { background: var(--cap-over); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.badge svg { width: 13px; height: 13px; }
.badge.free { color: var(--cap-free); border-color: var(--cap-free-bd); background: var(--cap-free-bg); }
.badge.warn { color: var(--cap-warn); border-color: var(--cap-warn-bd); background: var(--cap-warn-bg); }
.badge.full { color: var(--cap-full); border-color: var(--cap-full-bd); background: var(--cap-full-bg); }
.badge.over { color: var(--cap-over); border-color: var(--cap-over-bd); background: var(--cap-over-bg); }
.badge.wait { color: var(--brand-ink); }

/* ---------- Filters / tabs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .86rem; min-height: 40px; transition: all .2s var(--ease); }
.tab:hover { background: var(--surface-2); color: var(--fg); }
.tab.active { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }

/* ---------- Hero (landing pública) ---------- */
.hero { padding: var(--sp-7) 0 var(--sp-6); }
.hero .eyebrow { display: inline-flex; gap: 6px; align-items: center; color: var(--brand-accent); background: var(--brand-accent-soft); border: 1px solid #f3e2bf; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.hero h1 { margin-top: var(--sp-4); max-width: 18ch; }
.hero p.lead { font-size: 1.08rem; max-width: 60ch; }

/* ---------- Ficha de aluno / listas ---------- */
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: var(--sp-3); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: box-shadow .2s var(--ease); }
.item:hover { box-shadow: var(--shadow-sm); }
.avatar { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,#e2e8f0,#f1f5f9); display: grid; place-items: center; font-weight: 700; color: var(--brand-ink-2); flex: none; }
.pill { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); background: var(--surface-2); }
.pill.member { color: var(--brand-accent); border-color:#f3e2bf; background: var(--brand-accent-soft); }

.field { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.field label { font-weight: 600; font-size: .86rem; }
.field input, .field select { font: inherit; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: 44px; }
.field .hint { font-size: .78rem; color: var(--fg-muted); }

/* ---------- Legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: .82rem; color: var(--fg-muted); }
.legend .row { gap: 6px; }

footer.site { border-top: 1px solid var(--border); margin-top: var(--sp-7); padding: var(--sp-5) 0; color: var(--fg-muted); font-size: .85rem; }

/* Mobile-first: área do aluno */
.phone { max-width: 420px; margin: 0 auto; }
@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
  .nav a:not(.cta) { display: none; }
}

/* ---------- Seletor de papel (demo) ---------- */
.rolepick { display:flex; align-items:center; gap:6px; margin-left:8px; padding-left:12px; border-left:1px solid var(--border); }
.rolepick select { font:inherit; font-size:.85rem; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface); min-height:40px; }

/* ---------- Modal / scrim ---------- */
.scrim { position:fixed; inset:0; background:rgba(15,23,42,.5); display:grid; place-items:center; z-index:100; padding:16px; }
.modal { width:min(520px,100%); max-height:86vh; overflow:auto; box-shadow:var(--shadow-lg); }

/* ---------- Tabela de configuração ---------- */
table.cfg { width:100%; border-collapse:separate; border-spacing:0 6px; min-width:560px; }
table.cfg th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-muted); padding:0 8px; }
table.cfg td { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:6px 8px; }
table.cfg td:first-child { border-left:1px solid var(--border); border-radius:8px 0 0 8px; }
table.cfg td:last-child { border-right:1px solid var(--border); border-radius:0 8px 8px 0; }
table.cfg select, table.cfg input { font:inherit; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }

/* ---------- Opções de aula (inscrição) ---------- */
.lesson { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; transition:box-shadow .2s var(--ease), border-color .2s var(--ease); min-height:56px; }
.lesson:hover { box-shadow:var(--shadow-sm); }
.lesson.sel { border-color:var(--brand-accent); background:var(--brand-accent-soft); box-shadow:var(--shadow-sm); }
.lesson.disabled { opacity:.5; cursor:not-allowed; }
.lesson .day { min-width:78px; font-weight:700; }
.lesson .tick { width:26px; height:26px; border-radius:8px; border:2px solid var(--border); display:grid; place-items:center; flex:none; color:#fff; }
.lesson.sel .tick { background:var(--brand-accent); border-color:var(--brand-accent); }
.lesson.sel .tick svg { width:16px; height:16px; }
.daygroup { font-size:.78rem; font-weight:700; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.04em; margin:14px 0 6px; }

/* Contador de frequência */
.counter { display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.counter .n { font-family:"Fira Code",monospace; font-size:1.3rem; }
.counter.done { color:var(--cap-free); }
.counter .bar { width:120px; height:8px; border-radius:6px; background:var(--muted); overflow:hidden; }
.counter .bar > i { display:block; height:100%; background:var(--brand-accent); transition:width .25s var(--ease); }
.counter.done .bar > i { background:var(--cap-free); }

.picker { display:grid; gap:8px; }
.namebtn { text-align:left; }

/* Layout de duas colunas (alunos) via CSS, não JS */
.cols2 { display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
@media (min-width:960px) { .cols2 { grid-template-columns:380px 1fr; } }

/* ---------- Autocomplete (renovação) ---------- */
.ac { position:relative; }
.ac-list { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); max-height:320px; overflow:auto; }
.ac-list:empty { display:none; }
.ac-item { display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.ac-item:last-child { border-bottom:none; }
.ac-item:hover, .ac-item.hi { background:var(--brand-accent-soft); }

/* ---------- Contador sempre visível ---------- */
.counter-bar { position:sticky; top:64px; z-index:20; display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm); }
.counter-bar .n { font-family:"Fira Code",monospace; font-size:1.4rem; font-weight:700; }
.counter-bar.done { border-color:var(--cap-free-bd); background:var(--cap-free-bg); }
.counter-bar.done .n { color:var(--cap-free); }
.counter-bar .bar { flex:1; height:8px; border-radius:6px; background:#e5e9f0; overflow:hidden; }
.counter-bar .bar > i { display:block; height:100%; background:var(--brand-accent); transition:width .25s var(--ease); }
.counter-bar.done .bar > i { background:var(--cap-free); }

/* ---------- Sub-opções (estatuto sócio) ---------- */
.choice { display:flex; gap:8px; flex-wrap:wrap; }
.choice label { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; background:var(--surface); font-size:.9rem; }
.choice input { width:18px; height:18px; }
.choice label:has(input:checked) { border-color:var(--brand-accent); background:var(--brand-accent-soft); }

.state-tag { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.78rem; padding:3px 10px; border-radius:999px; }
.state-tag.pending { color:var(--cap-warn); background:var(--cap-warn-bg); border:1px solid var(--cap-warn-bd); }
.state-tag.confirmed { color:var(--cap-free); background:var(--cap-free-bg); border:1px solid var(--cap-free-bd); }

/* ---------- Tabela de validação ---------- */
table.vtable { width:100%; border-collapse:separate; border-spacing:0 8px; min-width:720px; }
table.vtable th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-muted); padding:0 14px; }
table.vtable td { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 14px; vertical-align:middle; }
table.vtable td:first-child { border-left:1px solid var(--border); border-radius:12px 0 0 12px; }
table.vtable td:last-child { border-right:1px solid var(--border); border-radius:0 12px 12px 0; text-align:right; }
table.vtable tr:hover td { background:var(--surface-2); }
.chk { width:24px; height:24px; cursor:pointer; accent-color:var(--brand-accent); }
.chk:disabled { cursor:not-allowed; opacity:.35; }
.chkwrap { display:inline-flex; align-items:center; gap:8px; }
.empty-state { text-align:center; padding:40px 16px; color:var(--fg-muted); }

/* Nota de demonstração (SMS) */
.demo-note { background:#eef6ff; border:1px dashed #93c5fd; color:#1e40af; border-radius:10px; padding:10px 12px; font-size:.85rem; }

/* Banner de ambiente de testes (demo) */
.demo-banner { background:repeating-linear-gradient(45deg,#7c2d12,#7c2d12 12px,#9a3412 12px,#9a3412 24px); color:#fff; text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.04em; padding:5px 10px; }

/* Nomes clicáveis (abrem alunos.html com aluno pré-selecionado) */
.namelink { color:var(--brand-ink); text-decoration:none; border-bottom:1px dashed var(--brand-accent); }
.namelink:hover { color:var(--brand-accent); }

/* Banner de informação importante (pedidos do jogador) */
.info-banner{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:12px;
  padding:12px 14px; font-size:.85rem; line-height:1.45; margin:0 0 16px; }
.info-banner strong{ color:#78350f; }

/* Botão submeter desativado (item 3) */
.btn:disabled, .btn[disabled]{ opacity:.45; cursor:not-allowed; filter:grayscale(.3); }
/* Link de download na navegação (Preçário) */
.nav a.dl-link{ border:1px solid var(--brand-accent); border-radius:8px; }
.nav a.dl-link::after{ content:" ⬇"; font-size:.85em; }

/* Etiqueta de estado do pedido (item 3): Pendente / Validado / Inscrito */
.stag{ display:inline-block; font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:999px; vertical-align:middle; margin-left:2px; }
.stag.pendente{ background:#fef3c7; color:#92400e; }
.stag.validado{ background:#dbeafe; color:#1e40af; }
.stag.inscrito{ background:#dcfce7; color:#166534; }