/* =========================================================================
   Liga dos Pobres — folha de estilos

   Direcção: "painel". A classificação é um marcador de estádio, não uma
   tabela de dashboard. Um só sistema tipográfico em duas larguras, réguas
   finas, numerais tabulares, e um único acento de sinalética industrial
   usado apenas onde carrega informação: o líder, o separador activo e o
   foco do teclado. Tudo o resto é cinzento e cala-se.

   As fontes são servidas pela própria aplicação (ver fontes/). Não há
   pedidos a terceiros: assim a Content-Security-Policy pode continuar a
   ser default-src 'self' sem abrir excepções para tipos de letra.
   Archivo e Archivo Narrow, Omnibus-Type, licença SIL Open Font 1.1.
   ========================================================================= */

@font-face {
    font-family: "Archivo";
    src: url("fontes/archivo.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo Narrow";
    src: url("fontes/archivo-narrow.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- fundo: grafite quente. Não o azul-preto de toda a gente. --- */
    --ground: #141518;
    --painel: #1a1c20;
    --painel-alto: #212429;

    /* --- réguas --- */
    --regua: #2b2f35;
    --regua-forte: #454b54;

    /* --- tinta --- */
    --tinta: #f0f1f3;
    --tinta-media: #a0a7b0;
    --tinta-fraca: #6e757e;

    /* --- o acento. Um só, e sempre com trabalho para fazer. --- */
    --sinal: #ff5a1f;
    --sinal-fundo: #2a1409;

    /* --- estados. A cor acelera a leitura numa lista longa; a palavra é
           que a garante. --- */
    --ok: #35b36b;
    --espera: #cc9a2e;
    --fim: #e0484d;
    --frio: #5b9dd9;

    /* --- escala tipográfica --- */
    --t-micro: 11px;
    --t-min: 12.5px;
    --t-corpo: 14.5px;
    --t-med: 16px;
    --t-titulo: 20px;
    --t-grande: 26px;
    --t-marcador: 30px;

    /* --- escala de espaço. Sete valores, e mais nenhum. --- */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;
    --e7: 48px;

    /* --- cantos apertados: instrumento, não cartão --- */
    --r: 3px;
    --r-g: 5px;

    --pad-x: var(--e6);
}

@media (max-width: 900px) {
    :root { --pad-x: var(--e4); }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--tinta);
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--t-corpo);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* A régua de sinal no topo do ecrã. É a única coisa gritada na página
   inteira, e é por isso que se ouve. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sinal);
    z-index: 10;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Tudo o que é número alinha em coluna. Uma tabela cujos algarismos dançam
   não se lê, compara-se mal, e parece amadora. */
.numero, .posicao, .pos, .pts, .codigo, td.numero, th.numero {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

:focus-visible {
    outline: 2px solid var(--sinal);
    outline-offset: 2px;
    border-radius: 1px;
}

/* ---------------------------------------------------------------- topo --- */

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    background: var(--painel);
    border-bottom: 1px solid var(--regua);
    padding: var(--e4) var(--pad-x);
}

.marca {
    display: flex;
    align-items: center;
    gap: var(--e3);
}

.marca h1 {
    font-family: "Archivo Narrow", "Archivo", sans-serif;
    font-size: var(--t-titulo);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.marca p {
    margin: 1px 0 0;
    color: var(--tinta-fraca);
    font-size: var(--t-min);
}

/* O símbolo: uma bola reduzida ao essencial — uma circunferência e uma só
   placa. Desenhado, não um emoji: o emoji muda de forma em cada sistema
   operativo, e é o sinal mais claro de que ninguém pensou no assunto. */
.simbolo {
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--tinta);
}

.simbolo .placa { fill: var(--sinal); }

.bola-grande {
    width: 44px;
    height: 44px;
    color: var(--tinta-fraca);
}

.sessao {
    display: flex;
    align-items: center;
    gap: var(--e3);
}

.sessao span {
    color: var(--tinta-media);
    font-size: var(--t-min);
}

.sessao a.botao { text-decoration: none; }

/* -------------------------------------------------------------- layout --- */

.conteudo {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--e5);
    padding: var(--e5) var(--pad-x) var(--e7);
    align-items: start;
}

@media (max-width: 900px) {
    .conteudo { grid-template-columns: 1fr; }
}

.painel-lateral,
.painel-principal {
    background: var(--painel);
    border: 1px solid var(--regua);
    border-radius: var(--r-g);
    padding: var(--e5);
    /* Sem isto o painel recusa encolher abaixo do seu conteúdo: um filho de
       grelha ou de flex tem min-width: auto por omissão. Uma tabela larga
       deixava de caber e empurrava a PÁGINA INTEIRA para o lado, em vez de
       rolar dentro da sua caixa. Era isto que partia o telemóvel. */
    min-width: 0;
}

/* Cada tabela rola dentro da sua própria caixa. A alternativa — deixar a
   página rolar na horizontal — arrasta o cabeçalho e tudo o resto com ela,
   e perde-se a noção de onde se está. */
#tabela-classificacao,
#tabela-equipas,
#tabela-convites,
#tabela-gestores {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.painel-lateral h2 {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
    margin-bottom: var(--e3);
}

/* --------------------------------------------------------- formulários --- */

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    margin-bottom: var(--e5);
}

.formulario label {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-media);
    margin-top: var(--e2);
}

.formulario.em-linha {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--e3);
    flex-wrap: wrap;
}

.formulario.em-linha > div {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

input {
    background: var(--ground);
    border: 1px solid var(--regua);
    border-radius: var(--r);
    color: var(--tinta);
    padding: 9px 11px;
    font-size: var(--t-corpo);
    font-family: inherit;
    width: 100%;
    transition: border-color 0.12s ease;
}

input::placeholder { color: var(--tinta-fraca); }

input:focus {
    outline: none;
    border-color: var(--sinal);
}

input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* -------------------------------------------------------------- botões --- */

.botao {
    background: var(--painel-alto);
    border: 1px solid var(--regua-forte);
    border-radius: var(--r);
    color: var(--tinta);
    cursor: pointer;
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-corpo);
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 9px 15px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.botao:hover:not(:disabled) {
    background: #2a2e34;
    border-color: var(--tinta-fraca);
}

.botao:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.botao.primario {
    background: var(--sinal);
    border-color: var(--sinal);
    color: #14150f;
    font-weight: 700;
}

.botao.primario:hover:not(:disabled) {
    background: #ff7440;
    border-color: #ff7440;
}

.botao.perigo {
    background: transparent;
    border-color: #5e2a2c;
    color: #ff8a8e;
}

.botao.perigo:hover:not(:disabled) {
    background: #2a1618;
    border-color: var(--fim);
}

.botao.pequeno {
    padding: 5px 10px;
    font-size: var(--t-min);
}

/* ------------------------------------------------------ lista de ligas --- */

.lista-ligas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.cartao-liga {
    background: transparent;
    border: 1px solid transparent;
    border-left: 2px solid var(--regua);
    border-radius: 0 var(--r) var(--r) 0;
    cursor: pointer;
    padding: var(--e2) var(--e3);
    text-align: left;
    width: 100%;
    color: inherit;
    font-family: inherit;
    font-size: var(--t-corpo);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cartao-liga:hover {
    background: var(--painel-alto);
    border-left-color: var(--tinta-fraca);
}

.cartao-liga.selecionado {
    background: var(--painel-alto);
    border-left-color: var(--sinal);
}

.cartao-liga strong {
    display: block;
    font-weight: 600;
}

.cartao-liga small {
    color: var(--tinta-fraca);
    font-size: var(--t-min);
}

/* --------------------------------------------------- cabeçalho da liga --- */

.cabecalho-liga {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--e4);
    flex-wrap: wrap;
    margin-bottom: var(--e4);
}

.cabecalho-liga h2 {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-grande);
    font-weight: 700;
    letter-spacing: 0;
}

.badges {
    display: flex;
    gap: var(--e2);
    flex-wrap: wrap;
    margin-top: var(--e2);
}

/* Etiqueta de estado: um ponto de cor e a palavra. Sozinha, a cor não diz
   nada a quem não a distingue. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--regua);
    border-radius: var(--r);
    color: var(--tinta-media);
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 8px;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge.verde { color: var(--ok); border-color: #244a35; }
.badge.vermelho { color: var(--fim); border-color: #4d2628; }
.badge.amarelo { color: var(--espera); border-color: #4a3c1c; }
.badge.azul { color: var(--frio); border-color: #26404f; }

/* --------------------------------------------------------- separadores --- */

.separadores {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--regua);
    margin-bottom: var(--e5);
}

.separador {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tinta-fraca);
    cursor: pointer;
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-min);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--e3) var(--e4);
    margin-bottom: -1px;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.separador:hover { color: var(--tinta); }

.separador.ativo {
    border-bottom-color: var(--sinal);
    color: var(--tinta);
}

/* ------------------------------------------------------------- tabelas --- */

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border-bottom: 1px solid var(--regua);
    padding: var(--e3);
    text-align: left;
}

th {
    font-family: "Archivo Narrow", sans-serif;
    color: var(--tinta-fraca);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom-color: var(--regua-forte);
}

tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover { background: var(--painel-alto); }
tbody tr:last-child td { border-bottom: none; }

td.numero, th.numero { text-align: right; }

.linha-desistente td { color: var(--tinta-fraca); }

.linha-desistente strong,
.linha-desistente .equipa {
    text-decoration: line-through;
    text-decoration-color: var(--tinta-fraca);
}

/* ---------------------------------------------------------- o marcador ---

   A classificação é o coração da aplicação, e a única coisa nesta página
   desenhada para se ler do outro lado da sala: posição e pontos em largura
   estreita e corpo grande, o resto encolhido à volta. O primeiro lugar
   leva a marca de sinal — é a única linha que a recebe, senão deixava de
   querer dizer alguma coisa.                                             */

.marcador .col-pos { width: 62px; }

.marcador .pos {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-marcador);
    font-weight: 700;
    line-height: 1;
    color: var(--tinta-fraca);
}

.marcador .col-equipa .equipa {
    display: block;
    font-weight: 600;
    font-size: var(--t-med);
}

.marcador .col-equipa .treinador {
    display: block;
    color: var(--tinta-fraca);
    font-size: var(--t-min);
}

.marcador .col-pts { width: 90px; text-align: right; }

.marcador .pts {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-marcador);
    font-weight: 700;
    line-height: 1;
}

.marcador .lider {
    background: linear-gradient(90deg, var(--sinal-fundo), transparent 55%);
    box-shadow: inset 2px 0 0 var(--sinal);
}

.marcador .lider:hover {
    background: linear-gradient(90deg, var(--sinal-fundo), transparent 40%);
}

.marcador .lider .pos { color: var(--sinal); }

.marcador tr.linha-desistente .pos,
.marcador tr.linha-desistente .pts { color: var(--tinta-fraca); }

/* ------------------------------------------------------------ jornadas --- */

.barra-acoes {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
    margin-bottom: var(--e5);
}

.ajuda {
    color: var(--tinta-media);
    font-size: var(--t-min);
}

.grelha-jornadas {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--e4);
    align-items: start;
}

@media (max-width: 780px) {
    .grelha-jornadas { grid-template-columns: 1fr; }
}

.lista-jornadas {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.cartao-jornada {
    background: transparent;
    border: 1px solid transparent;
    border-left: 2px solid var(--regua);
    border-radius: 0 var(--r) var(--r) 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--t-corpo);
    font-weight: 600;
    padding: var(--e2) var(--e3);
    text-align: left;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cartao-jornada:hover {
    background: var(--painel-alto);
    border-left-color: var(--tinta-fraca);
}

.cartao-jornada.selecionado {
    background: var(--painel-alto);
    border-left-color: var(--sinal);
}

.cartao-jornada small {
    color: var(--tinta-fraca);
    display: block;
    font-weight: 400;
    font-size: var(--t-min);
}

.detalhe-jornada {
    background: var(--ground);
    border: 1px solid var(--regua);
    border-radius: var(--r-g);
    padding: var(--e4);
    min-height: 120px;
}

.detalhe-jornada h3 {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-med);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--e1);
}

.detalhe-jornada input[type="number"] { width: 84px; }

/* --------------------------------------------------- vazios e alertas --- */

.vazio {
    color: var(--tinta-media);
    padding: var(--e7) var(--e5);
    text-align: center;
}

.vazio h2 {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-med);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: var(--e3) 0 var(--e1);
    color: var(--tinta);
}

.vazio p { margin: 0; font-size: var(--t-min); }

/* O alerta acompanha a margem da página. Antes tinha 28px fixos e, no
   telemóvel, ficava desalinhado de tudo o resto. */
.alerta {
    background: #2a1618;
    border: 1px solid #5e2a2c;
    border-left: 2px solid var(--fim);
    border-radius: var(--r);
    color: #ff9ea1;
    margin: var(--e4) var(--pad-x) 0;
    padding: var(--e3) var(--e4);
    font-size: var(--t-corpo);
}

.alerta.sucesso {
    background: #10241a;
    border-color: #244a35;
    border-left-color: var(--ok);
    color: #7fd6a2;
}

.oculto { display: none; }

/* -------------------------------------------------- páginas de entrada --- */

.pagina-auth {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--e5);
}

.cartao-auth {
    background: var(--painel);
    border: 1px solid var(--regua);
    border-top: 2px solid var(--sinal);
    border-radius: var(--r-g);
    max-width: 380px;
    padding: var(--e6);
    width: 100%;
}

.pagina-auth .alerta { margin: var(--e4) 0 0; }

.marca-auth {
    align-items: center;
    display: flex;
    gap: var(--e3);
    margin-bottom: var(--e2);
}

.marca-auth h1 {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-titulo);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cartao-auth .formulario { margin: var(--e4) 0 var(--e3); }
.cartao-auth .botao { margin-top: var(--e3); width: 100%; }
.cartao-auth a { color: var(--sinal); }

/* ------------------------------------------------------- administração --- */

.conteudo-admin {
    display: flex;
    flex-direction: column;
    gap: var(--e5);
    padding: var(--e5) var(--pad-x) var(--e7);
}

.titulo-seccao {
    font-family: "Archivo Narrow", sans-serif;
    font-size: var(--t-med);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--e1);
}

.conteudo-admin .ajuda {
    display: block;
    margin-bottom: var(--e4);
    max-width: 70ch;
}

.codigo {
    background: var(--ground);
    border: 1px solid var(--regua);
    border-radius: var(--r);
    color: var(--sinal);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
    font-size: var(--t-min);
    padding: 3px 7px;
    margin-right: var(--e1);
    word-break: break-all;
}

/* ------------------------------------------------------------------------
   Telemóvel

   A folha foi escrita a olhar para o ecrã grande, e notava-se: os
   formulários em linha espremiam dois campos em 390px, os separadores
   partiam-se em duas linhas, e o marcador punha números de 30px em colunas
   de 62. Nada disto é uma questão de gosto — é a diferença entre usar e
   não usar a aplicação no telemóvel.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
    :root {
        --t-marcador: 24px;
        --t-grande: 21px;
    }

    .topo { padding: var(--e3) var(--pad-x); }

    /* O subtítulo da marca rouba a linha inteira ao botão de sair. */
    .marca p { display: none; }

    .painel-lateral,
    .painel-principal { padding: var(--e4); }

    .conteudo,
    .conteudo-admin { gap: var(--e4); }

    /* "Em linha" deixa de fazer sentido: dois campos lado a lado nesta
       largura não são dois campos, são dois campos ilegíveis. */
    .formulario.em-linha { flex-direction: column; align-items: stretch; }
    .formulario.em-linha > div { width: 100%; }
    .formulario.em-linha .botao { width: 100%; }

    /* Os separadores rolam em vez de se partirem em duas linhas. Sem barra
       à vista: num ecrã de toque ela não serve para nada e só suja. */
    .separadores {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .separadores::-webkit-scrollbar { display: none; }

    .separador {
        padding: var(--e3);
        white-space: nowrap;
    }

    /* Alvo de toque: 9px de padding dava 38px de altura, abaixo dos 44 que
       um dedo precisa para acertar à primeira. */
    .botao { padding: 12px 16px; }
    .botao.pequeno { padding: 8px 12px; }

    .cabecalho-liga { flex-direction: column; align-items: stretch; }
    .cabecalho-liga .botao { width: 100%; }

    .barra-acoes .botao { width: 100%; }

    th, td { padding: var(--e2) var(--e3); }

    .marcador .col-pos { width: 44px; }
    .marcador .col-pts { width: 62px; }
    .marcador .col-equipa .equipa { font-size: var(--t-corpo); }

    .vazio { padding: var(--e5) var(--e3); }
}

/* ------------------------------------------------------------------------
   Quem pediu menos movimento ao sistema operativo pediu-o a sério.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}