/* ============================================================
   Café 360 — WEB (zavarise.com.br/cafe360/app)
   Injetado só no build web (tools/build_web.py).

   Filosofia: mobile-first continua valendo. Aqui a gente faz o
   layout RESPIRAR no PC sem virar "app de celular esticado":
     • celular/tablet estreito → idêntico ao app (drawer desliza)
     • PC/notebook (≥ 980px)   → sidebar FIXA + conteúdo numa
       coluna de leitura centralizada, sobre um fundo café.
   Tudo protegido por body.web-app pra nunca afetar o APK.
   ============================================================ */

/* ====== Emojis via Twemoji (imagens) — alinhamento como texto ====== */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.12em;
    display: inline-block;
}

/* ====== Tela de bloqueio (gate premium — web não vende) ====== */
.web-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #2A2520F2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.web-gate-card {
    background: #FAF6EB;
    border-radius: 18px;
    max-width: 420px;
    padding: 36px 28px;
    text-align: center;
    font-family: inherit;
}
.web-gate-icone {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: contain;
    display: inline-block;
}
.web-gate-card h2 { color: #3E5638; font-size: 22px; margin: 12px 0; }
.web-gate-card p { color: #5C5550; font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
.web-gate-btn {
    display: block;
    background: #3E5638;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.web-gate-nota {
    color: #8B847E;
    font-size: 13px;
    line-height: 1.5;
    margin: 16px 0 4px;
}
.web-gate-sair {
    background: none; border: none;
    color: #8B6A1F; font-size: 14px;
    text-decoration: underline; cursor: pointer; padding: 8px;
    margin-top: 8px;
}
.web-gate-qr-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px 0 18px;
}
.web-gate-qr {
    width: 160px; height: 160px;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(42, 37, 32, 0.12);
}
.web-gate-qr-leg {
    font-size: 13px;
    color: #8B847E;
}

/* ====== Variáveis locais do layout web ====== */
body.web-app {
    --web-sidebar: 280px;     /* largura da sidebar fixa  */
    --web-coluna: 1040px;     /* largura de leitura do conteúdo */
}

/* ============================================================
   PC / NOTEBOOK — sidebar fixa + coluna de leitura
   ============================================================ */
@media (min-width: 980px) {

    /* Fundo café tratado: o "vazio" dos lados vira moldura, não buraco.
       Ancorado no #app (que tem min-height:100vh e cresce com o conteúdo) —
       cor sólida no body como rede de segurança. Sem background-attachment:
       fixed (quebra em alguns navegadores/headless). */
    body.web-app { background: #E7DFC8; }

    body.web-app #app {
        background:
            radial-gradient(1400px 720px at 22% -260px, rgba(201, 169, 97, 0.12), transparent),
            linear-gradient(180deg, #EFE8D6, #E7DFC8);
        min-height: 100vh;
    }

    /* ---- Sidebar permanente (o drawer para de deslizar) ---- */
    body.web-app:not(.web-sem-sidebar) #drawer.drawer {
        transform: none !important;
        width: var(--web-sidebar);
        z-index: 80;                 /* abaixo de Sheets/Confirm/gate */
        box-shadow: 1px 0 0 rgba(42, 37, 32, 0.08);
        border-right: 1px solid #E8DFC2;
    }
    body.web-app:not(.web-sem-sidebar) #drawer-overlay { display: none !important; }

    /* O botão hambúrguer do header perde a função (sidebar sempre visível) */
    body.web-app:not(.web-sem-sidebar) .app-header .header-btn[onclick*="Drawer"] {
        display: none !important;
    }

    /* ---- Header e conteúdo cedem espaço pra sidebar ---- */
    body.web-app:not(.web-sem-sidebar) .app-header {
        margin-left: var(--web-sidebar);
    }
    body.web-app:not(.web-sem-sidebar) .app-content {
        margin-left: var(--web-sidebar);
        padding-left: var(--gap-xl);
        padding-right: var(--gap-xl);
    }

    /* O Cafezinho é position:fixed (tela travada) — no PC não pode cobrir a
       sidebar; começa depois dela. */
    body.web-app:not(.web-sem-sidebar) .pagina-consultor-ia {
        left: var(--web-sidebar);
    }

    /* Conteúdo preenche toda a área depois da sidebar (sem faixas de fundo
       sobrando dos lados) — preferência do dono pro layout de PC. */
    body.web-app:not(.web-sem-sidebar) .app-content > * {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* FAB da IA e balão do Cafezinho no canto da viewport */
    body.web-app .fab { right: 28px; bottom: 28px; }
    /* Sem !important: senão o arraste (que seta style.left inline) não move a
       bolha na horizontal. A especificidade já sobrepõe o posicionamento base. */
    body.web-app .cafezinho-fab { right: 28px; bottom: 28px; left: auto; }

    /* ---- Telas de entrada (login/cadastro): sem sidebar, centralizado ---- */
    body.web-app.web-sem-sidebar #drawer.drawer { transform: translateX(-105%) !important; }
    body.web-app.web-sem-sidebar .app-content > * {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ---- Cartões de atalho/ações em 2 colunas: preenche e organiza ---- */
    body.web-app:not(.web-sem-sidebar) .acoes-rapidas,
    body.web-app:not(.web-sem-sidebar) .atalhos-rapidos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-md);
    }

    /* ---- "Sua fazenda hoje": cards em 2 colunas no PC ----
       Tudo que NÃO é card (título, slot de culturas) ocupa a linha inteira. */
    body.web-app:not(.web-sem-sidebar) .home-bloco-fazenda {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-md);
        align-items: start;
    }
    body.web-app:not(.web-sem-sidebar) .home-bloco-fazenda > :not(.modulo-card) {
        grid-column: 1 / -1;
    }
    /* Hub de relatórios também respira em 2 colunas */
    body.web-app:not(.web-sem-sidebar) .pagina-central-rel #rel-conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-md);
        align-items: start;
    }
    body.web-app:not(.web-sem-sidebar) .pagina-central-rel #rel-conteudo > :not(.modulo-card) {
        grid-column: 1 / -1;
    }

    /* ---- Hero mais baixo no PC: sobra menos altura "desperdiçada" ---- */
    body.web-app:not(.web-sem-sidebar) .hero-section {
        min-height: 150px;
        padding-top: var(--gap-lg);
        padding-bottom: var(--gap-lg);
    }

    /* ---- Item ativo da sidebar bem visível (padrão de sistema de PC) ---- */
    body.web-app:not(.web-sem-sidebar) .drawer-item.ativo {
        background: var(--verde-suave);
        font-weight: var(--peso-semi, 600);
    }
    body.web-app:not(.web-sem-sidebar) .drawer-item.ativo::before {
        width: 4px;
        top: 6px; bottom: 6px;
    }


    /* Scrollbar discreta no tom do app */
    body.web-app ::-webkit-scrollbar { width: 11px; }
    body.web-app ::-webkit-scrollbar-track { background: transparent; }
    body.web-app ::-webkit-scrollbar-thumb {
        background: #C9BC9C; border-radius: 6px;
        border: 2px solid transparent; background-clip: padding-box;
    }
}

/* ============================================================
   TELÃO (≥ 1500px) — coluna um pouco mais generosa
   ============================================================ */
@media (min-width: 1500px) {
    body.web-app { --web-coluna: 1180px; }
}