/* =============================================================================
   app_responsive.css — Sistema responsive de JuiceCRM (Fase 1)
   Se carga EL ÚLTIMO en base.html para poder ajustar sin tocar el resto.

   CONVENCIÓN DE BREAKPOINTS (alineada con VitaKids). Mobile-first:
       Móvil       : ≤ 640px
       Tablet       : 641px – 1024px   (parada intermedia opcional a 900px)
       Escritorio  : ≥ 1025px

   En pantallas nuevas usa SIEMPRE estos cortes (no inventes 760/680/560…):
       @media (max-width: 1024px) { ... }   // tablet y por debajo
       @media (max-width: 900px)  { ... }   // tablet estrecha
       @media (max-width: 640px)  { ... }   // móvil
   Nota: las @media NO admiten var(); por eso los breakpoints van fijos.
   ========================================================================== */

/* --- Higiene global: evitar scroll horizontal accidental en móvil --- */
img, video, canvas { max-width: 100%; }
img { height: auto; }
pre, code, kbd { max-width: 100%; }
pre { overflow-x: auto; }

/* Permite que un hijo flex/grid se encoja por debajo de su contenido
   (causa típica de desborde). Aplícalo al contenedor que se sale. */
.u-min0 { min-width: 0; }


/* =============================================================================
   UTILIDADES RESPONSIVE (keyed a 640 / 900 / 1024)
   Pensadas para reducir @media inline en las páginas (Fases 2-4).
   Sufijos: -sm = ≤640 (móvil) · -md = ≤900 (tablet).
   ========================================================================== */

/* Visibilidad por dispositivo */
@media (max-width: 640px) { .u-hide-sm { display: none !important; } }
@media (max-width: 900px) { .u-hide-md { display: none !important; } }
@media (min-width: 641px) { .u-only-sm { display: none !important; } }   /* solo móvil */

/* Apilar en móvil: un contenedor flex pasa a columna a ≤640 */
@media (max-width: 640px) {
    .u-stack-sm { flex-direction: column !important; align-items: stretch !important; }
    .u-stack-sm > * { width: 100% !important; }
}

/* Inputs/botones a ancho completo en móvil (se afinará en la Fase 3) */
@media (max-width: 640px) { .u-full-sm { width: 100% !important; } }

/* Rejilla responsive SIN media queries: se reparte sola y se apila en móvil.
   Cada celda no baja de ~240px. Útil para listados de tarjetas/KPIs. */
.u-grid-auto {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* Envoltorio de tabla con scroll horizontal (para tablas SIN .table-wrap). */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   FASE 2 — TABLAS RESPONSIVE
   Estrategia: scroll horizontal en lugar de recortar u ocultar columnas.
   Se aplica a TODAS las tablas envueltas en .table-wrap (19 plantillas) sin
   tocar el HTML. Auditado: los listados no llevan menús desplegables por fila,
   así que el scroll no recorta nada.
   ========================================================================== */

/* El contenedor pasa de overflow:hidden (recortaba) a scroll horizontal.
   En escritorio no se nota (solo aparece la barra si la tabla no cabe). */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Las celdas no se parten en varias líneas: la tabla conserva su ancho y se
   navega con scroll, que es legible. (Columnas concretas que deban envolver se
   afinan por página en la Fase 4 con .u-wrap-cell sobre el th/td.) */
.table-wrap .table th,
.table-wrap .table td { white-space: nowrap; }
.u-wrap-cell { white-space: normal !important; }

/* Anula el truco antiguo (app.css) que OCULTABA las columnas 4+ en móvil.
   Ahora se ven todas y se accede con scroll: no se pierde información. */
@media (max-width: 640px) {
    .table th:nth-child(n+4),
    .table td:nth-child(n+4) { display: table-cell; }
}


/* =============================================================================
   FASE 3 — FORMULARIOS Y MODALES
   - Formularios: ya envuelven (flex-wrap); en móvil cada campo a ancho completo
     y botones de acción apilados a ancho completo.
   - Kanban: ya scrollea (overflow-x:auto + columnas 280px); no se toca.
   - Modales: ya son responsive de ancho (width:100%+max-width+centrado). Aquí
     solo se añade max-height + scroll a las CAJAS internas para que los modales
     altos no se corten en pantallas cortas. Se usa !important porque los estilos
     viven inline en cada plantilla. NO se tocan los overlays.
   ========================================================================== */

/* --- Formularios en móvil --- */
@media (max-width: 640px) {
    .form-row .form-col,
    .form-row .form-col-wide { flex-basis: 100%; min-width: 0; }
    .form-actions { flex-direction: column; align-items: stretch; }
    .form-actions > * { width: 100%; }
}

/* --- Modales: las cajas internas no exceden la pantalla y hacen scroll --- */
@media (max-width: 640px) {
    .vkc-modal-card,
    .kb-modal-card, .kb-modal-card-large,
    .cf-modal-box,
    .reject-modal-card,
    .docs-modal-card,
    .ac-modal-box,
    .ag-modal,
    .qmodal,
    .email-preview-modal-shell {
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* =============================================================================
   FASE 4 (bloque 1) — Barrido: cabeceras, modales pendientes y grids fijos
   Todo por CSS (sin tocar plantillas). Targets verificados en auditoría.
   ========================================================================== */

/* Cabecera de ficha (.client-header): ya hace flex-wrap; en móvil que el bloque
   de título y el de acciones ocupen el ancho completo (apilado limpio). */
@media (max-width: 640px) {
    .client-header > * { flex: 1 1 100%; }
}

/* Modales pendientes de la Fase 3 — Junta (gv-mbox) y Actas (mn-box):
   misma cura (scroll si son altos). Inline en su plantilla → !important. */
@media (max-width: 640px) {
    .gv-mbox, .mn-box {
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Circulares · resumen (.cs-stats): 3 columnas fijas → 1 en móvil. */
@media (max-width: 640px) {
    .cs-stats { grid-template-columns: 1fr !important; }
}

/* SISTÉMICO: el grid de estadísticas compartido (.stat-g, usado en varias
   páginas) baja a 3 columnas en tablet pero podía quedarse a 5 en móvil.
   Lo forzamos a 1 columna en móvil (incluidas sus variantes cols-2/3/4). */
@media (max-width: 640px) {
    .stat-g,
    .stat-g.cols-2,
    .stat-g.cols-3,
    .stat-g.cols-4 { grid-template-columns: 1fr; }
}


/* =============================================================================
   FASE 4 (bloque 2) — Grids fijos restantes
   Auditado: casi todos ya bajaban a 1-2 columnas en móvil (tasks ≤760→1,
   tenant/dashboard ≤1024→2 y ≤600→2, HR ≤900→2, quotes ≤768→2). El único que
   se quedaba a 3 columnas sin media query era hr/my_time (.stats-row).
   Está inline en su plantilla → !important. .stats-row solo se usa ahí.
   ========================================================================== */
@media (max-width: 640px) {
    .stats-row { grid-template-columns: 1fr !important; }
}