/* Gestão Esportiva Municipal — tokens e componentes (direção A, "Linha de Quadra"), portado do canvas de design.
   Servido como /portal/gem.css (CSP: style-src 'self'). Tema claro em :root; escuro em duas formas com os MESMOS valores
   (a poarta d1 compara): explícito por [data-tema="escuro"] e automático por prefers-color-scheme (exceto [data-tema="claro"]).
   Fontes: woff2 locais em /portal (Barlow Condensed, Atkinson Hyperlegible; licenças OFL em LICENSE-*.txt). */

/* ---------- Fontes locais (subconjunto latin cobre pt-BR) ---------- */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/portal/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/portal/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/portal/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/portal/atkinson-hyperlegible-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/portal/atkinson-hyperlegible-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("/portal/atkinson-hyperlegible-400-italic.woff2") format("woff2"); }

/* ---------- Tokens: tema claro ---------- */
:root {
  color-scheme: light;
  --fundo: #F5F7F3;
  --superficie: #FFFFFF;
  --superficie-2: #ECF0EA;
  --superficie-3: #DFE6DC;
  --linha: #D2D9CF;
  --linha-forte: #77847A;      /* bordas de campo: 3,7:1 sobre branco */
  --texto: #16201A;            /* 16,4:1 */
  --texto-2: #47524A;          /* 7,9:1 */
  --acento: #1D6B45;           /* verde de quadra: 6,5:1 sobre branco */
  --acento-forte: #14522F;
  --acento-suave: #E0EFE5;
  --sobre-acento: #FFFFFF;
  --ok: #22683A;               /* aprovada: 6,8:1 */
  --ok-suave: #E1F0E3;
  --sobre-ok: #FFFFFF;
  --aviso: #8A4A00;            /* pendente: 6,8:1 */
  --aviso-borda: #B26A00;
  --aviso-suave: #FFF0D4;
  --erro: #B0261E;             /* recusada, conflito: 6,5:1 */
  --erro-suave: #FBE6E3;
  --sobre-erro: #FFFFFF;
  --quadra: #BFD3C4;           /* linhas de quadra, só decorativas */
  --veu: rgb(10 15 12 / .55);
  --foco: #1D6B45;
  --sombra-1: 0 1px 2px rgb(22 32 26 / .07);
  --sombra-2: 0 8px 28px rgb(22 32 26 / .16);

  --f-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-corpo: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8rem;  --t-sm: .9rem;  --t-base: 1rem;  --t-lg: 1.2rem;
  --t-xl: 1.6rem; --t-2xl: 2.2rem; --t-3xl: 3rem;

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;  --e-7: 3rem;   --e-8: 4rem;

  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pilula: 999px;
  --alvo: max(44px, 2.75rem);
}

/* ---------- Tokens: tema escuro (explícito) ---------- */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0F1512;
  --superficie: #161E19;
  --superficie-2: #1D2721;
  --superficie-3: #26322B;
  --linha: #2E3A32;
  --linha-forte: #75837A;
  --texto: #EAF0EA;
  --texto-2: #B3BEB6;
  --acento: #6FCB97;
  --acento-forte: #92DCB2;
  --acento-suave: #1B3828;
  --sobre-acento: #0B1F14;
  --ok: #7DD38A;
  --ok-suave: #1C3420;
  --sobre-ok: #0B1F10;
  --aviso: #F2B65A;
  --aviso-borda: #D99A3A;
  --aviso-suave: #382A12;
  --erro: #FF8A80;
  --erro-suave: #3B1B18;
  --sobre-erro: #2A0705;
  --quadra: #2B4535;
  --veu: rgb(0 0 0 / .65);
  --foco: #92DCB2;
  --sombra-1: 0 0 0 1px rgb(255 255 255 / .02);
  --sombra-2: 0 10px 32px rgb(0 0 0 / .5);
}
/* ---------- Tokens: tema escuro (automático, segue o sistema) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #0F1512;
    --superficie: #161E19;
    --superficie-2: #1D2721;
    --superficie-3: #26322B;
    --linha: #2E3A32;
    --linha-forte: #75837A;
    --texto: #EAF0EA;
    --texto-2: #B3BEB6;
    --acento: #6FCB97;
    --acento-forte: #92DCB2;
    --acento-suave: #1B3828;
    --sobre-acento: #0B1F14;
    --ok: #7DD38A;
    --ok-suave: #1C3420;
    --sobre-ok: #0B1F10;
    --aviso: #F2B65A;
    --aviso-borda: #D99A3A;
    --aviso-suave: #382A12;
    --erro: #FF8A80;
    --erro-suave: #3B1B18;
    --sobre-erro: #2A0705;
    --quadra: #2B4535;
    --veu: rgb(0 0 0 / .65);
    --foco: #92DCB2;
    --sombra-1: 0 0 0 1px rgb(255 255 255 / .02);
    --sombra-2: 0 10px 32px rgb(0 0 0 / .5);
  }
}

/* ---------- Base ---------- */
html { font-size: clamp(17px, 1.3vw, 32px); }
.app {
  container: app / inline-size;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app h1, .app h2, .app h3, .app h4 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .005em; text-wrap: balance; }
.app h1 { font-size: var(--t-3xl); }
.app h2 { font-size: var(--t-xl); }
.app h3 { font-size: var(--t-lg); font-family: var(--f-corpo); font-weight: 700; }
.app p { margin: 0; text-wrap: pretty; }
.app a { color: var(--acento); text-underline-offset: .2em; }
.app a:hover { color: var(--acento-forte); }
.app :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quebra { overflow-wrap: anywhere; }
.suave { color: var(--texto-2); }
.pequeno { font-size: var(--t-sm); }
.num { font-variant-numeric: tabular-nums; }
.pilha { display: flex; flex-direction: column; gap: var(--e-3); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.fila-entre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }

.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-g { width: 1.6rem; height: 1.6rem; }

/* ---------- Coluna de 80% ---------- */
.coluna { width: 80%; margin-inline: auto; }

/* ---------- Topo e navegação ---------- */
.topo { background: var(--superficie); border-bottom: 1px solid var(--linha); }
.topo-int { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-5); min-height: 4.5rem; padding-block: var(--e-2); }
.marca { display: flex; align-items: center; gap: .65rem; color: var(--texto); text-decoration: none; }
.app a.marca { color: var(--texto); }
.marca svg { width: 2.4rem; height: 1.8rem; fill: none; stroke: var(--acento); stroke-width: 2; }
.marca-nome { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-lg); line-height: 1; }
.marca-sub { display: block; font-size: var(--t-xs); color: var(--texto-2); }
.nav { display: flex; flex-wrap: wrap; gap: var(--e-1); flex: 1; list-style: none; margin: 0; padding: 0; }
.app .nav a { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--alvo); padding: 0 .8rem; border-radius: var(--r-2); color: var(--texto-2); text-decoration: none; font-weight: 700; }
.app .nav a:hover { background: var(--superficie-2); color: var(--texto); }
.app .nav a[aria-current="page"] { color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 -3px 0 var(--acento); }
.usuario { display: flex; align-items: center; gap: var(--e-3); }
.avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); font-weight: 700; font-size: var(--t-sm); }
.usuario-txt { line-height: 1.2; }
.usuario-txt small { display: block; color: var(--texto-2); font-size: var(--t-xs); }

.tabbar { display: none; position: sticky; bottom: 0; z-index: 5; background: var(--superficie); border-top: 1px solid var(--linha); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.9rem; font-size: var(--t-xs); font-weight: 700; color: var(--texto-2); text-decoration: none; }
.app .tabbar a[aria-current="page"] { color: var(--acento); box-shadow: inset 0 3px 0 var(--acento); background: var(--acento-suave); }

.rodape { padding-block: var(--e-6); color: var(--texto-2); font-size: var(--t-sm); border-top: 1px solid var(--linha); margin-top: var(--e-7); }

/* ---------- Cabeçalho da página + bloco "O que é / Para que serve" ---------- */
.pagina-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--e-4); padding-block: var(--e-6) var(--e-4); }
.pagina-topo p { color: var(--texto-2); margin-top: var(--e-1); }
.oque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-6); margin: 0 0 var(--e-6); padding: var(--e-4) var(--e-5); background: var(--superficie-2); border-radius: var(--r-3); }
.oque > div { display: flex; flex-direction: column; gap: var(--e-1); }
.oque dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-2); }
.oque dd { margin: 0; }
.oque abbr { text-decoration: underline dotted; cursor: help; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--alvo); padding: .5rem 1.1rem; border: 2px solid transparent; border-radius: var(--r-2); font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.btn-primario, .app a.btn-primario { background: var(--acento); color: var(--sobre-acento); }
.btn-primario:hover, .btn-primario.is-hover, .app a.btn-primario:hover { background: var(--acento-forte); color: var(--sobre-acento); }
.btn-secundario, .app a.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte); }
.btn-secundario:hover, .btn-secundario.is-hover { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { background: var(--erro); color: var(--sobre-erro); }
.btn-perigo:hover, .btn-perigo.is-hover { background: var(--texto); color: var(--fundo); }
.btn-texto { background: transparent; color: var(--acento); text-decoration: underline; text-underline-offset: .2em; padding-inline: .5rem; }
.btn-texto:hover, .btn-texto.is-hover { background: var(--acento-suave); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--superficie-3); color: var(--texto-2); border-color: transparent; cursor: not-allowed; text-decoration: none; }
.btn.is-foco, .entrada.is-foco { outline: 3px solid var(--foco); outline-offset: 3px; }
.btn-grande { min-height: 3.5rem; font-size: var(--t-lg); padding-inline: 1.4rem; }
.btn-bloco { width: 100%; }
.btn .gira { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo > label, .rotulo { font-weight: 700; }
.opcional { font-weight: 400; color: var(--texto-2); }
.entrada { width: 100%; min-height: var(--alvo); padding: .5rem .8rem; border: 2px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); font: inherit; }
.entrada:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--acento); }
.entrada[aria-invalid="true"] { border-color: var(--erro); border-width: 3px; }
.entrada:disabled { background: var(--superficie-2); color: var(--texto-2); border-style: dashed; }
.ajuda { font-size: var(--t-sm); color: var(--texto-2); }
.msg-erro { display: flex; gap: .4rem; align-items: flex-start; color: var(--erro); font-weight: 700; font-size: var(--t-sm); }
.marcar { display: flex; align-items: flex-start; gap: .75rem; min-height: var(--alvo); padding-block: .4rem; }
.marcar input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--acento); flex: none; }
.busca { position: relative; }
.busca .ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--texto-2); }
.busca .entrada { padding-left: 2.6rem; }

.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); }
.span-2 { grid-column: 1 / -1; }
.grupo { border: 2px solid var(--linha); border-radius: var(--r-3); padding: var(--e-5); margin: 0; min-width: 0; }
.grupo legend { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 600; padding-inline: var(--e-2); }
.grupo-exigido { border-color: var(--aviso-borda); border-style: dashed; background: var(--aviso-suave); }

/* ---------- Alertas ---------- */
.alerta { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); border-radius: var(--r-2); border: 2px solid var(--linha-forte); background: var(--superficie); }
.alerta strong { display: block; }
.alerta-erro { border-color: var(--erro); background: var(--erro-suave); }
.alerta-erro > .ic { color: var(--erro); }
.alerta-aviso { border-color: var(--aviso-borda); border-style: dashed; background: var(--aviso-suave); }
.alerta-aviso > .ic { color: var(--aviso); }
.alerta-ok { border-color: var(--ok); background: var(--ok-suave); }
.alerta-ok > .ic { color: var(--ok); }

/* ---------- Selos de estado (forma + ícone + texto) ---------- */
.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem .15rem .45rem; border: 2px solid var(--linha-forte); border-radius: var(--r-pilula); font-size: var(--t-sm); font-weight: 700; line-height: 1.4; white-space: nowrap; color: var(--texto-2); background: var(--superficie); }
.selo .ic { width: 1rem; height: 1rem; stroke-width: 2.5; }
.selo-pendente { border-style: dashed; border-color: var(--aviso-borda); color: var(--aviso); background: var(--aviso-suave); }
.selo-aprovada { border-color: var(--ok); background: var(--ok); color: var(--sobre-ok); }
.selo-recusada { text-decoration: line-through; border-radius: var(--r-1); border-color: var(--erro); color: var(--erro); background: var(--superficie); }
.selo-conflito { border-radius: var(--r-1); border-color: var(--erro); background: var(--erro); color: var(--sobre-erro); }
.selo-ativo { border-color: var(--ok); color: var(--ok); background: var(--ok-suave); }
.selo-baixo { border-style: dashed; border-color: var(--aviso-borda); color: var(--aviso); background: var(--aviso-suave); }

/* ---------- Cartões e indicadores ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); padding: var(--e-5); box-shadow: var(--sombra-1); min-width: 0; }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-4); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.kpi { display: flex; flex-direction: column; gap: var(--e-2); }
.kpi-rotulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--texto-2); }
.kpi-valor { font-family: var(--f-titulo); font-size: var(--t-3xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-valor small { font-size: var(--t-xl); font-weight: 500; color: var(--texto-2); }
.kpi-nota { font-size: var(--t-sm); color: var(--texto-2); }

.medidor { appearance: none; width: 100%; height: .7rem; border: 0; border-radius: var(--r-pilula); background: var(--superficie-3); overflow: hidden; }
.medidor::-webkit-progress-bar { background: var(--superficie-3); border-radius: var(--r-pilula); }
.medidor::-webkit-progress-value { background: var(--acento); border-radius: var(--r-pilula); }
.medidor::-moz-progress-bar { background: var(--acento); border-radius: var(--r-pilula); }

/* ---------- Grades de página ---------- */
.secao { margin-top: var(--e-6); }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; margin-top: var(--e-5); }
.lista-limpa { list-style: none; margin: 0; padding: 0; }

.atencao li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-4); align-items: center; padding-block: var(--e-4); border-bottom: 1px solid var(--linha); }
.atencao li:last-child { border-bottom: 0; padding-bottom: 0; }
.atencao li:first-child { padding-top: 0; }
.atencao .marcador { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: var(--r-2); border: 2px solid var(--linha-forte); color: var(--texto-2); }
.atencao .m-aviso { border-style: dashed; border-color: var(--aviso-borda); color: var(--aviso); background: var(--aviso-suave); }
.atencao .m-erro { border-color: var(--erro); color: var(--erro); background: var(--erro-suave); }
.atencao h3 { font-size: var(--t-base); }

.acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.app a.acao { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--e-3); min-height: 6.5rem; padding: var(--e-4); border: 2px solid var(--linha); border-radius: var(--r-3); background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 700; line-height: 1.25; }
.app a.acao .ic { color: var(--acento); width: 1.6rem; height: 1.6rem; }
.app a.acao:hover { border-color: var(--acento); background: var(--acento-suave); }
.app a.acao-principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.app a.acao-principal .ic { color: var(--sobre-acento); }
.app a.acao-principal:hover { background: var(--acento-forte); color: var(--sobre-acento); }

.ocupacao li { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: .35rem var(--e-3); align-items: center; padding-block: var(--e-2); }
.ocupacao .medidor { grid-column: 1 / -1; }

/* ---------- Tabela ---------- */
.tabela-caixa { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela caption { text-align: left; padding: var(--e-3) var(--e-4); color: var(--texto-2); font-size: var(--t-sm); caption-side: bottom; border-top: 1px solid var(--linha); }
.tabela th { text-align: left; padding: .7rem 1rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); background: var(--superficie-2); border-bottom: 2px solid var(--linha); white-space: nowrap; }
.tabela td { padding: .85rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .linha-erro td { background: var(--erro-suave); }
.tabela .linha-aviso td { background: var(--aviso-suave); }
.tabela td.dir, .tabela th.dir { text-align: right; }

.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-4); }
.paginas { display: flex; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
.app .paginas a { display: grid; place-items: center; min-width: var(--alvo); min-height: var(--alvo); border-radius: var(--r-2); text-decoration: none; font-weight: 700; color: var(--texto); }
.app .paginas a[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtro { min-height: var(--alvo); padding: .4rem .95rem; border-radius: var(--r-pilula); border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 700; cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* Cartões de lista no telefone (substituem a tabela) */
.lista-cartoes { display: none; flex-direction: column; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.lista-cartoes > li { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }

/* ---------- Calendário (espaços nas linhas, horas nas colunas) ---------- */
.cal-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-4); margin-bottom: var(--e-4); }
.semana { display: flex; align-items: center; gap: var(--e-2); }
.semana strong { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 600; }
.btn-icone { width: var(--alvo); height: var(--alvo); padding: 0; }
.dias-abas { display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-1); margin-bottom: var(--e-4); }
.dia-aba { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5rem; min-height: 4rem; padding: .35rem .6rem; border: 2px solid var(--linha); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; line-height: 1.15; }
.dia-aba b { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 600; }
.dia-aba small { font-size: var(--t-xs); color: var(--texto-2); }
.dia-aba[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); box-shadow: inset 0 -4px 0 var(--acento-forte); }
.dia-aba[aria-pressed="true"] small { color: var(--sobre-acento); }

.legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); list-style: none; margin: 0 0 var(--e-4); padding: 0; font-size: var(--t-sm); }
.legenda li { display: flex; align-items: center; gap: .5rem; }
.amostra { width: 2rem; height: 1.1rem; border-radius: var(--r-1); border: 2px solid; }

.cal { position: relative; overflow-x: auto; background: var(--superficie); border: 2px solid var(--quadra); border-radius: var(--r-2); box-shadow: 0 0 0 4px var(--superficie), 0 0 0 6px var(--quadra); margin: 6px; }
.cal-int { position: relative; min-width: 62rem; }
/* detalhe esportivo: linha central e círculo central da quadra, às 14h30 (meio da faixa 7h–22h) */
.cal-int::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(13rem + (100% - 13rem) / 2); width: 2px; background: var(--quadra); pointer-events: none; }
.cal-int::after { content: ""; position: absolute; z-index: 0; top: 50%; left: calc(13rem + (100% - 13rem) / 2); width: 9rem; height: 9rem; border: 2px solid var(--quadra); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.cal-horas, .cal-linha { position: relative; display: grid; grid-template-columns: 13rem repeat(30, minmax(0, 1fr)); }
.cal-horas { z-index: 2; background: var(--superficie-2); border-bottom: 2px solid var(--linha); }
.cal-horas span { grid-column: span 2; padding: .45rem .35rem; font-size: var(--t-xs); color: var(--texto-2); font-variant-numeric: tabular-nums; border-left: 1px solid var(--linha); }
.cal-horas .cal-canto { grid-column: 1; border-left: 0; font-weight: 700; padding-left: .8rem; }
.cal-linha { min-height: 5rem; border-bottom: 1px solid var(--linha); }
.cal-linha:last-child { border-bottom: 0; }
.cal-espaco { grid-column: 1; grid-row: 1; position: sticky; left: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: .5rem .8rem; background: var(--superficie); border-right: 2px solid var(--linha); font-weight: 700; font-size: var(--t-sm); line-height: 1.25; }
.cal-espaco small { font-weight: 400; color: var(--texto-2); font-size: var(--t-xs); }
.cal-faixa { grid-column: 2 / -1; grid-row: 1; background-image: repeating-linear-gradient(to right, var(--linha) 0 1px, transparent 1px calc(100% / 15)); opacity: .7; }
.bloco { grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; margin: .4rem .12rem; padding: .3rem .45rem; border: 2px solid; border-radius: var(--r-1); font: inherit; font-size: var(--t-xs); line-height: 1.25; text-align: left; overflow: hidden; cursor: pointer; color: var(--texto); }
.bloco b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; }
.bloco .st { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.bloco .st .ic { width: .85rem; height: .85rem; stroke-width: 3; }
.bloco-aprovada { border-color: var(--ok); background: var(--ok-suave); }
.bloco-aprovada .st { color: var(--ok); }
.bloco-pendente { border-style: dashed; border-color: var(--aviso-borda); background: repeating-linear-gradient(135deg, var(--aviso-suave) 0 8px, var(--superficie) 8px 14px); }
.bloco-pendente .st { color: var(--aviso); }
.bloco-recusada { border-color: var(--linha-forte); background: var(--superficie-2); color: var(--texto-2); }
.bloco-recusada b { text-decoration: line-through; }
.bloco-recusada .st { color: var(--erro); }
.bloco-novo { border-style: dashed; border-width: 3px; border-color: var(--acento); background: var(--acento-suave); }
.bloco-novo .st { color: var(--acento); }
.bloco-conflito { border-style: dashed; border-width: 3px; border-color: var(--erro); background: var(--erro-suave); z-index: 2; }
.bloco-conflito .st { color: var(--erro); }
.cal-vazio { grid-column: 2 / -1; grid-row: 1; align-self: center; justify-self: center; z-index: 1; color: var(--texto-2); background: var(--superficie); padding: .2rem .6rem; border-radius: var(--r-1); }

/* Lista por dia (telefone) */
.dias { display: none; flex-direction: column; gap: var(--e-5); }
.dia h3 { position: sticky; top: 0; z-index: 2; padding-block: var(--e-2); background: var(--fundo); font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 600; }
.dia ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.evento { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3); border: 2px solid var(--linha); border-radius: var(--r-2); background: var(--superficie); }
.evento-hora { font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.evento-hora small { display: block; font-family: var(--f-corpo); font-size: var(--t-xs); font-weight: 400; color: var(--texto-2); }
.evento-corpo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.evento-pendente { border-style: dashed; border-color: var(--aviso-borda); }
.evento-recusada { background: var(--superficie-2); }
.evento-recusada .evento-quem { text-decoration: line-through; color: var(--texto-2); }

/* ---------- Passos (importação) ---------- */
.passos { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.passos li { display: flex; align-items: center; gap: .6rem; color: var(--texto-2); font-weight: 700; }
.passos .n { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--linha-forte); font-variant-numeric: tabular-nums; }
.passos .feito .n { background: var(--ok); border-color: var(--ok); color: var(--sobre-ok); }
.passos [aria-current="step"] { color: var(--texto); }
.passos [aria-current="step"] .n { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

/* ---------- Modal e toast ---------- */
.veu { background: var(--veu); padding: var(--e-6); display: grid; place-items: center; border-radius: var(--r-3); }
.modal { width: 100%; max-width: 32rem; background: var(--superficie); color: var(--texto); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); }
.modal h2 { font-size: var(--t-xl); }
.modal-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-3); }
.toast { display: flex; align-items: flex-start; gap: var(--e-3); max-width: 30rem; padding: .9rem 1rem; border-radius: var(--r-2); background: var(--texto); color: var(--fundo); box-shadow: var(--sombra-2); }
.toast .ic { margin-top: .1rem; }
.toast-ok .ic { color: var(--acento-suave); }
.toast-erro .ic { color: var(--erro-suave); }
.toast-corpo { flex: 1; min-width: 0; }
.toast button { background: transparent; border: 0; color: var(--fundo); font: inherit; font-weight: 700; text-decoration: underline; min-height: var(--alvo); padding: 0 .4rem; cursor: pointer; }

/* ---------- Ao vivo: ponto que pulsa + texto sempre visível (o pulso para em prefers-reduced-motion) ---------- */
.selo-ao-vivo { border-color: var(--erro); color: var(--erro); background: var(--erro-suave); }
.selo-ao-vivo::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; animation: pulsa 1.4s ease-in-out infinite; }

/* Local reservado para foto real (sem imagem de banco): contorno tracejado + texto alternativo visível */
.foto-marcada { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--e-4); border: 2px dashed var(--linha-forte); border-radius: var(--r-3); background: var(--superficie-2); color: var(--texto-2); text-align: center; }

/* ---------- Estados: vazio e carregando ---------- */
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-3); padding: var(--e-7) var(--e-5); border: 2px dashed var(--quadra); border-radius: var(--r-3); background: var(--superficie); }
.vazio svg.quadra { width: 6rem; height: 4rem; fill: none; stroke: var(--quadra); stroke-width: 2; }
.esqueleto { display: block; background: var(--superficie-3); border-radius: var(--r-1); animation: pulsa 1.4s ease-in-out infinite; }
.esq-l { height: 1rem; } .esq-g { height: 3rem; width: 60%; } .esq-c { width: 40%; }
@keyframes pulsa { 50% { opacity: .45; } }

/* ---------- Responsivo: abaixo de 900 px a coluna ocupa a largura toda ---------- */
@container app (max-width: 1150px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app (max-width: 899px) {
  .coluna { width: auto; margin-inline: 16px; }
  .nav, .usuario-txt, .so-desktop { display: none; }
  .tabbar { display: grid; }
  .topo-int { min-height: 3.75rem; justify-content: space-between; }
  .app h1 { font-size: var(--t-2xl); }
  .oque, .grade-2, .form-grade { grid-template-columns: minmax(0, 1fr); }
  .grade-2 > .vem-antes { order: -1; }
  .pagina-topo { padding-block: var(--e-5) var(--e-3); }
  .pagina-topo .btn { width: 100%; }
  .kpi-valor { font-size: var(--t-2xl); }
  .atencao li { grid-template-columns: auto minmax(0, 1fr); }
  .atencao li .btn { grid-column: 2; justify-self: start; }
  .cal-desktop, .tabela-desktop { display: none; }
  .dias { display: flex; }
  .lista-cartoes { display: flex; }
  .acoes { grid-template-columns: minmax(0, 1fr); }
  .app a.acao { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 3.75rem; }
  .cartao { padding: var(--e-4); }
  .grupo { padding: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation: none !important; transition: none !important; }
}
@media print {
  .topo, .tabbar, .acoes-cartao, .nao-imprime { display: none; }
  .coluna { width: auto; }
  .app { background: #fff; color: #000; }
}