/* ═══════════════════════════════════════════════════════════════════════════
   IUSLEAD — Mobile-first responsive (≤768px)
   Solo UX/UI — no altera lógica de negocio
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --dock-pad: calc(62px + env(safe-area-inset-bottom, 0px));
    --topbar-h: 52px;
    --mobile-pad: 14px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /* ── Shell ───────────────────────────────────────────────────────────── */
  #titlebar { display: none !important; }

  #topbar {
    padding: 0 var(--mobile-pad);
    gap: 8px;
  }

  .topbar-brand img { height: 22px; width: auto; }
  .topbar-brand-copy { display: none; }
  .topbar-divider { display: none; }
  .topbar-status { display: none; }

  /* Búsqueda compacta visible en móvil */
  .topbar-search {
    display: flex !important;
    flex: 1;
    min-width: 0;
    max-width: none;
    position: relative;
    border-radius: var(--r);
    padding: 0 10px;
    min-height: 40px;
  }

  .topbar-search input {
    font-size: 14px !important;
    padding: 8px 8px 8px 28px !important;
  }

  .topbar-search svg {
    left: 10px;
    width: 16px;
    height: 16px;
  }

  .global-search-results {
    left: -8px;
    right: -8px;
    max-height: 50dvh;
    border-radius: var(--r-lg);
  }

  .topbar-end {
    flex: 1;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
  }

  .topbar-user-chip { display: none !important; }
  .topbar-time { display: none; }
  .topbar-divider--end { display: none; }

  .topbar-btn-labeled .topbar-btn-label,
  .topbar-exit-text { display: none; }

  .topbar-btn,
  .topbar-btn-labeled {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    padding: 0 !important;
  }

  #btn-presentation,
  .topbar-btn[href="/excel-avanzado"],
  #btn-topbar-exit { display: none !important; }

  #content {
    padding: var(--mobile-pad);
    padding-bottom: calc(var(--mobile-pad) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Ocultar dock macOS — reemplazado por bottom nav */
  #dock-wrapper { display: none !important; }

  /* ── Bottom navigation ───────────────────────────────────────────────── */
  #mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background: rgba(14, 15, 20, 0.94);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s var(--ease);
  }

  .mob-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .mob-nav-item.active { color: var(--blue); }
  .mob-nav-item:active { opacity: 0.7; }

  /* ── Drawers ─────────────────────────────────────────────────────────── */
  .mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
  }

  .mobile-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
    position: fixed;
    z-index: 210;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    transition: transform 0.28s var(--ease-out);
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
  }

  .mobile-drawer[hidden] { display: none !important; }

  .mobile-drawer--modules {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    max-height: 75dvh;
  }

  .mobile-drawer--modules.open { transform: translateY(0); }

  .mobile-drawer--filters {
    right: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 92vw);
    border-radius: 0;
    border-left: 1px solid var(--border);
    transform: translateX(100%);
  }

  .mobile-drawer--filters.open { transform: translateX(0); }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .mobile-drawer-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--text);
  }

  .mobile-drawer-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-surface);
    border-radius: var(--r-sm);
    color: var(--text-sec);
    font-size: 18px;
    cursor: pointer;
  }

  .mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 20px;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .mobile-module-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-sec);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    min-height: 88px;
    text-align: center;
  }

  .mobile-module-item .dock-icon {
    width: 40px;
    height: 40px;
  }

  .mobile-module-item:active { background: var(--bg-surface-h); }

  /* ── Touch targets globales ──────────────────────────────────────────── */
  .btn,
  .auth-submit-btn,
  .filter-bar select,
  .cv-filters select,
  .tk-toolbar select,
  .db-date,
  .cv-search,
  .tk-search,
  .filter-bar input,
  .stg-nav-item,
  .tk-view-btn {
    min-height: 44px;
    font-size: 14px !important;
  }

  .btn {
    padding: 10px 16px;
    gap: 8px;
  }

  .btn svg { width: 16px; height: 16px; }

  select,
  input[type="text"],
  input[type="search"],
  input[type="date"],
  input[type="password"],
  textarea {
    font-size: 16px !important; /* evita zoom iOS */
  }

  /* ── KPIs apilados ───────────────────────────────────────────────────── */
  .kpi-grid,
  .status-grid,
  .sec-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: var(--s3);
  }

  .kpi { padding: 16px; }

  /* ── Dashboard ───────────────────────────────────────────────────────── */
  .db-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .db-top > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .db-date { flex: 1; min-width: 120px; }

  .db-grid-main,
  .db-grid-2,
  .db-charts-row {
    grid-template-columns: 1fr !important;
  }

  .chart-container--line { min-height: 180px; }
  .chart-container--donut,
  .chart-container--bar-v { min-height: 160px; }
  .chart-container--bar-h { min-height: 200px; }

  .section-header,
  .section-header.mb,
  .section-header.mb-lg {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ── Conversaciones — patrón lista → detalle ─────────────────────────── */
  #v-conversations .cv-layout {
    grid-template-columns: 1fr;
    height: calc(100dvh - var(--chrome-top) - var(--dock-pad) - 8px);
    min-height: 400px;
  }

  #v-conversations .cv-right { display: none; }

  #v-conversations .cv-center,
  #v-conversations .cv-left {
    grid-column: 1;
    grid-row: 1;
  }

  #v-conversations .cv-center {
    display: none;
    border-left: none;
  }

  #v-conversations.mobile-detail-open .cv-left { display: none; }
  #v-conversations.mobile-detail-open .cv-center { display: flex; }

  .cv-item {
    padding: 12px;
    min-height: 64px;
  }

  .cv-item-name { max-width: none; font-size: 14px; }

  .mobile-panel-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
  }

  .mobile-panel-back-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-surface);
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
  }

  .mobile-panel-back-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
  }

  .mobile-filter-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-sec);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .cv-left-top .cv-filters { display: none; }

  .cv-left-top .mobile-toolbar-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
  }

  .cv-left-top .cv-search { margin-bottom: 0; flex: 1; }

  /* ── Tickets / Casos ─────────────────────────────────────────────────── */
  .tk-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }

  .tk-toolbar-left {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tk-toolbar-left select { display: none; }
  .tk-mobile-filters { display: none; }

  .mobile-filter-slot select,
  .mobile-filter-slot .cv-filters {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .mobile-filter-slot select { width: 100%; }
  .tk-search { flex: 1; min-width: 0; width: 100%; }

  .tk-toolbar-right {
    justify-content: space-between;
    width: 100%;
  }

  .tk-view-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .tk-body {
    grid-template-columns: 1fr;
    height: calc(100dvh - var(--chrome-top) - var(--dock-pad) - 200px);
    min-height: 280px;
  }

  .tk-main,
  .tk-detail {
    grid-column: 1;
    grid-row: 1;
  }

  .tk-detail { display: none !important; border-left: none; }

  #v-tickets.mobile-detail-open .tk-main { display: none; }
  #v-tickets.mobile-detail-open .tk-detail {
    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabla → tarjetas */
  .tk-list-header { display: none; }

  .tk-list-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px;
    margin: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
  }

  .tk-list-row .tk-list-id {
    font-size: 12px;
    color: var(--blue);
  }

  .tk-list-row .tk-list-name { font-size: 14px; white-space: normal; }
  .tk-list-row .tk-list-msg { white-space: normal; font-size: 12px; }

  .tk-list-row .tk-list-cell,
  .tk-list-row .tk-list-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    white-space: normal;
  }

  .tk-list-row .tk-list-cell::before,
  .tk-list-row .tk-list-time::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .tk-list-row .tk-list-main::before { display: none; }

  .tk-kanban {
    grid-template-columns: 1fr !important;
    padding: 8px;
  }

  .tk-kan-body { max-height: none; }

  /* ── Vecinos ─────────────────────────────────────────────────────────── */
  .neighbor-grid {
    grid-template-columns: 1fr !important;
    gap: var(--s3);
  }

  .neighbor-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    min-height: 88px;
  }

  .neighbor-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .neighbor-name { font-size: 15px; }
  .neighbor-sector { font-size: 13px; }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filter-bar input { max-width: none !important; width: 100%; }

  /* ── WhatsApp ────────────────────────────────────────────────────────── */
  .wa-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: var(--s3);
  }

  .wa-item { min-height: 56px; padding: 14px; }

  /* ── Mapa ────────────────────────────────────────────────────────────── */
  .livemap-layout { min-height: auto; }

  .livemap-map-host,
  .livemap-map-host .leaflet-container {
    min-height: 280px !important;
    height: 45dvh;
  }

  .livemap-feed-card { max-height: 40dvh; }

  .livemap-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── Analytics / Reportes / Agenda ───────────────────────────────────── */
  .table-wrap {
    overflow-x: visible;
    margin: 0 -4px;
  }

  .table-wrap table,
  .sol-table,
  .ku-table,
  .bo-table,
  .mu-users-table {
    display: block;
    width: 100%;
    border: none;
  }

  .table-wrap thead,
  .sol-table thead,
  .ku-table thead,
  .bo-table thead,
  .mu-users-table thead {
    display: none;
  }

  .table-wrap tbody,
  .sol-table tbody,
  .ku-table tbody,
  .bo-table tbody,
  .mu-users-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .table-wrap tr,
  .sol-table tr,
  .ku-table tr,
  .bo-table tr,
  .mu-users-table tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
  }

  .table-wrap td,
  .table-wrap th,
  .sol-table td,
  .sol-table th,
  .ku-table td,
  .ku-table th,
  .bo-table td,
  .bo-table th,
  .mu-users-table td,
  .mu-users-table th {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 2px 0;
    border: none;
    font-size: 13px;
  }

  .table-wrap td::before,
  .sol-table td::before,
  .ku-table td::before,
  .bo-table td::before,
  .mu-users-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .agenda-item { padding: 14px; min-height: 56px; }

  /* ── Configuración — sidebar drawer ──────────────────────────────────── */
  .stg-layout {
    grid-template-columns: 1fr;
    position: relative;
    min-height: calc(100dvh - var(--chrome-top) - var(--dock-pad) - 40px);
  }

  .stg-sidebar {
    position: fixed;
    left: 0;
    top: var(--chrome-top);
    bottom: var(--dock-pad);
    width: min(280px, 88vw);
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-out);
    border-right: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }

  body.stg-sidebar-open .stg-sidebar { transform: translateX(0); }

  .stg-nav-item {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .stg-main { padding: 16px; }

  .mobile-stg-menu-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-sec);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  /* ── Modales fullscreen ──────────────────────────────────────────────── */
  .ku-modal,
  .wa-setup-overlay,
  .auth-overlay:not([hidden]) .auth-shell {
    padding: 0 !important;
    align-items: stretch !important;
  }

  .ku-modal-dialog,
  .wa-setup-shell,
  .auth-panel {
    width: 100% !important;
    max-width: none !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
    border: none !important;
  }

  .ku-modal-body,
  .wa-setup-card {
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

  .auth-shell {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* ── Ficha vecino / paneles ──────────────────────────────────────────── */
  .ficha-panel {
    position: fixed;
    inset: var(--chrome-top) 0 var(--dock-pad) 0;
    z-index: 90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── PWA install hint ────────────────────────────────────────────────── */
  #pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--r);
    background: var(--blue-dim);
    border: 1px solid rgba(107, 138, 235, 0.25);
    font-size: 12px;
    color: var(--text-sec);
  }

  #pwa-install-banner[hidden] { display: none !important; }

  #pwa-install-banner button {
    margin-left: auto;
    flex-shrink: 0;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: none;
    background: var(--blue);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  /* ── Impersonation / demo banners ────────────────────────────────────── */
  .impersonation-bar,
  .demo-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .impersonation-bar-btn,
  .demo-banner-close {
    min-height: 44px;
    padding: 8px 14px;
  }

  /* ── Scroll horizontal prevention ────────────────────────────────────── */
  body { overflow-x: hidden; }
  .view { max-width: 100%; overflow-x: hidden; }

  .rpt-grid,
  .bo-grid,
  .an-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Ocultar elementos móviles en desktop */
@media (min-width: 769px) {
  #mobile-bottom-nav,
  #mobile-drawer-modules,
  #mobile-drawer-filters,
  #mobile-backdrop,
  .mobile-panel-back,
  .mobile-filter-trigger,
  .mobile-stg-menu-btn,
  #pwa-install-banner {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mobile-panel-back { display: none; }
  #v-conversations.mobile-detail-open .mobile-panel-back,
  #v-tickets.mobile-detail-open .mobile-panel-back {
    display: flex;
  }
}