/*
 * v180.5.5 — Mobile Polish + PWA Cache Hardening
 * Capa visual aditiva. No reemplaza vistas ni modifica lógica.
 * Objetivo: mejorar legibilidad mobile, tamaño táctil, formularios y login SaaS.
 */

:root{
  --saas-mobile-font: 16px;
  --saas-mobile-small: 13px;
  --saas-mobile-line: 1.45;
  --saas-mobile-touch: 44px;
  --saas-mobile-radius: 16px;
}

@media (max-width: 768px){
  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body{
    font-size: var(--saas-mobile-font) !important;
    line-height: var(--saas-mobile-line) !important;
  }

  .container,
  .wrap,
  .page,
  .content,
  main,
  .main,
  .app-shell,
  .panel,
  .card,
  .login-pro,
  .login-panel,
  .login-hero{
    max-width: 100% !important;
  }

  .container,
  .wrap,
  .page,
  main,
  .main,
  .app-shell{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1,
  .h1,
  .page-title{
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
  }

  h2,
  .h2,
  .section-title{
    font-size: clamp(21px, 6.4vw, 28px) !important;
    line-height: 1.16 !important;
  }

  h3,
  .h3,
  .card-title{
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.22 !important;
  }

  p,
  label,
  .muted,
  .text-muted,
  .small,
  small,
  td,
  th,
  li,
  .card,
  .panel,
  .notice,
  .alert{
    font-size: max(var(--saas-mobile-small), 0.92rem) !important;
    line-height: var(--saas-mobile-line) !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-light,
  .btn-outline-primary,
  .btn-outline-secondary,
  .mode-btn,
  button,
  input[type="submit"],
  a.btn,
  a.btn-secondary,
  .role-grid a{
    min-height: var(--saas-mobile-touch) !important;
    padding: 11px 14px !important;
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px !important;
    white-space: normal;
  }

  input,
  select,
  textarea,
  .input,
  .form-control,
  .form-select{
    min-height: var(--saas-mobile-touch) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    padding: 11px 12px !important;
    border-radius: 13px !important;
  }

  textarea,
  .rich-editor,
  .editor-area{
    min-height: 150px !important;
  }

  .badge,
  .pill,
  .chip,
  .tag,
  .status,
  .login-kicker{
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    padding: 7px 10px !important;
  }

  .topbar,
  .navbar,
  .header,
  .toolbar,
  .actions,
  .login-actions,
  .mode-switch{
    gap: 8px !important;
  }

  .table,
  table{
    font-size: 0.92rem !important;
  }

  th,
  td{
    padding: 12px 10px !important;
  }

  .table-responsive,
  .overflow-auto{
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px){
  body{
    min-width: 0 !important;
  }

  .login-pro{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .login-hero,
  .login-panel{
    border-radius: 20px !important;
    padding: 16px !important;
  }

  .login-hero{
    min-height: auto !important;
  }

  .login-title{
    font-size: clamp(27px, 9vw, 38px) !important;
    line-height: 1.05 !important;
    margin: 16px 0 8px !important;
  }

  .login-subtitle{
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  .login-panel h2{
    font-size: 24px !important;
  }

  .role-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }

  .role-grid a{
    width: 100%;
    min-height: 42px !important;
    font-weight: 900 !important;
  }

  .login-actions,
  .login-access{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .login-actions .btn,
  .login-actions .btn-secondary,
  .login-access .btn,
  .login-access .btn-secondary{
    width: 100% !important;
  }

  .login-access .card{
    padding: 15px !important;
  }

  .login-access .card h3{
    margin-bottom: 6px !important;
  }

  .brand-note{
    font-size: .92rem !important;
  }

  .topbar,
  .topbar-right,
  .toolbar,
  .actionbar,
  .dashboard-actions,
  .course-actions,
  .student-actions{
    flex-wrap: wrap !important;
  }

  .topbar .btn,
  .toolbar .btn,
  .actionbar .btn,
  .course-actions .btn,
  .student-actions .btn{
    flex: 1 1 auto;
  }

  .card,
  .panel,
  .notice,
  .alert,
  .kpi-card,
  .metric-card,
  .login-access .card{
    border-radius: var(--saas-mobile-radius) !important;
  }

  .grid,
  .cards-grid,
  .kpi-grid,
  .summary-grid,
  .login-access{
    gap: 12px !important;
  }
}

@media (max-width: 420px){
  .container,
  .wrap,
  .page,
  main,
  .main,
  .app-shell{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .login-hero,
  .login-panel,
  .card,
  .panel{
    padding: 14px !important;
  }

  .role-grid{
    grid-template-columns: 1fr !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-light,
  .btn-outline-primary,
  .btn-outline-secondary,
  button,
  input[type="submit"],
  .role-grid a{
    width: 100%;
  }
}