/**
 * css/web.css — Camada visual da versão WEB do Pecuária 360 (Fase 4).
 *
 * TUDO sob `body.web-app` (marcada no boot do ponte-web.js) → NUNCA afeta o APK.
 * O app é multi-página (sem drawer persistente), então no desktop centralizamos
 * o conteúdo num painel confortável em vez de esticar a página mobile.
 * (Sidebar fixa com navegação é um refinamento futuro — exigiria injetar um menu
 * em todas as páginas pelo build.)
 */

/* Fundo da janela (paleta Pecuária: verde + terra) */
body.web-app {
    background: #EAF0E6;
}
body.web-app .app-container,
body.web-app #app {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(27, 94, 32, 0.06), transparent),
        linear-gradient(180deg, #EAF0E6 0%, #E3EADf 100%);
    min-height: 100vh;
}

/* ===== Desktop (≥ 980px): FORMATO HORIZONTAL — preenche a tela toda =====
   No PC a web é landscape: sem painel central nem faixas laterais sobrando.
   O conteúdo ocupa 100% da largura e os cards se espalham em colunas. */
@media (min-width: 980px) {
    body.web-app .app-container {
        max-width: none;
        width: 100%;
        margin: 0;
        min-height: 100vh;
    }
    /* Cabeçalho fixo no topo */
    body.web-app .header {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    /* Conteúdo ocupa a largura inteira, só com respiro lateral confortável */
    body.web-app .main-content,
    body.web-app .app-content {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    /* No PC: cards em DUAS colunas (cada linha = 2 módulos), um par abaixo do outro
       — não tudo numa linha só. Só sob body.web-app e ≥980px → no celular/app fica
       como o app (coluna única). */
    body.web-app .main-content :is(div, section):has(> .module-card),
    body.web-app .main-content :is(div, section):has(> .quick-action),
    body.web-app .main-content :is(div, section):has(> .farm-card),
    body.web-app #equipe-list,
    body.web-app #mo-list,
    body.web-app .quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
        align-items: start;
    }
    /* Cards de custo/relatório também espalham em colunas no PC */
    body.web-app #conteudo > .card { break-inside: avoid; }
    /* FAB do Nelo no canto da tela (sem painel central) */
    body.web-app .nelo-fab { right: 24px; }
}

/* ===== Muro de acesso (login / bloqueio premium) ===== */
.web-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(20, 28, 18, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.web-gate__card {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    max-width: 22rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.web-gate__card h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1B5E20;
    margin: 0 0 0.5rem;
}
.web-gate__card p {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.web-gate__btn {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 0.75rem;
    background: #1B5E20;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.web-gate__btn--sec {
    background: #fff;
    color: #1B5E20;
    border: 2px solid #1B5E20;
    margin-top: 0.5rem;
}

/* Scrollbar discreta no desktop */
@media (min-width: 980px) {
    body.web-app ::-webkit-scrollbar { width: 11px; }
    body.web-app ::-webkit-scrollbar-thumb { background: #C3CFB8; border-radius: 6px; }
}