/* assets/css/mobile.css — UI móvil del panel (pulido). Todo bajo body.ev-mobile.
   La clase la activa js/mobile-shell.js (≤640px + flag pwa_movil). El escritorio
   no usa estas reglas. Usa variables de tema → se ve bien en claro y oscuro. */

body.ev-mobile { -webkit-tap-highlight-color: transparent; }

/* Ocultar el sidebar de escritorio y dar todo el ancho al contenido */
body.ev-mobile #sidebar { display: none !important; }
/* main es flex-item: min-width:0 evita que su contenido lo fuerce más ancho que el viewport */
body.ev-mobile main {
  min-width: 0 !important;
  max-width: 100vw !important;
  padding: 14px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Colapsar grids multi-columna a una sola columna */
body.ev-mobile .dash-grid-charts,
body.ev-mobile .dash-grid-charts-2col,
body.ev-mobile .dash-grid-trends,
body.ev-mobile .tc-grid,
body.ev-mobile .tp-grid { grid-template-columns: 1fr !important; }

/* Paneles laterales (drawers) a ancho completo */
body.ev-mobile #agentPanel,
body.ev-mobile #empresaPanel,
body.ev-mobile #reservaPanel,
body.ev-mobile #detailPanel,
body.ev-mobile #reviewPanel { width: 100vw !important; max-width: 100vw !important; }

/* Evitar scroll horizontal por min-width inline */
body.ev-mobile [style*="min-width"] { min-width: 0 !important; }

/* ── Top bar como app-bar ──────────────────────────────────────────── */
body.ev-mobile .ev-topbar {
  position: sticky; top: 0; z-index: 240;
  padding: 10px 14px !important;
  gap: 6px;
  box-shadow: var(--ev-shadow-sm, 0 1px 2px rgba(15,23,42,.06));
  backdrop-filter: blur(8px);
}
/* Menos íconos en móvil: dejamos hamburguesa · campana · tema · avatar */
body.ev-mobile .ev-topbar #refreshBtn,
body.ev-mobile .ev-topbar [onclick*="evTutButton"],
body.ev-mobile .ev-topbar [onclick*="evOpenHelp"] { display: none !important; }
body.ev-mobile .ev-topbar #headerAvatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ev-accent, #00CED1), #0ea5b7);
  color: #03252b; font-weight: 800;
}

/* Saludo del dashboard */
body.ev-mobile #dashGreeting { font-size: 12.5px; }

/* ── Header de página + barra de acciones (evitar desbordes) ───────── */
/* Header de página apila en móvil (la clase ev-m-head la pone mobile-shell.js,
   sin :has() para no romper en navegadores que no lo soporten) */
body.ev-mobile .ev-m-head { flex-wrap: wrap; gap: 10px; }
body.ev-mobile .ev-page-actions { flex-wrap: wrap; gap: 8px; }
/* Filas de tabs (#cfgTabs, #mktTabs, #corpTabs…) → scroll horizontal, sin cortar */
body.ev-mobile [id$="Tabs"] { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
body.ev-mobile [id$="Tabs"]::-webkit-scrollbar { display: none; }
/* Cortar el overflow horizontal a nivel de página */
body.ev-mobile [id$="Page"] { overflow-x: hidden; max-width: 100vw; }
/* Filas de filtros (clase la pone mobile-shell.js) → scroll horizontal usable */
body.ev-mobile .ev-m-scroll-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
body.ev-mobile .ev-m-scroll-row::-webkit-scrollbar { display: none; }
/* Ocultar acciones de escritorio/power en móvil (siguen vivas en escritorio) */
body.ev-mobile [onclick*="openShortcutsModal"],
body.ev-mobile .btn-csv,
body.ev-mobile .btn-report,
body.ev-mobile .btn-personalize,
body.ev-mobile #dashEditBtn,
body.ev-mobile #dashResetBtn,
body.ev-mobile .ev-page-actions .ev-divider { display: none !important; }

/* ── KPIs: grilla 2×2 compacta (TODAS las pantallas) ───────────────── */
/* Cualquier grilla de KPIs → 2 columnas en móvil */
/* IDs explícitos (#crmKpiGrid, #eqKpiGrid…) para ganarle a la regla del panel
   `@media(max-width:480px){ #crmKpiGrid{grid-template-columns:1fr !important} }`
   (un selector por ID con !important gana a uno por clase) */
body.ev-mobile #dashKpiGrid,
body.ev-mobile #crmKpiGrid,
body.ev-mobile #eqKpiGrid,
body.ev-mobile [class*="kpi-grid"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* minmax(0,…) deja encoger bajo el min-content */
  gap: 10px !important;
  margin-bottom: 16px !important;
}
body.ev-mobile .kpi-card { min-width: 0 !important; }
/* Tarjeta KPI compacta, en cualquier módulo */
body.ev-mobile .kpi-card {
  padding: 13px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
}
body.ev-mobile .kpi-card .ev-kpi-value { font-size: 24px !important; line-height: 1.1 !important; margin: 2px 0 0 !important; }
body.ev-mobile .kpi-card .ev-kpi-label { font-size: 10px !important; letter-spacing: .04em !important; }
body.ev-mobile .kpi-card .ev-kpi-sublabel { font-size: 10.5px !important; }
body.ev-mobile .kpi-card .ev-icon-badge { width: 32px !important; height: 32px !important; }
body.ev-mobile .kpi-card .ev-icon-badge .material-symbols-outlined { font-size: 18px !important; }
/* quitar adornos densos del KPI en móvil para mantenerlo limpio */
body.ev-mobile .kpi-card .kpi-spark,
body.ev-mobile .kpi-card .kpi-forecast-chip,
body.ev-mobile .kpi-card .kpi-record-badge { display: none !important; }

/* ── Encabezados de sección y tarjetas-contenedor ──────────────────── */
body.ev-mobile .ev-card,
body.ev-mobile .dash-widget-wrap > .ev-panel { border-radius: 16px !important; }

/* ── Tablas densas → tarjetas (con jerarquía) ──────────────────────── */
body.ev-mobile .ev-table { display: block; border: none; background: transparent; width: 100%; }
body.ev-mobile .ev-table thead { display: none; }
body.ev-mobile .ev-table tbody { display: flex; flex-direction: column; gap: 10px; }
body.ev-mobile .ev-table tbody tr {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; max-width: 100%; box-sizing: border-box;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-color, #e6eaf1);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
body.ev-mobile .ev-table tbody td {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 5px 0; border: none; text-align: right; font-size: 13px;
  min-width: 0; overflow-wrap: anywhere;
}
body.ev-mobile .ev-table tbody td::before {
  content: attr(data-label);
  font-weight: 700; font-size: 11px; color: var(--text-tertiary, #64748b);
  text-align: left; flex: 0 0 auto; text-transform: none;
}
/* El primer campo de cada fila actúa como TÍTULO de la tarjeta */
body.ev-mobile .ev-table tbody td:first-child {
  font-size: 15px; font-weight: 800; color: var(--text-primary, #0f172a);
  padding-top: 0; padding-bottom: 6px; justify-content: flex-start;
}
body.ev-mobile .ev-table tbody td:first-child::before { display: none; }
body.ev-mobile .ev-table tbody td:empty,
body.ev-mobile .ev-table tbody td[data-label=""] { display: none; }

/* ── Barra inferior (elevada, blur, pill de activo) ────────────────── */
.ev-bottom-nav { display: none; }
body.ev-mobile .ev-bottom-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: var(--bg-surface, #fff);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color, #e6eaf1);
  box-shadow: 0 -4px 18px rgba(15,23,42,.07);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
}
body.ev-mobile .ev-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #94a3b8); font-size: 10px; font-weight: 700; padding: 0;
}
body.ev-mobile .ev-bn-item .material-symbols-outlined {
  font-size: 23px; padding: 4px 16px; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
body.ev-mobile .ev-bn-item.is-active { color: var(--ev-accent, #00CED1); }
body.ev-mobile .ev-bn-item.is-active .material-symbols-outlined {
  background: rgba(0, 206, 209, .14);
}

/* ── Hoja "Más" ────────────────────────────────────────────────────── */
.ev-more-scrim {
  position: fixed; inset: 0; z-index: 260; background: rgba(15,23,42,.45);
  display: flex; align-items: flex-end;
  animation: evMoreFade .15s ease;
}
@keyframes evMoreFade { from { opacity: 0; } to { opacity: 1; } }
.ev-more-sheet {
  width: 100%; background: var(--bg-surface, #fff);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  max-height: 78vh; overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(2,6,23,.3);
  animation: evMoreUp .2s cubic-bezier(.16,1,.3,1);
}
@keyframes evMoreUp { from { transform: translateY(16px); } to { transform: translateY(0); } }
.ev-more-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-color, #cbd5e1); margin: 4px auto 14px; }
.ev-more-title { font-weight: 800; font-size: 16px; color: var(--text-primary, #0f172a); margin-bottom: 12px; letter-spacing: -.01em; }
.ev-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ev-more-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--bg-surface-alt, #f8fafc); border: 1px solid var(--border-color, #e6eaf1);
  border-radius: 14px; padding: 14px 6px; cursor: pointer;
  color: var(--text-secondary, #334155); font-size: 11px; font-weight: 700; text-align: center;
}
.ev-more-item:active { transform: scale(.97); }
.ev-more-item .material-symbols-outlined { font-size: 24px; color: var(--ev-accent, #00CED1); }

/* ── Toast de sync: por encima de la barra inferior, no encimado ───── */
body.ev-mobile #syncErrorIndicator {
  bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  left: 12px !important; right: 12px !important; text-align: center;
}