/* ============================================================
   RH Online — responsive.css
   Arquivo CENTRALIZADO de responsividade (mobile/tablet).
   Incluir em toda tela nova com:
   <link rel="stylesheet" href="css/responsive.css">

   Convenção de nomes usada por este arquivo:
   - .sidebar            -> menu lateral da tela (qualquer largura)
   - .sidebar-overlay    -> div vazia com essa classe, pra escurecer o fundo
   - .hamburger-app      -> botão de menu no cabeçalho
   - #header-solo        -> cabeçalho próprio da tela (quando ela também
                            pode ser aberta dentro do iframe do index.html)
   - #btn-voltar-solo    -> botão "Voltar" próprio da tela (mesmo caso acima)
   - .metrics, .stats    -> grades de cards de estatística (adicionar mais
                            nomes aqui conforme forem aparecendo)
   ============================================================ */

:root {
    --header-height: 58px;
}

.hamburger-app {
    display: none;
    color: #fff;
    background: rgba(27,58,107,.85);
    border: none;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    margin-right: 8px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 199;
}

@media (max-width: 768px) {

    .hamburger-app {
        display: block !important;
    }

    .sidebar {
        position: fixed !important;
        top: var(--header-height) !important;
        left: 0 !important;
        height: calc(100vh - var(--header-height)) !important;
        transform: translateX(-100%) !important;
        transition: transform .25s ease !important;
        z-index: 200 !important;
        overflow-y: auto !important;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }
    .sidebar-overlay.open {
        display: block !important;
    }

    .metrics, .stats, .fech-grid, .benef-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    table {
        white-space: nowrap !important;
    }
    .table-card, .tabs-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html.dentro-iframe #header-solo,
    html.dentro-iframe #btn-voltar-solo,
    html.dentro-iframe .btn-voltar-solo {
        display: none !important;
    }
    html.dentro-iframe .layout {
        min-height: 100vh !important;
    }
}