/* ============================================================
   MERK PRAXIS — MOBILE STYLESHEET
   Otimizações 100% visuais para smartphones.
   Carregado por último: sobrescreve estilos anteriores via !important
   quando necessário. NíO altera HTML nem JavaScript.
   ============================================================ */

/* ---------- 0. ANTI-OVERFLOW GLOBAL (vale em qualquer tela) ---------- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
* { box-sizing: border-box; }
img, video, canvas: svg {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   1. BREAKPOINT PRINCIPAL — CELULAR (até 820px)
   Tudo aqui dentro s: afeta telas pequenas: desktop fica intacto.
   ============================================================ */
@media screen and (max-width: 820px) {

    /* --- 1.1 Reset de overflow em containers raiz --- */
    body, #app-wrapper, .screen, .view, .home-container,
    .ia-container, .files-container, .msgs-container,
    .crm-content, .dash-main, .mp-wrap {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* --- 1.2 Tipografia base mais legível --- */
    body { font-size: 15px; line-height: 1.45; }
    h1, .mp-h1, .dv-title, .ag-title-lg, .dash-header-title {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.15 !important;
        word-break: break-word;
    }
    h2, .mp-h2, .home-section-title, .files-section-title,
    .ag-section-title, .modal-title {
        font-size: clamp(18px, 4.8vw, 22px) !important;
        line-height: 1.2 !important;
    }
    h3 { font-size: 16px !important; }
    p, .mp-lead, .dv-subtitle, .ag-subtitle, .modal-sub {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* --- 1.3 Touch-friendly: alvos ≥ 44px --- */
    button, .hbtn, .htab, .dtab, .nav-item, .mp-btn-primary,
    .mp-btn-outline, .htool-btn, .ftool-btn, .ftype-btn,
    .mdash-period-btn, .msgs-stab, .dialer-tab, .export-opt-btn,
    input[type="button"], input[type="submit"], input[type="reset"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="search"], input[type="number"],
    select, textarea {
        font-size: 16px !important; /* impede zoom automático no iOS */
        min-height: 44px;
        max-width: 100%;
    }

    /* ============================================================
       2. HEADER GLOBAL
       ============================================================ */
    .app-header {
        padding: 8px 12px !important;
        gap: 8px;
    }
    .app-brand-banner, .brand-banner {
        max-height: 32px;
        width: auto;
    }
    .header-actions {
        gap: 6px !important;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .header-actions .hbtn {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 40px;
    }

    /* ============================================================
       3. BOTTOM NAV — barra inferior compacta e rolável
    /* ============================================================
       3. BOTTOM NAV — escondida (usa menu hamburger do v3-shell)
       ============================================================ */
    .bottom-nav {
        display: none !important;
    }

    /* Sem padding-bottom extra — tela ocupa 100% vertical */
    .screen { padding-bottom: 0 !important; }

    /* Cards de planilha menores verticalmente */
    .htool-btn {
        padding: 10px 14px !important;
        gap: 6px !important;
    }
    .htool-btn .pp-ico {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .htool-btn .pp-ico svg {
        width: 18px !important;
        height: 18px !important;
    }
    .htool-btn .pp-title {
        font-size: 13px !important;
    }
    .htool-btn .pp-desc {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    .htool-btn .pp-cta {
        font-size: 11px !important;
        padding: 4px 0 !important;
    }
    .htool-btn .pp-tag {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    .pp-hero h1 {
        font-size: 18px !important;
        margin-top: 4px !important;
    }
    .pp-hero p {
        font-size: 12px !important;
    }
    .pp-hero {
        padding: 8px 0 !important;
    }
    .home-toolbar {
        gap: 8px !important;
    }

    /* FAB do discador acima da bottom-nav */
    .fab-dialer {
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        right: 12px !important;
        width: 52px !important;
        height: 52px !important;
    }

    /* ============================================================
       4. LOCK SCREEN / LOGIN
       ============================================================ */
    #lock-screen { padding: 16px; }
    .login-wrap {
        width: 100% !important;
        max-width: 380px !important;
        padding: 24px 20px !important;
        margin: 0 auto;
    }
    .login-brand img { max-width: 70%; height: auto; }
    #formLogin .field { margin-bottom: 14px; }
    #formLogin input {
        width: 100% !important;
        padding: 12px 14px !important;
    }
    #formLogin button[type="submit"] {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
    }

    /* ============================================================
       5. LANDING / INFO VIEW (mp-*)
       ============================================================ */
    .mp-wrap { padding: 0 16px !important; }
    .mp-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px 0 !important;
    }
    .mp-nav-right {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: center;
    }
    .mp-nav-right button,
    .mp-nav-right .mp-btn-outline,
    .mp-nav-right .mp-btn-primary {
        flex: 1 1 auto;
        min-width: 130px;
    }
    .mp-hero {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 24px 0 !important;
        text-align: center;
    }
    .mp-hero > div { width: 100% !important; }
    .mp-hero-card {
        width: 100% !important;
        max-width: 360px;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 16px auto 0 !important;
    }
    .mp-manifesto-grid,
    .mp-foot-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .mp-card {
        width: 100% !important;
        padding: 18px !important;
    }
    .mp-cta { width: 100%; }
    .mp-tag, .mp-kicker { font-size: 11px !important; }

    /* ============================================================
       6. HOME / DASHBOARD INTERNO
       ============================================================ */
    .home-container, .ia-container, .files-container, .msgs-container {
        padding: 12px !important;
    }
    .home-subtabs, .msgs-subtabs, .dialer-tabs, .home-toolbar, .files-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .home-subtabs::-webkit-scrollbar,
    .msgs-subtabs::-webkit-scrollbar,
    .dialer-tabs::-webkit-scrollbar,
    .home-toolbar::-webkit-scrollbar,
    .files-toolbar::-webkit-scrollbar { display: none; }

    .htab, .msgs-stab, .dialer-tab {
        flex: 0 0 auto !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* --- 6.1 Dashboard moderno (mdash-*) --- */
    .mdash-bento, .mdash-cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .mdash-card { padding: 14px !important; min-height: 90px; }
    .mdash-card-val { font-size: 20px !important; }
    .mdash-card-label { font-size: 11px !important; }
    .mdash-card-sub { font-size: 10px !important; }
    .mdash-chart-wrap, .mdash-chart-box { width: 100% !important; }
    .mdash-pct-big { font-size: 36px !important; }
    .mdash-pct-block { padding: 12px !important; }
    .mdash-head, .mdash-sec-head {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .mdash-rec-row {
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }
    .mdash-rec-info { min-width: 0; flex: 1 1 auto; }
    .mdash-rec-name { font-size: 14px !important; }
    .mdash-rec-time, .mdash-rec-pill { font-size: 11px !important; }
    .mdash-period-slider {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .mdash-period-slider::-webkit-scrollbar { display: none; }
    .mdash-period-btn { flex: 0 0 auto; }

    /* ============================================================
       7. CRM — força empilhamento, sem cortes
       ============================================================ */
    .dash-layout, .ag-layout-wide, .ag-layout, .wa-chat-layout,
    .rel-layout, .dash-container, .chart3d-donut-wrap {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }
    .dash-sidebar, .sidebar, .crm-sidebar {
        width: 100% !important;
        position: relative !important;
        height: auto !important;
        min-height: unset !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }
    .dash-main {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 12px !important;
    }
    .dash-kpi-grid, .dash-charts, .dash-table-container, .grid-3,
    .grid, .grid-container, .features-grid, .crm-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Kanban — colunas roláveis horizontalmente com snap */
    .k-board {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px !important;
        padding-bottom: 16px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .k-col {
        min-width: 82vw !important;
        max-width: 82vw !important;
        scroll-snap-align: center;
        flex: 0 0 auto;
    }

    /* Tabela CRM — scroll horizontal contido */
    table, .crm-table, .dash-table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Chip rows: action bar, etiqueta — não cortar */
    .chip-row, .action-bar, .ab-btns, .custom-etiq-grid, .folder-type-btns {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ab-info { flex-wrap: wrap; }
    .ab-name { font-size: 15px !important; }

    /* ============================================================
       8. DIALER — TECLADO NUMÉRICO
       ============================================================ */
    .dv-shell, .modern-dialer-wrap, .dv-phone-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
    }
    .dv-phone-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .dv-status-display, .dialer-number-big, .modern-dinput, .dinput {
        font-size: clamp(28px, 8vw, 40px) !important;
        text-align: center !important;
        padding: 12px 8px !important;
        word-break: break-all;
    }
    /* Grade do teclado: 3 colunas perfeitas: centradas */
    #dialer-view .dv-phone-grid > .dv-keys,
    .dv-keys, .phone-grid, .modern-keypad {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        max-width: 320px;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .dv-key, .modern-phone-key, .phone-key {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 60px;
        border-radius: 50% !important;
        font-size: clamp(20px, 6vw, 28px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .phone-actions, .dialer-ctrl-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 20px !important;
        flex-wrap: wrap;
    }
    .phone-call-btn, .phone-hang-btn, .dctrl-btn {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50% !important;
        font-size: 14px;
    }
    .modern-btn-primary.dctrl-btn,
    .modern-btn-secondary.dctrl-btn {
        flex: 1 1 auto;
        max-width: 160px;
        height: 52px !important;
        width: auto !important;
        border-radius: 26px !important;
    }
    .dv-history, .dv-history-search {
        width: 100% !important;
        max-width: 100% !important;
    }
    .dialer-island {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        left: 10px !important;
        right: 10px !important;
    }
    .dslider-row, .island-slider-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .dslider, .island-slider { width: 100% !important; }

    /* ============================================================
       9. AGENDA
       ============================================================ */
    .ag-wide-wrap, .ag-normal-wrap {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    .cal-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
        font-size: 12px;
    }
    .cal-header, .cal-month-nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    .cal-month-title { font-size: 16px !important; }
    .cal-nav-btn { width: 36px; height: 36px; }

    /* ============================================================
       10. ARQUIVOS / MENSAGENS
       ============================================================ */
    .msg-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .msg-save-all { width: 100%; }
    .file-back-btn, .back-home-btn { min-height: 40px; }

    /* ============================================================
       11. MODAIS
       ============================================================ */
    .modal-overlay { padding: 12px !important; }
    .modal {
        width: 100% !important;
        max-width: 420px !important;
        max-height: 92vh !important;
        margin: 0 auto !important;
        padding: 18px !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
    }
    .modal-title { font-size: 18px !important; }
    .modal-sub { font-size: 13px !important; }
    .export-options {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .map-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .map-sel, .map-lbl { width: 100% !important; }
    .mbtn-cancel, .gr-btn { width: 100%; }

    /* ============================================================
       12. PAINEL DE TEMA / GRADIENT EDITOR
       ============================================================ */
    .gradient-editor {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
    }
    .mode-toggle {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .mode-opt { flex: 1 1 auto; min-width: 90px; }
}

/* ============================================================
   13. CELULAR PEQUENO (≤ 380px) — ajustes finos
   ============================================================ */
@media screen and (max-width: 380px) {
    .app-header { padding: 6px 10px !important; }
    .app-brand-banner { max-height: 28px; }
    .header-actions .hbtn { padding: 6px 10px !important; font-size: 12px !important; }
    .mdash-bento, .mdash-cards { grid-template-columns: 1fr !important; }
    .mp-nav-right button { min-width: 100%; }
    .k-col { min-width: 88vw !important; max-width: 88vw !important; }
    .dv-keys, .phone-grid, .modern-keypad { gap: 8px !important; max-width: 280px; }
    .phone-call-btn, .phone-hang-btn, .dctrl-btn { width: 56px !important; height: 56px !important; }
}

/* ============================================================
   14. PAISAGEM EM CELULAR (altura curta)
   ============================================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .screen { padding-bottom: 60px !important; }
    .bottom-nav { padding: 4px 6px !important; }
    .bottom-nav .nav-item { padding: 4px 8px !important; }
    .nav-label { display: none !important; }

    .mp-hero { flex-direction: row !important; flex-wrap: wrap; }
    .mp-hero-card { display: none !important; }

    .dv-phone-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        align-items: start;
    }
    .dv-keys, .phone-grid, .modern-keypad {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: 100%;
        gap: 6px !important;
    }
    .dv-key, .modern-phone-key, .phone-key {
        min-height: 44px !important;
        font-size: 18px !important;
    }
    .phone-actions, .dialer-ctrl-row { margin-top: 10px !important; gap: 12px !important; }
    .phone-call-btn, .phone-hang-btn { width: 48px !important; height: 48px !important; }

    .dash-kpi-grid { grid-template-columns: 1fr 1fr !important; }
    .mdash-bento, .mdash-cards { grid-template-columns: repeat(3, 1fr) !important; }
    .k-col { min-width: 55vw !important; max-width: 55vw !important; }

    .cal-grid { font-size: 11px; }
}


/* -- GLOBAL FIXES -- */
/* 1. Remover barras pretas e arrumar fundo */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg, #0a0a0f);
    overflow: hidden !important;
}

/* 2. Zoom na planilha igual Excel (user-scalable=yes no HTML já  cuida disso),
   mas garantimos overflow. */
.table-wrapper {
    touch-action: pan-x pan-y pinch-zoom !important;
    overflow: auto !important;
}

/* 3. Carrossel da aba Início */
.mp-manifesto-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 20px;
}
.mp-cap-card {
    min-width: 85vw !important;
    scroll-snap-align: center;
    flex-shrink: 0;
}

/* 4. Dashboard Scroll, Gráfico Quadrante 1, Etiquetas Linha 1 */
#dash-view {
    overflow-y: auto !important;
}
.dash-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}
.dash-sub-nav {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 10px;
}
.dash-sub-nav button {
    white-space: nowrap;
}
.dash-charts {
    display: flex !important;
    flex-direction: column !important;
}
.chart3d-donut-wrap {
    order: 1 !important;
}
.ring-legend {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 10px;
}
.ring-leg-item {
    white-space: nowrap;
    flex-shrink: 0;
}

/* 5. Agenda (Today Plan horizontal e Calendário menor) */
.ag-layout {
    display: flex !important;
    flex-direction: column !important;
}
.ag-cal {
    width: 100% !important;
    max-width: 100% !important;
}
.cal-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
}
.cal-day-name {
    font-size: 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-plan {
    width: 100% !important;
    min-height: 250px;
}

/* 6. Aba Discador - Botões retangulares arredondados */
.phone-call-btn, .phone-hang-btn {
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 120px !important;
    aspect-ratio: auto !important;
    height: 50px !important;
}

/* 7. Arquivos scroll */
#files-view {
    overflow-y: auto !important;
}

/* 8. Tema Claro Lilás */
body[data-theme="light"] {
    --bg: #ffffff !important;
    --bg2: #f8f9fa !important;
    --bg3: #e9ecef !important;
    --text: #000000 !important;
    --primary: #c8a2c8 !important;
    --primary-hover: #b892b8 !important;
    --purple: #c8a2c8 !important;
}

/* 9. Menu Planeta menor */
#personalize-modal .modal {
    width: 90% !important;
    max-width: 320px !important;
    padding: 16px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* 10. Ilha flutuante (Planilhas: */
#global-actions {
    position: fixed !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(30,30,30,0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    display: flex !important;
    gap: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    z-index: 100 !important;
    flex-wrap: nowrap !important;
}
body[data-theme="light"] #global-actions {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
#global-actions button {
    white-space: nowrap !important;
}

/* 11. Células da planilha (sheet-card) menos esticadas */
.sheet-card {
    padding: 12px !important;
    min-height: unset !important;
}


body.light-theme { --color-bg-primary: #ffffff; --color-text-primary: #000000; --color-purple-primary: #B794F4; --color-purple-bright: #D6BCFA; --color-border: #E2E8F0; }
.theme-panel { width: 80% !important; max-width: 320px !important; }
/* mobile scale */
@media (max-width: 768px) {
    html {
        font-size: 16px; /* Reset for better readability */
    }
    
    /* Ensure scrolling on Dashboard history */
    .crm-history {
        overflow-y: auto !important;
        max-height: 40vh !important;
    }
    
    /* Dashboard flex layout: graph top, tags bottom inline */
    .dashboard-view-content {
        display: flex;
        flex-direction: column;
    }
    .dashboard-tags {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Dashboard Top Tabs working */
    .dashboard-tabs {
        display: flex !important;
    }
    
    /* Agenda: Today Plan bigger, Calendar smaller */
    .agenda-left {
        flex: 2 !important;
    }
    .agenda-right {
        flex: 1 !important;
        transform: scale(0.9);
        transform-origin: top right;
    }
    
    /* Dialer Buttons */
    .btn-call, .btn-end {
        border-radius: 12px !important;
    }
    
    /* Files Scroll */
    .files-view {
        overflow-y: auto !important;
    }
    
    /* Spreadsheet cells height */
    .spreadsheet-item {
        padding: 8px 12px !important;
        height: auto !important;
    }
    
    /* Light Mode colors */
    body.light-mode {
        --bg1: #ffffff !important;
        --text1: #000000 !important;
        --accent: #c8a2c8 !important; /* Lilac */
    }
}

@media(max-width: 768px) {
    .header-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Fix dashboard tabs visibility */
    .view-tabs {
        display: flex !important;
    }
    .mp-features {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap !important;
        scroll-behavior: smooth;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 100%;
    }
    .mp-features::-webkit-scrollbar { display: none; }
    .mp-features > li {
        min-width: 100%;
        scroll-snap-align: start;
        flex: 0 0 100%;
        box-sizing: border-box;
    }
}

/* Carousel Mobile Enforcements */
#info-view .carousel-active { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-behavior: smooth !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
#info-view .carousel-active::-webkit-scrollbar { display: none !important; }
#info-view .carousel-active .mp-card { scroll-snap-align: center !important; min-width: 85vw !important; max-width: 85vw !important; flex: 0 0 auto !important; margin: 0 auto !important; }


@media(max-width: 768px) {
    #main-screen, #lock-screen { /* zoom: 0.75 removido para 100% da tela */ }
    .header-actions { display: flex !important; flex-wrap: wrap; justify-content: center; }
    .view-tabs { display: flex !important; }
    .mp-features { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; flex-wrap: nowrap !important; scroll-behavior: smooth; padding: 0 !important; margin: 0 !important; gap: 0 !important; width: 100%; }
    .mp-features::-webkit-scrollbar { display: none; }
    .mp-features > li { min-width: 100%; scroll-snap-align: start; flex: 0 0 100%; box-sizing: border-box; }
}