/* Fix skeleton (rayado GPU en Android): resuelto en el origen —
   ver .skel en design-system.css / shell.css. El shine animado con
   overflow:hidden + color-mix + transform fue eliminado por completo,
   ya no hace falta desactivarlo solo en móvil. */
@media (max-width: 980px) {
  .skel { animation: pulse 1.5s ease-in-out infinite; }
}

/* ============================================================
   mobile.css v3 — Sistema completo de tarjetas móvil
   Referencia de diseño: pj-card (Proyectos)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   FIX DEFINITIVO: --border sólido en móvil
   rgba borders causan rendering artifacts (rayones) en Android Chrome/WebKit
   Se reemplaza con equivalente sólido visualmente idéntico
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  :root {
    --border: #DCE6EF;
    --border-dark: #2E3A4E;
  }
  [data-theme="dark"] {
    --border: #2E3A4E;
  }
}

/* ══════════════════════════════════════════════════════════════
   BASE MÓVIL
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .app-content {
    padding: 16px 14px calc(78px + env(safe-area-inset-bottom)) !important;
  }
  .input-wrap { height: 52px; border-radius: 12px; }
  .input-wrap .ins { width: 18px; margin-right: 10px; }
  .input-wrap .ins svg { width: 17px; height: 17px; }
  .input-wrap .input { font-size: 15px; }
  .docs-mob-search-inner { height: 52px; border-radius: 12px; }
  .docs-mob-search-inner input { font-size: 15px; }
  .btn { min-height: 44px; border-radius: 12px; font-size: 14px; }
  .btn-primary, .btn-success, .btn-danger, .btn-ghost { padding: 11px 18px; }
  .modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--border);
    margin: 0 auto 16px;
  }
  .field { margin-bottom: 14px; }
  .field label {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; display: block;
  }
  /* STAT-GRID: grid 2 cols en móvil — NO overflow-x (causa ghosting GPU) */
  .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    padding-bottom: 0;
    margin-bottom: 14px;
    overflow-x: visible !important;
  }
  .stat-card {
    min-width: 0 !important;
    flex: none;
    padding: 12px 14px;
    border-radius: 12px;
    border: none !important;
  }
  .stat-card .num { font-size: 20px; }
  .stat-card .num-money { font-size: 13px; }
  .stat-card .lbl { font-size: 10.5px; }
  .topbar { height: 52px; padding: 0 14px; }
  .topbar-account-info { display: none; }
  .topbar-account { padding: 3px; border-radius: 50%; border: none !important; background: transparent !important; }

  /* Evitar inputs negros */
  .input-wrap { background: var(--surface1) !important; border: 1.5px solid var(--border) !important; }
  .input-wrap:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent) !important; }
  select.input { appearance: none; -webkit-appearance: none; background: transparent; font-size: 15px; font-weight: 700; color: var(--text); }
  .modal .btn { min-height: 48px; font-size: 14px; font-weight: 700; }
  .row.mt { flex-direction: column; gap: 10px; }
  .fchip { padding: 8px 18px !important; font-size: 13px !important; border-radius: 99px !important; }
  .chip-tab { padding: 7px 14px; font-size: 12.5px; }
  .dl-row { min-height: unset !important; }
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .bottom-nav { padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); gap: 0; }
  .bottom-nav .bn-item { font-size: 9.5px; padding: 5px 4px; gap: 2px; border-radius: 10px; min-width: 0; }
  .bottom-nav .bn-item svg { width: 21px; height: 21px; }
  .bn-new-fab { width: 44px; height: 44px; margin-top: -20px; }
  .bn-new-fab svg { width: 21px; height: 21px; }
}

/* ══════════════════════════════════════════════════════════════
   MORE-MENU — siempre visible, nunca bajo nav
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .more-menu {
    max-height: calc(100dvh - 100px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   FILTROS — sin desbordamiento lateral
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .docs-mob-chips {
    margin: 0 0 10px 0 !important;
    padding: 0 2px 8px 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: flex !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   DMC — TARJETA MÓVIL UNIVERSAL (referencia: pj-card de Proyectos)
   Usada por: Propuestas, Facturas, Pagos, Ganancias, Clientes
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   DMC — TARJETA MÓVIL UNIVERSAL
   Diseño limpio tipo pj-card: sin borders internos entre secciones
   Solo 1 separador en el footer (borde-top)
   ══════════════════════════════════════════════════════════════ */
.dmc {
  background: var(--surface1);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 981px) {
  .dmc { border: 1px solid var(--border); }
}
/* neg-card: sin border en móvil (border solo desktop) */
@media (max-width: 980px) {
  .neg-card {
    border: none;
  }
}

/* Cabecera: avatar + info + badge */
.dmc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dmc-av {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 12px;
  flex: none;
}
.dmc-info {
  flex: 1;
  min-width: 0;
}
.dmc-nm {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.dmc-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmc-badge {
  flex: none;
  margin-top: 1px;
}
.dmc-co {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface2);
  border-radius: 5px;
  padding: 1px 6px;
  flex: none;
  margin-top: 2px;
}
.dmc-owner {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--info-soft);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* Meta: info secundaria SIN border — como pj-meta */
.dmc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.dmc-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.dmc-meta-item svg { width: 13px; height: 13px; flex: none; }
.dmc-meta-item strong { color: var(--text); font-weight: 800; }
.dmc-meta-item.accent { color: var(--accent); }
.dmc-meta-item.success { color: var(--success); }
.dmc-meta-item.warning { color: var(--warning); }

/* Monto principal — sin border */
.dmc-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.dmc-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.3px;
}
.dmc-paid {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.dmc-paid strong { font-weight: 800; color: var(--success); }
.dmc-bal {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.dmc-bal strong { font-weight: 800; color: var(--warning); }

/* Docs row (para clientes) — sin border */
.dmc-docs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.dmc-docs-row svg { width: 14px; height: 14px; flex: none; }

/* Footer: SOLO separador aquí — mismo patrón que pj-footer */
.dmc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  margin-top: 2px;
}

/* Acciones al fondo — sin border encima */
.dmc-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.dmc-acts .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.dmc-pay-btn {
  flex: 1;
  justify-content: center;
}

/* Paginador */
.dmc-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}

/* Lista de dmc (contenedor) */
.dl-card .doc-list,
#payList,
#clientList {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 980px) {
  .dl-card .doc-list,
  #payList,
  #clientList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px;
    background: var(--bg);
  }
  /* Ocultar cabecera de tabla en móvil — las tarjetas son auto-descriptivas */
  .dl-card .dl-head {
    display: none;
  }
  /* La dl-card se convierte en contenedor plano en móvil */
  .dl-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .d7 { padding-top: 2px; }
  .d7-hd { margin-bottom: 14px; }
  .d7-hi { font-size: 18px; }
  .d7-date { font-size: 12px; }
  .d7-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; margin-bottom: 10px; }
  .d7-kpi { padding: 14px 14px 12px; border-radius: 12px; }
  .d7-kv { font-size: 24px; }
  .d7-kl { font-size: 11.5px; }
  .d7-ks { font-size: 10.5px; }
  .d7-row1, .d7-row2 { grid-template-columns: 1fr !important; gap: 8px; margin-bottom: 8px; }
  .d7-ct { padding: 16px; }
  .d7-ttl { font-size: 13px; margin-bottom: 12px; }
  .d7-qgrid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .d7-qb { padding: 12px; border-radius: 12px; }
  .d7-qi { width: 32px; height: 32px; border-radius: 9px; }
  .d7-qt { font-size: 12.5px; }
  .d7-qs { font-size: 10.5px; }
  .d7-bars { gap: 10px; }
  .d7-brl { width: 68px; font-size: 11.5px; }
  .d7-biz { gap: 10px; }
  .d7-bizv { font-size: 22px; }
  .d7-bizl { font-size: 10.5px; }
  .d7-matchbig { font-size: 40px; }
  .d7-link { font-size: 12px; padding: 7px 0; }
}

/* ══════════════════════════════════════════════════════════════
   PROYECTOS — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .proj-grid-v2 { grid-template-columns: 1fr !important; gap: 8px; }
  .pj-card { padding: 16px; border-radius: 16px; gap: 10px; }
  .pj-name { font-size: 15px; font-weight: 800; }
  .pj-no-docs { font-style: normal; font-size: 12.5px; color: var(--text-2); }
  .pj-more-btn { opacity: 1 !important; width: 32px; height: 32px; background: var(--surface2); border-radius: 9px; }
  .pj-status-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .pj-pay-btn { padding: 7px 14px !important; font-size: 12.5px !important; border-radius: 10px !important; }
  .pj-progress-bar { height: 6px; }
  .pj-prog-label { font-size: 11.5px; }
  .pj-prog-balance { font-size: 11.5px; }
  .pj-totals-row { font-size: 12px; }
  .pj-meta-item { font-size: 12.5px; }
  .pj-footer { padding-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   CLIENTES — cl-grid a tarjeta dmc en móvil
   (el JS ya llama renderClientMobile que genera .dmc)
   Pero la tabla desktop .cl-grid en móvil debe quedar oculta
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* La cabecera de tabla desktop se oculta */
  .dl-head.cl-grid { display: none !important; }
  /* Las filas .dl-row.cl-grid ya no se usan en móvil (el JS llama renderClientMobile)
     pero por si acaso se renderizan, ocultarlas */
  .dl-row.cl-grid { display: none !important; }
  /* El contenedor de clientes muestra solo las tarjetas .dmc */
  #clientList { gap: 8px; padding: 10px; background: var(--bg); }
}

/* ══════════════════════════════════════════════════════════════
   NEGOCIOS — tarjetas móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .neg-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .neg-card { border-radius: 16px; padding: 16px; }
  .neg-card .dc-actions { gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
  .neg-card .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  .neg-card .icon-btn svg { width: 16px; height: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   MATCH — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .mxhero-in { padding: 18px 16px !important; gap: 14px !important; }
  .mxtitle { font-size: 17px !important; }
  .mxsub { font-size: 12px !important; }
  .mxkv { font-size: 26px !important; }
  .mxkl { font-size: 9.5px !important; }
  .mxrank { min-width: 82px !important; padding: 12px 14px !important; }
  .mxrpts { font-size: 24px !important; }
  .mxpills { display: none; }
  .mxtab span:not(.mxtabn) { display: inline !important; font-size: 12px; }
  .mxtab { padding: 8px 6px !important; font-size: 12px !important; }
  .mxgrid { grid-template-columns: 1fr !important; gap: 8px; }
  .mxcard { border-radius: 14px; }
  .mxcard-top { padding: 12px 14px; }
  .mxcnm { font-size: 14px; }
  .mxdetails { padding: 10px 14px; }
  .mxfoot { padding: 10px 14px; }
  .mxbtnc { padding: 10px 14px !important; font-size: 13px !important; border-radius: 10px !important; }
  .dl-row[data-id] { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .mxrparties { width: 100%; flex: none; }
  .mxracts { width: 100%; justify-content: flex-start !important; gap: 6px; }
  .mxrdate { display: none; }
  .mxbtnap { padding: 9px 16px !important; font-size: 13px !important; }
  .mxbtnpf { padding: 9px 14px !important; font-size: 13px !important; }
  .mxbtnchat { padding: 9px 14px !important; font-size: 13px !important; }
  .mxlgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .mxlogro { padding: 14px 10px; border-radius: 12px; }
  .mxlico { font-size: 26px; }
  .mxlnm { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   HOLDING — tarjetas y detalle móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .hold-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .hold-card { border-radius: 16px; padding: 16px; }
  .hold-card-name { font-size: 15px; font-weight: 800; }
  .hold-card-stats { gap: 8px; flex-wrap: wrap; }
  .hold-stat-val { font-size: 18px; }
  .hold-stat-lbl { font-size: 10px; }

  /* Detalle de negocio en holding — cabecera responsive */
  .hold-detail-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  /* Botones de acción del holding en una fila */
  .hold-detail-head > div:last-child {
    display: flex;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
  }
  .hold-detail-head > div:last-child .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-size: 12.5px;
    padding: 9px 10px;
  }

  /* Documentos y clientes del holding en móvil: tabla → lista legible */
  .hold-detail-head + .stat-grid { margin-bottom: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   PAGOS — pay-grid: forzar columna única en móvil
   (el JS ya llama renderPayMobile con .dmc)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .dl-head.pay-grid { display: none !important; }
  .dl-row.pay-grid { display: none !important; }
  #payList { gap: 8px; padding: 10px; background: var(--bg); }
}

/* ══════════════════════════════════════════════════════════════
   GANANCIAS — gan-grid: forzar columna única en móvil
   (las gan-grid rows no tienen renderMobile — las hacemos legibles)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .gan-tabs { gap: 6px; margin-bottom: 12px; }
  .gan-tab { padding: 8px 14px; font-size: 13px; border-radius: 10px; }

  /* Cabecera oculta en móvil */
  .dl-head.gan-grid { display: none !important; }

  /* Filas de ganancia → tarjeta tipo dmc */
  .dl-row.gan-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 14px 16px !important;
    background: var(--surface1);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 0;
    min-height: unset !important;
  }
  /* Fila superior: cliente */
  .gan-c1 {
    margin-bottom: 8px;
  }
  /* Monto principal */
  .gan-c3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    order: 0;
  }
  /* Cobrado */
  .gan-c4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--success) !important;
    order: 1;
  }
  /* Saldo/pendiente */
  .gan-c5 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--warning) !important;
    order: 2;
  }
  /* Estado */
  .gan-c6 { order: 3; margin-top: 4px; }
  /* Número doc */
  .gan-c2 { font-size: 11.5px !important; color: var(--text-2) !important; margin-bottom: 4px; }
  /* Fecha */
  .gan-c7 { font-size: 11px !important; color: var(--text-2) !important; }

  /* Mostrar c3-c7 como fila horizontal */
  .dl-row.gan-grid .gan-c3,
  .dl-row.gan-grid .gan-c4,
  .dl-row.gan-grid .gan-c5 {
    display: inline-block;
    margin-right: 14px;
  }

  /* Contenedor de la lista de ganancias */
  .dl-card:has(.gan-grid) {
    background: transparent;
    border: none;
    padding: 0;
  }
  /* Fallback si :has no es soportado */
  .gan-list-wrap .dl-card {
    background: transparent;
    border: none;
    padding: 0;
  }
  /* Los elementos dentro del dl-card que tenga gan-grid */
  .dl-card > div > .dl-row.gan-grid:not(:last-child) {
    margin-bottom: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════
   REPORTES — móvil: sin rayones, sin tabla
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .rpt-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  .rpt-export {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rpt-export .btn {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 9px 8px;
  }
  .rpt-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .rpt-charts-row {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  .rpt-chart-card {
    min-width: 0;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
  }
  .rpt-bottom-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  /* Tablas de reportes: scroll horizontal contenido */
  .rpt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  /* El gráfico de línea en móvil */
  .rpt-line-wrap canvas { height: 120px !important; }
}

/* ══════════════════════════════════════════════════════════════
   CONFIGURACIÓN — sin desbordamientos
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .cfg-wrap {
    grid-template-columns: 1fr !important;
    border-radius: 16px;
    margin-top: 0;
    min-height: unset;
    overflow: hidden; /* no genera glitch porque no hay backdrop-filter */
  }
  /* Nav horizontal scrolleable */
  .cfg-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 8px 8px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 2px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    width: 100%;
    box-sizing: border-box;
  }
  .cfg-nav::-webkit-scrollbar { display: none; }
  .cfg-nav-item {
    padding: 8px 12px !important;
    border-radius: 8px 8px 0 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    flex: none !important;
    min-width: 0;
  }
  .cfg-nav-item.active {
    border-left: none !important;
    border-bottom-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface1)) !important;
  }
  .cfg-nav-icon { display: none; }
  .cfg-nav-group { display: none; }
  .cfg-nav-sep { display: none; }
  .cfg-panel {
    padding: 16px 14px !important;
    background: var(--bg) !important;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cfg-panel-title { font-size: 15px; margin-bottom: 14px; }
  .cfg-form-grid { grid-template-columns: 1fr !important; }
  .cfg-profile-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }
  .cfg-logo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .cfg-theme-cards { gap: 8px; }
  .cfg-theme-card { padding: 12px 14px; }
  /* Toggle list — sin desbordamiento */
  .cfg-toggle-list { width: 100%; box-sizing: border-box; }
  .cfg-toggle-row { padding: 12px 14px; }
  /* Swatch row — wrapping */
  .cfg-swatch-row { flex-wrap: wrap; gap: 10px; }
  /* Texto de color custom */
  .cfg-color-group { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════
   USUARIOS — tabla a tarjetas en móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* La tabla de usuarios usa grid fijo — en móvil la convertimos */
  #usrBody .dl-card { border-radius: 14px; }
  /* Cabecera oculta */
  #usrBody [style*="grid-template-columns:2fr 140px 100px auto"] {
    display: none !important;
  }
  /* Cada fila de usuario → tarjeta vertical */
  #usrBody [data-uid] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 14px !important;
    grid-template-columns: none !important;
  }
  /* Primera columna (avatar + nombre) toma el ancho completo */
  #usrBody [data-uid] > div:first-child {
    width: 100%;
  }
  /* Fila de badges (rol + estado) */
  #usrBody [data-uid] > div:nth-child(2),
  #usrBody [data-uid] > div:nth-child(3) {
    display: inline-flex !important;
  }
  /* Agrupar rol y estado en una línea */
  #usrBody [data-uid]::after {
    content: none;
  }
  /* Badges y acciones en fila */
  #usrBody [data-uid] > div:nth-child(2),
  #usrBody [data-uid] > div:nth-child(3) {
    flex: none;
  }
  /* Acciones — siempre visibles, flex wrap */
  #usrBody .dc-actions {
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100%;
  }
  #usrBody .dc-actions .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MARKETING — tarjetas en móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .mkt-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .mkt-channel-tabs { flex-direction: row !important; flex-wrap: wrap; gap: 6px; }
  /* Campañas en lista */
  .dl-card .dl-row[style*="flex-wrap:wrap"] {
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LICENCIAS — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .lic-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .lic-card { border-radius: 16px; padding: 18px; }
  .lic-price { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════
   CHAT — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .ch-layout { grid-template-columns: 1fr !important; }
  .ch-sidebar { max-height: 38dvh; border-right: none !important; border-bottom: 1px solid var(--border); }
  .ch-area { flex: 1; min-height: 0; }
  .ch-bbl-me { max-width: 84% !important; font-size: 14px; }
  .ch-bbl-other { max-width: 84% !important; font-size: 14px; }
  .ch-input-row { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════════════════
   VISOR DE DOCUMENTOS — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .vw-head { margin-bottom: 12px; }
  .vw-num { font-size: 15px; font-weight: 800; }
  .vw-client { font-size: 12.5px; }
  .vw-items { margin-bottom: 10px; }
  .vw-item { padding: 10px 0; gap: 8px; }
  .vw-item-desc { font-size: 13px; }
  .vw-item-total { font-size: 13px; font-weight: 800; }
  .vw-trow { font-size: 13px; padding: 7px 0; }
  .vw-trow.grand { font-size: 16px; font-weight: 800; }
  .vw-actions { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
  .vw-btn { padding: 10px 4px !important; font-size: 10px !important; border-radius: 10px !important; }
  .vw-btn svg { width: 16px !important; height: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════
   EDITOR — móvil sin desbordamiento
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .editor-cols { flex-direction: column !important; gap: 12px; }
  .editor-main { width: 100% !important; }
  .editor-side { width: 100% !important; }
  .ed-item-row {
    display: grid !important;
    grid-template-columns: 1fr 52px 72px 72px 28px !important;
    gap: 6px !important;
    align-items: start;
  }
  .ed-item-row .input-wrap { height: 40px; border-radius: 8px; }
  .ed-item-row .input { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   DIRECTORIO PÚBLICO — móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .pubdir-header { padding: 12px 16px; }
  .pubdir-hero { padding: 30px 16px 24px; }
  .pubdir-hero h1 { font-size: 22px; }
  .dir-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .dir-card { border-radius: 16px; padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   TOASTS — arriba del bottom nav
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  #toastWrap { right: 12px; left: 12px; top: auto; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .toast { max-width: 100%; min-width: unset; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   PEQUEÑO (< 400px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .app-content { padding: 12px 11px calc(78px + env(safe-area-inset-bottom)) !important; }
  .d7-kpis { gap: 6px; }
  .d7-kpi { padding: 12px 12px 10px; }
  .d7-kv { font-size: 22px; }
  .vw-actions { grid-template-columns: repeat(4, 1fr) !important; gap: 5px; }
  .vw-btn { padding: 8px 2px !important; font-size: 9.5px !important; }
  .stat-card { min-width: 88px; padding: 10px 11px; }
  .stat-card .num { font-size: 18px; }
}

/* Reportes donut responsive */
@media (max-width: 980px) {
  .rpt-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .rpt-donut-wrap > div:last-child {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX DEFINITIVO RAYONES — versión final
   Las tarjetas con border:1px en columna = efecto rayado en móvil
   Solución: en móvil, sin border en tarjetas, fondo con contraste tonal
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* Contenedor de listas: fondo de página */
  .dl-card .doc-list,
  #payList,
  #clientList,
  #negGrid,
  #ganCobradoSection,
  #ganPendingSection {
    background: var(--bg);
  }

  /* DMC: sin border, fondo surface1, separación por el bg del contenedor */
  .dmc {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* Quitar border-top de .dmc-acts — es la línea que genera el "rayado" */
  .dmc-acts {
    border-top: none !important;
    padding-top: 4px !important;
    margin-top: 4px;
  }

  /* neg-card en móvil: sin border */
  .neg-card {
    border: none !important;
    border-radius: 12px !important;
  }

  /* Línea de acciones de neg-card: quitar border */
  .neg-card > div:last-child {
    border-top: none !important;
    padding-top: 8px !important;
  }

  /* stat-card en reportes: 1 columna en móvil para evitar grid-rayado */
  .rpt-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* stat-card sin border en contexto de lista */
  .rpt-kpi-grid .stat-card {
    border: none !important;
  }

  /* rpt-chart-card sin border */
  .rpt-chart-card {
    border: none !important;
  }

  /* Usuarios - wrapper con gap */
  #usrBody > div {
    gap: 8px !important;
  }

  /* Usuarios dmc cards: sin border */
  #usrBody .dmc {
    border: none !important;
    margin-bottom: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   SISTEMA ÚNICO TARJETAS MÓVIL — v724 DEFINITIVO
   Reglas:
   - Sin border-left de color (no pedido)
   - Sin box-shadow (causa rayones GPU)
   - Borde perimetral sólido uniforme light/dark
   - Separación por gap en contenedor
   - stat-card horizontal compacto igual en TODOS los módulos
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* ── Tokens de borde sólidos para móvil ──────────────── */
  :root  { --card-border: #D0DCE8; --card-bg: #FFFFFF; --list-bg: #EEF2F6; }
  [data-theme="dark"] { --card-border: #2E3A4E; --card-bg: #1B2436; --list-bg: #141B26; }

  /* ── Tarjeta .dmc — UNIFORME (sin border-left, sin box-shadow) ── */
  .dmc {
    background: var(--card-bg) !important;
    border: 1.5px solid var(--card-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  /* Quitar border-top interno en dmc-acts — genera "rayado" visual */
  .dmc-acts {
    border-top: none !important;
    padding-top: 4px !important;
  }

  /* ── neg-card — mismo sistema ── */
  .neg-card {
    background: var(--card-bg) !important;
    border: 1.5px solid var(--card-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .neg-card > div:last-child { border-top: none !important; }

  /* ── pj-card (Proyectos) ── */
  .pj-card {
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .proj-grid-v2 {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* pj-name: overflow hidden en móvil para no inflar ancho */
  .pj-name {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  /* pj-totals-row: siempre wrap en móvil */
  .pj-totals-row { flex-wrap: wrap !important; }
  /* pj-meta: no infla el ancho */
  .pj-meta { max-width: 100% !important; }
  .pj-meta-item span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 160px !important; }

  /* ── dl-card: transparente, gap entre dl-rows ── */
  .dl-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* dl-row como tarjeta individual */
  .dl-card .dl-row {
    background: var(--card-bg) !important;
    border: 1.5px solid var(--card-border) !important;
    border-bottom: 1.5px solid var(--card-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .dl-card .dl-row:hover { background: var(--list-bg) !important; }
  .dl-card .dl-head { display: none !important; }

  /* ── Contenedores de lista: fondo de página + gap ── */
  #clientList,
  #docList,
  #payList,
  #negGrid,
  #negList,
  #ganList,
  #reportList,
  .dl-card .doc-list,
  .dmc-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* ── STAT-CARD: layout horizontal compacto, UNIFORME en todos los módulos ──
     Estructura HTML: .stat-card > .ic + .num/.num-money + .lbl
     Grid: [28px ícono] [1fr texto]
  ── */
  .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    overflow-x: visible !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }
  .stat-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
    /* Grid: ícono | texto (num encima, lbl abajo) */
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 9px !important;
    row-gap: 1px !important;
    align-items: center !important;
    cursor: pointer;
  }
  .stat-card .ic {
    grid-column: 1 !important; grid-row: 1 / 3 !important;
    width: 28px !important; height: 28px !important;
    border-radius: 7px !important; margin-bottom: 0 !important;
    align-self: center !important;
  }
  .stat-card .ic svg { width: 12px !important; height: 12px !important; }
  .stat-card .num {
    grid-column: 2 !important; grid-row: 1 !important;
    font-size: 18px !important; line-height: 1.1 !important;
    letter-spacing: -.3px !important;
  }
  .stat-card .num-money {
    grid-column: 2 !important; grid-row: 1 !important;
    font-size: 12px !important; line-height: 1.1 !important;
  }
  .stat-card .lbl {
    grid-column: 2 !important; grid-row: 2 !important;
    font-size: 10px !important; margin-top: 0 !important; line-height: 1.2 !important;
  }
  /* rpt-kpi-grid: 2×2, igual que stat-grid */
  .rpt-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .rpt-kpi-grid .stat-card { border: 1.5px solid var(--card-border) !important; }

  /* rpt-chart-card: borde visible */
  .rpt-chart-card {
    border: 1.5px solid var(--card-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* ── Dashboard KPIs compactos — mismo grid horizontal ── */
  .dsh-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  .dsh-kpi {
    padding: 10px 12px 9px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--card-border) !important;
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 9px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }
  .dsh-kpi-top {
    grid-column: 1 !important; grid-row: 1 / 4 !important;
    align-self: center !important; margin-bottom: 0 !important;
  }
  .dsh-kpi-ic {
    width: 28px !important; height: 28px !important; border-radius: 7px !important;
  }
  .dsh-kpi-ic svg { width: 13px !important; height: 13px !important; }
  .dsh-kpi-val {
    grid-column: 2 !important; grid-row: 1 !important;
    font-size: 18px !important; letter-spacing: -.3px !important; margin-bottom: 0 !important;
  }
  .dsh-kpi-lbl {
    grid-column: 2 !important; grid-row: 2 !important;
    font-size: 10.5px !important; margin-bottom: 0 !important;
  }
  .dsh-kpi-sub {
    grid-column: 2 !important; grid-row: 3 !important; font-size: 9.5px !important;
  }

  /* ── Usuarios ── */
  #usrBody > div { gap: 8px !important; }

}

/* ── Pantallas muy pequeñas ── */
@media (max-width: 400px) {
  .stat-card .num  { font-size: 15px !important; }
  .dsh-kpi-val     { font-size: 15px !important; }
}

/* Configuración > Usuarios ("Mi equipo") — antes la fila usaba una
   grilla con columnas fijas puestas por INLINE STYLE, así que ningún
   media query podía anularla (el inline siempre gana sobre una clase,
   sin importar el @media). Eso hacía que la columna de acciones (6
   botones posibles) quedara comprimida a 190px fijos incluso en
   pantallas angostas, perdiendo botones fuera del borde derecho. Ahora
   es una clase, así este media query sí puede aplicar. */
.cfg-team-row{display:grid;grid-template-columns:2fr 220px 190px;gap:8px}
@media (max-width:760px){
  .cfg-team-row{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:8px}
  .cfg-team-row .dc-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
}