/* v180.5.6 — Mobile Enterprise Polish
   Capa aditiva dark/mobile-safe. No modifica lógica, queries ni markup.
   Objetivo: densidad visual enterprise, legibilidad y jerarquía en alumno mobile. */

@media (max-width: 760px) {
  :root {
    --m56-bg: #071225;
    --m56-panel: rgba(15, 27, 52, .94);
    --m56-panel-2: rgba(20, 36, 64, .94);
    --m56-line: rgba(147, 197, 253, .26);
    --m56-line-strong: rgba(147, 197, 253, .42);
    --m56-text: #f8fbff;
    --m56-muted: #c7d7ee;
    --m56-blue: #2f6df6;
    --m56-violet: #7c3aed;
    --m56-green: #10b981;
    --m56-gold: #f59e0b;
    --m56-red: #ef4444;
  }

  html { font-size: 16px; }
  body {
    background: radial-gradient(circle at 50% -10%, rgba(37,99,235,.18), transparent 32%), var(--m56-bg) !important;
    color: var(--m56-text) !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .container, .wrap, main, .main, .content, .panel-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Top panel: reduce altura y hacer controles táctiles legibles */
  .topbar, header.topbar {
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .topbar .brand, header.topbar .brand {
    font-size: .86rem !important;
    line-height: 1.25 !important;
  }
  .topbar-right, .topbar-right form {
    gap: 8px !important;
  }
  .topbar a, .topbar button, .topbar .btn, .topbar .btn-secondary,
  .topbar-right a, .topbar-right button {
    min-height: 38px !important;
    font-size: .86rem !important;
    border-radius: 12px !important;
  }

  /* Alumno dashboard/materias: arquitectura mobile enterprise */
  .al28 {
    gap: 12px !important;
    font-size: .94rem !important;
  }
  .al28-shell,
  .al28-dashgrid {
    gap: 12px !important;
  }
  .al28-hero,
  .al28-card,
  .al28-subject {
    border-radius: 18px !important;
    border-color: var(--m56-line) !important;
    box-shadow: 0 12px 30px rgba(2, 6, 23, .28) !important;
  }
  .al28-hero {
    padding: 16px !important;
    background:
      radial-gradient(circle at 92% 8%, rgba(124,58,237,.32), transparent 30%),
      linear-gradient(135deg, #124284 0%, #2767f2 58%, #7c3aed 100%) !important;
  }
  .al28-kicker {
    font-size: .7rem !important;
    letter-spacing: .11em !important;
  }
  .al28-hero h1 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.04 !important;
    margin: 6px 0 4px !important;
  }
  .al28-hero p {
    font-size: .88rem !important;
    line-height: 1.42 !important;
  }
  .al28-pillbar {
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .al28-pill {
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
  }
  .al28-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .al28-btn, .al28-link, .al28-apply {
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: .88rem !important;
    letter-spacing: -.01em !important;
  }

  /* Foto: compacta, clara y menos dominante */
  .al28-profile {
    display: grid !important;
    grid-template-columns: 62px 1fr !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.13) !important;
  }
  .al28-avatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }
  .al28-profile h3 {
    font-size: .98rem !important;
    margin-bottom: 2px !important;
  }
  .al28-profile p {
    font-size: .78rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .al28-profile-actions,
  .al28-upload {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .al28-upload input[type=file] {
    width: 100% !important;
    max-width: none !important;
    font-size: .78rem !important;
  }
  .al28-upload button {
    min-height: 34px !important;
    font-size: .78rem !important;
  }

  /* Orden solicitado: indicadores rápidos arriba del resumen académico */
  .al28-dashgrid {
    display: flex !important;
    flex-direction: column !important;
  }
  .al28-dashgrid > .al28-card:nth-child(2) { order: -1 !important; }
  .al28-dashgrid > .al28-card:nth-child(1) { order: 0 !important; }

  .al28-card {
    padding: 12px !important;
    background: linear-gradient(180deg, rgba(17,26,51,.96), rgba(11,22,42,.96)) !important;
  }
  .al28-section-title {
    margin-bottom: 10px !important;
    font-size: .82rem !important;
    letter-spacing: .08em !important;
    color: #f8fbff !important;
  }

  /* Indicadores rápidos: más compacto y arriba */
  .al28-bars {
    gap: 8px !important;
  }
  .al28-bar {
    grid-template-columns: 76px 1fr 38px !important;
    gap: 8px !important;
    font-size: .78rem !important;
    color: #eaf2ff !important;
  }
  .al28-track {
    height: 9px !important;
    background: rgba(148,163,184,.36) !important;
  }

  /* Resumen: ahorrar espacio. Presentes/Ausentes/Asistencia en el mismo renglón cuando entren. */
  .al28-kpirow {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .al28-kpi {
    min-height: 66px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(37,99,235,.22), rgba(15,23,42,.55)) !important;
    border: 1px solid rgba(147,197,253,.25) !important;
  }
  .al28-kpi b {
    font-size: 1.18rem !important;
    line-height: 1.05 !important;
  }
  .al28-kpi span {
    margin-top: 5px !important;
    font-size: .62rem !important;
    line-height: 1.15 !important;
    color: #dbeafe !important;
    letter-spacing: .04em !important;
  }
  .al28-alerts {
    margin-top: 8px !important;
    gap: 7px !important;
  }
  .al28-alert {
    padding: 9px 10px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
  }

  /* Selección de cursada: densa y táctil */
  .al28-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .al28-control label {
    font-size: .75rem !important;
    margin-bottom: 5px !important;
  }
  .al28-control select,
  .al28-control input,
  .al28 input,
  .al28 select {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: .88rem !important;
    background-color: #101c34 !important;
    color: #f8fbff !important;
    border-color: var(--m56-line-strong) !important;
  }

  /* Mis materias: tarjetas premium, compactas y legibles */
  .al28-light {
    background: linear-gradient(180deg, rgba(17,26,51,.96), rgba(11,22,42,.96)) !important;
    color: var(--m56-text) !important;
    border-color: var(--m56-line) !important;
  }
  .al28-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .al28-subject {
    padding: 12px !important;
    gap: 9px !important;
    background: linear-gradient(180deg, rgba(18,31,58,.98), rgba(13,25,48,.98)) !important;
    color: var(--m56-text) !important;
  }
  .al28-subject-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
    gap: 8px !important;
  }
  .al28-subject h3 {
    font-size: 1.1rem !important;
    color: #fff !important;
  }
  .al28-doc {
    font-size: .86rem !important;
    color: var(--m56-muted) !important;
  }
  .al28-docline {
    gap: 7px !important;
  }
  .al28-docfoto {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }
  .al28-badges {
    gap: 6px !important;
  }
  .al28-mini, .al28-tag {
    padding: 6px 8px !important;
    font-size: .66rem !important;
    border-radius: 10px !important;
    background: rgba(15,23,42,.55) !important;
    color: #f1f7ff !important;
    border-color: var(--m56-line) !important;
  }
  .al28-subject-actions {
    gap: 7px !important;
  }
  .al28-subject-actions.tools {
    padding-top: 9px !important;
    border-color: rgba(147,197,253,.24) !important;
  }
  .al28-link.secondary {
    background: rgba(37,99,235,.18) !important;
    color: #dbeafe !important;
    border-color: rgba(96,165,250,.45) !important;
  }
  .al28-link.tool.gold {
    color: #111827 !important;
  }

  /* Login / home público mobile: más respiración y lectura */
  .login-card, .auth-card, .public-card, .campus-card,
  form.login, form.auth, .landing-card {
    border-radius: 18px !important;
  }
  input, select, textarea, button, .btn, .btn-secondary, .btn-primary {
    font-size: .92rem !important;
  }
}

@media (max-width: 390px) {
  .al28-kpirow { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .al28-kpi { padding: 8px 6px !important; min-height: 60px !important; }
  .al28-kpi b { font-size: 1rem !important; }
  .al28-kpi span { font-size: .56rem !important; }
  .al28-bar { grid-template-columns: 70px 1fr 34px !important; font-size: .72rem !important; }
  .al28-actions { grid-template-columns: 1fr !important; }
}