/* ===================================================================
   SiDi · Ajustes para teléfonos y tabletas pequeñas
   Instituto Superior Tecnológico Juan Bautista Aguirre

   Esta hoja se carga después de las demás y solo actúa por debajo de
   760 px. No cambia nada de la vista de escritorio.

   El sistema ya respondía a pantallas medianas, pero en un teléfono
   aparecían cuatro problemas: el menú lateral se convertía en nueve
   filas que ocupaban la primera pantalla entera, la barra superior
   quedaba fija y se comía casi la mitad del alto, el selector de
   carrera se salía por el costado derecho y las tablas anchas
   arrastraban la página completa en horizontal en lugar de
   desplazarse dentro de su tarjeta.
   =================================================================== */

/* -------------------------------------------------------------------
   Red de seguridad: nada debe empujar la página a lo ancho.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  img,svg,video,canvas,pre{max-width:100%;height:auto}

  /* Un desbordamiento siempre es del contenedor, nunca de la página. */
  .wrap section{min-width:0}
  .card,.card-h,.card-b{min-width:0;max-width:100%}
}

/* Menú desplegable móvil; en escritorio se conserva la barra lateral. */
.mobile-nav-toggle{display:none}
.mobile-nav-panel{display:contents}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{
    position:sticky;top:0;z-index:40;height:auto;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:0;padding:0;overflow:visible;
    box-shadow:0 2px 10px rgba(22,35,58,.18);
  }
  .brand{
    flex:0 0 auto;display:flex;align-items:center;
    padding:14px;margin:0;border:0;position:static;
  }
  .brand .sigla{font-size:22px}
  .brand .sub{display:none}
  .rail.nav-ready{flex-wrap:nowrap}
  .mobile-nav-toggle{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:12px;flex:1;min-width:0;
    min-height:56px;margin:6px 10px 6px 0;padding:8px 12px;
    text-align:left;border:1px solid #596981;border-radius:10px;
    background:rgba(255,255,255,.06);color:#fff;font-size:14px;
  }
  .mobile-nav-caption{font-size:11px;color:#b9c5d9}
  #tituloMenuMovil{grid-column:1;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-weight:600}
  .mobile-nav-chevron{grid-column:2;grid-row:1 / span 2;font-size:20px}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron{transform:rotate(180deg)}
  .mobile-nav-toggle:focus-visible,.mobile-nav-panel .navitem:focus-visible{outline:2px solid #8FD6C2;outline-offset:-3px}
  .rail.nav-ready .mobile-nav-panel{
    display:none;position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);
    overflow-y:auto;overscroll-behavior:contain;
    padding:6px 0 12px;background:var(--ink);
    border-top:1px solid #596981;border-radius:0 0 14px 14px;
    box-shadow:0 10px 18px rgba(22,35,58,.24);
  }
  .rail.nav-ready.menu-abierto .mobile-nav-panel{display:block}
  .rail .navitem{
    width:100%;min-height:48px;padding:12px 18px;
    font-size:14px;white-space:normal;border-radius:0;
  }
  .rail .navitem.on{box-shadow:inset 3px 0 0 #8FD6C2}
  .rail .navitem .ic{font-size:15px;flex:0 0 18px}
  .rail .rail-foot{display:block;margin-top:8px;padding:12px 18px 0;overflow-wrap:anywhere}
  .rail .rail-foot a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
}

/* -------------------------------------------------------------------
   Barra superior: una sola franja compacta, sin quedarse fija.
   El menú de navegación permanece accesible en la parte superior.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .topbar{
    position:static;
    padding:10px 16px;
    gap:10px;
    align-items:flex-start;
  }
  .topbar .who{flex:1 1 100%;margin-right:0;min-width:0}
  .topbar .who b{font-size:13.5px;line-height:1.25}
  .topbar .who small{font-size:11.5px;line-height:1.35}

  /* Carrera y tipología comparten una fila que se desliza si hace falta. */
  .topbar .field{flex:1 1 auto;min-width:0;max-width:100%}
  .topbar .field select,
  #selCarrera,#selTipo{
    width:100%;min-width:0;max-width:100%;
    min-height:42px;font-size:14px;           /* 14 px evita el zoom de iOS */
  }
  #cajaCarrera{flex:1 1 100%}
  #cajaTipo{flex:1 1 auto}

  #bell{min-height:42px;align-self:flex-end}
}

/* -------------------------------------------------------------------
   Tipografía y respiración: el mismo contenido, en menos alto.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .wrap{padding:14px 14px 72px}

  .pagehead{margin-bottom:12px}
  .pagehead h2{font-size:21px;line-height:1.2}
  .pagehead p{font-size:13px;line-height:1.45}
  .eyebrow{font-size:10.5px}

  .card-h{padding:11px 13px;gap:8px}
  .card-h h3{font-size:14px}
  .card-h .hint{margin-left:0;flex:1 1 100%}
  .card-b{padding:12px 13px}

  .grid2,.grid3{display:block}
  .grid2>*+*,.grid3>*+*{margin-top:12px}
}

/* -------------------------------------------------------------------
   Controles: todo lo que se pulsa con el dedo llega a 40 px.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .btn,
  button.btn,
  .topbar button,
  .nomina-filtros button{
    min-height:40px;
    padding-inline:14px;
    font-size:12.5px;
  }
  .btn.sm{min-height:40px;font-size:12px}
  /* La tabla de perfiles fija su propio relleno con mayor especificidad. */
  .tabla-perfiles td.acciones-perfil .btn,
  .tabla-nomina td.nomina-acciones .btn,
  .acciones-carrera .btn,
  .acciones-perfil .btn{min-height:40px}

  /* La casilla se ve de 20 px, pero el área que responde al dedo mide 40. */
  .nomina-check-cell{padding:0}
  .nomina-check-cell label,
  .nomina-check-cell input[type=checkbox]{margin:10px}

  select,
  input[type=text],
  input[type=password],
  input[type=number],
  input[type=search],
  input[type=date]{
    min-height:42px;
    font-size:14px;                            /* por debajo, iOS hace zoom */
    padding:8px 10px;
  }
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  label.checkline{min-height:40px;display:flex;align-items:center;gap:9px}

  /* Grupos de botones que se salían: ahora se reparten en la fila. */
  .card-h .btn,.modal-actions .btn{flex:1 1 auto}
  .modal-actions{display:flex;flex-wrap:wrap;gap:8px}
}

/* -------------------------------------------------------------------
   Tablas anchas: el desplazamiento es de la tarjeta, no de la página.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .tabla-scroll,
  .card-b.sin-pad{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  /* Respaldo para cualquier tabla que quede fuera de un contenedor propio. */
  .card-b:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}

  .wrap table{font-size:12px}
  .wrap table th,.wrap table td{padding:9px 10px;white-space:nowrap}
  /* Las columnas de texto largo sí pueden partirse. */
  .wrap table td.envuelve,
  .tabla-carreras td:first-child,
  .tabla-perfiles td:first-child,
  .nomina-tabla-wrap td:first-child,
  #v-consolidado table td:first-child,
  #v-consolidado table td:nth-child(2){white-space:normal;min-width:150px;max-width:210px}

  /* Pista visual de que la tabla continúa hacia la derecha. */
  .tabla-scroll{
    background:
      linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)),
      linear-gradient(to right,rgba(255,255,255,0),var(--surface) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(22,35,58,.14),transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(22,35,58,.14),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}

/* -------------------------------------------------------------------
   Oferta: el banco docente deja de ser panel fijo y pasa a ser sección.
   En un teléfono, «pegado» reducía el área útil a una franja diminuta.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .pegado{position:static;max-height:none;overflow:visible;display:block}
  .pegado>.card-b{overflow:visible;display:block}
  #listaDoc{max-height:60vh;min-height:0;overflow-y:auto;padding-right:2px}

  .fila-curso{padding:10px 11px}
  .curso-lista-head{display:none}

  .doc-seleccion-flotante{
    right:10px;left:10px;bottom:10px;
    width:auto;max-width:none;
  }
}

/* -------------------------------------------------------------------
   Horarios: la rejilla se desplaza dentro de su tarjeta.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  #v-horarios .hgrid,#hgridDocente{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Las celdas del horario necesitan varias líneas, no el nowrap de las tablas de datos. */
  #v-horarios .sidi-horario-tabla td,
  #v-horarios .sidi-docente-tabla td{
    white-space:normal;overflow-wrap:anywhere;word-break:normal;
    overflow:hidden;vertical-align:top;
  }
  #v-horarios .sidi-materia,
  #v-horarios .sidi-docente,
  #v-horarios .sidi-docente-tabla .clase b,
  #v-horarios .sidi-docente-tabla .clase span{
    max-width:100%;min-width:0;white-space:normal;
    overflow-wrap:anywhere;line-height:1.35;
  }
  #v-horarios .sidi-horario-tabla{min-width:1050px}
  #v-horarios .sidi-docente-tabla{min-width:1220px}
  #v-horarios .sidi-docente-tabla thead th:first-child{width:56px}
  #v-horarios .sidi-docente-tabla thead th:nth-child(2){width:112px}
  #v-horarios .sidi-horario-tabla th:first-child{width:108px}
  #v-horarios .hgrid{overscroll-behavior-x:contain}
  .horario-vista-botones{width:100%}
  .horario-vista-botones button{flex:1 1 0;min-height:42px}
  .horario-acciones{margin-left:0;width:100%}
  .horario-acciones .btn{flex:1 1 auto}
  .horario-docente-ficha{grid-template-columns:1fr 1fr}

  /*
   * Al apilarse en columna, un flex-basis de 520 px deja de ser ancho y pasa
   * a ser ALTO: el selector de carrera medía medio metro de pantalla vacía y
   * el recuadro de ayuda, otro tanto. Se devuelve el tamaño al contenido.
   */
  #v-horarios .horario-intercambio-head{flex-direction:column;gap:10px}
  #v-horarios .horario-carrera-local,
  #v-horarios .horario-carrera-ayuda{flex:0 0 auto;width:100%;max-width:none;min-width:0}
  #v-horarios .horario-toolbar{padding:12px 13px!important}
  #v-horarios .horario-acciones-json{flex-wrap:wrap}
}

/* -------------------------------------------------------------------
   Avisos y mensajes emergentes ocupan el ancho del teléfono.
   Con la regla de escritorio quedaban desplazados 234 px a la derecha,
   es decir, fuera de la pantalla.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .toasts{
    left:10px!important;right:10px!important;
    bottom:10px;width:auto;max-width:none;
  }
  .panel-avisos{width:100%;max-width:100%}
  .panel-avisos header{padding:12px 14px}
  .panel-avisos .list{padding:0 14px 14px}

  .sidi-modal,dialog.sidi-modal{width:calc(100vw - 20px);max-width:none;margin:10px auto}
  .sidi-modal .modal-body{max-height:70vh;overflow-y:auto}
}

/* -------------------------------------------------------------------
   Teléfonos estrechos (iPhone SE, Android de gama de entrada).
   ------------------------------------------------------------------- */
@media (max-width:420px){
  .wrap{padding:12px 11px 72px}
  .pagehead h2{font-size:19px}
  .card-h,.card-b{padding-left:11px;padding-right:11px}
  .navitem{padding:0 11px;font-size:12px}
  .kpi{grid-template-columns:1fr 1fr}
  .kpi .k{padding:10px}
}

/* -------------------------------------------------------------------
   Pantalla de ingreso.
   ------------------------------------------------------------------- */
@media (max-width:760px){
  .login-shell{padding:22px 14px}
  .login-card{padding:18px 16px}
  .login-sidi{font-size:38px}
  .login-brand h1{font-size:17px}
  .login-watermark{display:none}
  .login-btn,.ver-clave{min-height:46px}
}