/* ═══════════════════════════════════════════════════════════════════
   MOBILE.CSS — Camada de responsividade complementar · Orizendash
   Breakpoints: ≤1024 tablet-landscape · ≤768 tablet · ≤480 mobile · ≤360 small
   Estratégia: esta folha apenas COMPLEMENTA os arquivos existentes.
   Todos os nomes de classe são preservados — nenhum HTML foi alterado.
   ⚠ NÃO modifica estrutura HTML, não renomeia classes, não altera design system.
   ═══════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   BASE GLOBAL — viewport, box-model, scroll suave
   ════════════════════════════════════════════════════════════════════ */

/* Garante que toda a página respeite o viewport em iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust:         100%;
}

/* Scroll suave nativo para toda a aplicação */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Evita overflow horizontal não-intencional no body/root */
body,
#root {
  overflow-x: hidden;
  max-width:  100vw;
}


/* ════════════════════════════════════════════════════════════════════
   TIPOGRAFIA RESPONSIVA — clamp() para títulos principais
   ════════════════════════════════════════════════════════════════════ */

/* Títulos principais com clamp: nunca ficam grandes demais nem pequenos demais */
.mc-page-title {
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.3;
}

.section-title {
  font-size: clamp(13px, 2vw, 17px);
  line-height: 1.4;
}

.data-table-header__title {
  font-size: clamp(12px, 1.8vw, 15px);
}

/* Subtítulos e textos descritivos */
.mc-page-sub,
.mc-page-subtitle,
.section-subtitle {
  line-height: 1.55;
}

/* Garante line-height confortável em todo o app */
.mc-content,
.content {
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════
   UPLOAD SCREEN — responsividade complementar
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .upload-screen { padding: var(--sp-6) var(--sp-4); }
  .upload-header { margin-bottom: var(--sp-6); }
}

@media (max-width: 480px) {
  .upload-screen   { padding: var(--sp-4) var(--sp-3); min-height: 100dvh; }
  .upload-header   { margin-bottom: var(--sp-5); }
  .upload-logo     { margin-bottom: var(--sp-4); }
  .upload-logo-text { font-size: 18px; }
}

@media (max-width: 360px) {
  .upload-screen    { padding: var(--sp-3) var(--sp-2); }
  .upload-logo-text { font-size: 16px; }
}


/* ════════════════════════════════════════════════════════════════════
   ≤1024 px — TABLET LANDSCAPE
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── MC Topbar ──────────────────────────────────────────────────── */
  .mc-topbar {
    height: 48px;
    padding: 0 var(--sp-4);
    gap: var(--sp-3);
  }

  /* Reduzir espaço da filter bar no contexto MC */
  .mc-filterbar-wrap { padding: 8px var(--sp-4); }

  /* ── KPI MC: valor um pouco menor ──────────────────────────────── */
  .mc-kpi-value { font-size: 22px; }

  /* ── Cards MC ──────────────────────────────────────────────────── */
  .mc-card { padding: var(--sp-3) var(--sp-4); }

  /* ── Botão MC (header do dashboard) ────────────────────────────── */
  .btn-mc { padding: 5px 12px; height: 32px; font-size: 11px; }

  /* ── Paginação MC ───────────────────────────────────────────────── */
  .mc-pag-btn { min-width: 30px; height: 30px; }

  /* ── Tabelas MC ─────────────────────────────────────────────────── */
  .mc-table thead th { padding: 8px 12px; }
  .mc-table tbody td { padding: 8px 12px; }

  /* ── Order Detail ───────────────────────────────────────────────── */
  .od-hero { padding: 20px 24px; }
  .od-hero-kpi-value { font-size: 18px; }
  .od-fields-grid { gap: 12px 16px; }

  /* ── Col-span: evitar itens ultrapassando viewport ──────────────── */
  .mc-col-span-2,
  .mc-col-span-3,
  .mc-col-span-4 { grid-column: span 2; }
}


/* ════════════════════════════════════════════════════════════════════
   ≤768 px — TABLET PORTRAIT
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── App shell: empilhar sidebar + main em coluna quando sidebar some ── */
  .app-shell { flex-direction: column; height: auto; min-height: 100dvh; overflow: auto; }

  /* ── Header do dashboard: empilhamento suave ────────────────────── */
  .header {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }
  .header-breadcrumb { font-size: 11px; }
  .header-spacer      { display: none; }

  /* ── MC Topbar: ajustes finos ───────────────────────────────────── */
  .mc-topbar        { height: 48px; padding: 0 var(--sp-3); }
  .mc-topbar-brand  { gap: var(--sp-2); }
  .mc-topbar-title  { font-size: 13px; }

  /* Filter badge: ocultar texto extra em tablet */
  .mc-filter-status { font-size: 10px; padding: 2px 8px; }

  /* ── Tabs MC: touch targets adequados ──────────────────────────── */
  .mc-tabs { height: 40px; padding: 0 var(--sp-3); }
  .mc-tab  { font-size: 11px; padding: 0 12px; min-height: 40px; }

  /* ── Filter bar: wrap pills ─────────────────────────────────────── */
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .active-filters { flex-wrap: wrap; }

  /* ── KPI cards: 2 colunas ──────────────────────────────────────── */
  .mc-kpi-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .mc-kpi     { padding: var(--sp-3); }

  /* ── Chart grids: 1 coluna ──────────────────────────────────────── */
  .mc-charts-2,
  .mc-charts-3,
  .mc-charts-4,
  .mc-charts-2-1,
  .mc-charts-1-2 { grid-template-columns: 1fr; }

  /* ECharts: alturas adequadas para telas menores */
  .mc-echarts[style*="height: 320px"],
  .mc-echarts[style*="height: 360px"] { height: 280px !important; }

  /* ── Table toolbar: empilhado ───────────────────────────────────── */
  .mc-table-toolbar       { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .mc-table-toolbar-right { width: 100%; justify-content: flex-end; }

  /* ── Scroll horizontal nas tabelas MC ──────────────────────────── */
  .mc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mc-table      { min-width: 560px; }

  /* ── Paginação ──────────────────────────────────────────────────── */
  .mc-pagination { justify-content: center; gap: var(--sp-2); }
  .mc-pag-btn    { min-width: 36px; height: 36px; }

  /* ── Cards MC: padding reduzido ────────────────────────────────── */
  .mc-card { padding: var(--sp-3); }
  .mc-card-header { margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); }

  /* ── Ranking: ajustar max-width de labels ───────────────────────── */
  .mc-rank-label { max-width: 140px; }
  .mc-rank-value { min-width: 50px; }

  /* ── Content MC: padding confortável ───────────────────────────── */
  .mc-content { padding: var(--sp-4) var(--sp-3) var(--sp-8); }

  /* ── Section labels ─────────────────────────────────────────────── */
  .mc-section-label { margin: var(--sp-4) 0 var(--sp-2); }

  /* ── Order Detail ───────────────────────────────────────────────── */
  .od-grid     { grid-template-columns: 1fr; }
  .od-col-side { order: -1; }
  .od-body     { padding: 16px 16px 48px; }
  .od-nav      { padding: 0 16px; height: 48px; }
  .od-hero     { flex-direction: column; padding: 18px; gap: 16px; }
  .od-hero-financials { gap: 20px; }

  /* ── Botões de ação no topbar: garantir toque ≥40px ────────────── */
  .mc-btn-back,
  .mc-btn-export,
  .mc-csv-btn { min-height: 40px; }
  .header-actions > button,
  .header-actions > .btn-mc { min-height: 40px; min-width: 40px; }

  /* ── Dropdown SMS: limitar largura ─────────────────────────────── */
  .sms-dropdown { max-width: 280px; }

  /* ── GRL Preset bar ─────────────────────────────────────────────── */
  .grl-preset-bar  { gap: 3px; padding: 8px 0 4px; flex-wrap: wrap; }
  .grl-preset-btn  { padding: 5px 10px; font-size: 10px; height: 30px; }
  .grl-period-badge { display: none; }
  .grl-page-header  { flex-direction: column; gap: 8px; }
}


/* ════════════════════════════════════════════════════════════════════
   ≤480 px — MOBILE
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── App shell: apenas coluna, sem sidebar ──────────────────────── */
  .sidebar { display: none; }
  .main-area { flex-direction: column; width: 100%; }

  /* ── Header do dashboard: compacto ─────────────────────────────── */
  .header {
    height: 48px;
    min-height: 48px;
    padding: 0 var(--sp-3);
    flex-wrap: nowrap;
    overflow: hidden;
  }
  /* Ocultar breadcrumb secundário em mobile */
  .header-breadcrumb-sep,
  .header-breadcrumb > span:not(:first-child) { display: none; }

  /* File badge: ocultar em mobile pequeno */
  .header-file-badge { display: none; }

  /* Ações: garantir touch ≥40px */
  .header-actions > *        { min-height: 40px; min-width: 40px; }
  .header-actions > .btn-mc > span { display: none; } /* só ícone */

  /* ── MC Topbar: compacto ────────────────────────────────────────── */
  .mc-topbar      { height: 44px; padding: 0 var(--sp-3); }
  .mc-topbar-brand { gap: var(--sp-2); }
  .mc-topbar-icon  { width: 28px; height: 28px; font-size: 12px; }
  .mc-topbar-title { font-size: 12px; }
  .mc-topbar-sub   { display: none; }
  .mc-topbar-divider { display: none; }

  /* Botões topbar: ícone apenas */
  .mc-btn-export    { display: none; } /* oculto em mobile */
  .mc-btn-back span { display: none; }
  .mc-btn-back      { padding: 5px 10px; min-height: 40px; min-width: 40px; }

  /* ── Tabs MC ────────────────────────────────────────────────────── */
  .mc-tabs { height: 38px; padding: 0 var(--sp-2); }
  .mc-tab  { font-size: 10px; padding: 0 9px; gap: 3px; min-height: 38px; }
  .mc-tab i { display: none; } /* apenas texto em mobile */

  /* ── Filter bar MC: layout vertical ───────────────────────────── */
  .mc-filterbar-wrap { padding: 6px var(--sp-3); }
  .mc-filterbar-wrap .filter-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-2); }

  /* Filter bar header: empilhar */
  .filter-bar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }
  .filter-bar-actions { width: 100%; justify-content: flex-end; }

  /* Inputs de filtro: touch ≥40px */
  .filter-select,
  .filter-input-date,
  .sms-control { min-height: 40px; padding: 9px var(--sp-3); font-size: 13px; }

  /* Dropdown SMS: full-width em mobile */
  .sms-dropdown {
    min-width: 88vw;
    max-width: 94vw;
    left: 50% !important;
    transform: translateX(-50%);
  }

  /* Itens da lista SMS: mais altos */
  .sms-item { padding: 10px 12px; min-height: 44px; }
  .sms-list { max-height: 50dvh; }

  /* Botões de filtro: touch ≥40px */
  .btn-reset,
  .filter-toggle-btn { height: 40px; min-width: 40px; padding: 5px 12px; font-size: 12px; }

  /* Active filter tags: compactar */
  .active-filters    { padding: var(--sp-2); gap: var(--sp-1); flex-wrap: wrap; }
  .active-filter-tag { font-size: 10px; }

  /* ── KPI Row: 2 colunas ────────────────────────────────────────── */
  .mc-kpi-row   { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .mc-kpi       { padding: 10px; }
  .mc-kpi-value { font-size: 18px; letter-spacing: -0.02em; }
  .mc-kpi-label { font-size: 9px; }
  .mc-kpi-footer { font-size: 10px; }

  /* ── Page header ────────────────────────────────────────────────── */
  .mc-page-title    { font-size: 14px; gap: var(--sp-2); }
  .mc-page-title i  { font-size: 13px; }
  .mc-page-sub,
  .mc-page-subtitle { font-size: 11px; }
  .mc-page-header   { margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); }

  /* ── Section label ───────────────────────────────────────────────── */
  .mc-section-label { font-size: 9px; margin: var(--sp-3) 0 var(--sp-2); }

  /* ── Charts: 100% largura, alturas reduzidas ───────────────────── */
  .mc-charts-1,
  .mc-charts-2,
  .mc-charts-3,
  .mc-charts-4,
  .mc-charts-2-1,
  .mc-charts-1-2 { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* ── Cards ──────────────────────────────────────────────────────── */
  .mc-card       { padding: var(--sp-3); }
  .mc-card-title { font-size: 12px; }
  .mc-card-sub   { font-size: 10px; }
  .mc-card-header { margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); }

  /* ── Tabelas MC: células compactas ─────────────────────────────── */
  .mc-table           { font-size: 11px; min-width: 500px; }
  .mc-table thead th  { padding: 7px 10px; font-size: 9px; }
  .mc-table tbody td  { padding: 7px 10px; font-size: 11px; }

  /* ── Paginação MC: touch targets ────────────────────────────────── */
  .mc-pag-btn { min-width: 40px; height: 40px; font-size: 11px; }
  .mc-pagination { justify-content: center; gap: var(--sp-1); flex-wrap: wrap; }

  /* ── Ranking ────────────────────────────────────────────────────── */
  .mc-ranking-item { font-size: 11px; }
  .mc-rank-label   { max-width: 110px; font-size: 11px; }
  .mc-rank-value   { font-size: 10px; min-width: 45px; }
  .mc-rank-num     { font-size: 9px; }

  /* ── CSV button ─────────────────────────────────────────────────── */
  .mc-csv-btn { height: 32px; padding: 0 10px; font-size: 10px; min-height: 40px; }

  /* ── Content MC ─────────────────────────────────────────────────── */
  .mc-content { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
  .content    { padding: var(--sp-3) var(--sp-2) var(--sp-5); }

  /* ── Order Detail: compactar ────────────────────────────────────── */
  .od-hero          { padding: 16px; flex-direction: column; }
  .od-hero-id-value { font-size: 20px; }
  .od-hero-kpi-value { font-size: 16px; }
  .od-hero-kpi-label { font-size: 9px; }
  .od-hero-financials { gap: 14px; flex-wrap: wrap; }
  .od-fields-grid   { grid-template-columns: 1fr; gap: 10px 0; }
  .od-nav           { padding: 0 12px; height: 44px; }
  .od-nav-back span { display: none; } /* ícone apenas em mobile */
  .od-nav-back      { padding: 5px 9px; min-height: 40px; min-width: 40px; }
  .od-body          { padding: 12px 12px 48px; gap: 14px; }
  .od-card-header   { padding: 11px 14px; }
  .od-card-body     { padding: 14px; }
  .od-card-title    { font-size: 10px; }
  .od-timeline      { padding: 14px 16px 8px; }
  .od-alert         { padding: 8px 12px; font-size: 11px; }
  .od-field-value   { font-size: 12px; }

  /* ── Filter status pill no topbar ──────────────────────────────── */
  .mc-filter-status { font-size: 10px; padding: 2px 7px; }

  /* ── GRL Preset bar ─────────────────────────────────────────────── */
  .grl-preset-btn { padding: 5px 8px; font-size: 10px; }
  .grl-preset-btn i { display: none; }
  .grl-page-header { flex-direction: column; gap: 6px; }

  /* ── Section header (dashboard) ────────────────────────────────── */
  .section-header      { margin-bottom: var(--sp-4); flex-direction: column; align-items: flex-start; }
  .section-label-overline { font-size: 9px; }
  .section-subtitle    { font-size: 10px; }

  /* ── Tabs (dashboard) ───────────────────────────────────────────── */
  .tab-btn { padding: 10px var(--sp-3); min-height: 40px; font-size: 11px; }

  /* ── Data table (dashboard): garantir scroll horizontal ─────────── */
  .data-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-search-wrap { max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════
   ≤360 px — SMALL MOBILE
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

  /* ── MC Topbar: mínimo ─────────────────────────────────────────── */
  .mc-topbar       { height: 42px; padding: 0 var(--sp-2); }
  .mc-topbar-title { display: none; } /* apenas ícone em telas muito pequenas */

  /* ── Tabs MC ────────────────────────────────────────────────────── */
  .mc-tabs { height: 36px; padding: 0 var(--sp-1); }
  .mc-tab  { padding: 0 7px; font-size: 10px; }

  /* ── KPI: 1 coluna ──────────────────────────────────────────────── */
  .mc-kpi-row { grid-template-columns: 1fr; }
  .mc-kpi-value { font-size: 22px; } /* pode crescer com 1 col */
  .mc-kpi { padding: var(--sp-3); }

  /* ── Filter bar ─────────────────────────────────────────────────── */
  .mc-filterbar-wrap .filter-grid { grid-template-columns: 1fr; }
  .mc-filterbar-wrap { padding: 4px var(--sp-2); }

  /* ── Content ────────────────────────────────────────────────────── */
  .mc-content { padding: var(--sp-2) var(--sp-2) var(--sp-5); }
  .content    { padding: var(--sp-2); }

  /* ── Filter status: ocultar em telas muito pequenas ─────────────── */
  .mc-filter-status { display: none; }

  /* ── Tabelas MC ─────────────────────────────────────────────────── */
  .mc-table { min-width: 440px; font-size: 10px; }
  .mc-table thead th { padding: 6px 8px; font-size: 8px; }
  .mc-table tbody td { padding: 6px 8px; font-size: 10px; }

  /* ── Paginação ──────────────────────────────────────────────────── */
  .mc-pag-btn { min-width: 36px; height: 36px; font-size: 10px; }

  /* ── Order Detail ───────────────────────────────────────────────── */
  .od-hero-id-value  { font-size: 18px; }
  .od-hero-kpi-value { font-size: 14px; }
  .od-body           { padding: 10px 10px 48px; }
  .od-nav            { padding: 0 10px; }

  /* ── Page title: mínimo ─────────────────────────────────────────── */
  .mc-page-title { font-size: 13px; }

  /* ── Cards ──────────────────────────────────────────────────────── */
  .mc-card { padding: var(--sp-2) var(--sp-3); }
}


/* ════════════════════════════════════════════════════════════════════
   TOUCH DEVICES — desabilitar hover e garantir targets mínimos
   ════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

  /* Desabilitar estados hover que não fazem sentido em touch */
  .mc-kpi:hover          { border-color: var(--mc-border-subtle); box-shadow: none; }
  .mc-card:hover         { border-color: var(--mc-border-subtle); box-shadow: none; }
  .mc-table tbody tr:hover { background: transparent; }
  .mc-ranking-item:hover { background: transparent; }
  .sidebar-nav-item:hover { background: transparent; color: var(--color-text-secondary); }
  .tab-btn:hover         { color: var(--color-text-secondary); }
  .filter-select:hover,
  .filter-input-date:hover { border-color: var(--color-border-default); }
  .sms-item:hover          { background: transparent; }
  .chart-card:hover,
  .chart-container:hover   { border-color: var(--color-border-subtle); box-shadow: none; }
  .kpi-card:hover          { border-color: var(--color-border-subtle); background: var(--color-surface-02); }
  .data-table tbody tr:hover { background: transparent; }
  .login-btn:hover:not(:disabled) { background: rgba(255,255,255,0.90); }

  /* Garantir touch targets mínimos ≥40px em todos os elementos interativos */
  .mc-tab          { min-height: 44px; }
  .mc-btn-back,
  .mc-btn-export,
  .mc-csv-btn      { min-height: 44px; }
  .mc-pag-btn      { min-width: 44px; min-height: 44px; }
  .grl-preset-btn  { min-height: 44px; }
  .sidebar-nav-item { min-height: 44px; }
  .tab-btn         { min-height: 44px; }
  .btn-reset,
  .filter-toggle-btn { min-height: 44px; }
  .filter-pill       { min-height: 44px; }
  .sms-item          { min-height: 44px; }
  .pagination-btn    { min-width: 44px; min-height: 44px; }
  .table-action      { min-height: 44px; }
  .od-nav-back       { min-height: 44px; min-width: 44px; }

  /* Espaçamento extra entre elementos tocáveis adjacentes para evitar mistaps */
  .mc-tabs { gap: 2px; }
  .mc-pagination-controls { gap: 4px; }
  .header-actions { gap: var(--sp-2); }
  .filter-bar-actions { gap: var(--sp-2); }
  .sms-dropdown-header { padding: 12px; }

  /* Toggle de senha: target maior */
  .login-toggle-pass {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ════════════════════════════════════════════════════════════════════
   MODO TV / FULL-SCREEN — manter funcional em resoluções grandes
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 1920px) {
  /* Em TV/4K, o conteúdo não deve ficar largo demais */
  .mc-content { max-width: 2400px; margin: 0 auto; }
  .content    { max-width: 2400px; margin: 0 auto; }
}


/* ════════════════════════════════════════════════════════════════════
   ELEMENTOS DECORATIVOS — ocultar em telas muito pequenas
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
  /* Ocultar separadores decorativos que não cabem */
  .mc-topbar-divider { display: none; }
  .analytic-toolbar__sep { display: none; }

  /* Ocultar ícone decorativo da tabela */
  .chart-card-title-icon { display: none; }

  /* Reduzir badge de filtros */
  .filter-count-badge { min-width: 16px; height: 16px; font-size: 9px; }
}

@media (max-width: 480px) {
  /* Ocultar separadores decorativos que poluem a interface em mobile */
  .mc-topbar-divider  { display: none; }
  .mc-topbar-sub      { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE — foco visível em todos os dispositivos
   ════════════════════════════════════════════════════════════════════ */

/* Garantir foco visível consistente em toda a aplicação */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remover outline padrão do browser (substituído acima) */
:focus:not(:focus-visible) { outline: none; }


/* ════════════════════════════════════════════════════════════════════
   SCROLLBARS MOBILE — invisíveis mas funcionais
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Scrollbars mais finas em mobile */
  .mc-content::-webkit-scrollbar,
  .content::-webkit-scrollbar { width: 3px; }

  .data-table-scroll::-webkit-scrollbar { height: 3px; }
  .mc-table-wrap::-webkit-scrollbar     { height: 3px; }

  /* Tabs com scroll horizontal invisível */
  .mc-tabs::-webkit-scrollbar,
  .tabs-bar::-webkit-scrollbar { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   TEMPLATE PDF — slides de relatório comercial (MCPdfExporter)
   Classes: .slide, .s-header, .s-footer, .bignum, .kpi, .dense-table,
            .bar-row, .stack-row, .callout, .cols-2/.cols-3/.cols-4,
            .spark, .chip, .eyebrow
   Estratégia: slides 16:9 são gerados para PDF (1920×1080) — em telas
   menores o preview deve rolar horizontalmente, sem quebrar o layout.
   ════════════════════════════════════════════════════════════════════ */

/* Preview do relatório: scroll horizontal no container pai */
.mc-pdf-preview-wrap,
.pdf-preview-container,
[class*="pdf-preview"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Slides: preservar proporção 16/9 em qualquer largura de tela */
.slide {
  /* min-width para evitar colapso do conteúdo interno */
  min-width: min(100%, 640px);
  /* aspect-ratio já definido no template — não sobrescrever */
  box-sizing: border-box;
}

/* Em mobile, se o slide for renderizado em tela (preview), deixar rolar */
@media (max-width: 768px) {
  .slide {
    /* Escalar o slide para caber na tela mantendo proporção */
    transform-origin: top left;
    /* Não forçar transform aqui — JS do preview deve controlar */
  }

  /* Grids de colunas: reduzir para 2 colunas em tablet */
  .cols-3,
  .cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tabelas densas: scroll horizontal */
  .dense-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Big numbers: reduzir font em preview */
  .bignum { font-size: clamp(28px, 5cqw, 48px) !important; }

  /* Callout: padding reduzido */
  .callout { padding: 12px 16px !important; }

  /* Barras de ranking: labels podem truncar */
  .bar-row .name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Grids: 1 coluna em mobile */
  .cols-2,
  .cols-3,
  .cols-4 { grid-template-columns: 1fr !important; }

  /* KPI cards do relatório: fonte menor */
  .slide .kpi .val { font-size: clamp(18px, 4cqw, 28px) !important; }
  .slide .kpi .lbl { font-size: clamp(8px, 1.5cqw, 10px) !important; }

  /* Chips e eyebrows: compactar */
  .chip    { font-size: 9px !important; padding: 2px 7px !important; }
  .eyebrow { font-size: 8px !important; letter-spacing: 0.08em !important; }

  /* Barras de ranking: label ainda menor */
  .bar-row .name { max-width: 90px; }

  /* Callout: mínimo */
  .callout { padding: 10px 12px !important; font-size: 11px !important; }
}

/* Relatório em print: slides devem ter page-break */
@media print {
  .slide {
    page-break-after: always;
    break-after:      page;
  }
  /* Garantir que tabelas densas não quebrem dentro de um slide */
  .dense-table { break-inside: avoid; page-break-inside: avoid; }
  /* Barras CSS: garantir que print respeite background-color */
  .bar-row .fill,
  .stack-row .seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ════════════════════════════════════════════════════════════════════
   REFINAMENTOS FINAIS — ajustes identificados na revisão completa
   ════════════════════════════════════════════════════════════════════ */

/* ── Scroll suave no mc-content com iOS bounce desativado ─────────── */
.mc-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Evitar zoom involuntário em inputs em iOS ────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: max(16px, 1em); /* previne zoom no iOS Safari */
  }
}

/* ── Safe area para dispositivos com notch / home indicator ──────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mc-content,
    .od-body {
      padding-bottom: calc(var(--sp-8, 32px) + env(safe-area-inset-bottom));
    }
    .mc-topbar,
    .header {
      padding-left:  max(var(--sp-3, 12px), env(safe-area-inset-left));
      padding-right: max(var(--sp-3, 12px), env(safe-area-inset-right));
    }
  }
}

/* ── Topbar sticky: garantir que fique fixo em scroll mobile ─────── */
@media (max-width: 768px) {
  .mc-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mc-tabs {
    position: sticky;
    top: 48px; /* altura do topbar em tablet */
    z-index: 99;
    background: var(--mc-bg-base);
  }
}

@media (max-width: 480px) {
  .mc-tabs {
    top: 44px; /* altura do topbar em mobile */
  }
}

/* ── Garantir que cards mc não vazem em grids muito estreitos ─────── */
@media (max-width: 480px) {
  .mc-card,
  .analytic-container {
    min-width: 0;
    overflow: hidden;
  }
  /* ECharts: não ultrapassar o card */
  .mc-echarts {
    max-width: 100%;
    width: 100% !important;
  }
}

/* ── Order Detail overlay: garantir z-index em mobile ────────────── */
@media (max-width: 768px) {
  .od-root { z-index: 2000; }
  .od-overlay { max-height: 100dvh; }
}

/* ── Gauge wrapper: centralizar em mobile ─────────────────────────── */
@media (max-width: 480px) {
  .mc-gauge-wrap { justify-content: center; }
  .mc-insights-panel { padding: var(--sp-3); }
  .mc-insight-item  { padding: var(--sp-2) 0; }
}

/* ── Analytic container: toolbar responsiva ───────────────────────── */
@media (max-width: 480px) {
  .analytic-header  { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .analytic-toolbar { flex-wrap: wrap; gap: var(--sp-1); }
  .analytic-footer  { flex-direction: column; gap: var(--sp-2); font-size: 10px; }
}


/* ════════════════════════════════════════════════════════════════════
   PRINT — ocultar elementos de interface em impressão
   ════════════════════════════════════════════════════════════════════ */

@media print {
  .sidebar,
  .mc-topbar,
  .mc-tabs,
  .mc-filterbar-wrap,
  .mc-table-toolbar,
  .mc-pagination,
  .header-actions,
  .filter-bar { display: none !important; }

  .mc-content,
  .content { padding: 0 !important; overflow: visible !important; }

  .mc-card,
  .mc-kpi,
  .chart-card,
  .kpi-card { break-inside: avoid; page-break-inside: avoid; }
}