/* =====================================================================
   VILLA v22 — design unificado com o site público (novembro/2026)
   Camada aditiva: não muda regras nem dados. Carregada por último.

   Fonte da identidade: tokens do site público (villatennisclub.com.br)
     petróleo  #0A202D · #122E3A · #204C60       terracota #B35A30
     creme     #F5F4EE · papel #FFFEF9           oliva #45584A · lima #B8C78F
     Fraunces (títulos) · Barlow (texto) · Barlow Condensed (rótulos)

   Índice
     1. Tokens            5. Painel inicial       9. Celular: barras
     2. Tipografia        6. Menu lateral        10. Ícones
     3. Superfícies       7. Tela de entrada     11. Toque, foco, contraste
     4. Botões e campos   8. Agenda e tabelas    12. Movimento
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --v-ink-9: #0A202D; --v-ink: #122E3A; --v-ink-7: #204C60; --v-ink-2: #E6EDEF;
  --v-clay: #B35A30; --v-clay-7: #8F4423; --v-clay-2: #F2E5D9;
  --v-olive: #45584A; --v-olive-2: #E6EBE2; --v-lime: #B8C78F;
  --v-cream: #F5F4EE; --v-paper: #FFFEF9; --v-line: #DCE0D8;
  --v-text: #142B3B; --v-text-2: #52616A;
  --v-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --v-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v-cond: "Barlow Condensed", "Barlow", sans-serif;
  --v-r: 22px; --v-r-md: 14px; --v-r-sm: 10px;
  --v-sh-sm: 0 2px 3px rgba(16,42,53,.06), 0 12px 30px -22px rgba(16,42,53,.25);
  --v-sh: 0 22px 50px -25px rgba(16,42,53,.25);
  --v-surface: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 28px -18px rgba(16,42,53,.2);
  --v-ease: cubic-bezier(.22,.61,.36,1);

  /* variáveis que o sistema já usa, apontadas para a paleta nova */
  --azul: #204C60; --azul-esc: #122E3A; --azul-soft: #E6EDEF; --azul-med: #C3D2D7;
  --laranja: #B35A30; --laranja-esc: #8F4423; --laranja-soft: #F2E5D9;
  --areia: #EFEDE4; --branco: #FFFEF9; --plane: #F5F4EE;
  --ink: #142B3B; --ink2: #52616A; --muted: #5F6B69; --linha: #DCE0D8;
  --verde: #28703E; --verm: #B23333;
  --sb-bg: #0A202D; --sb-ink: #EAF1F2; --sb-dim: #8FA6AE; --sb-accent: #B8C78F; --sb-accent-ink: #0A202D;
  --vp-r: 22px;
}

/* ---------- 2. TIPOGRAFIA ---------- */
body { font-family: var(--v-sans); color: var(--v-text); background: var(--v-cream); }
:root:root .card h2, :root:root .hero h2, :root:root .modal-top h3, :root:root .aj-hero h2,
:root:root .nuv-cartao h2, :root:root .ag-cab h2, :root:root #app > .card > h2 {
  font-family: var(--v-serif); font-weight: 500; letter-spacing: -.018em; font-optical-sizing: auto; text-transform: none;
}
:root:root .card h2 { font-size: 25px; line-height: 1.12; color: var(--v-ink); }
:root:root .hero h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.02; }
:root:root .nuv-cartao h2 { font-size: 40px; line-height: 1; color: var(--v-ink); }
:root:root .modal-top h3 { font-size: 23px; }
:root:root .hero-stats b, :root:root .tile b, :root:root .sem-card b {
  font-family: var(--v-serif); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums;
}
:root:root .hero-stats b { font-size: 34px; }
:root:root .hero-hora { font-family: var(--v-serif); font-style: italic; font-weight: 500; font-size: 38px; letter-spacing: -.02em; color: var(--v-lime); text-shadow: none; }
:root:root .logo h1 { font-family: var(--v-serif); font-weight: 500; font-size: 21px; letter-spacing: -.01em; text-transform: none; }
.logo small { font-family: var(--v-cond); letter-spacing: .16em; }
#app p, #app .sub { text-wrap: pretty; }
#app table td, .bk .bk-hora, .vt-rodape { font-variant-numeric: tabular-nums; }

:root:root h2 .chip, :root:root h2 .fin-tag, :root:root h2 small, :root:root h2 .sub { font-family: var(--v-sans); letter-spacing: 0; }
:root:root .logo h1 { text-transform: capitalize; }

/* área do aluno: mesma fonte de títulos, com peso mais leve */
:root:root .valu, :root:root #alu-modal { --disp: "Fraunces", Georgia, serif; }
:root:root .valu :is(h1, h2, h3), :root:root #alu-modal :is(h1, h2, h3) { font-weight: 500; letter-spacing: -.015em; text-transform: none; }

:root:root .valu .al-hora b { font-family: var(--v-cond); font-weight: 700; letter-spacing: 0; }   /* horas em coluna estreita continuam condensadas */

/* ---------- 3. SUPERFÍCIES ---------- */
:root:root .card, :root:root .tile, :root:root .nuv-cartao {
  background: var(--v-paper); border: 1px solid var(--v-line); border-radius: var(--v-r); box-shadow: var(--v-sh-sm);
}
:root:root .card:not(.aj-card):not(.ag-card) { padding: 22px 24px; }
:root:root .tile { border-top: 1px solid var(--v-line); position: relative; overflow: hidden; }
:root:root .tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--v-ink-7); }
:root:root .tile.lar::before { background: var(--v-clay); }
:root:root .modal { background: var(--v-cream); border-radius: var(--v-r); }
:root:root .modal-top { background: linear-gradient(120deg, var(--v-ink-9), var(--v-ink) 70%); box-shadow: none; }
.vt-rodape { color: #7C8785; }

/* ---------- 4. BOTÕES E CAMPOS ---------- */
:root:root .btn, :root:root .nuv-btn, :root:root .valu .al-cta {
  border-radius: 12px; background: linear-gradient(180deg, #BD6539 0%, var(--v-clay) 100%); color: #fff; text-shadow: none; font-weight: 700; letter-spacing: .005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(82,39,19,.3), 0 10px 20px -12px rgba(179,90,48,.9);
  transition: transform .14s var(--v-ease), box-shadow .18s var(--v-ease), background .18s var(--v-ease);
}
:root:root .btn:active, :root:root .nuv-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(82,39,19,.35); }
:root:root .btn.sec, :root:root .nuv-btn.sec, :root:root .valu .al-mini {
  background: var(--v-paper); color: var(--v-ink); border: 1px solid #CBD3CE; border-radius: 12px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(16,42,53,.08);
}
:root:root .rnk-topo-b .btn.sec { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none; }
:root:root .fab { border-radius: 999px; background: linear-gradient(180deg, #BD6539, var(--v-clay)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 28px -10px rgba(179,90,48,.85); text-shadow: none; }
:root:root .seg { background: #E9E8DF; border-radius: 12px; box-shadow: inset 0 1px 2px rgba(16,42,53,.08); }
:root:root .seg button { border-radius: 9px; }
:root:root .seg button.on { background: var(--v-ink); color: #fff; box-shadow: 0 1px 2px rgba(10,32,45,.4); }
:root:root .dias-nav button { border: 1px solid var(--v-line); background: var(--v-paper); border-radius: 12px; }
:root:root .dias-nav button.on { background: var(--v-ink); border-color: var(--v-ink); color: #fff; }
:root:root .dias-nav button.hoje::after { background: var(--v-clay); }
:root:root .dias-nav button.hoje.on::after { background: var(--v-lime); }
#app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), #app select, #app textarea {
  border-radius: 12px; border: 1px solid #CFD6D0; background: #fff; transition: border-color .15s, box-shadow .15s;
}
#app input:not([type=checkbox]):not([type=radio]):focus, #app select:focus, #app textarea:focus { outline: none; border-color: var(--v-ink-7); box-shadow: 0 0 0 3px rgba(32,76,96,.16); }

/* ---------- 5. PAINEL INICIAL ---------- */
:root:root .hero {
  border-radius: var(--v-r); padding: 26px 28px 24px; box-shadow: var(--v-sh);
  background:
    radial-gradient(520px 260px at 88% -10%, rgba(179,90,48,.42), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='300' viewBox='0 0 560 300' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Crect x='40' y='30' width='480' height='240'/%3E%3Cpath d='M40 70h480M40 230h480M280 30v240M160 70v160M400 70v160M160 150h240'/%3E%3C/svg%3E") right -80px center / 560px 300px no-repeat,
    linear-gradient(120deg, var(--v-ink-9) 0%, var(--v-ink) 55%, #1A4455 100%);
}
:root:root .hero::before, :root:root .hero::after { display: none; }
:root:root .hero-data { font-family: var(--v-cond); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--v-lime); }
:root:root .hero-stats > div { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root:root .hero-stats span { color: #B9CBD1; }

/* ---------- 6. MENU LATERAL ---------- */
html[lang] body.tem-perfil:not(.modo-aluno):not(.nuv-bloq) header.topo {
  background:
    radial-gradient(300px 220px at 0% 0%, rgba(184,199,143,.10), transparent 70%),
    linear-gradient(180deg, #0C2531 0%, var(--v-ink-9) 100%);
  box-shadow: 1px 0 0 rgba(255,255,255,.05) inset, 18px 0 40px -30px rgba(6,23,30,.6);
}
html[lang] body.tem-perfil:not(.modo-aluno):not(.nuv-bloq) nav.abas button { border-radius: 12px; color: #B7C9CF; transition: background .15s, color .15s; transform: none; }
html[lang] body.tem-perfil:not(.modo-aluno):not(.nuv-bloq) nav.abas button:hover { background: rgba(255,255,255,.06); color: #fff; }
html[lang] body.tem-perfil:not(.modo-aluno):not(.nuv-bloq) nav.abas button.on {
  background: linear-gradient(90deg, rgba(184,199,143,.2), rgba(184,199,143,.06)); color: #fff; transform: none;
  box-shadow: inset 3px 0 0 var(--v-lime), inset 0 0 0 1px rgba(184,199,143,.16);
}
html[lang] body.tem-perfil:not(.modo-aluno):not(.nuv-bloq) nav.abas button.on svg { color: var(--v-lime); }
html[lang] body.tem-perfil:not(.modo-aluno) .btn-perfil { border-radius: 12px; }
.salvo-linha { color: #A9C2C9; }

/* ---------- 7. TELA DE ENTRADA ---------- */
body.nuv-bloq:not(.modo-aluno) {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(179,90,48,.30), transparent 60%),
    radial-gradient(700px 520px at 0% 110%, rgba(184,199,143,.14), transparent 60%),
    linear-gradient(160deg, var(--v-ink-9) 0%, var(--v-ink) 60%, #17404F 100%) fixed;
  min-height: 100vh;
}
body.nuv-bloq:not(.modo-aluno)::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='640' viewBox='0 0 1200 640' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Crect x='120' y='80' width='960' height='480'/%3E%3Cpath d='M120 150h960M120 490h960M600 80v480M360 150v340M840 150v340M360 320h480'/%3E%3C/svg%3E") center / min(1200px, 140vw) auto no-repeat;
}
body.nuv-bloq:not(.modo-aluno) header.topo { background: transparent; box-shadow: none; }
body.nuv-bloq:not(.modo-aluno) #app { position: relative; }
:root:root body.nuv-bloq .nuv-cartao { border: 1px solid rgba(255,255,255,.5); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(10,32,45,.08); }
:root:root .nuv-rot { font-family: var(--v-cond); letter-spacing: .2em; color: var(--v-clay); }
body.nuv-bloq:not(.modo-aluno) .vt-rodape { color: rgba(255,255,255,.5); }
:root:root .nuv-f input { border-radius: 12px; background: #fff; border: 1px solid #CFD6D0; }
:root:root .nuv-lnk { color: var(--v-ink-7); }

/* ---------- 8. AGENDA E TABELAS ---------- */
:root:root table.ag-grade thead th { background: var(--v-ink); border-bottom: 2px solid var(--v-clay); font-family: var(--v-cond); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
:root:root table.ag-grade thead th:first-child { border-top-left-radius: 14px; }
:root:root table.ag-grade thead th:last-child { border-top-right-radius: 14px; }
.bk { border-radius: 12px; }
.bk.t-L .bk-livre { color: #66706C; }
.bk .bk-pres { color: var(--v-text); }
.dchip { color: #5A6562; }

/* ---------- 9. CELULAR: barra superior de vidro + barra de abas ---------- */
.vr-top, .vr-tabbar { display: none; }
@media (max-width: 900px) {
  body.vr-nav .vr-top {
    display: flex; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 52;
    height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0 68px;
    background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.52)), rgba(245,244,238,.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid rgba(18,46,58,.1);
  }
  .vr-top__eyebrow { display: block; font-family: var(--v-cond); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--v-clay); line-height: 1.2; }
  .vr-top__titulo { display: block; font-family: var(--v-serif); font-size: 23px; font-weight: 500; letter-spacing: -.015em; color: var(--v-ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vr-top > div { min-width: 0; }
  body.vr-nav .menu-btn { top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--v-ink-9); border-radius: 14px; }
  body.vr-nav.menu-aberto .logo-crest { opacity: 0; }
  body.vr-nav .wrap { padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.vr-nav .vr-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 53; padding: 6px; border-radius: 24px; border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02)), rgba(10,32,45,.92);
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 18px 36px -14px rgba(6,23,30,.7), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .22s var(--v-ease), opacity .22s;
  }
  .vr-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 18px;
    background: transparent; color: rgba(255,255,255,.72); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; }
  .vr-tab svg { width: 22px; height: 22px; flex: none; }
  .vr-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vr-tab.on { background: rgba(184,199,143,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(184,199,143,.3); }
  .vr-tab.on svg { color: var(--v-lime); }
  .vr-tab:active { transform: scale(.96); }
  body.vr-teclado .vr-tabbar, body.vr-modal .vr-tabbar, body.menu-aberto .vr-tabbar { transform: translateY(140%); opacity: 0; pointer-events: none; }
  body.vr-nav .fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body.vr-nav .toast, body.vr-nav .pf-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  :root:root .card:not(.aj-card):not(.ag-card) { padding: 18px 16px; }
  :root:root .hero { padding: 20px 18px 18px; }
  :root:root .card h2 { font-size: 23px; }
  :root:root .hero h2 { font-size: 27px; }
  :root:root .hero-hora { font-size: 30px; }
  :root:root .hero-stats b { font-size: 28px; }
}

/* ---------- 10. ÍCONES DESENHADOS ---------- */
.vr-ico { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h2 .vr-ico, h3 .vr-ico { width: .9em; height: .9em; vertical-align: -.08em; color: var(--v-clay); }
.hero .vr-ico, [class*="rnk"] h2 .vr-ico { color: inherit; }

/* ---------- 11. TOQUE, FOCO, CONTRASTE ---------- */
@media (pointer: coarse) {
  #app .btn, #app .seg button, #app .dias-nav button, #app select,
  #app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .btn-topo, #alu-modal .btn { min-height: 44px; }
  #app .btn.mini { min-height: 40px; }
  #app input[type=checkbox], #app input[type=radio] { width: 22px; height: 22px; }
  .mini-edit, .bk .bk-pres, #app .chip[onclick], #app .lg { position: relative; }
  .mini-edit::after, .bk .bk-pres::after, #app .chip[onclick]::after, #app .lg::after { content: ""; position: absolute; inset: -10px -8px; }
  .mini-edit { font-size: 16px; opacity: .8; }
}
#app :is(button, a, select, summary, [tabindex]):focus-visible, .vr-tab:focus-visible, header.topo :is(button, a):focus-visible, [data-vr-kb]:focus-visible {
  outline: 3px solid #D9A441; outline-offset: 2px; border-radius: 10px;
}

/* ---------- 12. MOVIMENTO ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.vp-mov #app.vp-entra > *:not(.valu) { animation-fill-mode: both; animation-timing-function: var(--v-ease); }
  html.vp-mov #app.vp-entra > *:nth-child(2):not(.valu) { animation-delay: .04s; }
  html.vp-mov #app.vp-entra > *:nth-child(3):not(.valu) { animation-delay: .08s; }
  html.vp-mov #app.vp-entra > *:nth-child(4):not(.valu) { animation-delay: .12s; }
  html.vp-mov #app.vp-entra > *:nth-child(n+5):not(.valu) { animation-delay: .16s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-vr-kb] { transition: transform .14s var(--v-ease), box-shadow .16s var(--v-ease); }
  .agora-item[data-vr-kb]:hover, .av-item[data-vr-kb]:hover { transform: translateY(-1px); }
  :root:root .btn:hover, :root:root .nuv-btn:hover { background: linear-gradient(180deg, #C56C3F 0%, #B96036 100%); }
  :root:root .btn.sec:hover, :root:root .nuv-btn.sec:hover { background: #fff; border-color: var(--v-ink-7); }
}
@media print { .vr-top, .vr-tabbar { display: none !important; } }