/* v180.6.5 - Mobile Role Density + Logout Contrast
   Objetivo: que KPIs/tarjetas numéricas entren en 2 columnas en celular real,
   sin tocar lógica ni tablas. Aplica a EOE, Preceptor, Admin, Secretaría y dashboards legacy. */
@media (max-width: 768px){
  a[href*="logout"],
  a[href*="cerrar"],
  .logout-btn,
  .btn-logout,
  .btn-danger[href*="logout"],
  form[action*="logout"] button{
    background: linear-gradient(135deg,#ef4444,#b91c1c) !important;
    color:#fff !important;
    border-color:rgba(248,113,113,.72) !important;
    box-shadow:0 10px 22px rgba(185,28,28,.28) !important;
    font-weight:800 !important;
  }

  /* Grillas numéricas mobile: antes muchos roles caían a 1 columna. */
  .grid,
  .stats-grid,
  .metrics-grid,
  .kpi-grid,
  .kpis-grid,
  .pre-grid,
  .cards-grid,
  .dashboard-grid,
  .summary-grid,
  .indicadores-grid,
  .quick-stats,
  .quick-indicators,
  .eoe-dashboard .grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
  }

  /* Cards KPI compactas. */
  .grid > .card,
  .stats-grid > *,
  .metrics-grid > *,
  .kpi-grid > *,
  .kpis-grid > *,
  .pre-grid > *,
  .dashboard-grid > *,
  .summary-grid > *,
  .quick-stats > *,
  .quick-indicators > *,
  .stat-card,
  .metric-card,
  .kpi-card,
  .dashboard-stat,
  .pre-kpi,
  .panel .card{
    min-height:auto !important;
    padding:10px 11px !important;
    border-radius:14px !important;
    margin:0 !important;
  }

  .grid > .card span,
  .stat-card span,
  .metric-card span,
  .kpi-card span,
  .dashboard-stat span,
  .pre-kpi .label{
    font-size:10px !important;
    line-height:1.15 !important;
    letter-spacing:.02em !important;
    margin-bottom:4px !important;
  }

  .grid > .card strong,
  .stat-card strong,
  .metric-card strong,
  .kpi-card strong,
  .dashboard-stat strong,
  .pre-kpi .value,
  .card .value,
  .card h2{
    font-size:22px !important;
    line-height:1 !important;
    margin:3px 0 !important;
  }

  .pre-kpi .hint,
  .metric-card .hint,
  .kpi-card .hint,
  .dashboard-stat .hint{
    font-size:10px !important;
    padding:4px 7px !important;
    line-height:1.1 !important;
  }

  /* Paneles EOE/legacy: menos aire vertical. */
  .panel,
  .pre-section,
  .module-card,
  .course-card{
    padding:12px !important;
    border-radius:16px !important;
  }

  .panel .head,
  .pre-section .head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .panel h2,
  .panel h3,
  .pre-section h2,
  .pre-hero h1{
    margin-top:0 !important;
    margin-bottom:8px !important;
  }

  .pre-hero{
    padding:14px !important;
    border-radius:18px !important;
  }
  .pre-hero h1{font-size:24px !important;}
  .pre-hero p{font-size:13px !important;line-height:1.35 !important;}
  .pre-meta{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  .pre-meta-card{padding:9px 10px !important;border-radius:12px !important;}
  .pre-actions{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  .pre-btn{min-height:38px !important;font-size:12px !important;padding:0 8px !important;border-radius:11px !important;}

  /* Tablas anchas: scroll horizontal controlado, no rompen layout. */
  table{font-size:11px !important;}
  .table-responsive,
  .panel:has(table){overflow-x:auto !important;}
}

@media (max-width: 380px){
  .grid,
  .stats-grid,
  .metrics-grid,
  .kpi-grid,
  .kpis-grid,
  .pre-grid,
  .cards-grid,
  .dashboard-grid,
  .summary-grid,
  .indicadores-grid,
  .quick-stats,
  .quick-indicators{
    gap:7px !important;
  }
  .grid > .card,
  .stat-card,
  .metric-card,
  .kpi-card,
  .dashboard-stat,
  .pre-kpi{padding:9px !important;}
}