/* =============================================
   mobile.css — Ajustes específicos mobile
   Solo aplica en pantallas <= 768px
   ============================================= */

@media (max-width: 768px) {

  /* ── Layout general ── */
  .main-content {
    padding: 12px 14px !important;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px !important;
  }
  .topbar h1 { font-size: 17px !important; }
  .topbar-actions { flex-wrap: wrap; gap: 6px; width: 100%; }

  /* ── Grids ── */
  .kpi-grid, .kpi-grid-3, .stats-row, .stats-row-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .two-col, .three-col { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-full { grid-column: 1 !important; }

  /* ── Tablas generales ── */
  .card { overflow-x: auto; }
  .inner-table { min-width: 480px; }

  /* ── Pipeline: tabla scroll, ocultar columnas secundarias ── */
  #pipelineList {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #pipelineList table {
    min-width: 400px;
    font-size: 12px;
  }
  /* Ocultar columna Empresa y Prioridad en pipeline */
  #pipelineList th:nth-child(5),
  #pipelineList td:nth-child(5),
  #pipelineList th:nth-child(6),
  #pipelineList td:nth-child(6) { display: none !important; }

  /* Pipeline: panel lateral → manejado por JS (ver pipelineAbrirPanel) */

  /* ── Registro de Pagos: layout ── */
  #prodEmpresaTabs > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #prodTabla {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* prodPanel y prodLayout manejados por JS (ver prodAbrirPanel) */

  /* ── Por Cobrar / Por Pagar ── */
  #cobrarWrap, #pagarContenido {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Notificaciones ── */
  #notifPanel {
    left: 8px !important;
    right: 8px !important;
    bottom: 60px !important;
    width: auto !important;
    max-height: 70vh !important;
  }

  /* ── Modal: slide desde abajo ── */
  .modal-overlay.open {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center;
  }
  .modal-box {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    border-radius: 18px 18px 0 0 !important;
    transform: none !important;
    animation: none !important;
    overflow-y: auto;
  }
  .modal-box.open {
    transform: none !important;
    animation: slideUpModal .22s ease forwards !important;
  }
  @keyframes slideUpModal {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* ── Toast ── */
  .erp-toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    max-width: none !important;
  }

  /* ── Botones touch-friendly ── */
  .btn-icon {
    min-width: 36px !important;
    min-height: 36px !important;
  }
  .btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* ── Esconder labels largos en mobile ── */
  .nav-item span { display: none; }

  /* KPI muy pequeño */
  @media (max-width: 380px) {
    .kpi-grid, .stats-row {
      grid-template-columns: 1fr !important;
    }
  }
}

/* ============================================================
   FASE 1 — Modales en móvil
   Aplica a: Nuevo lead, Editar lead, Registrar pago, Editar pago.
   Cero cambios en lógica/IDs. Solo afecta <= 768px.
   ============================================================ */
@media (max-width: 768px) {

  /* ── Header del modal: padding compacto + título con wrap ── */
  .modal-header {
    padding: 14px 16px 0 !important;
    padding-top: 16px !important;
    margin-bottom: 12px !important;
    gap: 10px;
  }
  .modal-title {
    font-size: 14px !important;
    line-height: 1.3;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
  }
  .modal-close { flex-shrink: 0; }

  /* ── Body del modal: padding más compacto ── */
  .modal-body {
    padding: 0 16px 20px !important;
  }

  /* ── Form footer: botones lado a lado, full-ancho, touch-friendly ── */
  .form-footer {
    margin-top: 16px;
    padding-top: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .form-footer .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* ── Filas de "Fechas del evento" (.fev-row) ──
     Date arriba a todo el ancho; etiqueta + botón ✕ debajo. */
  .fev-row {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .fev-row .fevFecha {
    flex: 1 1 100% !important;
  }
  .fev-row .fevEtiq {
    flex: 1 1 calc(100% - 32px) !important;
  }

  /* ── Resumen de cálculo de factura (Registrar pago / Editar pago) ──
     Achicar 1px la tipografía para que "S/ X,XXX.XX" no se vea apretado. */
  #pResumenFactura > div,
  #peditResumenFactura > div {
    font-size: 12px !important;
  }
}

/* ============================================================
   FASE 2 — Pipeline Comercial: vista principal
   - Corrige bug: la columna Estado quedaba oculta en mobile.
   - Oculta columnas no esenciales (Comercial, Empresa, Prioridad,
     Fecha y el drag handle, que no se usa en touch).
   - Agranda botones 💬 y ⋯ para que sean cómodos al tocar.
   Cero cambios en JS, drag&drop, menú flotante o panel lateral.
   ============================================================ */
@media (max-width: 768px) {

  /* Re-mostrar columna 6 (Estado) — la regla anterior la ocultaba por error */
  #pipelineList th:nth-child(6),
  #pipelineList td:nth-child(6) {
    display: table-cell !important;
  }

  /* Ocultar columnas no esenciales en mobile:
     1 = drag handle (no se arrastra en touch),
     4 = Comercial, 5 = Empresa (ya estaba),
     7 = Prioridad, 8 = Fecha */
  #pipelineList th:nth-child(1),
  #pipelineList td:nth-child(1),
  #pipelineList th:nth-child(4),
  #pipelineList td:nth-child(4),
  #pipelineList th:nth-child(7),
  #pipelineList td:nth-child(7),
  #pipelineList th:nth-child(8),
  #pipelineList td:nth-child(8) {
    display: none !important;
  }

  /* Tabla: ya no necesita scroll horizontal porque ocultamos 5 cols.
     Anulamos el min-width:400px del bloque anterior. */
  #pipelineList table {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  /* Botón 💬 (lead frío / actualizaciones) — área de tap más grande */
  #pipelineList td:nth-child(2) button {
    padding: 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  /* Botón ⋯ (menú contextual) — área de tap más grande */
  #pipelineList td:last-child button[onclick^="pipelineToggleMenu"] {
    padding: 6px 12px !important;
    min-width: 40px !important;
    min-height: 36px !important;
    font-size: 18px !important;
  }
}

/* ============================================================
   FASE 3 — Pipeline Coachéveres: vista principal
   - Anula el min-width:700px inline que forzaba scroll horizontal.
   - Oculta Programa/Cohorte y Teléfono/Email (info disponible en
     el panel lateral al tocar el participante).
   - Agranda botones 💬 y 🗑 para tap cómodo.
   Cero cambios en JS, panel lateral, modales o desktop.
   ============================================================ */
@media (max-width: 768px) {

  /* Anula el min-width:700px inline del <table> y achica fuente */
  #coachListWrap table {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  /* Ocultar columnas no esenciales en mobile:
     3 = Programa/Cohorte
     5 = Teléfono/Email */
  #coachListWrap th:nth-child(3),
  #coachListWrap td:nth-child(3),
  #coachListWrap th:nth-child(5),
  #coachListWrap td:nth-child(5) {
    display: none !important;
  }

  /* Botón 💬 (col 1) — área de tap más grande */
  #coachListWrap td:nth-child(1) button {
    padding: 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 18px !important;
  }

  /* Botón 🗑 (última col, solo admin) — área de tap más grande */
  #coachListWrap td:last-child button {
    padding: 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   FASE 4 — Producción: vista principal
   - Las "filas" son divs con widths fijos en px (no es <table>).
   - En móvil ocultamos Fecha pago, Pagado por y › indicador
     (esa info se ve al tocar el ítem en el panel lateral).
   - Achicamos un poco Importe y Estado para dar aire al Concepto.
   Cero cambios en JS, toggles, panel lateral, cálculos o desktop.
   ============================================================ */
@media (max-width: 768px) {

  /* Ocultar 3 columnas no críticas dentro de #prodTabla:
     - Fecha pago (width:80px inline)
     - Pagado por (width:90px inline)
     - › indicador (width:36px inline)
     Aplica tanto al header de columnas como a cada item row. */
  #prodTabla div[style*="width:80px"],
  #prodTabla div[style*="width:90px"],
  #prodTabla div[style*="width:36px"] {
    display: none !important;
  }

  /* Achicar Importe (100px → 80px) para dar más aire al Concepto */
  #prodTabla div[style*="width:100px"] {
    width: 80px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
  }

  /* Achicar Estado (110px → 90px) y reducir padding */
  #prodTabla div[style*="width:110px"] {
    width: 90px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Reducir padding-left exagerado del Concepto (era 46px / 56px desktop) */
  #prodTabla div[style*="padding:8px 10px 8px 46px"] {
    padding: 8px 8px 8px 14px !important;
  }
  #prodTabla div[style*="padding:5px 14px 5px 56px"] {
    padding: 5px 8px 5px 14px !important;
  }
}

/* ============================================================
   FASE 5 — Wall Chévere
   - Layout 1fr+280px → 1 columna apilada (feed arriba, sidebar abajo).
   - Posts grid 2 cols → 1 columna full-width.
   - Anula dimensiones guardadas (cardWidth/Height/colSpan) que admins
     ajustan en desktop pero rompen layout en móvil.
   - Oculta drag/resize handles (no aplican en touch).
   Cero cambios en JS, lógica de publicar/votar/reaccionar o desktop.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Layout principal: 1fr 280px → 1 columna */
  div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 2. Posts del feed: 2 columnas → 1 columna */
  #wallPostsContainer {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 3. Anular dimensiones guardadas en cada post */
  .wall-card {
    grid-column: auto !important;
  }
  .wall-card > .card {
    width: auto !important;
    min-height: auto !important;
  }

  /* 4. Ocultar drag y resize handles en móvil (no aplican en touch) */
  .wdrag, .wresize {
    display: none !important;
  }

  /* 5. Buscador del topbar full-width */
  #wallSearch {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* El wrapper del search también debe ocupar todo */
  .topbar-actions > div[style*="position:relative"]:has(#wallSearch) {
    flex: 1 1 100%;
    width: 100%;
  }

  /* 6. Imagen del post: limitar altura */
  .wall-card img {
    max-height: 240px !important;
  }

  /* 7. Form de publicar: grids internos 1fr 1fr → 1 columna */
  #wallFormWrap div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FASE 5b — Botón flotante "+ Publicar" en Wall (móvil)
   Estilos del FAB que inyecta wall-mobile-fab.js.
   El JS se encarga de mostrar/ocultar; CSS solo lo decora.
   ============================================================ */
@media (max-width: 768px) {
  .wall-fab-publicar {
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 150;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 28px;
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-main);
    box-shadow: 0 6px 20px rgba(26, 86, 160, .35);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform .12s, box-shadow .12s;
  }
  .wall-fab-publicar:active {
    transform: scale(.95);
    box-shadow: 0 3px 10px rgba(26, 86, 160, .35);
  }
}