/* =====================================================================
   mobile.css — Capa responsive / mejora UX móvil para ROI Master
   ---------------------------------------------------------------------
   Se carga DESPUÉS de los estilos inline de index.html y de los estilos
   inyectados por los módulos JS. Por eso, donde hace falta ganar la
   cascada frente a CSS inyectado en runtime, se usa !important de forma
   puntual y justificada (anchos, grids, paddings, tamaños táctiles).

   Breakpoints:
     - <= 1024px : tablet / transición
     - <= 768px  : móvil (principal)
     - <= 420px  : móvil pequeño
   ===================================================================== */

/* ============ TOKENS MÓVIL ============ */
:root {
  --touch: 44px;                 /* objetivo táctil mínimo (Apple/Google) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --mobnav-h: 64px;              /* alto aprox. de la barra inferior (sin safe-area) */
}

/* =====================================================================
   0. PANTALLA DE AUTENTICACIÓN (entrada en móvil)
   ===================================================================== */
@media (max-width: 768px) {
  #authShell {
    padding: 20px 16px calc(20px + var(--safe-b));
    align-items: flex-start;
  }
  .auth-card {
    max-width: 100%;
    margin-top: 6vh;
    padding: 26px 20px 20px;
  }
  .auth-tab { min-height: var(--touch); }
  .auth-input { min-height: var(--touch); }
  .auth-btn { min-height: var(--touch); padding: 13px; font-size: 15px; }
}

/* =====================================================================
   1. FUNDAMENTOS GLOBALES (<=768px)
   ===================================================================== */
@media (max-width: 768px) {

  html, body {
    /* Evita rebote/overscroll horizontal accidental y mejora el scroll */
    overscroll-behavior-y: none;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  body {
    font-size: 15px;
  }

  /* Inercia en todos los contenedores con scroll */
  .table-wrapper, .content.scroll-y,
  #monthlyRoot, #quarterlyRoot, #crmRoot, #formsRoot,
  #facturasRoot, #informesView, #presupuestosRoot, #contabilidadRoot,
  .subbar, .crm-board, .planner-row, .agenda-section, .agenda-hours-scroll,
  .ppt-table-wrap, .fac-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Quita el flash azul al tocar y respeta selección donde aporta */
  a, button, .btn, .tab, .view-item, .icon-btn,
  [onclick], [role="button"] {
    -webkit-tap-highlight-color: rgba(29, 53, 57, 0.12);
  }

  /* CLAVE: inputs a 16px para que iOS NO haga zoom automático al enfocar.
     Cubre los inputs genéricos y los de cada módulo. */
  input, select, textarea,
  .form-input, .settings-field input, .search-input,
  .ppt-form-input, .ppt-search,
  .fac-form-input, .fac-search-input,
  .cont-inp, .cont-sel, .cont-month,
  .crm-select, .wa-search, .wa-composer textarea,
  .form-create-input, .member-card-roleselect {
    font-size: 16px !important;
  }

  /* Áreas editables del editor de notas también a 16px */
  .editor[contenteditable] { font-size: 16px; }
}

/* =====================================================================
   2. TOUCH TARGETS GLOBALES (<=768px)
   ===================================================================== */
@media (max-width: 768px) {

  /* Botones de icono: de 28px a 40px */
  .icon-btn {
    width: 40px; height: 40px;
  }
  .icon-btn svg, .icon-btn .icon { width: 20px; height: 20px; }

  /* Botones de texto: altura cómoda y más padding */
  .btn {
    min-height: var(--touch);
    padding: 11px 16px;
    font-size: 14px;
  }

  /* Selects y inputs con altura táctil */
  select, .form-input, input[type="text"], input[type="number"],
  input[type="email"], input[type="date"], input[type="search"] {
    min-height: var(--touch);
  }

  /* Checkboxes/radios un poco mayores */
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}

/* =====================================================================
   3. SIDEBAR + TOPBAR (<=768px)
   El sidebar ya es overlay (index.html). Aquí se mejora el confort táctil.
   ===================================================================== */
@media (max-width: 768px) {

  /* Topbar fija arriba con safe-area para notch */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    padding-top: var(--safe-t);
    height: calc(var(--topbar-h) + var(--safe-t));
    gap: 4px;
  }
  .breadcrumb { overflow: hidden; }
  .breadcrumb-item {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 38vw;
  }
  /* Oculta el primer nivel de miga ("Proyectos") para dejar sitio al nombre */
  .breadcrumb-item:first-child,
  #breadcrumbProjSep { display: none; }

  /* Botón hamburguesa más grande y centrado */
  .mobile-menu-btn { width: 42px !important; height: 42px !important; }
  .mobile-menu-btn svg { width: 22px; height: 22px; }

  /* Items de navegación del sidebar más altos (dedo) */
  .view-item {
    padding: 11px 12px 11px 30px;
    font-size: 14px;
    min-height: var(--touch);
  }
  .project-header {
    padding: 11px 8px;
    min-height: var(--touch);
  }
  .project-name { font-size: 14px; }
  .add-project-btn { min-height: var(--touch); }
  .sidebar-footer {
    padding: 12px 14px calc(12px + var(--safe-b));
  }
  .sidebar-body { padding-bottom: 16px; }
  /* El backdrop también cubre safe areas */
  .sidebar-backdrop { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
}

/* =====================================================================
   4. SUBBAR = TAB BAR MÓVIL (<=768px)
   Pestañas grandes, scroll horizontal con snap y separación clara.
   ===================================================================== */
@media (max-width: 768px) {

  .subbar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-t));
    z-index: 40;
    height: 50px;
    gap: 4px;
    padding: 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Pista de scroll: degradado a la derecha para indicar que hay más */
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
            mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .tab {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    scroll-snap-align: start;
    border-radius: 999px;
  }
  .tab.active {
    background: var(--primary);
    color: #fff;
  }
  .tab.active .tab-icon { color: #fff; }
  .tab-icon { width: 15px; }
}

/* =====================================================================
   5. MODALES → BOTTOM SHEETS (<=768px)
   Aplica a los dos sistemas de index.html y a los modales de los módulos.
   ===================================================================== */
@media (max-width: 768px) {

  /* --- Sistema 1: .modal-overlay / .modal --- */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 5px 5px 0 0 !important;
    animation: sheet-up 0.22s ease-out;
  }
  .modal-body { padding-bottom: calc(18px + var(--safe-b)); }
  .modal-footer {
    position: sticky; bottom: 0;
    padding-bottom: calc(12px + var(--safe-b));
  }
  .modal-footer .btn { flex: 1; justify-content: center; }

  /* --- Sistema 2: .modal-box (createProject, colorPicker, etc.) --- */
  .modal-overlay .modal-box,
  #colorPickerModal .modal-box,
  #createProjectModal .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 5px 5px 0 0 !important;
    align-self: flex-end;
  }

  /* --- Modales de módulos (presupuestos, facturas, formularios, agente) --- */
  .ppt-modal-bg, .fac-modal, .form-create-modal, .wa-modal {
    align-items: flex-end !important;
  }
  .ppt-modal, .fac-modal-content, .form-create-content, .wa-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 5px 5px 0 0 !important;
    padding-bottom: calc(18px + var(--safe-b)) !important;
  }

  /* Barra de arrastre superior (handle) común a los sheets */
  .modal::before, .modal-box::before,
  .ppt-modal::before, .fac-modal-content::before,
  .form-create-content::before, .wa-modal-box::before {
    content: "";
    display: block;
    width: 38px; height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: var(--border-strong, #d0d8d5);
    flex-shrink: 0;
  }

  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Modal de upsell (vista bloqueada): centrado pero cómodo */
  .view-locked-modal { max-width: 100%; border-radius: 5px; }

  /* Acciones de formularios en columna a ancho completo */
  .form-create-actions .form-create-btn,
  .ppt-modal .ppt-btn { flex: 1; }
}

/* =====================================================================
   6. PANEL DE NOTAS → PANTALLA COMPLETA (<=768px)
   ===================================================================== */
@media (max-width: 768px) {

  .notes-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1200 !important;
    padding-top: var(--safe-t);
  }
  .panel-resizer { display: none !important; }
  .panel-header { padding: 12px 14px; min-height: var(--touch); }
  .panel-title { font-size: 16px; }
  .editor-toolbar {
    position: sticky; top: 0; z-index: 2;
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .editor-toolbar::-webkit-scrollbar { display: none; }
  .editor-btn { min-width: 38px; min-height: 38px; flex-shrink: 0; }
  /* Pestañas del panel (Datos/Notas/Historial): tamaño táctil */
  .panel-tab { min-height: var(--touch); padding: 10px 14px; font-size: 14px; flex: 1 0 auto; justify-content: center; }
  .hist-list { padding: 6px 14px calc(30px + var(--safe-b)); }
  .hist-text { font-size: 14px; }
  .panel-footer {
    padding: 12px 14px calc(12px + var(--safe-b));
  }
  .panel-footer .btn { flex: 1; justify-content: center; }
  /* Más recorrido para escribir cómodamente */
  .editor { padding-bottom: calc(60px + var(--safe-b)); }
}

/* =====================================================================
   7. VISTA PRINCIPAL — TABLA HORIZONTAL (DESLIZAR) (<=768px)
   Se mantiene como hoja de cálculo: scroll horizontal con inercia, la
   columna "Nombre" fija a la izquierda y filas más altas para el dedo.
   ===================================================================== */
@media (max-width: 768px) {

  #blocksRoot { padding: 10px 12px; }

  .folder-block-header { padding: 10px 2px; gap: 6px; flex-wrap: nowrap; }
  /* El nombre de la carpeta se recorta con "…" en vez de empujar los botones */
  .folder-block-title {
    font-size: 16px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .folder-block-count { flex-shrink: 0; }
  .folder-block-actions { flex-shrink: 0; gap: 4px; }
  /* Botones más compactos para que "+ Item/Contacto" y los 3 puntos
     quepan alineados en una sola línea aunque el nombre sea largo */
  .folder-add-row-btn { min-height: 30px; padding: 5px 9px; font-size: 11.5px; gap: 4px; }
  .folder-add-row-btn svg { width: 12px; height: 12px; }
  .folder-block-menu { width: 30px; height: 30px; }
  .folder-block-menu svg { width: 14px; height: 14px; }

  /* Tabla clásica de gestión (sin .dt-scroll): el propio .table-wrapper hace el
     scroll horizontal en móvil para poder ver todas las columnas. */
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .dt-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border);
    border-radius: 5px;
  }
  .dt-scroll .data-table { min-width: max-content; border: none; border-radius: 0; }
  /* La columna "Nombre" NO se queda fija: se desliza junto con el resto de la
     tabla para no robar espacio a las demás columnas. */
  .dt-scroll td.col-name,
  .dt-scroll th.col-name { position: static !important; }

  /* Columna "Nombre" CONGELADA de verdad en la tabla clásica de gestión.
     NOTA: en index.html, `.data-table tbody td { position: relative }` (más
     específico) pisaba a `.col-name { position: sticky }`, así que la columna
     nunca quedaba fija en móvil. Aquí se gana la cascada con un selector más
     específico (.table-wrapper .data-table tbody td.col-name) + !important, y
     se fija un ancho duro para que no la expanda el table-layout:auto.
     Se acota bajo .table-wrapper para NO afectar a las tablas .dt-scroll,
     que a propósito llevan la columna Nombre deslizante (líneas 337-338). */
  .table-wrapper .data-table thead th.col-name,
  .table-wrapper .data-table tbody td.col-name {
    position: sticky !important;
    left: 0 !important;
    width: 238px !important;
    min-width: 238px !important;
    max-width: 238px !important;
    box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18);
  }
  .table-wrapper .data-table tbody td.col-name { z-index: 6 !important; }
  .table-wrapper .data-table thead th.col-name { z-index: 12 !important; }

  /* Liberar ancho para que el NOMBRE se lea (antes se cortaba a ~4 letras):
     fuera el asa de arrastre y el checkbox (poco útiles al tacto) y el
     indicador de apuntes (redundante: el botón ↗ ya abre los apuntes).
     Se conservan ⋮ (Acciones) y ↗ (Abrir apuntes/detalle), compactados. */
  .table-wrapper .name-cell .drag-handle,
  .table-wrapper .name-cell .row-select-cb,
  .table-wrapper .name-cell .notes-indicator { display: none !important; }
  .table-wrapper .name-cell { gap: 3px !important; padding: 0 2px 0 6px !important; }
  .table-wrapper .row-name { font-size: 14px !important; padding: 2px !important; }
  .table-wrapper .name-cell .more-btn,
  .table-wrapper .name-cell .panel-btn {
    width: 32px !important; min-width: 32px !important; height: 32px !important;
    flex-shrink: 0 !important;
  }

  /* Filas y cabeceras más altas para tocar cómodo */
  .data-table tbody td,
  .data-table th { height: 44px; }
  .cell-content, .date-cell-content { font-size: 14px; }

  /* Edición de celda: input a 16px (sin zoom de iOS) */
  td.cell-editing input, td.cell-editing select { font-size: 16px; }

  /* Menús de columna visibles (no hay hover en táctil) */
  .th-menu { opacity: 0.55 !important; }
}

/* =====================================================================
   8. CRM KANBAN (<=768px)
   Columnas a ~85vw con scroll-snap: se "pasa" de fase en fase deslizando.
   ===================================================================== */
@media (max-width: 768px) {

  .crm-root { padding: 10px 12px 80px; }
  .crm-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .crm-title { font-size: 17px; }
  .crm-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .crm-controls .crm-select,
  .crm-controls .crm-btn { flex: 1 1 auto; min-height: var(--touch); }

  .crm-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
  }
  .crm-column {
    flex: 0 0 86vw !important;
    width: 86vw !important;
    max-height: none !important;
    scroll-snap-align: center;
  }
  /* La columna crece a su altura natural: el scroll vertical lo hace la página
     (con padding inferior para no quedar tapada por la barra inferior). Así la
     última tarjeta se ve completa y se puede llegar a ella. */
  .crm-column-body { max-height: none !important; overflow: visible !important; }
  .crm-root { padding-bottom: calc(96px + var(--safe-b)) !important; }
  .crm-card { padding: 14px 14px; }
  .crm-card-name { font-size: 15px; }
  /* Botones de acción de la tarjeta más grandes y siempre visibles */
  .crm-card-actions { gap: 8px; }
  .crm-card-notes-btn { width: 34px; height: 34px; }
}

/* =====================================================================
   9. AGENDA / PLANIFICADOR (<=768px)
   Controles que envuelven cómodos; el grid mantiene scroll horizontal.
   ===================================================================== */
@media (max-width: 768px) {

  .agenda-header { flex-wrap: wrap; gap: 10px; padding: 12px 12px; }
  .agenda-title-wrap { flex: 1 1 100%; }
  .agenda-controls { width: 100%; flex-wrap: wrap; gap: 8px; }
  .agenda-toggle { flex: 0 0 auto; }
  .agenda-toggle-btn { min-height: 38px; padding: 8px 14px; font-size: 12px; }
  .agenda-week-nav { flex: 1 1 auto; justify-content: space-between; }
  .agenda-nav-btn { min-height: 38px; padding: 8px 12px; }
  .agenda-week-label { min-width: 0; flex: 1; text-align: center; }

  /* Columnas de día algo más anchas y legibles al hacer scroll */
  .agenda-days-grid { grid-template-columns: repeat(7, 150px) !important; }
  .agenda-day-num { font-size: 17px; }
  .agenda-task { padding: 7px 8px; }
  .agenda-task-name { font-size: 12px; }
  /* Checks táctiles */
  .agenda-task-check { width: 18px; height: 18px; }

  /* Vista horas: columnas usables + corner/labels sticky ya definidos */
  .agenda-hours-wrap { grid-template-columns: 48px repeat(7, 150px) !important; }
}

/* =====================================================================
   10. PRESUPUESTOS (<=768px)
   ===================================================================== */
@media (max-width: 768px) {

  .ppt-wrap, .ppt-wrap-full { padding-left: 12px; padding-right: 12px; max-width: 100%; }
  .ppt-header { flex-wrap: wrap; gap: 10px; }
  .ppt-title { font-size: 17px; }

  /* Subtabs con scroll horizontal */
  .ppt-subtabs {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ppt-subtabs::-webkit-scrollbar { display: none; }
  .ppt-subtab { white-space: nowrap; flex-shrink: 0; min-height: var(--touch); }
  .ppt-subtab.action { margin-left: 0; }

  .ppt-toolbar { flex-wrap: wrap; gap: 8px; }
  .ppt-search { min-width: 0; width: 100%; }
  .ppt-btn { min-height: var(--touch); }

  /* Tabla con scroll horizontal e inercia */
  .ppt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ppt-table { min-width: 640px; }

  /* Formularios a una columna */
  .ppt-form-row { grid-template-columns: 1fr !important; }
  .ppt-form-input { min-height: var(--touch); }

  /* El editor/generador de presupuestos se adapta en presupuestos.js (@media) */
}

/* =====================================================================
   11. FACTURAS (<=768px) — refuerza el responsive existente
   ===================================================================== */
@media (max-width: 768px) {

  .fac-root { padding: 12px 12px 80px; }
  .fac-header { flex-wrap: wrap; gap: 10px; }
  .fac-title { font-size: 17px; }

  .fac-subtabs { -webkit-overflow-scrolling: touch; }
  .fac-subtab { min-height: var(--touch); }

  .fac-toolbar { flex-wrap: wrap; gap: 8px; }
  .fac-search-input { min-width: 0; width: 100%; }
  .fac-btn { min-height: var(--touch); }

  .fac-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fac-form-row { grid-template-columns: 1fr !important; }
  .fac-empresa-panel { max-width: 100%; }
  .fac-estado-select { min-height: 38px; }

  /* Generador apilado y A4 que encaja con scroll */
  .fac-gen-split { display: flex !important; flex-direction: column !important; }
  .fac-gen-form-wrap { width: 100% !important; position: relative !important; }
  .fac-preview-col { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fac-a4 { margin: 0 auto; }
}

/* En móvil pequeño: 'zoom' reduce la hoja A4 reflujando el layout (sin huecos).
   overflow-x queda como respaldo si el navegador no soporta zoom. */
@media (max-width: 480px) {
  .fac-a4 { zoom: 0.46; }
}

/* =====================================================================
   12. CONTABILIDAD (<=...) — NO tenía responsive. Lo añadimos completo.
   ===================================================================== */
@media (max-width: 1024px) {
  .cont-kpis.k5 { grid-template-columns: repeat(3, 1fr) !important; }
  .cont-kpis.k4 { grid-template-columns: repeat(2, 1fr) !important; }
  .cont-grid3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {

  .cont-wrap { max-width: 100%; padding: 12px 12px 80px; }
  .cont-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .cont-title { font-size: 18px; }
  .cont-controls { width: 100%; flex-wrap: wrap; gap: 8px; }

  /* Nav (anual/mensual/ingresos/gastos/deudas) con scroll horizontal */
  .cont-nav {
    width: 100%; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cont-nav::-webkit-scrollbar { display: none; }
  .cont-nav-btn { white-space: nowrap; flex-shrink: 0; min-height: 38px; }
  .cont-month { min-height: var(--touch); flex: 1 1 auto; }

  /* KPIs: 2 columnas; el destacado (dark) a ancho completo */
  .cont-kpis.k5, .cont-kpis.k4, .cont-kpis.k3, .cont-kpis.k2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cont-kpi.dark { grid-column: 1 / -1; }
  .cont-kpi-val { font-size: 19px; }

  /* Tablas financieras: scroll horizontal con inercia y celdas táctiles.
     La columna del nombre NO se encoge: ancho propio y el resto se ve
     deslizando la tabla. */
  .cont-card { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cont-tbl { min-width: 720px; }
  .cont-tbl th:first-child, .cont-tbl td:first-child { min-width: 190px; }
  .cont-tbl td:first-child .cont-inp { min-width: 170px; }
  .cont-tbl th, .cont-tbl td { padding: 9px 10px; }
  .cont-inp { min-height: 38px; }
  .cont-pill { padding: 4px 10px; }

  /* Botón guardado fijo respeta safe-area */
  .cont-savingpill { bottom: calc(16px + var(--safe-b)); right: 14px; }
}
@media (max-width: 420px) {
  .cont-kpis.k5, .cont-kpis.k4, .cont-kpis.k3, .cont-kpis.k2 {
    grid-template-columns: 1fr !important;
  }
}

/* --- Contabilidad rediseño 2026-07: tarjetas estilo Informes + franjas ---
   El CSS del módulo se inyecta DESPUÉS de esta hoja, por eso !important. */
@media (max-width: 1024px) {
  .cont-stats.s5 { grid-template-columns: repeat(3, 1fr) !important; }
  .cont-stats.s4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  /* Tarjetas: 2 columnas; la oscura (Ingresos) a ancho completo */
  .cont-stats, .cont-stats.s3, .cont-stats.s5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cont-stat { padding: 13px 14px !important; }
  .cont-stat.dark { grid-column: 1 / -1; }
  .cont-stat-h { margin-bottom: 10px !important; padding-bottom: 10px !important; }
  .cont-stat-val { font-size: 21px !important; }
  .cont-stat-foot { font-size: 11px !important; }

  /* Franjas Ingresos vs Gastos: etiqueta, franja e importes en columna */
  .cont-io-row { grid-template-columns: 1fr !important; gap: 5px !important; padding: 8px 0 !important; }
  .cont-io-row .val { text-align: left !important; font-size: 12.5px !important; white-space: normal !important; }
  .cont-io-res { flex-direction: column !important; gap: 8px !important; }

  /* Cabeceras de bloque (Ingresos / Gastos): título arriba, totales debajo */
  .cont-bloque-h { align-items: flex-start !important; margin: 22px 0 10px !important; }
  .cont-bloque-r, .cont-nums { gap: 14px !important; }
  .cont-sec-h { flex-wrap: wrap; gap: 8px; }

  /* Anual: selector de periodo con scroll horizontal (como la nav) */
  .cont-periods {
    flex-wrap: nowrap !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .cont-periods::-webkit-scrollbar { display: none; }
  .cont-period-btn { white-space: nowrap; flex-shrink: 0; min-height: 36px; }

  /* Mes a mes del Anual: mini-franjas algo más cortas dentro del scroll */
  .cont-strip.mini { min-width: 90px !important; }
}
@media (max-width: 420px) {
  .cont-stats, .cont-stats.s3, .cont-stats.s5 { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   13. INFORMES (<=768px) — refuerza el responsive existente
   ===================================================================== */
@media (max-width: 768px) {

  .informes-wrap { max-width: 100%; padding: 16px 12px 80px; }
  .informes-head { flex-wrap: wrap; gap: 12px; }
  .informes-title { font-size: 19px; }

  .kpi-funnel { flex-wrap: wrap; }
  .kpi-fcard { flex: 1 1 100%; }
  .kpi-row-5, .kpi-row-4, .kpi-row-3 { grid-template-columns: 1fr 1fr !important; }

  /* Gráficos con scroll horizontal cómodo */
  .chart-card { padding: 14px; }
  .chart-svg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart-nav-btn { min-height: 38px; }
}
@media (max-width: 420px) {
  .kpi-row-5, .kpi-row-4, .kpi-row-3 { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   14. FORMULARIOS (<=768px)
   ===================================================================== */
@media (max-width: 768px) {

  .forms-root { padding: 14px 12px 80px; }
  .forms-header { flex-wrap: wrap; gap: 10px; }
  .forms-new-btn { min-height: var(--touch); }
  .forms-list { grid-template-columns: 1fr !important; }
  .forms-card-btn { min-height: 38px; padding: 8px 12px; }

  /* Editor del formulario apilado: campos arriba, preview abajo */
  .form-editor-body { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   15. CONVERSACIONES (chat) (<=768px) — ya colapsa en 760px; reforzamos
   ===================================================================== */
@media (max-width: 768px) {

  .wa-app { height: calc(100vh - 150px); }
  .wa-sidebar { width: 100% !important; min-width: 0 !important; }
  .wa-conv { padding: 12px 14px; min-height: var(--touch); }
  .wa-msgs { padding: 14px 4%; }
  .wa-bubble { max-width: 82%; }
  .wa-composer {
    padding: 10px 12px calc(10px + var(--safe-b));
  }
  .wa-send { width: 46px; height: 46px; }
  /* Botón "volver" a la lista en cabecera de chat (si el módulo lo expone) */
  .wa-chat-head { min-height: var(--touch); }
}

/* =====================================================================
   16. MIEMBROS / SETTINGS (<=768px)
   ===================================================================== */
@media (max-width: 768px) {

  .settings-root { padding: 18px 12px 80px; }
  .settings-title { font-size: 19px; }
  .settings-section { padding: 16px 14px; }
  .settings-row { flex-wrap: wrap; gap: 10px; }
  .settings-form { max-width: 100%; }
  .settings-btn { min-height: var(--touch); }

  .member-card-head { flex-wrap: wrap; gap: 10px; }
  .member-card-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .member-card-roleselect,
  .member-card-btn { min-height: var(--touch); flex: 1 1 auto; }
  .member-perms-grid { grid-template-columns: 1fr !important; }
  .member-perm-row { flex-wrap: wrap; }
}

/* =====================================================================
   18. BARRA DE NAVEGACIÓN INFERIOR (estilo app) + HOJA "MÁS"
   La inyecta mobile-nav.js. Reemplaza la barra de pestañas superior.
   ===================================================================== */
.mobnav { display: none; }
.mobmore-sheet, .mobmore-backdrop { display: none; }

@media (max-width: 768px) {

  /* Navegación por PESTAÑAS ARRIBA: tira horizontal deslizable justo bajo la
     cabecera. Se elimina la barra inferior flotante. */
  .subbar {
    display: flex !important;
    gap: 6px;
    padding: 7px 12px;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subbar::-webkit-scrollbar { display: none; }
  .subbar .tab {
    flex-shrink: 0;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Quitar la barra inferior flotante y su hoja "Más" */
  .mobnav, .mobmore-sheet, .mobmore-backdrop { display: none !important; }

  /* Alto de viewport DINÁMICO: en móvil 100vh incluye la zona de la barra del
     navegador, lo que hacía que el contenedor de scroll fuese más alto que la
     pantalla visible (el fondo quedaba fuera y el scroll rebotaba). Con 100dvh
     el área coincide con lo realmente visible. */
  .app { height: 100dvh; }

  /* Quitar el título redundante de CRM / Presupuestos / Formularios: la pestaña
     activa de arriba ya indica en qué área estamos. Se conservan los controles
     (CRM) y el botón "Crear formulario" (Formularios). */
  .crm-title-wrap { display: none !important; }
  .ppt-header { display: none !important; }
  .forms-header-icon, .forms-title, .forms-subtitle { display: none !important; }

  /* ---- Barra inferior fija ---- */
  .mobnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + var(--safe-b));
    box-shadow: 0 -2px 16px rgba(16, 24, 40, 0.06);
  }
  .mobnav-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    border: none; background: transparent;
    color: var(--text-muted);
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobnav-ic { display: flex; }
  .mobnav-ic svg { width: 23px; height: 23px; }
  .mobnav-lbl { line-height: 1; letter-spacing: 0.1px; }
  .mobnav-item:active { background: var(--bg-hover); }
  .mobnav-item.active {
    color: var(--primary);
  }
  /* Realce del icono activo con un fondo lima sutil */
  .mobnav-item.active .mobnav-ic {
    position: relative;
  }
  .mobnav-item.active .mobnav-ic::after {
    content: ""; position: absolute; inset: -7px -10px;
    background: var(--accent); opacity: 0.22;
    border-radius: 5px; z-index: -1;
  }

  /* ---- Hoja "Más" ---- */
  .mobmore-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 950;
    background: rgba(15, 25, 35, 0.42);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .mobmore-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .mobmore-sheet {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 960;
    background: var(--bg);
    border-radius: 5px 5px 0 0;
    padding: 8px 16px calc(20px + var(--safe-b));
    box-shadow: 0 -8px 32px rgba(16, 24, 40, 0.18);
    transform: translateY(100%);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobmore-sheet.is-open { transform: translateY(0); }
  .mobmore-handle {
    width: 38px; height: 4px; border-radius: 999px;
    background: var(--border-strong, #d0d8d5);
    margin: 8px auto 10px;
  }
  .mobmore-title {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 4px 12px;
  }
  .mobmore-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .mobmore-item {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--touch);
    padding: 14px 14px;
    border: 1px solid var(--border); border-radius: 5px;
    background: var(--bg-subtle);
    color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: left;
  }
  .mobmore-item:active { background: var(--bg-hover); }
  .mobmore-item.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
  }
  .mobmore-ic { display: flex; flex-shrink: 0; color: var(--primary); }
  .mobmore-ic svg { width: 22px; height: 22px; }

  /* Espacio inferior para que la barra no tape el contenido */
  #blocksRoot, .crm-root, .planner-shell, .ppt-wrap, .ppt-wrap-full,
  .fac-root, .cont-wrap, .informes-wrap, .forms-root, .settings-root {
    padding-bottom: calc(24px + var(--safe-b)) !important;
  }
  .content.scroll-y { padding-bottom: 0; }
  /* El chat ocupa el alto disponible (ya no hay barra inferior). */
  .wa-app { height: calc(100dvh - 104px); margin-bottom: var(--safe-b); }
}

/* =====================================================================
   19. CABECERAS DE VISTA MÁS "MÓVIL" (más aire y jerarquía)
   ===================================================================== */
@media (max-width: 768px) {
  .crm-title, .ppt-title, .fac-title, .cont-title,
  .informes-title, .settings-title, .templates-title {
    font-size: 20px !important; letter-spacing: -0.3px;
  }
  .crm-subtitle, .ppt-subtitle, .fac-subtitle, .cont-sub,
  .informes-subtitle { font-size: 13px; }
  /* Tarjetas con esquinas algo más redondeadas y sombra suave */
  .crm-card, .tpl-card, .forms-card, .member-card,
  .cont-kpi, .kpi-card, .cont-card, .settings-section {
    border-radius: 5px;
  }
}

/* =====================================================================
   20. AJUSTES FINOS PARA MÓVIL PEQUEÑO (<=420px)
   ===================================================================== */
@media (max-width: 420px) {
  body { font-size: 14px; }
  .templates-grid { grid-template-columns: 1fr !important; }
  .invoice-alert-bar .iab-cta { width: 100%; text-align: center; }
}



/* =====================================================================
   12. SHELL v1 — cajón lateral (árbol departamentos → vistas), topbar y
   pestañas en píldoras (<=768px). Complementa a shell.css.
   ===================================================================== */
@media (max-width: 768px) {
  .sidebar { width: 288px; max-width: 86vw; }
  .sidebar-header {
    height: calc(var(--topbar-h) + var(--safe-t));
    padding-top: var(--safe-t);
  }
  .sb-collapse-btn { display: none; }
  .sb-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
  }
  .sb-close-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
  .nav-item, .dashboard-main, .project-header, .nav-dept {
    min-height: var(--touch); padding-top: 10px; padding-bottom: 10px; font-size: 14.5px;
  }
  .project-header { padding-left: 10px; }
  .project-name { font-size: 14.5px; }
  .view-item { min-height: 42px; padding: 9px 10px 9px 12px; font-size: 14px; margin-left: 8px; }
  .nav-chev { width: 32px; height: 32px; }
  .nav-chev svg { width: 15px; height: 15px; }
  .project-more-btn { opacity: 1; width: 30px; height: 30px; }

  .topbar { padding: 0 12px; gap: 8px; }
  .breadcrumb { gap: 5px; }
  .breadcrumb-item { max-width: 44vw; }
  .breadcrumb-item.current { font-size: 15px; }
  .topbar-right { gap: 6px; }
  .tb-btn, .tb-avatar { width: 36px; height: 36px; }
  .tb-btn.tb-settings { display: none; }

  .subbar2 { height: auto; min-height: 0; padding: 8px 12px; gap: 6px; }
  .subbar2 .tab {
    height: 36px; min-height: 36px; padding: 0 14px; border-radius: 999px;
    box-shadow: none; border: 1px solid var(--border);
    color: var(--text-secondary); background: var(--bg); font-size: 13px;
  }
  .subbar2 .tab:hover { box-shadow: none; }
  .subbar2 .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: none; }
  .subbar2-right { padding-left: 4px; }
}

/* =====================================================================
   21. PASADA UI v3 — MÓVIL
   ---------------------------------------------------------------------
   Va la última de todo, así que aquí se rematan los fallos que se veían
   en el móvil de verdad (medidos a 390 px):

     · La pestaña activa se pintaba NEGRA SOBRE NEGRO (invisible): el
       selector `#subViewBar .tab.active` del tema, con un id, ganaba al
       `color:#fff` de aquí. Ahora se gana con el mismo id.
     · El filtro "Ver como" se salía de la pantalla en TODAS las vistas
       (llegaba a 529-893 px en un ancho de 390).
     · El título y el subtítulo de Facturas, Empresa y Servicios medían
       más que la pantalla y se cortaban a media palabra.
     · Filas de 103-173 px de alto porque el nombre del cliente y las
       etiquetas de servicio se partían en cuatro renglones.
     · Tablas con doble barra de scroll (una dentro de otra) y filas
       cortadas por la mitad.
   ===================================================================== */

@media (max-width: 768px) {

  /* ---- Ritmo de página: menos margen, sin perder el aire ---- */
  :root {
    --page-x: 14px;
    --page-t: 16px;
    --page-b: 44px;
    --fs-title: 21px;
    --row-h: 46px;
    --row-h-2: 54px;
  }

  /* ---- Cabecera de vista: en columna y sin desbordar ---- */
  .content .fac-header,
  .cont-head, .informes-head, .crm-header, .ppt-header, .page-head, .eq-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .content .fac-header { flex-direction: row; align-items: center; }
  .content .fac-title,
  .page-title, .cont-title, .informes-title, .crm-title, .ppt-title {
    font-size: var(--fs-title) !important;
    line-height: 1.2;
  }
  .content .fac-subtitle,
  .page-sub, .cont-sub, .informes-subtitle, .crm-subtitle, .ppt-subtitle {
    font-size: 12.5px !important;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* El bloque del título nunca empuja más allá del ancho de pantalla */
  .content .fac-header > div,
  .cont-head > div, .informes-head > div, .page-head > div {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
  }

  /* El botón principal de la cabecera, a lo ancho: es el que se toca */
  .content .fac-header-actions .btn.primary,
  .cli-head-actions .btn.primary,
  .page-head-actions .btn.primary { width: 100%; }

  /* ---- Pestañas de subvista ----
     La activa vuelve a leerse (blanco sobre tinta). Se gana la cascada con
     el mismo id que usa el tema. */
  #subViewBar.subbar2 .tab.active,
  .subbar2 .tab.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-weight: 600;
  }
  #subViewBar.subbar2 .tab.active .tab-icon,
  #subViewBar.subbar2 .tab.active svg { color: #fff !important; }
  #subViewBar.subbar2 .tab,
  .subbar2 .tab {
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--text-secondary);
    box-shadow: none;
  }
  /* Sin el degradado de la derecha: borraba la última pestaña */
  .subbar, .subbar2 {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* ---- Filtro "Ver como": anclado a la derecha, sin salirse ----
     Va pegado al borde derecho de la tira mientras las pestañas se
     deslizan por debajo. Antes se iba fuera de la pantalla. */
  /* OJO: NO tocar aquí `position` de .subbar2 — la barra ya es sticky con
     top:60px (apartado 4). Cambiarla a relative la empujaba 60 px hacia
     abajo y la metía encima del contenido. */
  .subbar2 { padding-right: 6px; }
  .subbar2-right {
    position: sticky;
    right: 0;
    align-self: center;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10px;
    background: var(--bg);
    box-shadow: -14px 0 12px -8px rgba(16, 24, 40, .14);
    z-index: 2;
  }
  .subbar2-right .sv-label { display: none; }
  .subbar2-right select {
    max-width: 132px;
    min-height: 34px;
    height: 34px;
    font-size: 12.5px;
    padding: 0 26px 0 10px;
  }

  /* ---- Tarjetas de cifra: dos por fila ---- */
  /* Las tarjetas viven dentro de un bloque con su propio padding, así que el
     ancho útil en un móvil de 390 px es ~285: con 148 de mínimo solo entraba
     UNA por fila. */
  .inf-block, .cont-card, .fac-card, .settings-section, .chart-card {
    padding: 14px;
  }
  .inf-mini, .inf-mini-cards, .kpi-grid, .clid-hcards {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
  }
  /* Título de bloque y su coletilla, uno debajo del otro: en 390 px no caben
     al lado y se partían en dos columnas estrujadas. */
  .inf-block-t {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .inf-mc, .kpi-card, .clid-hcard { padding: 12px 13px; }
  .inf-mc-v, .kpi-card-value, .clid-hcard-v { font-size: 19px; }
  .inf-mc-l, .kpi-card-label, .clid-hcard-l { font-size: 9.5px; min-height: 2.7em; }

  /* ---- Tablas: se deslizan, NO se parten ----
     Una fila = una línea (dos en la columna del nombre). Lo que no cabe se
     lee deslizando a lo ancho, como una hoja de cálculo. */
  .cli-grupo table td, .cli-grupo table th,
  .fac-table td, .fac-table th,
  .fac-tbl td, .fac-tbl th,
  .ppt-table td, .ppt-table th,
  .cont-tbl td, .cont-tbl th,
  .eq-tbl td, .eq-tbl th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  .cli-grupo table td { height: var(--row-h-2); }
  .fac-table td, .ppt-table td, .fac-tbl td, .eq-tbl td, .cont-tbl td { height: var(--row-h); }

  /* Fuera la ventana con scroll propio dentro de la tarjeta: en móvil eran
     DOS barras de scroll, una dentro de otra, y filas cortadas a medias.
     Aquí manda una sola: la de la página en vertical y la de la tabla en
     horizontal. */
  .cli-tabla-caja {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Primera columna congelada: el nombre siempre a la vista mientras se
     desliza el resto de columnas. */
  .cli-tabla-caja table th:first-child,
  .cli-tabla-caja table td:first-child,
  .fac-table-wrap .fac-table th:first-child,
  .fac-table-wrap .fac-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--card);
    box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .22);
    max-width: 150px;
  }
  .cli-tabla-caja table thead th:first-child,
  .fac-table-wrap .fac-table thead th:first-child {
    z-index: 6;
    background: var(--card-soft);
  }

  /* Proyectos: la columna del nombre se quedaba con 576 px de los 390 que
     tiene la pantalla y dejaba el resto de columnas fuera de alcance. */
  .dt-scroll .data-table th.col-name,
  .dt-scroll .data-table td.col-name,
  .fnl-table-wrap .data-table th.col-name,
  .fnl-table-wrap .data-table td.col-name {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  /* ---- Etiquetas dentro de las celdas: una línea y "+N" ---- */
  .ms-chips, .cell-chips { flex-wrap: nowrap; overflow: hidden; }
  .pill, .ms-chip, .cli-sv, .chip-more { height: 20px; font-size: 11px; padding: 0 8px; }

  /* ---- Formularios en rejilla: a una columna ---- */
  .content .fac-empresa-panel .fac-form-row,
  .content .fac-empresa-panel .fac-form-row-3,
  .clid-form {
    grid-template-columns: 1fr !important;
  }

  /* ---- Que el final de la página no quede pegado al borde ---- */
  .content.scroll-y, .cont-wrap, .informes-wrap, .content .fac-root,
  .cli-root, .crm-root, .ppt-root {
    padding-bottom: calc(var(--page-b) + var(--safe-b));
  }
}

/* Móvil pequeño (<=380px): una tarjeta de cifra por fila, cabe mejor */
@media (max-width: 380px) {
  .inf-mini, .inf-mini-cards, .kpi-grid, .clid-hcards {
    grid-template-columns: 1fr;
  }
  :root { --fs-title: 20px; }
}