/* ══════════════════════════════════════════════════════════════
   MOBILE.CSS — Capa de optimización móvil para TODO el CRM
   Se inyecta al final (vía shared.js) para ganarle a los estilos
   inline de cada página. Todo vive dentro de @media (max-width:768px)
   así que en escritorio NO cambia absolutamente nada.
   Reglas universales primero; ajustes por-página al final.
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Nunca permitir scroll horizontal de la página ───────────── */
  html, body { overflow-x: hidden !important; max-width: 100%; }

  /* ── CLAVE: main-content es un flex-item; sin min-width:0 se ─────
     estira al contenido más ancho (tabla/elemento sin wrap) y
     desborda toda la página. Esto lo confina al ancho del viewport. */
  .main-content { min-width: 0 !important; max-width: 100vw; }

  /* ── Reservar espacio arriba para el botón ☰ en TODA página ────
     (algunas páginas ponen padding-top:0 en su CSS inline y el
     título queda debajo del botón). ───────────────────────────── */
  .main-content { padding-top: 58px !important; }

  /* ── Media y bloques de código nunca se desbordan ────────────── */
  .main-content img,
  .main-content video,
  .main-content canvas,
  .main-content iframe,
  .main-content svg { max-width: 100% !important; }
  .main-content pre { max-width: 100% !important; overflow-x: auto; }

  /* ── Tablas anchas: se deslizan en vez de romper la página ───── */
  .main-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Filas / barras de herramientas: que se envuelvan ────────── */
  .main-content .row,
  .main-content .toolbar,
  .main-content .actions,
  .main-content .filters,
  .main-content .filter-bar,
  .main-content .btn-row,
  .main-content .header-actions,
  .main-content .card-head,
  .main-content .card-header,
  .main-content .section-head,
  .main-content .tabs {
    flex-wrap: wrap !important;
  }

  /* ── Barras de pestañas/pills largas: scroll horizontal para ───
     poder alcanzar todas (si no, quedan recortadas). ───────────── */
  .main-content .cv-tabs,
  .main-content .tab-bar,
  .main-content .tabs-bar,
  .main-content .pills-bar,
  .main-content .pill-bar,
  .main-content .doctor-pills-bar,
  .main-content .chips-row,
  .main-content .chip-row,
  .main-content .month-selector,
  .main-content .month-pills,
  .main-content .filter-pills,
  .main-content .stage-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* ── Encabezado de página: apilar título y acciones ──────────── */
  .main-content .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .main-content .page-header .page-actions,
  .main-content .page-header .header-actions { width: 100%; }

  /* ── Grids de tarjetas de columnas fijas → apilar ────────────── */
  /* auto-fill/minmax ya colapsan solos; aquí van los de nº fijo    */
  .main-content .metrics-grid,
  .main-content .summary-grid,
  .main-content .stats-grid,
  .main-content .stat-grid,
  .main-content .cards-grid,
  .main-content .kpi-grid,
  .main-content .roi-grid,
  .main-content .admin-grid,
  .main-content .two-col,
  .main-content .three-col,
  .main-content .grid-2,
  .main-content .grid-3,
  .main-content .grid-4 {
    grid-template-columns: 1fr !important;
  }
  /* Filas de 2 columnas grandes (gráfica + panel) → apilar */
  .main-content .row-fin,
  .main-content .row-2col,
  .main-content .split,
  .main-content .content-split {
    grid-template-columns: 1fr !important;
    display: grid;
  }

  /* ── Formularios: un campo por fila ──────────────────────────── */
  .main-content .form-row,
  .main-content .form-grid,
  .main-content .field-row {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  .main-content input,
  .main-content select,
  .main-content textarea { max-width: 100%; }

  /* ── Modales: caben en pantalla y hacen scroll interno ───────── */
  .modal-overlay, .overlay { padding: 12px !important; }
  .modal, .modal-card, .modal-box, .modal-content, .modal-inner,
  .modal-body, .dialog, .sheet {
    max-width: 94vw !important;
    width: auto !important;
    box-sizing: border-box;
  }
  .modal-body, .modal-content { max-height: 80vh; overflow-y: auto; }
  .modal-actions, .modal-footer { flex-wrap: wrap; }

  /* ══════════════════════════════════════════════════════════
     AJUSTES POR PÁGINA (se van agregando al verificar cada una)
  ══════════════════════════════════════════════════════════ */

  /* Reducir paddings internos grandes de los envoltorios de página */
  .main-content .dash-page,
  .main-content .page-wrap,
  .main-content .page-inner,
  .main-content .content-wrap { padding-left: 4px !important; padding-right: 4px !important; }

  /* admin-onboarding-template: etapas y tareas con controles ───── */
  .main-content .ot-sec-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  .main-content .ot-sec-info { width: 100%; min-width: 0 !important; }
  .main-content .ot-item { flex-wrap: wrap !important; }
  .main-content .ot-item-text { flex: 1 1 160px; min-width: 0 !important; }

  /* admin-manual: tarjetas de sección con controles al lado ────── */
  .main-content .mo-sec-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  .main-content .mo-sec-info { width: 100%; min-width: 0 !important; }
  .main-content .mo-sec-desc { white-space: normal !important; }

  /* admin-notas: apilar lista + editor (dos paneles) ───────────── */
  .main-content .nb-layout { flex-direction: column !important; }
  .main-content .nb-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 42vh;
    overflow-y: auto;
    border-right: none !important;
  }
  .main-content .nb-editor-wrap {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 55vh;
  }

  /* admin-estrategia: encabezados de sección con botón al lado ─── */
  .main-content .sec-header { flex-wrap: wrap !important; }
  .main-content .sec-header-text { flex: 1 1 200px; min-width: 0 !important; }

  /* admin-cliente-detalle: apilar el encabezado (hero) ─────────── */
  .main-content .hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px;
  }
  .main-content .hero-info,
  .main-content .hero-name { min-width: 0 !important; width: 100%; }
  .main-content .hero-actions { flex-wrap: wrap !important; }

  /* admin-contenido (Contenido Visual): recuperar ancho ────────── */
  .main-content .cv-header,
  .main-content .cv-cal,
  .main-content .cv-table-container,
  .main-content .cv-empty { padding-left: 8px !important; padding-right: 8px !important; }
  .main-content .cv-cal-cell { padding: 4px !important; }
  .main-content .cv-modal-body { padding-left: 14px !important; padding-right: 14px !important; }
  /* Título + botón "Nuevo video": apilar */
  .main-content .cv-header { flex-wrap: wrap; }

  /* Panel de detalle del video (cvp-*) — quitar padding de escritorio,
     que el título no se corte y que la barra superior no quede bajo ☰ */
  .cvp-page { padding-left: 16px !important; padding-right: 16px !important; }
  .cvp-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: break-word;
  }
  /* Barra superior fija: correrla a la derecha del botón ☰ */
  .cvp-topbar {
    padding-left: 58px !important;
    box-sizing: border-box !important;
  }
  .cvp-topbar-title { display: none !important; }      /* etiqueta no esencial: libera espacio */
  .cvp-topbar-right { flex-wrap: wrap; }
  /* Cuadrícula de propiedades: una columna, valores completos */
  .cvp-props-grid { grid-template-columns: 1fr !important; }
  .cvp-stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* admin-dashboard: 4 KPIs + fila de gráfica */
  .main-content .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .main-content .metric-card-top { flex-wrap: wrap; gap: 6px; }
  .main-content .metric-card-top .metric-label,
  .main-content .metric-label { white-space: normal !important; }

}