/* ============================================================
   DharmaApp — Mobile Layer (v1.1)
   Carga DESPUÉS de refresh.css. Mobile-first overrides + bottom-tab nav.
   Breakpoint principal: max-width: 720px (mobile).

   Principios v1.1: touch 48px / forms 16px / no zoom iOS / safe-area /
   bottom-tab nav / tables→cards / modals fullscreen / FAB safe-area /
   filtros chips horizontal scroll / sticky CTAs / no hover bias.
   ============================================================ */

/* ── Safe area variables (iOS notch / Android nav bar) ── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bottom-tab-h: 64px;
  --bottom-tab-total: calc(var(--bottom-tab-h) + var(--safe-bottom));
}

/* ============================================================
   BOTTOM TAB NAV (mobile only)
   ============================================================ */
.bottom-tab {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--bottom-tab-total);
  padding-bottom: var(--safe-bottom);
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--border-neutral);
  display: none;
  z-index: 90;
  box-shadow: 0 -2px 12px rgba(11,31,46,0.04);
}
.bottom-tab__inner {
  display: flex;
  height: var(--bottom-tab-h);
  width: 100%;
}
.bottom-tab__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: var(--ink-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 140ms;
  position: relative;
}
.bottom-tab__item:active {
  background: var(--brand-soft);
}
.bottom-tab__item[aria-current="page"],
.bottom-tab__item.is-active {
  color: var(--brand);
  font-weight: 600;
}
.bottom-tab__item[aria-current="page"]::before,
.bottom-tab__item.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--brand);
  border-radius: 0 0 3px 3px;
}
.bottom-tab__icon {
  width: 22px; height: 22px;
}

/* ============================================================
   MOBILE DRAWER (slide-in right, "Más" menu mobile)
   ============================================================ */
.mobile-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(11,31,46,0.40);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mobile-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-y: auto;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  display: flex;
  flex-direction: column;
}
.mobile-drawer.is-open {
  transform: translateX(0);
  box-shadow: -10px 0 30px rgba(11,31,46,0.18);
}
.mobile-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-neutral);
  flex-shrink: 0;
}
.mobile-drawer__title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.mobile-drawer__close {
  width: 44px; height: 44px;
  border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.mobile-drawer__close:active { background: var(--paper); }
.mobile-drawer__body {
  flex: 1;
  padding: 12px 12px 24px;
  overflow-y: auto;
}
.mobile-drawer__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  min-height: 48px;
}
.mobile-drawer__item:active { background: var(--paper); }
.mobile-drawer__item--danger { color: var(--danger); }
.mobile-drawer__sep {
  height: 1px;
  background: var(--border-neutral);
  margin: 8px 0;
}
.mobile-drawer__group-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 14px 14px 6px;
}

/* Hamburger button (visible solo mobile) */
.hamburger-btn {
  display: none;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  padding: 0;
}
.hamburger-btn:active { background: rgba(255,255,255,0.08); }

/* ============================================================
   MOBILE BREAKPOINT — todos los overrides ≤720px
   ============================================================ */
@media (max-width: 720px) {

  /* ── HARD CAP anti-overflow horizontal ──
     Salvaguarda global: ningún elemento puede causar scroll horizontal
     en mobile. Si algún hijo se sale, queda recortado en lugar de
     romper el viewport. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  main, main > div {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Containers que pueden tener inline max-width grandes */
  .max-w-4xl, .max-w-7xl, [style*="max-width:1280px"], [style*="max-width: 1280px"],
  [style*="max-width:880px"], [style*="max-width: 880px"],
  [style*="max-width:760px"], [style*="max-width: 760px"] {
    max-width: 100% !important;
  }

  /* ── Truncate texto largo en flex-rows ──
     Los rows de tipo inbox/lead/draft/hot tienen flex con un
     título y un meta. Sin estos overrides, los <span> hijos del meta
     no respetan text-overflow:ellipsis del padre porque cada uno es
     flex item independiente. */
  .inbox-row__body, .lead-row__body, .draft-row__body, .hot-card__body,
  .card-x, .timeline__item, .field-x {
    min-width: 0 !important;
    max-width: 100%;
  }
  .inbox-row__title, .lead-row__name,
  .draft-row__name, .hot-card__name, .hot-card__prop {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0;
    max-width: 100%;
  }
  .inbox-row__meta, .lead-row__meta, .draft-row__meta {
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    min-width: 0;
    max-width: 100%;
  }
  .inbox-row__meta > span,
  .lead-row__meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* El último span (que suele tener el texto largo: nombre de propiedad
     en visitas atrasadas, "5 abr · ESTUDIO 72M2 CENTRO PLAYA") flex-shrink */
  .inbox-row__meta > span:last-child,
  .lead-row__meta > span:last-child,
  .inbox-row__meta > .timeago,
  .lead-row__meta > .timeago {
    flex-shrink: 1 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Tablas legacy: si una <table> normal queda en mobile sin .responsive-table,
     mejor que tenga overflow-x interno (no rompiendo body) */
  table:not(.responsive-table) {
    max-width: 100%;
    display: block;
    overflow-x: auto;
  }

  /* Imágenes y media: no se salen del contenedor */
  img, video, iframe { max-width: 100%; height: auto; }

  /* ── Show mobile-only nav ── */
  .bottom-tab { display: block !important; }
  .hamburger-btn { display: inline-flex !important; }
  /* Hide desktop nav links container (nav inside header) — !important porque
     la nav tiene style="display:flex" inline que gana a media queries */
  header.glass-header nav { display: none !important; }
  /* Header reduce padding */
  header.glass-header > div { padding: 0 12px !important; }
  .nav-logo span { font-size: 14px; }

  /* ── Compensar bottom-tab en main ── */
  body { padding-bottom: 0; }
  main { padding-bottom: calc(var(--bottom-tab-total) + 16px) !important; }

  /* ── Page padding lateral 16px ── */
  main > div { padding-left: 16px !important; padding-right: 16px !important; padding-top: 16px !important; padding-bottom: 16px !important; }

  /* ── Tipografía mobile ── */
  body { font-size: 15px; }
  .page-x__title, h1.page-title, h1[class*="title"]:not(.modal-title):not(.section-title) {
    font-size: 22px !important;
    line-height: 1.2;
  }
  .kpi-x__value { font-size: 26px !important; }
  .today-hero__greet { font-size: 22px !important; }

  /* ── Anti-zoom iOS: inputs siempre 16px ── */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="password"], input[type="search"],
  input[type="url"], textarea, select,
  .field-x__input, .field-x__select, .field-x__textarea,
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 0 14px;
  }
  textarea, .field-x__textarea, .form-textarea {
    min-height: 96px !important;
    padding: 12px 14px !important;
    line-height: 1.5;
  }

  /* ── Touch targets 48px ── */
  .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }
  .btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .btn--lg { min-height: 52px; padding: 0 22px; font-size: 16px; }
  .btn--icon { width: 44px; height: 44px; }
  .btn--icon.btn--sm { width: 40px; height: 40px; }
  /* Legacy buttons */
  .btn-primary, .btn-secondary { min-height: 48px; padding: 12px 18px; font-size: 15px; }

  .tabs-x__tab {
    padding: 12px 14px;
    min-height: 48px;
    font-size: 14px;
  }

  /* Chips: padding más generoso */
  .chip { padding: 8px 14px; font-size: 12px; }
  .chip--sm { padding: 6px 10px; font-size: 11px; }

  /* ── Cards ── */
  .card-x { padding: 16px; border-radius: var(--r-md); }
  .card-x--bento { padding: 20px; border-radius: var(--r-lg); }
  .card-x--ghost { padding: 14px; }
  .card-x__head { margin-bottom: 12px; }

  .stack { gap: 12px; }
  .row { gap: 8px; }

  /* ── Bento siempre 1 columna ── */
  .bento-x, .bento-x--today {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bento-x [class*="col-"] {
    grid-column: 1 / -1 !important;
  }

  /* ── Forms en una columna ── */
  .form-grid-2, .form-grid-3, .pp-grid-2, .pp-grid-3, .pp-grid-stages,
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:repeat(2"],
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Filters horizontal scroll bar ── */
  .filters-bar-mobile, .filters-scroll {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px 12px;
    scroll-snap-type: x proximity;
    flex-wrap: nowrap;
  }
  .filters-bar-mobile::-webkit-scrollbar,
  .filters-scroll::-webkit-scrollbar { display: none; }
  .filters-bar-mobile > *, .filters-scroll > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* ── Tablas → cards (responsive-table opt-in) ── */
  table.responsive-table { display: block; }
  table.responsive-table thead { display: none; }
  table.responsive-table tbody { display: block; }
  table.responsive-table tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border-neutral);
    border-radius: var(--r-md);
    padding: 14px;
    margin-bottom: 12px;
  }
  table.responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    text-align: right;
    font-size: 14px;
  }
  table.responsive-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 12px;
    text-align: left;
    flex-shrink: 0;
  }
  table.responsive-table td:first-child {
    border-bottom: 1px solid var(--border-neutral);
    margin-bottom: 8px;
    padding-bottom: 10px;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
    justify-content: flex-start;
  }
  table.responsive-table td:first-child::before { display: none; }
  table.responsive-table td[data-actions]::before { display: none; }

  /* Tablas legacy sin .responsive-table: forzar overflow-x */
  table:not(.responsive-table) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Modals fullscreen ── */
  .modal, dialog.modal, dialog[open], .modal-backdrop > .modal-content {
    width: 100vw !important;
    max-width: none !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal__head {
    position: sticky; top: 0;
    background: #fff;
    z-index: 5;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-neutral);
  }
  .modal__body { padding: 16px; }
  .modal__foot {
    position: sticky; bottom: 0;
    background: #fff;
    z-index: 5;
    padding: 12px 16px calc(12px + var(--safe-bottom));
    border-top: 1px solid var(--border-neutral);
  }

  /* Help drawer ya es 92vw — verificar safe-area */
  .help-drawer { padding-bottom: var(--safe-bottom); }

  /* ── FAB respeta bottom-tab ── */
  .fab-x {
    bottom: calc(var(--bottom-tab-total) + 16px) !important;
    right: 16px !important;
  }
  .fab-x__main { width: 52px !important; height: 52px !important; }
  .help-fab {
    bottom: calc(var(--bottom-tab-total) + 16px) !important;
    right: 16px !important;
    width: 44px !important; height: 44px !important; font-size: 14px !important;
  }

  /* ── Sticky CTA en forms largos ── */
  .sticky-cta-mobile {
    position: sticky;
    bottom: var(--bottom-tab-total);
    background: #fff;
    border-top: 1px solid var(--border-neutral);
    padding: 12px 16px calc(12px + var(--safe-bottom));
    margin: 24px -16px 0;
    z-index: 70;
    box-shadow: 0 -4px 12px rgba(11,31,46,0.06);
  }

  /* ── Page header pattern: stack vertical ── */
  .page-x__head, .pp-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* ── Tabs scroll horizontal ── */
  .tabs-x {
    margin: 0 -16px 16px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tabs-x::-webkit-scrollbar { display: none; }
  .tabs-x__tab { white-space: nowrap; flex-shrink: 0; }

  /* Tabs adicionales (no class .tabs-x) que pueden cortarse: tasks "Hechas" */
  nav[class*="tab"] a, ul[class*="tab"] li, .tabs-bar a, .tabs-bar button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Strings largos (API keys, IDs, tokens) en displays: break-all en mobile */
  code, .mono, [class*="-id"], [class*="token"] {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  /* Caja específica de display de tokens en settings */
  .settings-api-display, .setting-token-display {
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.4;
  }

  /* ── Lead/visit row: layout grid mobile (avatar | body / actions abajo) ── */
  .lead-row, .inbox-row {
    display: grid !important;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "avatar body"
      "actions actions";
    gap: 8px 12px !important;
    align-items: start;
  }
  .lead-row > .av-x, .inbox-row > .inbox-row__icon { grid-area: avatar; }
  .lead-row > .lead-row__body, .inbox-row > .inbox-row__body { grid-area: body; min-width: 0; }
  .lead-row__actions, .inbox-row__actions {
    grid-area: actions;
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-neutral);
  }
  .lead-row__actions > a, .lead-row__actions > button,
  .inbox-row__actions > a, .inbox-row__actions > button {
    flex: 1; min-width: 100px;
    justify-content: center;
  }
  /* El time-tag sí se queda inline al inicio si existe (visitas hoy) */
  .inbox-row > .time-tag {
    grid-area: avatar;
    width: auto !important;
    min-width: 56px;
  }

  /* Chip "Falta info" no se debe truncar — flex-shrink:0 + más pequeño */
  .lead-row__name .chip,
  .lead-row__name .chip--warning {
    flex-shrink: 0 !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    line-height: 1.3;
  }
  /* lead-row__name: permite wrap si los chips son demasiados */
  .lead-row__name {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  /* lead-row__meta: permite wrap (no nowrap) y el último span trunca */
  .lead-row__meta {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  /* ── Hide texto en btn icon-only en mobile, mantener solo icono ── */
  .btn--mobile-icon-only span,
  .btn--mobile-icon-only .btn-text { display: none; }
}

/* ============================================================
   PHONES PEQUEÑOS (≤480px) — extra compact
   ============================================================ */
@media (max-width: 480px) {
  .page-x__title, h1.page-title { font-size: 20px !important; }
  .kpi-x__value { font-size: 22px !important; }
  .card-x { padding: 14px; }
  .card-x--bento { padding: 16px; }
  .stack { gap: 10px; }

  /* Bottom tab labels más cortos */
  .bottom-tab__item { font-size: 10px; }
  .bottom-tab__icon { width: 20px; height: 20px; }
}

/* ============================================================
   Anti-hover bias para touch devices (cualquier viewport)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .card-x--interactive:hover {
    transform: none;
    box-shadow: var(--shadow-card);
    border-color: var(--border-neutral);
  }
  .card-x--interactive:active {
    transform: scale(0.99);
    background: var(--paper);
    transition: transform 80ms;
  }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.97); transition: transform 80ms; }
  .tabs-x__tab:hover { background: transparent; color: var(--ink-soft); }
  .tabs-x__tab:active { background: var(--brand-soft); }
  .nav-link:hover { background: transparent; }
  .nav-link:active { background: rgba(255,255,255,0.08); }
}

/* ============================================================
   Landscape phone — bottom-tab más bajo + drawer override
   ============================================================ */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
  .bottom-tab { height: calc(56px + var(--safe-bottom)); }
  :root { --bottom-tab-h: 56px; }
  main { padding-bottom: calc(56px + var(--safe-bottom) + 12px) !important; }
}

/* ============================================================
   prefers-reduced-motion (refresh.css ya cubre lo base)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none !important; }
  .bottom-sheet { transition: none !important; }
}