/* Ajustes de diseño (12 de octubre de 2026)
   Pantallas más compactas y humanas, sobre todo en el celular:
   - menos espacio vacío y contenido más ancho en el computador;
   - menús desplegables más ajustados;
   - en el celular: barra de arriba en una sola fila, botón del asistente redondo,
     botón de accesibilidad que ya no tapa el contenido y tablas que se deslizan
     de lado en vez de aplastarse.
   Va de último en cada pantalla, así que solo corrige: si se quita la línea
   <link rel="stylesheet" href="/ajustes.css"> todo vuelve a como estaba. */

/* ---------- Todas las pantallas ---------- */
:root{--aj-radio:14px}
.card{border-radius:var(--aj-radio)}
h1{letter-spacing:-.01em} h2{letter-spacing:-.005em}

/* Botón del asistente: más pequeño en el computador */
html:root body>.as-btn{padding:8px 16px 8px 12px;font-size:14px;box-shadow:0 4px 14px rgba(11,79,168,.28)}
html:root body>.as-btn .as-av{width:40px;height:40px;margin:-8px 2px -8px -8px;border-width:2px}

/* ---------- Rector y Secretaría (menú arriba) ---------- */
body:has(.ml-lado) main{max-width:1320px;padding:18px 24px 28px}
@media (min-width:1600px){body:has(.ml-lado) main{max-width:1480px}}

@media (min-width:901px){
  .ml-lado{padding:4px 16px}
  nav.tabs#tabs>button,nav.tabs#tabs .ml-gb{min-height:40px;padding:7px 12px;font-size:14px}
  /* La lista que baja: opciones más juntas */
  /* El ancho de la lista se ajusta al texto más largo (sin columnas sobradas) */
  nav.tabs#tabs .ml-p{padding:4px;gap:0;width:max-content;min-width:190px;border-radius:10px;top:calc(100% + 3px)}
  nav.tabs#tabs .ml-p.ml-dos{width:max-content;grid-template-columns:repeat(2,max-content);column-gap:2px}
  nav.tabs#tabs .ml-p button{min-height:30px;padding:5px 12px 5px 8px;font-size:13.5px;line-height:1.15;border-radius:7px;white-space:nowrap}
  nav.tabs#tabs .ml-p button svg.ico{width:16px;height:16px;margin-right:8px}
  nav.tabs#tabs .ml-p button .ml-n{margin-left:10px}
}
/* Barra de arriba un poco más baja en el computador */
@media (min-width:901px){
  header.top.bn{min-height:80px}
  header.top.bn .logo-barra{width:72px;height:72px}
  .bn-escudo .mc-enbarra{height:68px}
  .bn-lema2{height:64px}
}

/* Tarjetas de cifras */
.tiles{gap:12px}
.tile{padding:12px 14px;border-radius:12px}
.tile b{font-size:24px;line-height:1.1}

/* ---------- Docente, estudiante y acudiente (menú a la izquierda) ---------- */
/* Las tarjetas de una misma fila ya no se estiran: se acaba el blanco de adentro */
html:root .tb-fila{align-items:start}
/* Contenido más ancho en el computador */
.ac-col{max-width:1040px}
@media (min-width:861px){
  html:root .tb-main{padding:18px 28px 36px}
  html:root .tb-arriba{height:54px;margin:-18px -28px 14px;padding:0 28px}
  html:root .tb-lado{gap:10px}
  html:root .tb-lado .pest{gap:2px}
  html:root .tb-lado .pest button{padding:9px 12px;font-size:14px;border-radius:10px}
}

/* ---------- Celular ---------- */
@media (max-width:900px){
  /* Barra de arriba del rector y la Secretaría en UNA fila: logo, escudo y botones con ícono */
  header.top.bn{flex-wrap:nowrap;align-items:center}
  .bn-claro{padding:4px 8px;border-radius:0 0 14px 0;align-self:stretch}
  header.top.bn .logo-barra{width:44px;height:44px}
  .bn-escudo{margin-left:6px;padding-left:6px}
  .bn-escudo .mc-enbarra{height:40px;max-width:56px}
  .bn-azul{flex:1 1 auto;min-width:0}
  .bn-azul-in{padding:6px 8px}
  header.top.bn .c{display:none}
  .bn-botones{flex-wrap:nowrap;gap:6px}
  .bn-botones label{font-size:0!important;color:transparent!important}
  .bn-botones label select{font-size:13px;padding:5px 4px;color:var(--ink)}
  /* «Claves olvidadas», «Mi clave» y «Salir»: solo el ícono (el nombre queda para el lector de pantalla) */
  #btnRecup,#btnClave,#btnSalir{font-size:0!important;width:36px;height:36px;padding:0!important;display:inline-grid;place-items:center;border-radius:999px!important;position:relative;flex:none}
  #btnClave svg,#btnSalir svg{width:18px;height:18px;margin:0!important}
  #btnRecup::before{content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5V14'/%3E%3Ccircle cx='12' cy='17.2' r='.6' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5V14'/%3E%3Ccircle cx='12' cy='17.2' r='.6' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
  #btnRecup .rp-n{position:absolute;top:-4px;right:-4px;font-size:10.5px;margin:0}
  html:root header.top button.cu-boton .cu-av{--t:32px}
  #hPerfil{order:0}

  /* Menú del rector y la Secretaría: opciones más bajas y juntas */
  .ml-lado{padding:6px 10px}
  .ml-boton{min-height:40px;padding:7px 12px}
  .ml-lado nav.tabs#tabs{gap:4px}
  nav.tabs#tabs>button,nav.tabs#tabs .ml-gb{min-height:44px;padding:4px 10px;font-size:14.5px;border-radius:10px}
  nav.tabs#tabs>button svg.ico,nav.tabs#tabs .ml-gb svg.ico{width:30px;height:30px;padding:6px;margin-right:9px}
  nav.tabs#tabs .ml-g.abierto>.ml-p{gap:0;margin:4px 0 4px 14px;padding-left:8px}
  nav.tabs#tabs .ml-p button{min-height:36px;padding:5px 10px;font-size:14px}
  nav.tabs#tabs .ml-p button svg.ico{width:18px;height:18px;margin-right:10px}

  /* Contenido */
  body:has(.ml-lado) main{padding:12px 10px 90px}
  .card{padding:16px 14px;margin-bottom:12px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-bottom:12px}
  .tile{padding:10px 11px}
  .tile b{font-size:21px}
  .tile span{font-size:12px;line-height:1.25;display:block}
  /* Filtros que no cabían (p. ej. «Asistencia»): bajan a otra fila */
  .fila[style*="flex:0 0 auto"]{flex:1 1 100%!important}
  .fila>div{min-width:min(150px,100%)}
}

@media (max-width:600px){
  /* Tablas de 3 o más columnas: se deslizan de lado en vez de aplastar el texto */
  .tabla{margin:0 -14px;padding:0 14px;-webkit-overflow-scrolling:touch}
  .tabla>table:has(th:nth-child(3)){min-width:600px}
  .tabla>table:has(th:nth-child(5)){min-width:760px}
  .tabla>table:has(th:nth-child(7)){min-width:880px}
  .tabla td:first-child,.tabla th{white-space:nowrap}
  .tabla td:first-child:has(input[type=checkbox])+td{min-width:170px}
}

@media (max-width:860px){
  /* Botón del asistente: un círculo con la cara, sin el nombre */
  html:root body>.as-btn{padding:0;font-size:0;gap:0;width:54px;height:54px;justify-content:center;border-radius:999px}
  html:root body>.as-btn .as-av{width:54px;height:54px;margin:0;border-width:3px}
  html:root body>.as-btn svg{display:none}
  /* Botón de accesibilidad: abajo a la izquierda y más pequeño, para no tapar el contenido */
  html:root .a11y-tab{top:auto!important;bottom:150px;transform:none!important;width:34px!important;height:44px;border-radius:0 12px 12px 0}
  html:root .a11y-tab svg{width:20px;height:20px}
  html:root .a11y-tab .a11y-tab-borde{top:7px;bottom:7px}
  /* Menú de abajo del docente y el estudiante: botones del mismo ancho y en una línea */
  html:root .tb-lado .pest button{flex:1 0 72px;font-size:11px;padding:6px 3px}
  html:root .tb-lado .pest button{overflow-wrap:normal}
  html:root .tb-main{padding:12px 10px 92px}
  html:root .tb-arriba{height:52px}
  /* Avisos cortos: encima del menú de abajo */
  html:root body.tb-on .ui-toast{bottom:84px}
  html:root .tb-c{padding:14px;border-radius:14px}
}
@media (max-width:520px){
  html:root body>.as-btn{right:10px;bottom:10px}
  html:root body.tb-on>.as-btn{bottom:80px}
}

/* Celular (docente, estudiante y acudiente): el pie de la Secretaría (su logo y el texto)
   quedaba pintado encima de la barra de abajo. Ahora va detrás de la barra y termina
   justo arriba de ella, sin el espacio vacío que dejaba el contenido. (13 oct 2026) */
@media (max-width:860px){
  html:root body.tb-on>.mc-pie{z-index:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  html:root body.tb-on .tb-main{padding-bottom:16px}
}