/* ================================================================
   ClaroKPIs — mobile.css v2.0
   Responsive: tablet (≤1024px) y mobile (≤768px)
   Cubre módulos nuevos: Proveedores, Margen, 360°, Metas
   ================================================================ */

/* ── TABLET (≤1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Sidebar → drawer lateral */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-med);
    z-index: 200;
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-overlay      { display: block; }

  /* Botón hamburguesa visible */
  .header-menu-btn { display: flex !important; }

  /* Contenido ocupa todo */
  .main-content { margin-left: 0 !important; }

  /* Grids de 5 → 3 */
  .kpi-grid-5 { grid-template-columns: repeat(3,1fr); }
  .kpi-grid-4 { grid-template-columns: repeat(2,1fr); }

  /* Summary grid → 1 col */
  .summary-grid { grid-template-columns: 1fr; }

  /* Margin table — ocultar cols menos importantes */
  .margin-table-header { grid-template-columns: 28px 1fr 90px 80px; }

  /* Health ring card → vertical */
  .health-ring-card { flex-direction: column; text-align: center; }

  /* Client 360 drawer — full width */
  .client360-panel { width: 90vw; }

  /* Data source grid */
  .data-source-grid { grid-template-columns: 1fr; }

  /* Filter bar — scroll horizontal */
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-3); }
  .filter-bar::-webkit-scrollbar { height: 3px; }
}

/* ── MOBILE (≤768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Charts 2-col → 1-col en mobile */
  .charts-row {
    grid-template-columns: 1fr !important;
  }

  /* Tablas con scroll horizontal en mobile */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Collections: tabla cartera legible en mobile */
  .table th, .table td {
    white-space: nowrap;
  }

  /* Variables */
  :root {
    --space-6: 16px;
    --space-8: 24px;
  }

  /* Content padding */
  #contentArea { padding: var(--space-4); }

  /* Header */
  .main-header { padding: 0 var(--space-4); height: 52px; }
  .header-action-btn span { display: none; } /* Solo icono en mobile */
  .header-action-btn { padding: 6px 8px; }

  /* Grids de KPIs → 2 columnas */
  .kpi-grid, .kpi-grid-5, .kpi-grid-4, .kpi-grid-3 {
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-3);
  }

  /* KPI card más compacta */
  .kpi-card { padding: var(--space-4); }
  .kpi-card-value { font-size: 1.3rem; }
  .kpi-card-sparkline { width: 60px; height: 30px; }

  /* Section card */
  .section-card { padding: var(--space-4); }
  .section-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* Charts — altura reducida */
  .chart-wrap { min-height: 200px; }

  /* Tabs — scroll horizontal */
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tab-btn { flex-shrink: 0; }

  /* Módulo header */
  .module-header { flex-direction: column; align-items: flex-start; }
  .module-actions { width: 100%; }

  /* Filter bar */
  .filter-bar { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .filter-select { max-width: 110px; font-size: .72rem; }
  .filter-label  { display: none; } /* Ocultar labels en mobile */

  /* Summary grid */
  .summary-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Health ring */
  .health-ring-card { flex-direction: column; text-align: center; padding: var(--space-5); gap: var(--space-4); }

  /* Client 360° drawer — full screen */
  .client360-panel {
    width: 100vw;
    border-left: none;
    border-top: 0.5px solid var(--color-border);
  }
  .client360-stat-grid { grid-template-columns: 1fr 1fr; }

  /* Margin table — solo cols esenciales */
  .margin-table-header { grid-template-columns: 24px 1fr 80px; }

  /* Upload modal */
  .upload-drop-zone { padding: var(--space-8); }
  .upload-drop-icon { font-size: 2rem; }

  /* Today actions */
  .today-action { padding: 10px 12px; }
  .today-action-text { font-size: .8rem; }

  /* Supplier cards */
  .supplier-card { padding: var(--space-4); }

  /* Template grid */
  .template-grid { grid-template-columns: repeat(2,1fr); }

  /* Goals table */
  .goals-table th, .goals-table td { padding: 8px; }
  .goals-input { width: 90px; }

  /* Modal */
  .modal-box { padding: var(--space-5); max-height: 85vh; }
  .modal-title { font-size: .95rem; }

  /* Data source grid */
  .data-source-grid { grid-template-columns: 1fr; }

  /* Alert banner */
  .alert-banner { padding: 10px 12px; }

  /* Breadcrumb — truncar */
  .breadcrumb { font-size: .72rem; }
  .breadcrumb-item:not(:last-child) { display: none; } /* Solo último nivel */
  .breadcrumb-sep:not(:last-of-type) { display: none; }

  /* Tabla data — scroll horizontal */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table th, .data-table td { white-space: nowrap; }

  /* Proyecciones */
  .projection-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  /* Empty state */
  .empty-state { padding: var(--space-8); }
  .empty-state-icon { font-size: 2.5rem; }
}

/* ── MOBILE PEQUEÑO (≤375px) ──────────────────────────────────── */
@media (max-width: 375px) {

  :root { --space-4: 12px; --space-6: 14px; }

  .kpi-card-value { font-size: 1.15rem; }

  .kpi-grid, .kpi-grid-5, .kpi-grid-4, .kpi-grid-3 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .header-action-btn { padding: 5px 7px; font-size: .7rem; }

  .template-grid { grid-template-columns: 1fr; }
  .goals-input   { width: 80px; font-size: .75rem; }
}

/* ── LANDSCAPE MOBILE ─────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .chart-wrap { min-height: 160px; }
  .kpi-grid, .kpi-grid-5, .kpi-grid-4 { grid-template-columns: repeat(4,1fr); }
  .modal-box { max-height: 75vh; }
  #contentArea { padding: var(--space-3) var(--space-5); }
}

/* ── MODO PRESENTACIÓN — responsivo ─────────────────────────────*/
.presentation-mode #contentArea {
  padding: var(--space-8);
}
@media (max-width: 768px) {
  .presentation-mode .kpi-card-value { font-size: 1.8rem !important; }
  .presentation-mode #contentArea   { padding: var(--space-5) !important; }
}

/* ── TOUCH — mejorar tap targets ──────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-item       { padding: 11px 10px; }
  .tab-btn        { padding: 9px 16px; }
  .filter-select  { padding: 7px 10px; }
  .header-action-btn { padding: 8px 12px; }
  .btn            { padding: 10px 18px; }
  .data-table td  { padding: 12px; }
  .file-item-delete { padding: 8px; }
}

/* ── PRINT ────────────────────────────────────────────────────── */
@media print {
  .sidebar, .main-header, .filter-bar,
  .btn, .tabs, .header-action-btn,
  .today-action-link, .client360-drawer,
  .modal-backdrop, .sidebar-overlay { display: none !important; }

  .main-content { margin-left: 0 !important; }
  #contentArea  { padding: 0 !important; }

  .kpi-card, .section-card, .supplier-card {
    break-inside: avoid;
    border: 1px solid #ddd !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .kpi-card-value, .kpi-card-label,
  .section-card-title, .data-table td,
  .data-table th { color: #000 !important; }

  .chart-wrap canvas { max-height: 250px; }

  body { background: #fff !important; color: #000 !important; }
}

/* ── LUCIDE SVG ICONS — nav sidebar ──────────────────────────── */
/* C3: iconos SVG Lucide en el sidebar deben tener tamaño fijo */
.nav-item-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* En mobile/tablet, reducir ligeramente */
@media (max-width: 768px) {
  .nav-item-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ── KPI HERO — responsive ────────────────────────────────────── */
/* ── BADGES Y SUBTÍTULOS EN MÓVIL ──────────────────────────── */
@media (max-width: 768px) {
  /* Subtítulos con badges: wrap en dos líneas en móvil */
  .module-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    line-height: 1.6;
  }
  /* Badges de fuente de datos — tamaño reducido en móvil */
  .module-subtitle span[style*="border-radius:20px"] {
    font-size: .65rem !important;
    padding: 1px 6px !important;
  }
  /* Warnings de coherencia en upload — legibles en móvil */
  #confWarnings {
    font-size: .72rem;
  }
  /* mapping-row en confirmación: columna única */
  .mapping-row {
    flex-direction: column;
    gap: 4px;
  }
  .mapping-arrow { display: none; }
  .mapping-select { width: 100%; }
}
/* En desktop (auto-fit ≥3 cols) grid-column:span 2 está bien.   */
/* En móvil fijo a 2 cols, span 2 también ocupa la fila entera.  */
/* Eso es el comportamiento CORRECTO — la hero card es el KPI     */
/* principal y debe dominar visualmente. No necesita corrección.  */
/* Si el grid es de 1 col (pantalla muy estrecha) se aplana solo. */

/* Asegurar que kpi-hero colapsa bien en ≤375px (1 col) */
@media (max-width: 375px) {
  .kpi-hero {
    grid-column: span 1 !important;
  }
}