/* ==========================================================
   RESPONSIVO — celulares e tablets
   (carregado depois dos outros CSS em todas as páginas)
   ========================================================== */

/* ---------- Tablets e celulares (até 900px) ---------- */
@media screen and (max-width: 900px) {
    body { overflow: auto; height: auto; }

    /* Menu lateral vira barra de ícones fixa embaixo */
    nav {
        width: 100%; height: 64px; top: auto; bottom: 0; left: 0;
        flex-direction: row; align-items: center;
        border-right: none; border-top: 4px solid var(--azul-claro);
        padding-bottom: env(safe-area-inset-bottom);
    }
    nav ul { flex-direction: row; margin-top: 0; width: auto; flex: 1; justify-content: space-around; align-items: center; }
    nav .sair { position: static; flex: 0 0 auto; width: auto; }
    nav ul li { width: auto; height: 56px; padding: 0 10px; justify-content: center; border-radius: 10px; }
    nav ul li:hover, nav ul .item-sair:hover { transform: none; box-shadow: none; }
    nav ul li a { justify-content: center; font-size: 22px; }
    nav ul li a span { margin-left: 0; }
    nav .txt-link { display: none; }

    .conteudo { width: 100%; height: auto; margin-left: 0; padding-bottom: 80px; overflow: visible; }

    /* Páginas novas */
    .pagina { padding: 24px 16px 30px; }
    .pagina h1 { font-size: 22px; }
    .painel { padding: 18px 14px; border-radius: 10px; }
    .painel h2 { font-size: 17px; }
    .layout-2col, .form-grid, .form-grid-3, .grid-info, .grid-grupos { grid-template-columns: 1fr; }
    .form-linha .data, .form-linha .local, .form-linha .gols, .artilheiro { width: 100%; }
    .form-linha input, .form-linha select, .form-linha textarea { width: 100%; }
    .graficos { grid-template-columns: 1fr; }
    .grafico-box { padding: 14px; }
    .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .card { padding: 14px; }
    .card .card-num { font-size: 26px; }
    .painel, .grafico-box { overflow-x: auto; }
    .tabela-simples th, .tabela-simples td { font-size: 12px; padding: 7px 6px; }
    .perfil-header { flex-direction: column; text-align: center; }
    .acoes-topo { justify-content: center; }
    .lista-checks { grid-template-columns: 1fr; }

    /* Cadastro de alunos / usuários */
    .conteudo .formulario { height: auto; padding: 24px 12px; }
    .conteudo .formulario h1 { font-size: 30px; text-align: center; margin-left: 0; width: 100%; }
    .conteudo .formulario .pessoais h2,
    .conteudo .formulario .endereco h2,
    .conteudo .formulario .responsavel h2 { font-size: 20px; margin-left: 0; }
    .conteudo .formulario .linha,
    .conteudo .formulario .pessoais .linha,
    .conteudo .formulario .endereco .linha,
    .conteudo .formulario .responsavel .linha { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
    .conteudo .formulario .linha > div,
    .conteudo .formulario .linha .input { width: 100% !important; }
    .conteudo .formulario input, .conteudo .formulario select { width: 100% !important; }
    .conteudo .formulario .responsavel .linha .btn-novo-responsavel,
    .btn-cadastrar { width: 100% !important; }

    /* Tabelas antigas (lista de alunos / usuários) */
    .tabela { padding: 0 12px; margin-top: 20px; overflow-x: auto; }
    .tabela form input { width: 100%; }
    .tabela form .pesquisa-container { display: flex; gap: 8px; width: 100%; }
    th { padding: 8px 10px; }
    td { padding: 5px 6px; }

    /* Modal do responsável */
    .modal-responsavel { padding-left: 0; padding: 10px; }
    .modal-conteudo { width: 100%; max-height: 92vh; overflow-y: auto; padding: 18px; }
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn-cancelar, .modal-footer .btn-salvar { width: 100% !important; }
    .modal-body .linha .input select { width: 100% !important; height: 35px; }

    /* Login */
    .login { 
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .login .lado1 { width: 100%; height: 50%; padding: 30px 0; margin-right: 0; }
    .login .lado1 img { width: 160px; height: 160px; border-radius: 10px; }
    .login .lado2 { padding: 30px 20px; width: 100%; height: 50%; }
    .login .lado2 .form h1 { font-size: 38px; letter-spacing: -2px; line-height: 40px; }
    .login .lado2 p { font-size: 16px; margin-bottom: 25px; }
    .login .lado2 form input { width: 100% !important; }

    .login .lado2 .form h1{
        line-height: 20px;
    }
    .input-container i#toggleSenha{
        right: 10px;
    }
    .login .lado2 form .inp{
        height: 40px;
    }
    .login .lado2 form .bi-person{
        margin-top: 18px;
        font-size: 25px;
    }
    .login .lado2 form .bi-key{
        margin-top: 0px;
        font-size: 25px;
    }
    .login .lado2 form .lembrar input{
        width: 20px !important;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .login .lado2 form button{
        width: 100% !important;
        height: 45px;
        margin-top: 0px;
        font-size: 25px;
    }
    footer{
        position: relative;
        width: 100%;
        height: 64px;
        align-items: end;
        justify-content: center;
    }


    /* Mensagens */
    .flash-message { top: 12px; right: 12px; left: 12px; }
}

/* ---------- Celulares pequenos (até 480px) ---------- */
@media screen and (max-width: 480px) {
    nav ul li { padding: 0 6px; }
    nav ul li a { font-size: 19px; }
    .cards { grid-template-columns: 1fr 1fr; }
    .card .card-label { font-size: 10px; }
    .pub-resumo { grid-template-columns: repeat(3, 1fr); }
    .pub-num b { font-size: 20px; }
    .grid-jogos, .grid-times { grid-template-columns: 1fr; }
    .placar { font-size: 22px; }
    .linha-lance { flex-wrap: wrap; }
    .linha-lance select, .linha-lance input[type="text"] { flex: 1 1 100%; }
    .btn-azul { padding: 0 16px; font-size: 14px; }
    .pub-topo h1 { font-size: 18px; }
    .pub-topo img { width: 52px; height: 52px; }
}