/* ============================================================
   MOBILE FIXES — EventCalc
   Camada de correções mobile-first que NÃO altera a identidade
   visual (Dark Premium) — só garante toque, legibilidade e UX
   confortável em smartphone (Xiaomi Poco, Samsung, iPhone).
   ============================================================ */

/* —————————————————————————————————————————————————————
   1. ANTI-ZOOM iOS (Safari/Chrome iOS dão zoom quando input
   tem font-size < 16px). Aplicado SÓ em mobile pra não
   "engordar" inputs no desktop.
   ————————————————————————————————————————————————————— */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* —————————————————————————————————————————————————————
   2. TOUCH TARGETS — botões e inputs ≥ 44px (recomendação
   Apple HIG, Material Design = 48px). Mantemos 44px porque
   o assador segura o celular com uma mão e o botão fica
   atingível pelo polegar.
   ————————————————————————————————————————————————————— */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"],
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="password"],
    select {
        min-height: 44px;
    }

    /* Garante padding vertical mesmo se min-height não bater */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: 12px;
    }
}

/* —————————————————————————————————————————————————————
   3. BARRA DE PROGRESSO — labels precisam estar legíveis
   No projeto original o mobile reduz pra 0.58rem (~9px) =
   ilegível. Subimos pra 11px (limite mínimo de legibilidade).
   ————————————————————————————————————————————————————— */
@media (max-width: 500px) {
    .prog-label {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    .prog-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
}

/* —————————————————————————————————————————————————————
   4. ABAS / TABS — área de toque mais generosa
   Aplicado em .tab-btn (proposta) e .aba-btn (cardápio)
   ————————————————————————————————————————————————————— */
@media (max-width: 768px) {
    .tab-btn,
    .aba-btn,
    .biblio-tab {
        min-height: 48px;
        padding: 12px 8px;
    }
}

/* —————————————————————————————————————————————————————
   5. FOCO VISÍVEL — touchscreens precisam de feedback claro
   ————————————————————————————————————————————————————— */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* —————————————————————————————————————————————————————
   6. TAP HIGHLIGHT — remove o overlay azul/cinza default
   do Android/iOS e usa dourado discreto
   ————————————————————————————————————————————————————— */
* {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.15);
}

/* —————————————————————————————————————————————————————
   7. SCROLL HORIZONTAL — proteção redundante
   ————————————————————————————————————————————————————— */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* —————————————————————————————————————————————————————
   8. MODAIS — em mobile, ocupar maior parte da tela
   ————————————————————————————————————————————————————— */
@media (max-width: 500px) {
    .modal-sugestoes .modal-content-sugestoes,
    .modal-content,
    .ficha-modal,
    .premium-card {
        width: 94% !important;
        max-width: 94% !important;
        padding: 22px 18px !important;
        max-height: 88vh !important;
    }
}

/* —————————————————————————————————————————————————————
   9. INPUT NUMBER — esconder spinner em mobile (ocupa
   espaço do polegar e o assador costuma digitar direto)
   ————————————————————————————————————————————————————— */
@media (max-width: 768px) {
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }
}

/* —————————————————————————————————————————————————————
   10. TABELAS — wrapper de scroll horizontal isolado
   (não acionado automaticamente porque depende do HTML;
   incluído como utilitário pra usar com .tabela-wrap se
   necessário no futuro)
   ————————————————————————————————————————————————————— */
@media (max-width: 600px) {
    .tabela-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }
}