/* v180.6.13 - Mobile Dashboard Numeric Density + Role Visual QA
   Objetivo: evitar que KPIs/numeros del dashboard ocupen un renglon por digito en celular.
   Alcance: Secretaria, EMTP, Laboratorio, Direccion, EOE, Admin/Superadmin y dashboards legacy.
   Solo CSS: no toca queries, tenancy, branding ni logica PHP. */

@media (max-width: 760px){
  /* Grillas de KPIs: dos columnas reales en mobile cuando hay espacio suficiente. */
  .sec-kpi-grid,
  .role-mobile-kpi-grid,
  .eoe-mobile-kpi-grid,
  .eoe-kpi-grid,
  .dir-kpis-3,
  .dir-kpis-4,
  .dir-kpis-5,
  .dir-kpis-6,
  .grid4,
  .dashboard-kpis,
  .dashboard-stats,
  .stats-grid,
  .metrics-grid,
  .kpi-grid,
  .summary-grid,
  .quick-stats,
  .resumen-cards,
  .secretaria-resumen,
  .preceptor-resumen{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
  }

  /* Cards KPI compactas: menos alto desperdiciado, ancho interno protegido. */
  .sec-kpi,
  .eoe-mobile-kpi-grid > *,
  .eoe-kpi-grid > *,
  .dir-kpis-3 > *,
  .dir-kpis-4 > *,
  .dir-kpis-5 > *,
  .dir-kpis-6 > *,
  .grid4 > .stat,
  .stat-card,
  .kpi-card,
  .metric-card,
  .dashboard-stat,
  .card-stat,
  .small-box,
  .info-box,
  .resumen-card,
  .summary-card,
  .indicador-card,
  .secretaria-card,
  .preceptor-card,
  .eoe-card{
    min-width:0!important;
    min-height:0!important;
    padding:10px 10px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }

  /* Numeros: no permitir cortes por digito ni verticalizacion. */
  .sec-kpi .kpi-value,
  .emtp-shell .stat .value,
  .laboratorio-shell .stat .value,
  .lab-shell .stat .value,
  .eoe-mobile-kpi-grid strong,
  .eoe-kpi-grid strong,
  .dir-kpis-3 .card > div[style*="font-size"],
  .dir-kpis-4 .card > div[style*="font-size"],
  .dir-kpis-5 .card > div[style*="font-size"],
  .dir-kpis-6 .card > div[style*="font-size"],
  .stat-card h1,.stat-card h2,.stat-card h3,
  .kpi-card h1,.kpi-card h2,.kpi-card h3,
  .metric-card h1,.metric-card h2,.metric-card h3,
  .dashboard-stat h1,.dashboard-stat h2,.dashboard-stat h3,
  .small-box h3,
  .info-box-number,
  .resumen-card strong,
  .summary-card strong,
  .indicador-card strong,
  .ui-kpi,
  .ui-grid-4 .ui-card strong{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
    hyphens:none!important;
    font-size:clamp(20px,7vw,30px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
    text-align:left!important;
    margin-top:4px!important;
  }

  /* Etiquetas: compactas, con maximo dos lineas sin forzar al numero. */
  .sec-kpi .kpi-label,
  .sec-kpi .kpi-desc,
  .emtp-shell .stat .label,
  .laboratorio-shell .stat .label,
  .lab-shell .stat .label,
  .eoe-mobile-kpi-grid span,
  .eoe-kpi-grid span,
  .dir-kpis-3 .muted.small,
  .dir-kpis-4 .muted.small,
  .dir-kpis-5 .muted.small,
  .dir-kpis-6 .muted.small,
  .info-box-text,
  .resumen-card small,
  .summary-card small,
  .indicador-card small{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  .sec-kpi .kpi-desc{margin-top:4px!important;opacity:.82!important;}
  .sec-kpi .kpi-open{display:none!important;}

  /* Direccion: las cards con valores inline reciben layout interno estable. */
  .dir-kpis-3 .card,
  .dir-kpis-4 .card,
  .dir-kpis-5 .card,
  .dir-kpis-6 .card{
    padding:10px!important;
    min-width:0!important;
  }

  /* UI system y dashboards genericos. */
  .ui-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .ui-card{padding:10px!important;border-radius:14px!important;min-width:0!important;}

  /* Evita que Bootstrap/flex legacy comprima el valor a una columna angosta. */
  .card,
  .panel,
  .box,
  .stat,
  .kpi,
  .metric,
  [class*="kpi"],
  [class*="stat"]{
    min-width:0!important;
  }
}

@media (max-width: 380px){
  .sec-kpi-grid,
  .role-mobile-kpi-grid,
  .eoe-mobile-kpi-grid,
  .eoe-kpi-grid,
  .dir-kpis-3,
  .dir-kpis-4,
  .dir-kpis-5,
  .dir-kpis-6,
  .grid4,
  .dashboard-kpis,
  .dashboard-stats,
  .stats-grid,
  .metrics-grid,
  .kpi-grid,
  .summary-grid,
  .quick-stats{
    gap:7px!important;
  }

  .sec-kpi .kpi-value,
  .emtp-shell .stat .value,
  .laboratorio-shell .stat .value,
  .lab-shell .stat .value,
  .eoe-mobile-kpi-grid strong,
  .eoe-kpi-grid strong,
  .dir-kpis-3 .card > div[style*="font-size"],
  .dir-kpis-4 .card > div[style*="font-size"],
  .dir-kpis-5 .card > div[style*="font-size"],
  .dir-kpis-6 .card > div[style*="font-size"]{
    font-size:clamp(18px,6.4vw,26px)!important;
  }
}