/* responsive.css — extraído de index.html (líneas 479-524). Orden preservado: NO reordenar los <link>. */
  /* ============ RESPONSIVE · teléfono / tablet / escritorio ============ */
  /* Teléfono (<640px): se mantiene tal cual, formato móvil. */

  /* La barra de estado tipo teléfono se oculta en pantallas grandes */
  @media (min-width:640px){ .statusbar{display:none} }

  /* TABLET (640–999): tarjeta más amplia y aireada, para alumna y coach */
  @media (min-width:640px) and (max-width:999.98px){
    .device{max-width:480px;height:94vh;max-height:96vh;border-radius:30px;
      box-shadow:0 30px 70px -34px rgba(0,0,0,.42), inset 0 0 0 1px var(--line)}
    body[data-mode="coach"] .device{max-width:760px}
    body[data-mode="coach"] .kpigrid{grid-template-columns:repeat(5,1fr)}
    body[data-mode="coach"] .kpi.attn{grid-column:auto;display:block}
    body[data-mode="coach"] .kpi.attn .attn-txt .l{margin-top:6px}
    .login .foot{margin-top:40px}
  }

  /* ESCRITORIO (>=1000): login y alumna = tarjeta de app centrada; coach = ventana ancha */
  @media (min-width:1000px){
    .device{max-width:460px;height:88vh;max-height:820px;border-radius:30px;
      box-shadow:0 36px 80px -42px rgba(0,0,0,.4), inset 0 0 0 1px var(--line)}
    .login .foot{margin-top:40px}

    body[data-mode="coach"] .device{
      max-width:1180px;width:96vw;height:92vh;max-height:920px;border-radius:24px;
      box-shadow:0 40px 90px -42px rgba(0,0,0,.5), inset 0 0 0 1px var(--line);
    }
    body[data-mode="coach"] .tabbar{
      top:0;bottom:0;left:0;right:auto;width:236px;flex-direction:column;justify-content:flex-start;
      background:var(--card-2);backdrop-filter:none;border-top:none;border-right:1px solid var(--line);
      padding:26px 16px 24px;gap:6px;
    }
    body[data-mode="coach"] .tab{
      flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:14px;width:100%;
      padding:13px 15px;border-radius:13px;font-size:14.5px;color:var(--muted);letter-spacing:.2px;
    }
    body[data-mode="coach"] .tab svg{width:21px;height:21px}
    body[data-mode="coach"] .tab.on{background:var(--accent);color:#14180c}
    body[data-mode="coach"] .tab.on svg{stroke:#14180c}
    body[data-mode="coach"] .topbar{padding-left:276px;padding-top:24px}
    body[data-mode="coach"] .screen{padding:8px 48px 64px 276px}
    body[data-mode="coach"] .screen .view{max-width:920px;margin-inline:auto}
    body[data-mode="coach"] .kpigrid{grid-template-columns:repeat(5,1fr)}
    body[data-mode="coach"] .toast{bottom:40px}
  }