/* ============================================================
   Responsividade global — carregado em toda página do sistema
   (landing, autenticação e os 3 painéis).

   Estratégia: em vez de reescrever cada seletor, redefinimos os
   tokens de espaçamento (--espaco-*) em telas menores. Como todo
   o layout já usa essas variáveis, o espaçamento encolhe no site
   inteiro automaticamente. Os ajustes abaixo cobrem o que a
   variável sozinha não resolve (grids, tabelas, modais).
   ============================================================ */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    min-width: 0; /* evita que flex/grid item force overflow horizontal */
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* ---------------- Tablet (≤900px) ---------------- */
@media (max-width: 900px) {
    :root {
        --espaco-8: 48px;
        --espaco-9: 64px;
    }
}

/* ---------------- Celular (≤600px) ---------------- */
@media (max-width: 600px) {
    :root {
        --espaco-6: 24px;
        --espaco-7: 32px;
        --espaco-8: 40px;
        --espaco-9: 48px;
    }

    .container {
        padding-inline: var(--espaco-4);
    }

    h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }

    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    /* Cards e formulários com menos respiro em telas pequenas */
    .card {
        padding: var(--espaco-4);
    }

    .auth-card {
        padding: var(--espaco-5) var(--espaco-4);
        border-radius: var(--raio-md);
    }

    .auth-wrapper {
        padding: var(--espaco-4) var(--espaco-3) var(--espaco-6);
    }

    /* Stats em coluna única — 2 colunas apertadas demais abaixo de 600px */
    .stats-grade {
        grid-template-columns: 1fr 1fr;
        gap: var(--espaco-3);
    }
    .stat-card {
        padding: var(--espaco-4);
    }
    .stat-card .stat-card-valor {
        font-size: 1.6rem;
    }

    /* Cabeçalho do painel empilha e os botões viram bloco cheio */
    .painel-cabecalho {
        flex-direction: column;
        align-items: stretch;
    }
    .painel-cabecalho .btn {
        width: 100%;
        justify-content: center;
    }

    /* Cards de vaga empilham em vez de ficar lado a lado */
    .vaga-card {
        flex-direction: column;
        align-items: stretch;
    }
    .vaga-card > div:last-child {
        align-items: stretch !important;
        width: 100%;
    }
    .vaga-card .btn,
    .vaga-card form {
        width: 100%;
    }
    .vaga-valor {
        font-size: 1.15rem;
    }

    /* Tabelas: rolagem horizontal suave em vez de espremer colunas */
    .tabela-wrapper {
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--espaco-4) * -1);
        padding-inline: var(--espaco-4);
    }
    table.tabela {
        font-size: 0.82rem;
    }
    table.tabela th,
    table.tabela td {
        padding: 10px;
        white-space: nowrap;
    }

    /* Filtros empilham em vez de forçar quebra estranha */
    .filtro-barra {
        flex-direction: column;
        align-items: stretch;
    }
    .filtro-barra select,
    .filtro-barra input,
    .filtro-barra .btn {
        width: 100%;
    }

    /* Modal de avaliação (candidatos.php) cabe na tela toda */
    dialog {
        max-width: 92vw !important;
        width: 92vw;
        margin: auto;
    }

    /* Grid de perfil (bombeiro/coordenador) sempre em 1 coluna */
    .perfil-grid {
        grid-template-columns: 1fr;
    }

    /* Sidebar ocupa quase a largura toda como painel deslizante */
    .sidebar {
        width: min(280px, 82vw);
        left: min(-280px, -82vw);
    }

    .hero-cta {
        flex-direction: column;
    }
    .hero-cta .btn {
        width: 100%;
    }
    .hero-stats {
        flex-wrap: wrap;
        gap: var(--espaco-5);
    }

    /* Ações do candidato (aceitar/recusar/avaliar) quebram linha se precisar */
    .candidato-acoes {
        flex-wrap: wrap;
        width: 100%;
    }
    .candidato-acoes form {
        flex: 1;
        min-width: 100px;
    }
    .candidato-acoes .btn {
        width: 100%;
    }

    /* Linha de campos de formulário sempre empilhada */
    .campo-linha {
        grid-template-columns: 1fr;
    }
}

/* ---------------- Celular pequeno (≤380px) ---------------- */
@media (max-width: 380px) {
    .stats-grade {
        grid-template-columns: 1fr;
    }
    .hero-stats {
        gap: var(--espaco-4) !important;
        flex-wrap: wrap;
    }
    .painel-escala {
        padding: var(--espaco-4);
    }
}

/* ---------------- Telas grandes (desktop wide) ---------------- */
@media (min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}

/* Área de toque confortável em qualquer dispositivo com ponteiro grosso (touch) */
@media (pointer: coarse) {
    .btn, .sidebar-nav a, table.tabela td a.btn, .campo input, .campo select, .campo textarea {
        min-height: 40px;
    }
}