/* ============================================================
   Nisto · Capa responsive móvil
   Recrea los mockups "Handoff Mobile" sobre la SPA existente.
   Reutiliza los tokens de nisto-tokens.css y el estado Alpine
   de kastoApp(). Todo vive bajo el breakpoint de teléfono.
   ============================================================ */

:root {
  /* Alto REAL del bottom nav, incluyendo el safe-area inferior del dispositivo.
     El nav se fija a esta misma altura (box-sizing: border-box) y las vistas de
     chat restan exactamente esto → el composer queda pegado al nav, sin hueco. */
  --mnav-h: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Solo-móvil / solo-desktop helpers */
.nisto-mobile-only { display: none; }
@media (max-width: 768px) { .nisto-desktop-only { display: none !important; } }

/* ---------- DESKTOP (≥769px): nunca mostrar el chrome móvil ---------- */
@media (min-width: 769px) {
  #nisto-bottomnav,
  #view-inicio,
  #view-mas { display: none !important; }
}

/* ---------- MÓVIL (≤768px) ---------- */
@media (max-width: 768px) {

  /* Ocultar el sidebar de escritorio y recuperar el ancho completo */
  #app-root > aside { display: none !important; }
  #nisto-main { margin-left: 0 !important; }

  .nisto-mobile-only { display: flex; }

  /* Espacio inferior para que el bottom nav no tape el contenido scrollable.
     --mnav-h ya incluye el safe-area, así que no se vuelve a sumar. */
  #nisto-main {
    padding-bottom: calc(var(--mnav-h) + 8px);
  }

  /* Vistas a pantalla completa (Mensajes, Lead detalle): el alto es exactamente
     el viewport menos el nav → el composer queda pegado al nav, sin hueco. */
  #nisto-main .h-screen,
  #nisto-main [style*="100vh"] {
    height: calc(100dvh - var(--mnav-h)) !important;
    min-height: 0 !important;
  }
  /* Sin bottom nav (editores/wizards) → las vistas full-height usan todo el alto */
  #nisto-main.nisto-nav-off { padding-bottom: 0 !important; }
  #nisto-main.nisto-nav-off .h-screen,
  #nisto-main.nisto-nav-off [style*="100vh"] {
    height: 100dvh !important;
  }
  .nisto-nav-hidden { display: none !important; }

  /* Achicar paddings laterales gigantes de las vistas de escritorio */
  #nisto-main > div[x-show].px-6,
  #nisto-main > div[x-show] .px-6 { padding-left: 16px; padding-right: 16px; }
  /* px-8 (32px) → 16px en móvil (marketing setup/intro, etc.) */
  #nisto-main > div[x-show] .px-8 { padding-left: 16px !important; padding-right: 16px !important; }
  #nisto-main > div[x-show].px-8 { padding-left: 16px !important; padding-right: 16px !important; }

  /* Apilar grids multi-columna del escritorio en móvil */
  #nisto-main .grid.grid-cols-2,
  #nisto-main .grid.grid-cols-3,
  #nisto-main .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #nisto-main [class*="grid-cols-["] { grid-template-columns: 1fr !important; }

  /* En teléfonos angostos, una sola columna también para los stats */
  @media (max-width: 430px) {
    #nisto-main .grid.grid-cols-3,
    #nisto-main .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Lead detalle: la columna lateral fija (300px) pasa a ancho completo */
  #nisto-main [style*="width:300px"],
  #nisto-main [style*="width: 300px"] { width: 100% !important; }

  /* Cabeceras de página: que el grupo de acciones envuelva en vez de cortarse */
  #nisto-main .nisto-pagehead { flex-wrap: wrap; row-gap: 12px; }
  #nisto-main .nisto-pagehead > div:last-child { flex-wrap: wrap; width: 100%; }
  /* Inputs/selects de búsqueda en la cabecera se estiran al ancho disponible */
  #nisto-main .nisto-pagehead > div:last-child input[type="text"],
  #nisto-main .nisto-pagehead > div:last-child select { flex: 1 1 160px; min-width: 0; width: auto; }

  /* Tablas (Leads, Agentes, Workflows, Uso): permitir desplazamiento horizontal
     en móvil en vez de recortar/apretar las columnas. El contenedor directo de
     la tabla se vuelve scrollable y la tabla toma el ancho de su contenido. */
  #nisto-main div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #nisto-main table { min-width: max-content; }

  /* Datos · Tablas: la lista de 5 columnas se apila en tarjeta en móvil */
  .nisto-data-head { display: none !important; }
  .nisto-data-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  .nisto-data-row > span { display: none !important; } /* "columnas" suelta, sin su label */
  .nisto-data-row .opacity-0 { opacity: 1 !important; } /* acciones visibles (no hay hover táctil) */
  .nisto-data-row .justify-end { justify-content: flex-start; }

  /* Leads: el kanban horizontal se colapsa a secciones verticales por estado */
  #nisto-main .nisto-kanban {
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 14px;
  }
  #nisto-main .nisto-kanban > .flex-none { width: 100% !important; }

  /* ── Datos · Mapeo (wizard de nueva tabla canónica) a pantalla completa ── */
  /* padding-bottom para que las acciones no queden bajo el bottom nav siempre-visible */
  .nisto-fullwizard { left: 0 !important; padding-bottom: var(--mnav-h); }
  .nisto-fullwizard .max-w-\[1000px\] { padding-left: 16px !important; padding-right: 16px !important; }
  /* STEP 1 (fuente 300px|1fr) y STEP 3 (fila de acciones) apilados */
  .nisto-fullwizard [style*="grid-template-columns:300px 1fr"] { grid-template-columns: 1fr !important; }
  .nisto-fullwizard .nis-card.flex.items-end.justify-between { flex-wrap: wrap; row-gap: 14px; }
  .nisto-fullwizard .nis-card.flex.items-end.justify-between .max-w-\[360px\] { max-width: 100% !important; }
  /* STEP 2: cabecera de tabla oculta; cada fila de mapeo se apila en tarjeta.
     (La fila pierde su grid-template-columns inline por un :style condicional,
     así que la apilamos por clase, no por el atributo style.) */
  .nisto-fullwizard .grid.nis-cat { display: none !important; }
  .nisto-fullwizard .grid.items-center {
    grid-template-columns: 1fr auto !important;
    row-gap: 8px;
  }
  .nisto-fullwizard .grid.items-center > i,
  .nisto-fullwizard .grid.items-center > svg { display: none !important; }
  .nisto-fullwizard .grid.items-center > input,
  .nisto-fullwizard .grid.items-center > select { grid-column: 1 / -1 !important; }
  /* Topbar del wizard: título y stepper apilan; el stepper puede desplazarse */
  .nisto-fullwizard .nis-topbar .flex.items-center.justify-between { flex-wrap: wrap; row-gap: 10px; }
  .nisto-fullwizard .nis-topbar .flex.items-center.justify-between > .flex {
    overflow-x: auto; max-width: 100%; scrollbar-width: none;
  }
  .nisto-fullwizard .nis-topbar .flex.items-center.justify-between > .flex > span { flex: none; }

  /* Nav sticky de secciones del agent builder → fila scrollable arriba */
  #nisto-main nav.sticky.top-4 {
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #nisto-main nav.sticky.top-4::-webkit-scrollbar { display: none; }
  #nisto-main nav.sticky.top-4 > * { flex: none; white-space: nowrap; }
}

/* ============================================================
   Bottom navigation (5 tabs) — Inicio · Leads · Mensajes ·
   Agentes · Más. Fija abajo, espejo del mockup.
   ============================================================ */
#nisto-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid #E8E8E6;
  padding: 9px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  /* Altura fija == --mnav-h para que las vistas de chat calcen exacto y el
     composer quede pegado (sin hueco entre el menú y la barra de escribir). */
  height: var(--mnav-h);
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
#nisto-bottomnav .mnav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  color: #A6A7AC;
  -webkit-tap-highlight-color: transparent;
}
#nisto-bottomnav .mnav-item span { font-size: 10.5px; font-weight: 500; line-height: 1; }
#nisto-bottomnav .mnav-item.active { color: #0E0E10; }
#nisto-bottomnav .mnav-item.active span { font-weight: 600; }
#nisto-bottomnav .mnav-badge {
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(4px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #FF6A45;
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
#nisto-bottomnav .mnav-dot {
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(7px);
  width: 8px; height: 8px;
  border-radius: 99px;
  background: #E5484D;
}

/* ============================================================
   Vistas móviles nuevas: Inicio (dashboard) y Más (índice)
   ============================================================ */
#view-inicio, #view-mas {
  background: #F4F5F6;
  min-height: 100%;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  color: #0E0E10;
  padding-top: env(safe-area-inset-top, 0px);
}
.m-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #A6A7AC;
  margin: 0 2px 9px;
}
.m-card { background: #fff; border: 1px solid #EFEFED; border-radius: 14px; }
.m-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  border-bottom: 1px solid #F4F5F6;
  width: 100%; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  font-family: inherit; color: inherit;
}
.m-row:last-child { border-bottom: 0; }
.m-row .m-row-ic {
  width: 32px; height: 32px; border-radius: 9px;
  background: #F1F1EF; color: #0E0E10;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.m-row .m-row-body { flex: 1; min-width: 0; }
.m-row .m-row-title { display: block; font-size: 14px; font-weight: 600; }
.m-row .m-row-sub { display: block; font-size: 11.5px; color: #A6A7AC; margin-top: 1px; }
.m-toggle {
  position: relative; width: 44px; height: 26px; border-radius: 99px;
  background: #D9DADD; flex: none; transition: background .2s;
}
.m-toggle.on { background: #1A7A45; }
.m-toggle .knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 99px; background: #fff;
  transition: transform .2s;
}
.m-toggle.on .knob { transform: translateX(18px); }

/* ============================================================
   Bottom sheets — paneles que suben desde abajo en móvil.
   En desktop conservan su layout original (drawer/modal).
   ============================================================ */
.nisto-sheet-handle { display: none; }

@media (max-width: 768px) {
  /* El drawer lateral del lead pasa a sheet que sube, por encima del bottom nav */
  .nisto-sheet {
    right: 0 !important; left: 0 !important;
    top: 7% !important;
    bottom: var(--mnav-h) !important;
    height: auto !important;
    width: 100% !important; max-width: 100% !important;
    border-left: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -16px 40px -20px rgba(16, 16, 18, .4) !important;
  }
  /* Animación: deslizar desde abajo en vez de desde la derecha */
  .nisto-sheet.translate-x-full { transform: translateY(100%) !important; }
  .nisto-sheet.translate-x-0 { transform: translateY(0) !important; }

  /* Handle de arrastre visible arriba del sheet */
  .nisto-sheet-handle {
    display: flex; justify-content: center;
    padding: 10px 0 2px; flex: none;
  }
  .nisto-sheet-handle > span {
    width: 38px; height: 4px; border-radius: 99px; background: #D9DADD;
  }
  /* Las flechas prev/next del lead no aplican en sheet móvil */
  .nisto-quicknav { display: none !important; }

  /* Modales centrados (resolver conflicto, etc.) → sheet inferior, sobre el nav */
  .nisto-modal-sheet {
    align-items: flex-end !important;
    padding: 0 0 var(--mnav-h) 0 !important;
  }
  .nisto-modal-sheet > .nisto-modal-panel {
    width: 100% !important; max-width: 100% !important;
    max-height: calc(88dvh - var(--mnav-h)) !important;
    border-radius: 22px 22px 0 0 !important;
  }
}

/* ============================================================
   Drawer de perfil (dentro de Mensajes) · animación de entrada
   por CSS. A diferencia de x-transition (JS), un @keyframes no se
   "atasca" bajo carga: si se interrumpe, el estado en reposo es el
   base (opacidad total), así que el panel SIEMPRE queda visible.
   ============================================================ */
.nisto-profile-overlay { animation: nisto-fade-in .18s ease-out both; }
.nisto-profile-panel   { animation: nisto-sheet-up .22s ease-out both; }
@keyframes nisto-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nisto-sheet-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 769px) {
  /* En escritorio el panel entra desde la derecha, no desde abajo. */
  @keyframes nisto-sheet-up { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .nisto-profile-overlay, .nisto-profile-panel { animation: none; }
}