/* HSA Inteligente — camada adaptativa/mobile compartilhada (2026-10-09).
   Carregada junto com pwa.js nas páginas de uso pessoal (não nas *_tv.html).
   Tudo aqui é aditivo: no desktop (>= 768px) praticamente nada muda; os
   ajustes de layout só valem em tela de celular. */

/* ── Base de toque (todas as larguras) ───────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(0, 102, 204, .12); }
.overflow-x-auto, .overflow-y-auto { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.nav-scroll { scrollbar-width: none; scroll-snap-type: x proximity; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll > a { scroll-snap-align: start; }

/* ── App instalado: respeita notch / barra de gestos ─────────────────── */
.pwa-standalone body { padding-bottom: env(safe-area-inset-bottom); }
.pwa-standalone header.sticky { padding-top: env(safe-area-inset-top); }
.pwa-standalone header.sticky > div:first-child,
.pwa-standalone header.sticky > nav > div {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* ── Celular ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* iOS dá zoom automático em campo com fonte < 16px */
    input, select, textarea { font-size: 16px !important; }

    /* Cabeçalho dos painéis: some o separador e o ícone colorido do módulo
       pra sobrar espaço pro título; o "← Dashboard" vira só a seta. */
    header.sticky .w-px.h-6 { display: none; }
    header.sticky .w-px.h-6 + .w-9.h-9 { display: none; }
    header.sticky a[href="index.html"] { font-size: 0; gap: 0; padding: .45rem; }
    header.sticky a[href="index.html"] > * { width: 1rem; height: 1rem; }

    /* Alvos de toque mínimos na barra de módulos */
    nav .nav-scroll > a { padding-top: .45rem; padding-bottom: .45rem; }

    /* Tabelas longas: limite de altura menor fazia rolagem dentro de
       rolagem; no celular a página inteira rola. */
    .overflow-x-auto.overflow-y-auto[class*="max-h-"] { max-height: 70vh; }

    /* Gráficos nunca estouram a largura */
    canvas { max-width: 100% !important; }
}

/* ── Componentes do pwa.js ───────────────────────────────────────────── */
.pwa-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
    max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: 9999px;
    font: 500 12px/1.3 Inter, system-ui, sans-serif; box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
}
.pwa-toast-warn { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }

.pwa-fab {
    position: fixed; right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 55;
    width: 44px; height: 44px; border-radius: 9999px; border: 0;
    display: flex; align-items: center; justify-content: center;
    background: #0066CC; color: #fff; box-shadow: 0 6px 18px rgba(0, 102, 204, .35);
    opacity: .85;
}
.pwa-fab:active { transform: scale(.94); opacity: 1; }

.pwa-hdr-btn {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9999px; cursor: pointer;
    background: #EFF6FF; color: #0066CC; border: 1px solid #DBEAFE;
}
.pwa-hdr-btn:active { transform: scale(.92); }
.dark .pwa-hdr-btn { background: rgba(0, 102, 204, .18); color: #93C5FD; border-color: rgba(147, 197, 253, .25); }
.pwa-girando svg { animation: pwa-giro .8s linear infinite; }
@keyframes pwa-giro { to { transform: rotate(360deg); } }

.pwa-install {
    position: fixed; left: 1rem; right: 1rem; z-index: 60;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    max-width: 520px; margin: 0 auto;
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .75rem .75rem .9rem; border-radius: 1rem;
    background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    font: 13px/1.35 Inter, system-ui, sans-serif; color: #334155;
}
.pwa-install img { border-radius: .6rem; flex-shrink: 0; }
.pwa-install-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pwa-install-txt strong { color: #0F172A; font-weight: 700; }
.pwa-install-txt span { font-size: 12px; color: #64748B; }
.pwa-install-ok {
    flex-shrink: 0; border: 0; border-radius: 9999px; padding: .5rem .9rem;
    background: #0066CC; color: #fff; font: 600 12px Inter, system-ui, sans-serif;
}
.pwa-install-x {
    flex-shrink: 0; border: 0; background: transparent; color: #94A3B8;
    font-size: 22px; line-height: 1; padding: .25rem .4rem;
}
.dark .pwa-install { background: #1E293B; border-color: #334155; color: #CBD5E1; }
.dark .pwa-install-txt strong { color: #F1F5F9; }
.dark .pwa-install-txt span { color: #94A3B8; }