/* Growder Hub - Responsive patch 2026-06-18
   Objetivo: evitar desbordes, mejorar grids/tablas/formularios y controlar SVGs en móvil. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, canvas, video, iframe {
  max-width: 100%;
}

.main, .layout, .card, .form-card, .table-card, .dash-card, .d-card, .fin-card,
.preview-panel, .doc-area, .tpr-col-main, .tpr-body, .editor-card, .content-panel {
  min-width: 0;
}

/* Íconos SVG: evita que un SVG sin width tome tamaño gigante. */
.sb-item svg,
.tbl-btn svg,
.btn-primary svg,
.btn-ghost svg,
.btn-cy svg,
.btn-dash svg,
.btn-exec svg,
.dash-card-header svg,
.dash-chip svg,
.metric-icon svg,
.metric-fin-icon svg,
.ent-card-head-left svg,
.tipo-header svg,
.tpr-a svg,
.tpr-back svg,
.tpr-bot-btn svg,
.topbar svg,
.page-hd svg,
.form-title svg,
.side-card-head svg,
.fin-card-header svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
}

.main svg:not([width]):not(.propuesta-doc):not(.mapa-svg),
.dash-card svg:not([width]),
.table-card svg:not([width]),
.fin-card svg:not([width]),
.card svg:not([width]) {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}

#mapaContainer,
.mapa-container,
.mapa-preview {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#mapaContainer svg,
.mapa-container svg,
.mapa-preview svg {
  width: 100% !important;
  height: auto !important;
  min-width: 720px;
}

.table-card,
.tabla-card,
.card:has(table),
.fin-card:has(table),
.tpr-body:has(table),
.doc-area,
.preview-panel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tbl,
.cobros-tabla,
.tabla-card table,
.tpr-table {
  width: 100%;
}

.field input,
.field select,
.field textarea,
.field-inp,
.field-sel,
input,
select,
textarea,
button {
  max-width: 100%;
}

/* Finanzas usa layout propio; en móvil el menú queda arriba para que no aplaste el contenido. */
@media (max-width: 900px) {
  .finanzas-page .layout {
    display: block !important;
  }
  .finanzas-page .sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #E2E6ED !important;
    overflow: visible !important;
  }
  .finanzas-page .sidebar .sb-section {
    grid-column: 1 / -1 !important;
    padding: 8px 6px 2px !important;
  }
  .finanzas-page .sidebar .sb-item {
    border-left: 0 !important;
    border-radius: 8px !important;
    padding: 9px 10px !important;
  }
  .finanzas-page .main {
    padding: 14px !important;
    overflow: visible !important;
  }
}

@media (max-width: 1024px) {
  .metrics,
  .metrics-fin,
  .dash-metrics,
  .salud-grid,
  .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dash-grid,
  .dash-grid-2,
  .dash-grid-3,
  .dash-wide,
  .fin-grid,
  .grid-2,
  .info-grid,
  .form-grid,
  .diag-layout,
  .propuesta-layout,
  .closing-grid,
  .pricing-row,
  .two-col,
  .tpr-content,
  .fg2,
  .fg3 {
    grid-template-columns: 1fr !important;
  }

  .side-panel,
  .tpr-col-side {
    width: 100% !important;
    position: static !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .main,
  .tpr-content,
  .shell,
  .doc-area,
  .preview-panel,
  .tpr-body,
  .form-card,
  .table-card,
  .card,
  .fin-card-body,
  .dash-card-body,
  .d-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .main {
    padding: 14px !important;
  }

  .page-hd,
  .table-head,
  .card-head,
  .form-card-header,
  .dash-header,
  .proj-header,
  .d-head,
  .fin-card-header,
  .topbar,
  .tpr-cta,
  .modal-footer,
  .nav-row,
  .action-row,
  .sticky-actions,
  .editor-footer,
  .dash-header-actions,
  .topbar-right,
  .topbar-left {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .page-hd,
  .dash-header,
  .proj-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-hd > div,
  .dash-header-left,
  .proj-header > div,
  .d-head > div,
  .fin-card-header > div {
    min-width: 0 !important;
  }

  .page-hd h1,
  .page-hd h2,
  .dash-header h1,
  .d-head h3,
  .fin-card-header h3,
  .table-head h3 {
    overflow-wrap: anywhere !important;
  }

  .top-user,
  .top-logo-sub {
    display: none !important;
  }

  .top-logo img {
    height: 28px !important;
    width: auto !important;
    max-width: 150px !important;
  }

  .metrics,
  .metrics-fin,
  .dash-metrics,
  .salud-grid,
  .client-grid,
  .kpi-grid,
  .meta-row,
  .ent-stats,
  .tpr-firmas {
    grid-template-columns: 1fr !important;
  }

  .fg2,
  .fg3,
  .grid-2,
  .info-grid,
  .client-grid,
  .nombres-grid,
  .dash-grid,
  .fin-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .tbl,
  .cobros-tabla,
  .tabla-card table,
  .tpr-table {
    min-width: 620px !important;
  }

  .table-card,
  .tabla-card,
  .fin-card,
  .tpr-body,
  .doc-area,
  .preview-panel,
  .card:has(table) {
    overflow-x: auto !important;
  }

  .tbl-actions,
  .client-actions,
  .action-bar,
  .export-btns,
  .estado-btns,
  .mob-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .btn-primary,
  .btn-ghost,
  .btn-cy,
  .btn-dash,
  .btn-sm,
  .tbl-btn,
  .btn-full,
  .btn-exec,
  .tarea-add {
    white-space: normal !important;
    text-align: center !important;
  }

  .nav-row .btn-primary,
  .nav-row .btn-ghost,
  .modal-footer .btn-primary,
  .modal-footer .btn-ghost,
  .modal-footer .btn-cy,
  .action-bar .btn-full,
  .dash-header-actions .btn-dash,
  .sticky-actions .btn-primary,
  .sticky-actions .btn-ghost,
  .sticky-actions .btn-cy {
    width: 100% !important;
    justify-content: center !important;
  }

  .modal-overlay {
    padding: 12px !important;
  }
  .modal-box,
  .modal-bg,
  .modal {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }

  .preview-panel,
  .side-panel,
  .doc-area {
    width: 100% !important;
  }

  .propuesta-doc,
  .doc-cover,
  .doc-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cobro-row,
  .doc-row,
  .pipe-row,
  .alerta-item,
  .proj-list-item,
  .trace-link,
  .read-item,
  .history-item {
    min-width: 0 !important;
  }

  .cobro-cliente,
  .cobro-concepto,
  .doc-nombre,
  .doc-meta,
  .proj-list-nombre,
  .proj-list-meta,
  .trace-link,
  .alerta-msg {
    overflow-wrap: anywhere !important;
  }

  .tarea-form,
  .caja-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .tarea-form > *,
  .caja-form > * {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .main,
  .shell,
  .tpr-content {
    padding: 10px !important;
  }

  .metric,
  .metric-fin,
  .dash-metric,
  .salud-card,
  .client-card,
  .form-card,
  .table-card,
  .dash-card,
  .d-card,
  .fin-card {
    border-radius: 10px !important;
  }

  .metric-val,
  .metric-fin-val,
  .dash-metric-val,
  .bm-val,
  .salud-num {
    font-size: clamp(18px, 8vw, 26px) !important;
  }

  .finanzas-page .sidebar {
    grid-template-columns: 1fr !important;
  }

  .tbl,
  .cobros-tabla,
  .tabla-card table,
  .tpr-table {
    min-width: 560px !important;
  }
}