/* ===== Teléfono y tableta (≤ 900 px): diseño táctil =====
   Reglas: sin desplazamiento horizontal de la página (solo dentro del Kanban y de las tablas),
   texto ≥ 14 px, objetivos táctiles ≥ 44 px e inputs de 16 px (sin zoom automático en iOS). */

.search-btn, .subnav-toggle { display: none; }

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { overflow-x: hidden; }
  body { font-size: 15px; }

  /* ---------- Texto mínimo 14 px ---------- */
  h4, .brand-sub, .column-head .count, .card .meta, .owner, .badges, .empty, .stage-bar button, .products th, .tl-meta, .tl-meta .link,
  .grid label, .list-count, table.data th, .small, .btn.small, .chip, .tabs .count, .cal-head, .cal-num, .cal-item, .user-name small,
  .pipeline-pick, label.inline, .login-card label, .login-error, .tile span, .bar-label, .bar-value, .nav-count, .conv-text, .ch-badge,
  .chat-crm a, .msg.system, .msg-meta, .qr-menu button span, .pill, .switch, .copy-box code, .field-label, .check, .grid .field small,
  .ag-time, .ag-block, .ag-block .ag-status, .ag-preview, .group-title, .chip-body, .chip-count, .chip-btn, .tunnel-list, .subnav a, .sr-type,
  .facts dt, code, .big-num small, .stage-arrow .count, .amount-pill, .source, .filter-chip, .filter-chip button, .dropdown-title, .map-col,
  .inline-select, .ap-sub, .role-tag, .ap-pulse b, .theme-opt, .status-pill, .kpi-mini span, .bk-col header, .bk-num, .copy-field, .conn,
  .sbi-filters label, .sbi-kpi span, .sbi-card h4, .sbi-bar, .sbi-legend, .sbi-inv-nums, .more-head, .more-title, .more-show, .nav-item.editing,
  .nav-editing-hint, .nav-finish, .my-group .count, small, label, td, th, li, dt, dd, .muted, .hint, .tl-body, .side-nav a, .side-group-head,
  .bk-card small, .kpi-mini small, .sbi-kpi small, .sbi-val, .sbi-label, .bar-row, .links a, .back, .panel-sub .link, .link, .view-tabs button,
  .seg button, .counter, .crm-tabs, .tag, .badge {
    font-size: max(14px, 1em);
  }
  /* Elementos que heredan un tamaño menor del contenedor */
  .small, small, .muted.small, .tl-meta, .pill, .status-pill, .chip, .filter-chip, .amount-pill, .source, .role-tag, .conn, .more-show,
  .column-head .count, .stage-arrow .count, .my-group .count, .tabs .count, .chip-count { font-size: 14px; }
  /* Contadores numéricos (insignias) */
  .bell-count, .side-count, .unread-badge, .nav-count, body.side-collapsed .side-count, .quickbar .side-count {
    font-size: 12px; min-width: 20px; line-height: 20px; text-align: center;
  }
  .workday .wd-icon { font-size: 14px; }

  /* ---------- Inputs de 16 px y altura táctil ---------- */
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea {
    font-size: 16px !important; min-height: 44px;
  }
  textarea { min-height: 88px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  input[type=file] { font-size: 16px; min-height: 44px; }
  .inbox-filters input, .inbox-filters select, .chat-head select, .booking-crm select, .inline-select { font-size: 16px !important; }

  /* ---------- Objetivos táctiles ≥ 44 px ---------- */
  button, .btn, a.btn, .icon-btn, .icon-round, .seg button, .view-tabs button, .counter, .chip-btn, .filter-chip button, .stage-bar button,
  .side-nav a, .side-group-head, .subnav a, .links a, .panel-sub .link, summary, .preset-toggle, .stage-add, .scroll-btn, .welcome-close,
  .source, .theme-opt, .more-show, .more-action, .subnav-menu a, .quick-add, label.check, .check {
    min-height: 44px;
  }
  .icon-btn, .icon-round, .avatar, .stage-add, .welcome-close, .preset-toggle, .nav-hide, .scroll-btn { min-width: 44px; }
  .avatar, .icon-round { width: 44px; height: 44px; }
  button.link, a.link, .links a, .panel-sub .link, label.check, .check { display: inline-flex; align-items: center; }
  .links { gap: 4px 14px; }
  .sbi-seg, .sbi-col, .bar-fill, .sbi-fill { min-height: 0 !important; min-width: 0 !important; }
  .sbi-bar { min-height: 44px; }
  .sbi-stack-total .sbi-seg { min-height: 0 !important; }
  /* Enlaces sueltos (tablas, tarjetas, "volver") con área táctil completa */
  td a, .back, a.wa, .card a, .facts a, .my-body a, .plain-list a, .more-row > a { display: inline-flex; align-items: center; min-height: 44px; }
  .stage-add, .quick-btn, .board-scroll, .filter-chip button, .search-box button, .btn-split > .btn + .btn, .caret { min-width: 44px; font-size: 16px; }
  .status-dot, .g-icon { font-size: 14px; }
  .btn, .swatch, .chip-btn { min-width: 44px; }
  .connector { width: 22px; height: 22px; position: relative; }
  .connector::after { content: ''; position: absolute; inset: -11px; }
  .search-box { flex-wrap: wrap; }
  .search-box #search { min-width: 0; flex: 1 1 140px; }
  /* Gráfica de dinámica: se desplaza dentro de su tarjeta para que los ejes sigan legibles */
  .sbi-card.wide { overflow-x: auto; }
  .sbi-card.wide .sbi-svg { min-width: 680px; max-height: none; }
  .sbi-svg .sbi-axis, .sbi-svg .sbi-num { font-size: 14px; }
  .sbi-stack-total { height: 44px; }
  .panel p a, .panel li a, .doc-item a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Barra superior: una fila; secciones y búsqueda en botones ---------- */
  .topbar { flex-wrap: nowrap !important; padding: 8px 10px; gap: 6px; min-height: 60px;
    /* backdrop-filter crearía un contenedor para los elementos fijos (hoja de secciones, búsqueda, panel) */
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #1B1446; }
  body[data-theme="light"] .topbar { background: #F8FAFF; }
  .top-title { order: 0 !important; flex: 1 1 auto !important; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .top-title h2 { font-size: 14px !important; line-height: 1.2; color: rgba(255, 255, 255, .78); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .subnav-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px;
    font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); cursor: pointer; white-space: nowrap; }
  .subnav-toggle[hidden] { display: none; }
  #subnavCurrent { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .search-btn { display: grid; place-items: center; flex: none; }
  .menu-btn { order: -1 !important; flex: none; }
  .topbar .workday, .topbar .bell, .avatar-wrap, .search-btn { order: 1 !important; flex: none; }
  .topbar .workday { min-height: 44px; }
  .global-search { display: none !important; }
  body.search-open .global-search { display: flex !important; position: fixed; left: 8px; right: 8px; top: 64px; z-index: 72; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
  body.search-open .global-search input { min-height: 48px; }

  /* Hoja de secciones (sub-menú colapsado) */
  .subnav { display: none !important; }
  body.subnav-open .subnav {
    display: flex !important; position: fixed; left: 0; right: 0; top: 60px; bottom: 0; z-index: 70; width: auto !important; max-width: none;
    flex-direction: column; flex-wrap: nowrap !important; align-items: stretch; overflow-y: auto !important; overflow-x: hidden;
    background: #1B1446; padding: 12px 16px 32px; gap: 4px;
  }
  body.subnav-open .subnav a, body.subnav-open .nav-item.editing { font-size: 16px; padding: 12px 14px; min-height: 48px; border-radius: 12px; display: flex; align-items: center; white-space: normal; color: #fff; }
  body.subnav-open .subnav a.active { background: rgba(255, 255, 255, .16); box-shadow: inset 3px 0 0 var(--green); }
  body.subnav-open .subnav-drop { display: flex; flex-direction: column; }
  body.subnav-open .subnav-drop > button { pointer-events: none; background: none; color: rgba(255, 255, 255, .6); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; text-align: left; min-height: 36px; padding: 10px 14px 4px; }
  body.subnav-open .subnav-menu { position: static !important; display: grid !important; min-width: 0; max-width: none; max-height: none; background: rgba(255, 255, 255, .05); box-shadow: none; border-radius: 12px; padding: 4px; }
  body.subnav-open .subnav-menu a { color: #fff; }
  body.subnav-open .subnav-menu a:hover, body.subnav-open .subnav-menu a.active { background: rgba(255, 255, 255, .14); color: #fff; }
  body.subnav-open .more-head, body.subnav-open .more-title { color: rgba(255, 255, 255, .6); }
  body.subnav-open .more-action { color: #fff; min-height: 48px; font-size: 16px; }
  body.subnav-open .more-sep { background: rgba(255, 255, 255, .14); }
  body.subnav-open .nav-editing-hint { color: rgba(255, 255, 255, .7); white-space: normal; padding: 6px 14px; }
  body.subnav-open .nav-finish { min-height: 48px; margin: 8px 0 0; }

  /* ---------- Barra lateral: menú deslizable con fondo oscuro ---------- */
  .sidebar { width: min(300px, 86vw) !important; transition: transform .22s ease; }
  body.side-open .side-backdrop { display: block; }
  body.side-open { overflow: hidden; }
  .side-nav a { padding: 12px; white-space: normal; line-height: 1.25; }

  /* ---------- Panel del avatar como hoja ---------- */
  .avatar-panel { position: fixed !important; left: 0; right: 0; top: 60px; width: auto !important; max-height: calc(100dvh - 60px) !important; border-radius: 0 0 18px 18px; }
  .ap-cards { grid-template-columns: 1fr; }

  /* ---------- Contenido ---------- */
  .view-bar { flex-wrap: wrap; gap: 10px; padding-left: 12px; padding-right: 12px; }
  .view-bar .toolbar { flex-wrap: wrap; gap: 8px; width: 100%; }
  .view-bar .toolbar > input[type=search], .list-search, #invSearch, .view-bar .toolbar > .search-box { flex: 1 1 100%; width: 100%; min-width: 0; }
  .page-pad { padding-left: 12px; padding-right: 12px; }
  .page, .page.detail { padding-left: 12px; padding-right: 12px; max-width: 100%; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .detail-grid > .col, .panel, .grid > * { min-width: 0; }
  .detail-title { flex-wrap: wrap; gap: 8px; }
  .detail-title h1 { font-size: 22px; overflow-wrap: anywhere; }
  .stage-bar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .prod-form { grid-template-columns: 1fr 1fr !important; }
  .prod-form > input[name=name], .prod-form > button { grid-column: 1 / -1; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .crm-tabs { padding-left: 12px; padding-right: 12px; }
  .view-tabs, .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .view-tabs button, .seg button { white-space: nowrap; flex: none; }
  .doc-actions { gap: 8px; }
  .doc-actions .spacer { display: none; }
  .billing-summary, .sbi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbi-filters label { min-width: 0; flex: 1 1 140px; }
  .sales-cards { grid-template-columns: 1fr; }
  .my-groups, .bi-grid, .sbi-grid { grid-template-columns: minmax(0, 1fr); }
  .trash-head { flex-direction: column; align-items: stretch; }

  /* ---------- Kanban: desplazamiento horizontal propio con imán por columna ---------- */
  .board-wrap { padding: 0 0 16px; }
  .board-wrap .board { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; scroll-padding: 0 12px; }
  .board-wrap .column { flex: 0 0 min(300px, 84vw) !important; scroll-snap-align: start; }
  .billing-kanban { grid-auto-columns: min(280px, 82vw); scroll-snap-type: x mandatory; }
  .bk-col { scroll-snap-align: start; }
  .card { min-height: 44px; }

  /* ---------- Centro de contacto: lista → chat a pantalla completa ---------- */
  .inbox { padding: 0 12px 12px !important; }
  .inbox.has-chat .inbox-chat { position: fixed; left: 0; right: 0; top: 60px; bottom: 0; z-index: 40; height: auto !important; margin: 0; border-radius: 0; }
  .inbox.has-chat .chat-panel, .inbox.has-chat .inbox-chat > .panel { height: 100%; border-radius: 0; }
  .back-mobile { display: inline-grid !important; place-items: center; min-width: 44px; min-height: 44px; border-radius: 12px; background: #EEF2F7; color: #1E293B; font-size: 20px; }
  .inbox-selects { grid-template-columns: 1fr 1fr; }
}

/* Teléfono */
@media (max-width: 640px) {
  /* La jornada se controla desde el panel del avatar */
  .topbar .workday { display: none !important; }
  .view-bar h1 { font-size: 22px; }
  .view-bar .toolbar > .btn, .view-bar .toolbar > button, .view-bar .toolbar > a.btn { flex: 1 1 auto; justify-content: center; }
  .grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Modales a pantalla completa */
  dialog, dialog.wide { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; margin: 0; border-radius: 0 !important; }
  dialog > form, dialog > .dlg-body { min-height: 100%; display: flex; flex-direction: column; padding: 16px; box-sizing: border-box; }
  dialog h2 { font-size: 20px; padding-right: 8px; }
  dialog .actions { position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 calc(4px + env(safe-area-inset-bottom)); background: #fff; flex-wrap: wrap; gap: 8px; z-index: 1; }
  dialog .actions .btn { flex: 1 1 auto; justify-content: center; }
  dialog .actions .spacer { display: none; }
  .avatar-panel { border-radius: 0; max-height: calc(100dvh - 60px) !important; }
}