/* ==============================================================================
   CRM en el celular — capa móvil (js/movil.js)
   Se carga al final para mandar sobre el diseño de escritorio, y solo actúa por
   debajo de 820 px de ancho: el computador queda exactamente igual.

   Patrón de aplicación nativa: barra de pestañas abajo con lo más usado, menú
   completo en un panel lateral, cabecera compacta y respeto por la muesca y la
   barra de inicio del iPhone. Colores por las variables de los temas del CRM.
   ============================================================================== */

/* Fuera del celular, los elementos de la capa móvil no existen. */
.movil-tabs, .movil-menu-btn, .movil-velo, .movil-instalar { display: none; }

@media (max-width: 820px) {
  html, body { overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; }

  /* ── Menú lateral → panel deslizante ── */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 320px) !important;
    z-index: 1200;
    transform: translateX(-102%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: var(--shadow-xl, 0 12px 40px rgba(0,0,0,.35));
    padding-top: env(safe-area-inset-top);
  }
  .sidebar.collapsed { width: min(84vw, 320px) !important; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .sidebar-logo-full { display: revert !important; }
  .sidebar.collapsed .sidebar-logo-mini { display: none !important; }
  body.movil-menu-abierto .sidebar { transform: translateX(0); }
  /* index.css oculta nombres y secciones por debajo de 900 px (era la barra de
     solo íconos). En el panel hay espacio: cada módulo con su nombre. */
  .sidebar .nav-item .nav-label,
  .sidebar .nav-group .nav-label { display: inline-block !important; }
  .sidebar .nav-section { display: block !important; }
  .sidebar .nav-section-label { display: block !important; }
  .sidebar-footer .sync-status { display: flex !important; }
  .sidebar .nav-item { justify-content: flex-start !important; }
  .sidebar-toggle { display: none !important; }

  .movil-velo {
    display: block; position: fixed; inset: 0; z-index: 1150;
    background: var(--surface-overlay, rgba(15,23,42,.45));
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 220ms ease;
  }
  body.movil-menu-abierto .movil-velo { opacity: 1; pointer-events: auto; }

  /* ── Contenido a todo el ancho ── */
  /* El cuerpo de la página no se desplaza (index.css: body 100vh y overflow
     hidden): lo que se desliza con el dedo es el área de contenido, como en el
     computador. Por eso la columna principal mide exactamente la pantalla y el
     contenido toma el alto que sobra; sin ese límite crecía con su contenido y
     nada quedaba con barra de desplazamiento. */
  .app-container { display: block !important; height: 100vh !important; height: 100dvh !important; }
  .main-content {
    width: 100% !important; margin-left: 0 !important;
    height: 100vh !important; height: 100dvh !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  .main-content > .content-body {
    flex: 1 1 auto !important; min-height: 0 !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  }

  /* ── Cabecera compacta ── */
  .top-bar {
    height: auto !important;
    min-height: 56px;
    padding: calc(env(safe-area-inset-top) + 6px) 12px 6px !important;
    gap: 10px;
    position: sticky !important; top: 0;
  }
  .movil-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border, rgba(0,0,0,.08));
    background: var(--bg-elevated, transparent); color: var(--text-primary); font-size: 1.05rem; cursor: pointer;
  }
  .search-container { flex: 1; min-width: 0; width: auto !important; max-width: none !important; }
  .search-container input { width: 100% !important; font-size: 16px !important; /* evita el zoom de iOS */ }
  .search-container input::placeholder { font-size: 0.85rem; }
  .top-bar-actions { gap: 10px !important; flex-shrink: 0; }
  .top-bar-actions .user-info,
  .top-bar-actions #theme-toggle { display: none !important; }
  .top-bar-actions #btn-logout { display: none !important; }   /* salir queda en el menú */
  .top-bar-actions .avatar { width: 34px !important; height: 34px !important; }

  .breadcrumb-container { display: none !important; }

  /* ── Área de trabajo: aire para la barra de pestañas ── */
  .content-body {
    padding: 12px 12px calc(84px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
  }
  /* Pantallas en marco (tablero de ventas, herramientas): terminan sobre la barra de pestañas. */
  /* En el iPhone un marco crece al ancho de su contenido y arrastra la pantalla de
     lado; con ancho mínimo del 100 % queda fijo al ancho de la pantalla. */
  #app-viewport iframe { width: 1px !important; min-width: 100% !important; }
  #app-viewport iframe { max-height: calc(100dvh - 56px - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  /* Con letra de menos de 16 px el iPhone se acerca solo al tocar un campo y no
     vuelve: la pantalla queda más ancha que el celular y se mueve de lado. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }

  /* Resultados del buscador: panel a todo el ancho bajo la cabecera. */
  .top-bar .search-results-popover {
    position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important;
    top: calc(env(safe-area-inset-top) + 64px) !important; max-height: 70vh !important;
    z-index: 1300 !important; border-radius: 16px !important; padding: 6px 0 !important;
  }
  .top-bar .search-result-item { min-height: 52px; padding: 10px 16px !important; font-size: 14px !important; }
  .top-bar .search-result-detalle { font-size: 12px; }

  /* Ventanas emergentes a pantalla completa, como hoja inferior */
  .modal { width: 100% !important; max-width: 100% !important; max-height: 92dvh !important;
           border-radius: 18px 18px 0 0 !important; margin: auto 0 0 !important; }
  /* Las ventanas de tarjeta (Nueva tarea, Nuevo lead…) también como hoja inferior. */
  #modal-container, #modal-container .modal-overlay { align-items: flex-end !important; }
  #modal-container .modal-card, #modal-container .modal-content {
    width: 100% !important; max-width: 100% !important; max-height: 92dvh !important; overflow-y: auto !important;
    margin: 0 !important; border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* ── Barra de pestañas ── */
  .movil-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg-surface, #fff);
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    box-shadow: 0 -6px 24px rgba(0,0,0,.08);
    backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  }
  .movil-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; border: 0; background: none; cursor: pointer; border-radius: 12px;
    color: var(--text-muted); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    transition: color 160ms ease, background 160ms ease;
  }
  .movil-tab i { font-size: 1.15rem; }
  .movil-tab.activo { color: var(--primary, var(--color-primary)); background: var(--primary-light, rgba(59,130,246,.1)); }
  .movil-tab:active { transform: scale(.96); }
  /* Acción central (Grabar): botón circular que sobresale de la barra. */
  .movil-tab-accion, .movil-tab-accion.activo { background: none; color: var(--text-primary); }
  .movil-tab-aro {
    width: 52px; height: 52px; margin-top: -22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-error, #dc2626); color: var(--text-inverse, #fff);
    box-shadow: 0 6px 18px rgba(220, 38, 38, .35), 0 0 0 4px var(--bg-surface, #fff);
    transition: transform 160ms ease;
  }
  .movil-tab-aro i { font-size: 1.3rem; }
  .movil-tab-accion:active .movil-tab-aro { transform: scale(.92); }

  /* Elementos flotantes de las pantallas que quedaban debajo de la barra */
  [class*="footer-status"], .live-status-bar { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }

  /* ── Invitación a instalar ── */
  .movil-instalar {
    display: block; position: fixed; left: 12px; right: 12px; z-index: 1300;
    bottom: calc(76px + env(safe-area-inset-bottom));
    background: var(--bg-surface, #fff); color: var(--text-primary);
    border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 20px;
    box-shadow: 0 18px 48px rgba(0,0,0,.22); padding: 16px;
    animation: movil-sube 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .movil-instalar-fila { display: flex; gap: 12px; align-items: center; }
  .movil-instalar img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.12); flex-shrink: 0; }
  .movil-instalar-titulo { font-weight: 700; font-size: 15px; }
  .movil-instalar-texto { font-size: 13px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
  .movil-instalar-pasos { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .movil-instalar-pasos li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-secondary); }
  .movil-instalar-pasos b { color: var(--text-primary); }
  .movil-paso-num {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-light, rgba(59,130,246,.12)); color: var(--primary, #3b82f6); font-weight: 700; font-size: 12px;
  }
  .movil-instalar-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
}

/* Celular: cabecera de pantalla compacta y acción principal flotante (js/movil.js). */
@media (max-width: 599px) {
  #app-viewport .movil-subtitulo { display: none !important; }
  #app-viewport .movil-titulo { font-size: 20px !important; line-height: 1.25 !important; margin-bottom: 2px !important; }
  #app-viewport .btn.movil-fab {
    position: fixed !important; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1090;
    width: 56px; height: 56px; min-height: 56px; padding: 0 !important; border-radius: 18px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; box-shadow: 0 10px 24px rgba(15, 23, 42, .28) !important;
    background: var(--color-primary, var(--primary)) !important; color: var(--text-on-dark, #fff) !important; border: 0 !important;
  }
  #app-viewport .btn.movil-fab i { font-size: 22px !important; margin: 0 !important; }
  #app-viewport .btn.movil-fab:active { transform: scale(.94); }
  body.mn-hoja-abierta #app-viewport .movil-fab, body.movil-menu-abierto #app-viewport .movil-fab { display: none !important; }

  /* Calendario: mes compacto con puntos + agenda del día (js/movil.js). */
  #app-viewport .card:has(> .movil-cal) { height: auto !important; }
  .movil-cal { grid-auto-rows: 46px !important; flex-grow: 0 !important; }
  .movil-cal .calendar-day {
    min-height: 0 !important; padding: 0 !important; position: relative; cursor: pointer;
    display: flex !important; align-items: center; justify-content: center;
  }
  .movil-cal .day-tasks-container { display: none !important; }
  .movil-cal .day-number {
    margin: 0 !important; width: 34px; height: 34px; border-radius: 50%; font-size: 15px !important;
    display: flex !important; align-items: center; justify-content: center; position: static !important;
  }
  .movil-cal .movil-cal-con::after {
    content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary, var(--primary));
  }
  .movil-cal .movil-cal-sel .day-number { background: var(--color-primary, var(--primary)) !important; color: var(--text-on-dark, #fff) !important; }
  .movil-agenda { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
  .movil-agenda-grupo { display: flex; flex-direction: column; gap: 6px; }
  .movil-agenda-dia { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .movil-agenda-dia strong { font-size: 15px; color: var(--text-primary); }
  .movil-agenda-nueva {
    min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-default, var(--border));
    background: none; color: var(--color-primary, var(--primary)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .movil-agenda-titulo { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .movil-agenda-fila {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; text-align: left;
    border: 1px solid var(--border-default, var(--border)); border-left: 4px solid var(--movil-agenda-color, var(--color-primary, var(--primary)));
    border-radius: 12px; background: var(--surface-1, var(--bg-surface)); color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer;
  }
  .movil-agenda-fila span { flex: 1; min-width: 0; line-height: 1.35; }
  .movil-agenda-tag { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--movil-agenda-color, var(--text-muted)); font-variant-numeric: tabular-nums; }
  .movil-agenda-fila i { color: var(--text-muted); font-size: 12px; }
  .movil-agenda-fila.hecha span { text-decoration: line-through; opacity: .6; }
  .movil-agenda-vacio { margin: 0; font-size: 13px; color: var(--text-muted); }
}

@keyframes movil-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Abierta como aplicación instalada: sin rebote ni selección accidental de la interfaz. */
@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable], .content-body p, .content-body td { -webkit-user-select: text; user-select: text; }
}