/* =====================================================================================================
   Base visual Legacy 6.0 — variáveis (tokens)
   Um arquivo só para as duas bases (escolinhas e motor de eventos) e para o site da Legado.
   Regras:
   - Toda peça (pecas.css) usa só estas variáveis. Proibido valor solto de cor, espaço, letra, borda ou sombra.
   - O tema da instalação (escola.json → tema.js → /marca.css) só troca as cores de marca (--cor-primaria...).
     Se o tema não carregar, o que aparece é o tema Legacy daqui de baixo, nunca a LegScore.
   - Modo escuro: estrutura pronta em :root[data-tema="escuro"], desligada por padrão.
   - Densidade: classe no <body>: .modo-gestao (Legacy e plataforma) ou .modo-escola (secretaria, professor,
     responsável, aluno e páginas públicas). Sem classe, vale o modo Gestão.
   ===================================================================================================== */

/* Barlow e Barlow Condensed (SIL OFL 1.1), servidas pelo próprio site. O caminho é relativo a este arquivo. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fontes/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fontes/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fontes/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fontes/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fontes/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fontes/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ---------- Cores de marca (tema da instalação). Padrão = tema Legacy (Legado Esportes). ----------
     Valores já calculados por tema.js para o tema Legacy. Cada instalação sobrescreve em /marca.css. */
  --cor-primaria: #D32B21;              /* vermelho Legado: botão principal, item ativo */
  --cor-primaria-contraste: #FFFFFF;    /* texto sobre a primária (4,5:1 garantido) */
  --cor-primaria-forte: #B0241B;        /* pressionado */
  --cor-primaria-texto: #CF2A20;        /* a primária usada como texto e link sobre fundo claro (4,5:1) */
  --cor-primaria-suave: #FBEAE9;        /* fundo de linha selecionada, chip ativo */
  --cor-primaria-original: #D32B21;     /* só decorativo */
  --cor-secundaria: #14171C;            /* preto-tinta Legado: cabeçalho e menu lateral */
  --cor-secundaria-contraste: #FFFFFF;
  --cor-secundaria-forte: #030304;
  --cor-secundaria-texto: #14171C;
  --cor-secundaria-suave: #E8E8E8;
  --cor-secundaria-original: #14171C;
  --cor-destaque: #EF4B3F;              /* vermelho vivo: indicador do item ativo, "ao vivo" */
  --cor-destaque-contraste: #14171C;
  --cor-destaque-forte: #F26E65;
  --cor-destaque-texto: #D51F12;
  --cor-destaque-suave: #FDEDEC;
  --cor-destaque-original: #EF4B3F;
  --cor-destaque-sobre-secundaria: #EF4B3F;
  --cor-foco: #CF2A20;                  /* anel de foco (3:1 garantido contra a superfície) */
  --cor-foco-sobre-secundaria: #FFFFFF;
  --cor-link: #CF2A20;

  /* ---------- Cores de interface ---------- */
  --cor-fundo: #EEF0F3;                 /* fundo da página */
  --cor-superficie: #FFFFFF;            /* cartões, tabelas, campos, modal */
  --cor-superficie-2: #F6F7F9;          /* cabeçalho de tabela, linha alternada, área recolhida */
  --cor-superficie-elevada: #FFFFFF;    /* menu flutuante, modal */
  --cor-borda: #D5D9DF;                 /* divisórias (decorativas) */
  --cor-borda-controle: #7A818C;        /* contorno de campo e caixa de marcar (3:1 com fundo e superfície) */
  --cor-texto: #14171C;
  --cor-texto-secundario: #545B66;      /* 6:1 sobre o fundo */
  --cor-desativado: #8E949C;            /* texto desativado (isento de contraste, mas legível) */
  --cor-desativado-fundo: #E4E7EB;
  --cor-sobreposicao: rgba(20, 23, 28, 0.56); /* atrás do modal e da gaveta */
  --cor-esqueleto: #E4E7EB;
  --cor-esqueleto-brilho: #F3F4F6;
  --cor-sombra: rgba(20, 23, 28, 0.12);
  --cor-sombra-forte: rgba(20, 23, 28, 0.2);

  /* ---------- Cores de significado (iguais em todas as escolas e na Legacy) ----------
     fundo claro + borda + texto. Texto ≥ 4,5:1 sobre o fundo; borda ≥ 3:1 sobre a superfície. */
  --cor-sucesso-fundo: #E6F4EA;  --cor-sucesso-borda: #2E7D4F;  --cor-sucesso-texto: #1B5E37;  --cor-sucesso: #2E7D4F;
  --cor-aviso-fundo: #FFF3D6;    --cor-aviso-borda: #9A6B00;    --cor-aviso-texto: #6E4A00;    --cor-aviso: #9A6B00;
  --cor-erro-fundo: #FCEBEC;     --cor-erro-borda: #B42335;     --cor-erro-texto: #9B1C2C;     --cor-erro: #B42335;
  --cor-info-fundo: #E7F0FA;     --cor-info-borda: #2862A8;     --cor-info-texto: #1D4C85;     --cor-info: #2862A8;
  --cor-neutro-fundo: #EDEFF2;   --cor-neutro-borda: #6B727D;   --cor-neutro-texto: #3A404A;   --cor-neutro: #6B727D;
  --cor-erro-contraste: #FFFFFF;      /* texto do botão de perigo cheio */
  /* medalhas (pódio, ranking) e cartões disciplinares: cor de significado do esporte, sempre com texto ou número junto */
  --cor-ouro: #8A6D00;  --cor-ouro-fundo: #FFF4CC;  --cor-prata: #5F6773;  --cor-prata-fundo: #EEF0F3;  --cor-bronze: #8F4E1E;  --cor-bronze-fundo: #F8E7DA;
  --cor-cartao-amarelo: #F2C200;  --cor-cartao-vermelho: #C8102E;  --cor-cartao-azul: #1F5FBF;

  /* ---------- Tipografia ---------- */
  --fonte-interface: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;           /* a família da interface */
  --fonte-titulo: "Barlow Condensed", "Arial Narrow", "Barlow", Arial, sans-serif; /* mesma família, versão estreita: títulos e números */
  --texto-12: 0.75rem;
  --texto-14: 0.875rem;
  --texto-16: 1rem;      /* corpo do texto e todos os campos */
  --texto-18: 1.125rem;
  --texto-20: 1.25rem;
  --texto-24: 1.5rem;
  --texto-30: 1.875rem;
  --texto-36: 2.25rem;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --altura-linha-texto: 1.5;
  --altura-linha-titulo: 1.2;
  --altura-linha-compacta: 1.25; /* rótulos de botão e etiquetas */

  /* ---------- Espaçamento (escala de 4 px). Proibido valor solto. ---------- */
  --esp-4: 0.25rem;
  --esp-8: 0.5rem;
  --esp-12: 0.75rem;
  --esp-16: 1rem;
  --esp-24: 1.5rem;
  --esp-32: 2rem;
  --esp-48: 3rem;
  --esp-64: 4rem;

  /* ---------- Bordas, linhas e sombras ---------- */
  --raio-4: 4px;          /* botões, campos, etiquetas (cantos quase retos, como a Legado) */
  --raio-8: 8px;          /* cartões, tabelas, menus */
  --raio-12: 12px;        /* modal, gaveta, avisos rápidos */
  --raio-redondo: 999px;  /* avatar, chave, chips */
  --linha: 1px;
  --linha-grossa: 2px;
  --linha-marca: 3px;     /* o filete vermelho da Legado: item ativo, título de seção */
  --sombra-1: 0 1px 2px var(--cor-sombra);                                   /* cartão */
  --sombra-2: 0 4px 12px var(--cor-sombra);                                  /* menu flutuante, cabeçalho fixo */
  --sombra-3: 0 16px 40px var(--cor-sombra-forte);                           /* modal, gaveta */
  --sombra-rolagem: 0 0 12px var(--cor-sombra-forte);                        /* borda de tabela que rola */

  /* ---------- Camadas (z-index) ---------- */
  --camada-base: 0;
  --camada-fixo: 10;            /* cabeçalho de tabela, rodapé de ação */
  --camada-cabecalho: 100;      /* cabeçalho do site/painel e barra inferior */
  --camada-gaveta: 200;
  --camada-modal: 300;
  --camada-menu-flutuante: 400; /* "⋯", seleção com busca (por cima do modal, quando abre dentro dele) */
  --camada-aviso: 500;          /* aviso rápido: sempre por cima de tudo */

  /* ---------- Pontos de quebra (documentação: CSS não aceita variável dentro de @media) ----------
     celular:  até 767 px          → @media (max-width: 767px)
     tablet:   768 a 1023 px       → @media (min-width: 768px) and (max-width: 1023px)
     PC:       a partir de 1024 px → @media (min-width: 1024px)
     PC largo: a partir de 1440 px → @media (min-width: 1440px)                                    */
  --quebra-tablet: 768px;
  --quebra-pc: 1024px;
  --quebra-pc-largo: 1440px;

  /* ---------- Medidas fixas da estrutura ---------- */
  --alvo-minimo: 44px;              /* toque mínimo (regra do sistema) */
  --alvo-espaco: var(--esp-8);      /* espaço mínimo entre alvos */
  --icone-16: 16px;
  --icone-20: 20px;
  --icone-24: 24px;
  --icone-32: 32px;
  --icone-48: 48px;
  --marca-altura: 32px;             /* altura máxima do logo no cabeçalho */
  --marca-largura: 160px;           /* largura máxima do logo no cabeçalho */
  --largura-formulario: 720px;
  --largura-coluna-p: 9rem;         /* coluna mínima de grade estreita (indicadores) */
  --largura-coluna: 16rem;          /* coluna mínima de grade (cartões) */
  --largura-coluna-g: 22rem;        /* coluna mínima de grade larga */
  --largura-campo-curto: 12rem;     /* CEP, número, UF, valor */
  --largura-campo-medio: 20rem;     /* CPF, telefone, data */
  --largura-aviso: 28rem;           /* aviso rápido e busca do cabeçalho */
  --largura-texto-curto: 36ch;      /* frase de estado vazio */
  --largura-texto: 68ch;
  --largura-pagina: 1440px;
  --largura-menu: 264px;
  --largura-gaveta: 480px;
  --largura-modal: 520px;
  --largura-menu-flutuante: 240px;
  --altura-cabecalho: 56px;
  --altura-barra-inferior: 64px;
  --altura-rodape-acao: 76px;
  --caixa-marcar: 22px;

  /* ---------- Movimento ---------- */
  --duracao-rapida: 150ms;
  --duracao-media: 250ms;
  --duracao-giro: 800ms;    /* giro do "carregando" (indicador de estado: fica, só mais lento, no movimento reduzido) */
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Densidade: modo Gestão (padrão) ---------- */
  --controle-altura-p: 32px;
  --controle-altura: 40px;
  --controle-altura-g: 48px;
  --controle-pad-x: var(--esp-16);
  --texto-apoio: var(--texto-14);       /* texto secundário, ajuda de campo, cabeçalho de tabela */
  --texto-tabela: var(--texto-14);
  --tabela-pad-y: var(--esp-8);
  --tabela-pad-x: var(--esp-12);
  --lista-pad-y: var(--esp-12);
  --cartao-pad: var(--esp-16);
  --secao-espaco: var(--esp-24);
  --titulo-pagina: var(--texto-30);
  --titulo-secao: var(--texto-20);
}

/* ---------- Densidade: modo Escola (letra e botões maiores, menos opções por tela) ---------- */
.modo-escola {
  --controle-altura-p: 44px;
  --controle-altura: 48px;
  --controle-altura-g: 56px;
  --controle-pad-x: var(--esp-24);
  --texto-apoio: var(--texto-16);
  --texto-tabela: var(--texto-16);
  --tabela-pad-y: var(--esp-12);
  --tabela-pad-x: var(--esp-16);
  --lista-pad-y: var(--esp-16);
  --cartao-pad: var(--esp-24);
  --secao-espaco: var(--esp-32);
  --titulo-pagina: var(--texto-30);
  --titulo-secao: var(--texto-24);
}
.modo-gestao {
  --controle-altura-p: 32px;
  --controle-altura: 40px;
  --controle-altura-g: 48px;
}

/* ---------- Celular: nada abaixo de 44 px de toque, nos dois modos ---------- */
@media (max-width: 767px) {
  :root, .modo-gestao {
    --controle-altura-p: 44px;
    --controle-altura: 44px;
    --controle-altura-g: 52px;
    --titulo-pagina: var(--texto-24);
    --cartao-pad: var(--esp-16);
    --secao-espaco: var(--esp-24);
  }
  .modo-escola {
    --controle-altura-p: 44px;
    --controle-altura: 48px;
    --controle-altura-g: 56px;
    --titulo-pagina: var(--texto-24);
    --cartao-pad: var(--esp-16);
  }
}

/* ---------- Modo escuro (estrutura pronta, desligado: só vale com data-tema="escuro" no <html>) ----------
   As cores de marca do escuro vêm de tema.js (bloco :root[data-tema="escuro"] do /marca.css). */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor-fundo: #0E0F12;
  --cor-superficie: #1B1E24;
  --cor-superficie-2: #22262D;
  --cor-superficie-elevada: #262A32;
  --cor-borda: #2F343C;
  --cor-borda-controle: #7D8590;
  --cor-texto: #F4F5F7;
  --cor-texto-secundario: #A9B0BA;
  --cor-desativado: #6B727D;
  --cor-desativado-fundo: #262A32;
  --cor-sobreposicao: rgba(0, 0, 0, 0.64);
  --cor-esqueleto: #262A32;
  --cor-esqueleto-brilho: #2F343C;
  --cor-sombra: rgba(0, 0, 0, 0.4);
  --cor-sombra-forte: rgba(0, 0, 0, 0.6);
  --cor-sucesso-fundo: #12291C;  --cor-sucesso-borda: #4CAF78;  --cor-sucesso-texto: #8FD9AE;  --cor-sucesso: #4CAF78;
  --cor-aviso-fundo: #2E2310;    --cor-aviso-borda: #D9A030;    --cor-aviso-texto: #F2C978;    --cor-aviso: #D9A030;
  --cor-erro-fundo: #33161A;     --cor-erro-borda: #F06A78;     --cor-erro-texto: #FFB3BB;     --cor-erro: #F06A78;
  --cor-info-fundo: #12233A;     --cor-info-borda: #5B9BE6;     --cor-info-texto: #A9CDF5;     --cor-info: #5B9BE6;
  --cor-neutro-fundo: #22262D;   --cor-neutro-borda: #8A919B;   --cor-neutro-texto: #C9CED6;   --cor-neutro: #8A919B;
  --cor-erro-contraste: #14171C;
  --cor-ouro: #F2C94C;  --cor-ouro-fundo: #2E2510;  --cor-prata: #C9CED6;  --cor-prata-fundo: #262A32;  --cor-bronze: #E3A06B;  --cor-bronze-fundo: #33221A;
  /* marca Legacy no escuro (valores de tema.js; cada instalação recalcula no /marca.css) */
  --cor-primaria-texto: #E66760;
  --cor-primaria-suave: #3C2023;
  --cor-destaque-texto: #F2685E;
  --cor-destaque-suave: #412629;
  --cor-secundaria-texto: #77869E;
  --cor-secundaria-suave: #1A1D23;
  --cor-link: #E66760;
  --cor-foco: #E66760;
}

/* ---------- Movimento reduzido: tudo instantâneo ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-rapida: 0ms;
    --duracao-media: 0ms;
    --duracao-giro: 2400ms;
  }
}