/* =========================================================================
   MINIMAL · apps de corrección · Iago, 18-sep-2026
   Hoja PURAMENTE AÑADIDA: se carga la última y no toca styles.css ni tema.css.
   Quitar el <link> y el <script> devuelve la app exactamente a como estaba.

   El mismo lenguaje del Diario:
     · una sola escala de esquinas
     · un icono → botón 1×1; lo secundario, solo icono con rótulo al pasar
     · contorno entero (nunca la barra lateral izquierda, que ya es obsoleta)
     · cada app en SU color: --tono (arriba del todo). Es lo único que cambia
       entre las seis.
   ========================================================================= */
:root{
  --r-pastilla: 6px; --r-boton: 8px; --r-caja: 10px; --r-tarjeta: 14px; --r-modal: 16px;
  --btn-1x1: 40px; --btn-2car: 54px;
  --tono: #3b82f6; --tono-claro: #60a5fa; --tono-oscuro: #1e40af; --tono-tinta: #03111f;
  --tono-suave: rgba(59,130,246,.12); --tono-borde: rgba(59,130,246,.45);
  --tono-grad-a: rgba(59,130,246,.14); --tono-grad-b: rgba(59,130,246,.03);
}

/* ---------- escala de esquinas, una sola ------------------------------- */
.btn, input, select, textarea, .chip, .tick, .resta-btn, .otro-pill,
.pen-pills .chip, .otro-pills .chip{ border-radius: var(--r-boton) !important; }
.card, .card-dense, .card-ritmo, .grupo-big, .btn-grupo, .pres-tile,
.alumno-card, .sig-box, .flu-compact, .sliderv, .pareja-grid{ border-radius: var(--r-tarjeta) !important; }
.chip-trim-actual, .badge, .pill, .chip-prog, .chip-leccion{ border-radius: var(--r-pastilla) !important; }
.modal-box, .modal-otro-box{ border-radius: var(--r-modal) !important; }

/* El borde lateral izquierdo es obsoleto: contorno entero */
.grupo-big::before, #btn-corregir-manual::before,
.card::before, .card-dense::before, .card-ritmo::before{ display: none !important; }
#grupos-home .grupo-big{ border-width: 2px !important; border-left-width: 2px !important; }
.card, .card-dense, .card-ritmo{ border-left-width: 1px !important; }

/* ---------- 1) PORTADA: todo en una pantalla --------------------------- */
#view-home .app-header{
  display: flex !important; align-items: center; gap: 10px;
  width: auto !important; margin: 0 0 14px !important;
  padding: 10px 0 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: none !important; text-align: left !important;
  flex-wrap: nowrap !important; justify-content: flex-start !important;
}
#view-home .app-header::before{ display: none !important; }
#view-home .app-header h1{
  flex: 1 1 auto;
  font-size: 23px !important; font-weight: 800 !important;
  letter-spacing: .01em !important; line-height: 1.1 !important;
  background: none !important; -webkit-background-clip: border-box !important;
  background-clip: border-box !important; color: #f4f7fb !important;
  margin: 0 !important; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
#view-home .app-header h1 .app-suf{ color: var(--tono-claro) !important; font-size: 23px !important; }
/* la fecha no hace falta: ya la sé */
#view-home .app-header .sub{ display: none !important; }
#view-home .app-header .chip-trim-actual{
  margin-left: auto; flex: 0 0 auto;
  height: var(--btn-1x1); min-width: var(--btn-2car); padding: 0 10px !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0 !important;
  border: 1px solid rgba(74,222,128,.45); background: rgba(74,222,128,.12);
}
#view-home .app-header .chip-trim-actual[hidden]{ display: none !important; }
#view-home .app-header .chip-trim-actual strong{ font-size: 13.5px; font-weight: 800; color: #86efac; }

/* Los grupos, EN CUADRADOS: se ven todos de un golpe */
#grupos-home{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
#grupos-home .grupo-big{
  margin: 0 !important; aspect-ratio: 1 / 1; min-height: 0 !important;
  padding: 14px !important;
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  text-align: center !important;
}
#grupos-home .grupo-big .name{
  font-size: clamp(22px, 7vw, 34px) !important; font-weight: 800 !important;
  line-height: 1; letter-spacing: -.02em;
}
#grupos-home .grupo-big .meta{ font-size: 12px !important; color: rgba(232,238,245,.5) !important; }
@media (min-width: 720px){
  #grupos-home{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  #grupos-home .grupo-big{ max-width: 240px; }
}
/* La corrección manual no es lo de cada día: abajo, con los otros iconos */
#view-home .btn-row #btn-corregir-manual{
  order: -1;
  width: var(--btn-1x1) !important; min-width: var(--btn-1x1) !important;
  height: var(--btn-1x1) !important; min-height: var(--btn-1x1) !important;
  aspect-ratio: auto !important;
  padding: 0 !important; flex: 0 0 auto !important; margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: transparent !important; color: #e8eef5 !important;
  border-radius: var(--r-boton) !important;
  opacity: .62; transition: opacity .15s, background .15s;
}
#view-home .btn-row #btn-corregir-manual:hover{ opacity: 1; background: rgba(255,255,255,.07) !important; }
#view-home .btn-row #btn-corregir-manual::before{
  content: '\270D' !important; font-size: 18px !important;
  display: inline !important;            /* la regla del contorno lo apagaba */
  position: static !important; inset: auto !important; background: none !important;
  padding: 0 !important; border: 0 !important; opacity: 1 !important;
  -webkit-mask: none !important; mask: none !important;
}
#view-home .btn-row #btn-corregir-manual::after{ border: 0; }
#view-home .btn-row #btn-corregir-manual .name,
#view-home .btn-row #btn-corregir-manual .meta{ display: none !important; }
#view-home .btn-row{ justify-content: flex-end; }

/* Los botones de abajo: solo el icono, con el rótulo al pasar el ratón */
#view-home .btn-row{
  display: flex !important; gap: 8px; justify-content: flex-end;
  margin-top: 14px !important;
}
#view-home .btn-row .btn{
  width: var(--btn-1x1) !important; min-width: var(--btn-1x1) !important;
  height: var(--btn-1x1) !important; min-height: var(--btn-1x1) !important;
  padding: 0 !important; flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: transparent !important; color: #e8eef5 !important;
  opacity: .62; transition: opacity .15s, background .15s;
}
#view-home .btn-row .btn:hover{ opacity: 1; background: rgba(255,255,255,.07) !important; }
#view-home #btn-ir-gestion::before{ content: '\2699'; font-size: 19px; }
#view-home #btn-abrir-pantalla::before{ content: '\1F5A5'; font-size: 17px; }

/* rótulo al pasar el ratón, igual que en el Diario: instantáneo */
@media (hover: hover) and (pointer: fine){
  .m-tip{ position: relative; }
  .m-tip::after{
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    padding: 6px 10px; border-radius: var(--r-boton);
    background: #0b1220; border: 1px solid rgba(255,255,255,.14);
    color: #e8eef5; font-size: 12px; font-weight: 600; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity .08s;
    z-index: 200; box-shadow: 0 8px 22px -8px rgba(0,0,0,.75);
  }
  .m-tip:hover::after{ opacity: 1; }
  .m-tip.m-tip-der::after{ left: auto; right: 0; transform: none; }
}

/* ---------- 2) CORREGIR ------------------------------------------------ */
/* cabecera compacta */
#view-rubrica .rubric-header, #view-evaluacion .eval-header{
  padding: 10px 12px !important;
  border-radius: var(--r-tarjeta) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.nota-inline{
  border: 1px solid var(--tono-borde) !important;
  background: var(--tono-suave) !important;
  border-radius: var(--r-boton) !important;
  padding: 4px 12px !important;
}
.nota-inline .num{ font-variant-numeric: tabular-nums; }
.nota-inline.m-alta .num  { color: #4ade80 !important; }
.nota-inline.m-media .num { color: #fbbf24 !important; }
.nota-inline.m-baja .num  { color: #f87171 !important; }

/* Armadura y Compás: sin emoticono, el color ya lo dice */
#view-rubrica .chip-row .emoji{ display: none !important; }
#view-rubrica .chips-vert{ display: flex !important; flex-direction: row !important; gap: 8px; }
#view-rubrica .chip-row{
  flex: 1 1 0; min-width: 0; height: 46px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
  font-size: 14px; font-weight: 800;
}
#view-rubrica .chip-row[data-val="1"].sel{
  border-color: rgba(74,222,128,.65) !important;
  background: rgba(74,222,128,.18) !important; color: #bbf7d0 !important;
}
#view-rubrica .chip-row[data-val="0"].sel{
  border-color: rgba(248,113,113,.65) !important;
  background: rgba(248,113,113,.18) !important; color: #fecaca !important;
}
.cat-lbl, .cat-lbl-full, .cat-lbl-small, .sv-titulo, .cr-titulo, .pen-titulo{
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: rgba(232,238,245,.5) !important;
}
.cr-titulo-sub, .flu-compact-sub, .cat-lbl-full .dim{ font-size: 10.5px !important; }
#view-rubrica .hint-presentacion{ display: none !important; }

/* la fila de acción va al final: primero se corrige, luego se pasa */
.m-fila-abajo{ order: 99; margin-top: 4px !important; }

/* --- LA FILA DE ACCIÓN: ← Anterior · 🚫 · Siguiente → · 🚪 -------------- */
.btn-row-duo{
  display: flex !important; align-items: stretch !important;
  gap: 8px !important; margin: 12px 0 14px !important;
  grid-template-columns: none !important;
}
.btn-row-duo > *{ margin: 0 !important; }
.btn-row-secundaria{ display: none !important; }
.btn-row-secundaria.m-viva{ display: flex !important; }

.m-ant{
  flex: 0 0 auto !important; width: auto !important;
  height: 52px !important; min-height: 52px !important;
  padding: 0 14px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important; color: rgba(232,238,245,.55) !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  border-radius: var(--r-boton) !important;
}
.m-ant:hover{ color: #e8eef5 !important; background: rgba(255,255,255,.05) !important; }
.m-novino{
  width: var(--btn-1x1) !important; min-width: var(--btn-1x1) !important;
  height: 52px !important; padding: 0 !important; flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;
  border: 1px solid rgba(248,113,113,.45) !important;
  background: rgba(248,113,113,.10) !important;
  border-radius: var(--r-boton) !important;
}
.m-novino::before{ content: '\1F6AB'; font-size: 17px; }
.m-sigue{
  flex: 1 1 auto !important; width: auto !important;
  height: 52px !important; min-height: 52px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 16px !important; font-weight: 800 !important; white-space: nowrap;
  border-radius: var(--r-boton) !important;
}
.m-salir{
  flex: 0 0 auto !important;
  width: 52px !important; min-width: 52px !important;
  height: 52px !important; min-height: 52px !important;
  padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 20px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important;
  border-radius: var(--r-boton) !important;
}
.m-salir:hover{ background: rgba(255,255,255,.07) !important; }
/* la app esconde y enseña estos botones sola: que pueda seguir haciéndolo */
.m-ant[style*="none"], .m-novino[style*="none"], .m-sigue[style*="none"],
.m-salir[style*="none"], .btn-row-duo [hidden], .btn-row-duo .hidden{ display: none !important; }

/* --- Los deslizadores, en el color de la app --------------------------- */
input[type="range"]{ accent-color: var(--tono-claro); }
input[type="range"]::-webkit-slider-thumb{
  background: var(--tono-claro) !important;
  border: 2px solid var(--tono-oscuro) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
input[type="range"]::-moz-range-thumb{
  background: var(--tono-claro) !important; border: 2px solid var(--tono-oscuro) !important;
}
.slider-val .pct, .sv-val, .cr-val, .flu-compact-txt{ color: var(--tono-claro) !important; }

/* --- Penalizaciones: a la vista, pero ordenadas ------------------------ */
.pres-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
}
.pres-tile{
  min-height: 46px !important; padding: 8px 10px !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  border-radius: var(--r-boton) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
}
.pres-tile .pres-label{
  font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important;
  flex: 1 1 auto; min-width: 0;
}
.pres-tile .pres-resta{
  flex: 0 0 auto; font-size: 11.5px !important; font-weight: 800 !important;
  color: rgba(232,238,245,.45) !important; font-variant-numeric: tabular-nums;
}
.pres-tile.sel{ border-color: var(--tono-borde) !important; background: var(--tono-suave) !important; }
.pres-tile.sel .pres-label, .pres-tile.sel .pres-resta{ color: var(--tono-claro) !important; }

.pres-sub{
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin-top: 10px !important; padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important; flex-wrap: wrap;
}
.otro-input{
  flex: 1 1 130px; min-width: 110px;
  height: 38px !important; padding: 0 10px !important; font-size: 13px !important;
  border-radius: var(--r-boton) !important;
}
.resta-btns{ display: flex !important; gap: 6px !important; margin: 0 !important; flex-wrap: wrap; }
.resta-btn{
  width: 54px !important; min-width: 54px !important;
  height: 38px !important; min-height: 38px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: var(--r-boton) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
  font-size: 13px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums;
}
.resta-btn.sel{
  border-color: rgba(248,113,113,.55) !important;
  background: rgba(248,113,113,.16) !important; color: #fecaca !important;
}
/* penalizaciones de RITMO (pen-pills) y de ENTONACIÓN (otro-pills) */
.pen-rows .pen-row-duo, .pen-rows .pen-row-half, .pen-rows .pen-row-new{ gap: 8px !important; }
.pen-name{ font-size: 13px !important; font-weight: 700 !important; }
.pen-pills .chip, .otro-pills .chip{
  min-height: 38px !important; padding: 0 12px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
  font-size: 13px !important; font-weight: 800 !important;
}
.pen-pills .chip.sel, .otro-pills .chip.sel{
  border-color: rgba(248,113,113,.55) !important;
  background: rgba(248,113,113,.16) !important; color: #fecaca !important;
}
.flu-compact{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
  padding: 12px !important;
}
.sig-box{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.025) !important;
  padding: 10px 12px !important;
}
.sig-lbl{
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: rgba(232,238,245,.45) !important;
}
.sig-nombre{ font-size: 15px !important; font-weight: 800 !important; }

/* ---------- 3) RESUMEN FINAL ------------------------------------------- */
#view-fin .fin-header{
  display: flex !important; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px !important; padding: 0 0 12px !important;
  background: none !important;
  border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important;
  width: auto !important; text-align: left !important;
}
#view-fin .fin-header::before{ display: none !important; }
#view-fin .fin-header h1{
  font-size: 23px !important; font-weight: 800 !important;
  letter-spacing: .01em !important; margin: 0 !important;
  background: none !important; -webkit-background-clip: border-box !important;
  background-clip: border-box !important; color: #f4f7fb !important;
}
#view-fin .fin-header .sub{
  margin: 0 !important; font-size: 12px !important; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(232,238,245,.45) !important;
}
#view-fin .resumen-table{
  width: 100%; border-collapse: separate; border-spacing: 0 6px;
  flex: 0 0 auto !important;
}
#view-fin .resumen-table tbody{ display: table-row-group; }
#view-fin .resumen-table tr{ background: rgba(255,255,255,.035); }
#view-fin .resumen-table td{
  padding: 11px 13px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  font-size: 14.5px;
}
#view-fin .resumen-table td:first-child{
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--r-boton) 0 0 var(--r-boton); font-weight: 700;
}
#view-fin .resumen-table td:last-child{
  border-right: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 var(--r-boton) var(--r-boton) 0; text-align: right;
}
#view-fin .resumen-table td.nota-td{
  font-size: 19px !important; font-weight: 900 !important;
  font-variant-numeric: tabular-nums; width: 92px;
}
#view-fin .fin-microcopy{
  font-size: 12.5px !important; color: rgba(232,238,245,.45) !important;
  margin: auto 0 10px !important;
}
#view-fin #btn-fin-confirmar{
  width: 100%; height: 56px !important; min-height: 56px !important;
  font-size: 16px !important; font-weight: 800 !important;
  background: var(--tono) !important;
  border: 1px solid var(--tono-oscuro) !important;
  color: var(--tono-tinta) !important;
  border-radius: var(--r-boton) !important;
}

/* ---------- 4) LA PANTALLA DEL AULA (iPad) ----------------------------- */
body.pantalla .pantalla-header, body .pantalla-header{
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 10px clamp(14px, 2.5vw, 28px) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(9,16,27,.88) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pantalla-header h1{
  font-size: 19px !important; font-weight: 900 !important;
  letter-spacing: .01em !important; margin: 0 !important;
  background: none !important; -webkit-background-clip: border-box !important;
  background-clip: border-box !important; color: #f4f7fb !important; white-space: nowrap;
}
.pantalla-header h1 .app-suf{ color: var(--tono-claro) !important; }
.pantalla-header .fecha{
  margin-left: auto; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(232,238,245,.45);
}
.switch-grupo{ display: flex; gap: 8px; }
.switch-grupo button{
  height: var(--btn-1x1); min-width: var(--btn-2car); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-boton) !important;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03); color: rgba(232,238,245,.7);
  font-size: 14px; font-weight: 800; cursor: pointer;
}
.switch-grupo button.on{
  border-color: var(--tono-borde); background: var(--tono-suave); color: var(--tono-claro);
}
.foto-panel{
  border-radius: var(--r-tarjeta) !important;
  border: 2px solid var(--tono-borde) !important;
  background: linear-gradient(135deg, var(--tono-grad-a), var(--tono-grad-b)) !important;
  overflow: hidden;
}
.alumno-card{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.035) !important;
  padding: 10px 12px !important;
}
.alumno-card::before{ display: none !important; }
.alumno-card .nombre{
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: .01em; color: #e8eef5 !important;
}
.alumno-card .nota-grande{ font-size: 30px !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; }
/* la misma convención en todas partes: verde / ámbar / rojo */
.alumno-card .nota-grande.alta { color: #4ade80 !important; }
.alumno-card .nota-grande.media{ color: #fbbf24 !important; }
.alumno-card .nota-grande.baja { color: #f87171 !important; }
.alumno-card .nota-grande.pendiente{ color: rgba(232,238,245,.3) !important; font-size: 22px !important; }
.alumno-card .nota-grande.nv{ color: rgba(232,238,245,.45) !important; font-size: 15px !important; }
.alumno-card .desglose .linea{ display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.alumno-card .desglose .cat{
  color: rgba(232,238,245,.45); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px;
}
.alumno-card .desglose .val{ margin-left: auto; font-weight: 800; }

/* ---------- 5) GESTIÓN ------------------------------------------------- */
#view-gestion .app-header{
  display: flex !important; align-items: center; gap: 10px;
  padding: 10px 0 12px !important; margin: 0 0 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: none !important; text-align: left !important;
}
#view-gestion .app-header h1{
  font-size: 23px !important; font-weight: 800 !important; margin: 0 !important;
  background: none !important; -webkit-background-clip: border-box !important;
  background-clip: border-box !important; color: #f4f7fb !important;
}

/* ---------- 6) el móvil manda: nada se sale de la pantalla ------------- */
@media (max-width: 520px){
  #grupos-home{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pres-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .m-ant{ padding: 0 10px !important; font-size: 0 !important; width: 52px !important; }
  .m-ant::before{ content: '\2190'; font-size: 18px; font-weight: 700; }
}

/* =========================================================================
   (18-sep-2026, 2ª vuelta con Iago) MENOS TEXTO, MÁS BOTÓN
   «Todo lo que se pueda minimalizar así, y que pulsando aparezcan opciones,
   es mejor.» Tres pantallas repasadas: empezar, corregir y la cabecera.
   ========================================================================= */

/* ---------- EMPEZAR CORRECCIÓN: una línea y el dictado --------------------
   Fuera el título «Corregir 4Ge-A», el párrafo explicativo y la fecha: eso
   ya lo sabe. Arriba, en una sola línea: grupo · alumnos · tipo de sesión. */
#view-confirmar .app-header,
#view-leccion .app-header{ display: none !important; }
#view-confirmar .mx-fuera,
#view-leccion .mx-fuera{ display: none !important; }   /* el párrafo explicativo y la fecha */
#view-confirmar #da-check,
#view-leccion #da-check{ display: none !important; }
#view-confirmar #card-dictado-activo #da-mini,
#view-leccion #card-dictado-activo #da-mini{
  max-height: 42vh; object-fit: contain; background: rgba(255,255,255,.04);
}
#view-confirmar #eval-tipo-hint,
#view-leccion #eval-tipo-hint{ display: none !important; }
#view-confirmar #field-numero > .dim,
#view-leccion #field-numero > .dim,
#view-confirmar #card-foto > .dim,
#view-leccion #card-foto > .dim,
#view-confirmar #field-numero > h2,
#view-leccion #field-numero > h2,
#view-confirmar #card-foto > h2,
#view-leccion #card-foto > h2{ font-size: 13px !important; }
#view-confirmar #field-numero > p.dim,
#view-leccion #field-numero > p.dim,
#view-confirmar #card-foto > p.dim,
#view-leccion #card-foto > p.dim{ display: none !important; }

/* la línea de arriba, la monta minimal.js */
.mx-linea{
  display: flex !important; align-items: center; gap: 10px;
  margin: 0 0 14px !important; padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  flex-wrap: nowrap;
}
.mx-linea .mx-grupo{
  font-size: 23px !important; font-weight: 800 !important;
  color: #f4f7fb; letter-spacing: -.01em; white-space: nowrap;
}
.mx-linea .mx-alumnos{
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(232,238,245,.45); white-space: nowrap;
}
.mx-linea .mx-tipo{
  margin-left: auto; flex: 0 0 auto;
  height: var(--btn-1x1); padding: 0 12px;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-boton);
  border: 1px solid var(--tono-borde);
  background: var(--tono-suave);
  color: var(--tono-claro);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.mx-linea .mx-tipo:hover{ filter: brightness(1.15); }
.mx-linea .mx-tipo .mx-caret{ opacity: .7; font-size: 11px; }
.mx-linea .mx-tipo.abierto .mx-caret{ transform: rotate(180deg); }

/* el bloque de tipos, escondido hasta que lo pida */
#view-confirmar .card-eval-tipo,
#view-leccion .card-eval-tipo{ display: none !important; }
body.mx-tipos #view-confirmar .card-eval-tipo,
body.mx-tipos #view-leccion .card-eval-tipo{ display: block !important; }
#view-confirmar .card-eval-tipo > h2,
#view-leccion .card-eval-tipo > h2{ display: none !important; }
#view-confirmar .eval-tipo-tile .et-sub,
#view-leccion .eval-tipo-tile .et-sub{ font-size: 11px !important; }

/* el dictado preparado: título, foto y «Cambiar» discreto. Nada más. */
#view-confirmar #card-dictado-activo #da-info,
#view-leccion #card-dictado-activo #da-info,
#view-confirmar #card-dictado-activo #da-estado,
#view-leccion #card-dictado-activo #da-estado{ display: none !important; }
#view-confirmar #card-dictado-activo > h2,
#view-leccion #card-dictado-activo > h2{
  font-size: 17px !important; margin: 0 0 10px !important;
  color: var(--tono-claro) !important;
}
#view-confirmar #card-dictado-activo #da-mini,
#view-leccion #card-dictado-activo #da-mini{
  margin-top: 0 !important; border-color: var(--tono-borde) !important;
}
#view-confirmar #btn-cambiar-dictado,
#view-leccion #btn-cambiar-dictado{
  margin-top: 10px !important;
  height: 36px; padding: 0 12px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  color: rgba(232,238,245,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important;
  border-radius: var(--r-boton) !important;
}
#view-confirmar #btn-cambiar-dictado:hover,
#view-leccion #btn-cambiar-dictado:hover{ color: #e8eef5 !important; background: rgba(255,255,255,.05) !important; }
#view-confirmar #btn-confirmar-iniciar,
#view-leccion #btn-confirmar-iniciar{
  width: 100%; height: 56px !important; min-height: 56px !important;
  font-size: 16px !important; font-weight: 800 !important;
  background: var(--tono) !important;
  border: 1px solid var(--tono-oscuro) !important;
  color: var(--tono-tinta) !important;
  border-radius: var(--r-boton) !important;
  margin-top: 14px !important;
}
#view-confirmar #btn-confirmar-cancelar,
#view-leccion #btn-confirmar-cancelar{
  width: 100%; margin-top: 8px !important;
  color: rgba(232,238,245,.5) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--r-boton) !important;
}

/* ---------- CABECERA DEL ALUMNO: el nombre, 1/12 y el 🚫 ----------------- */
.rubric-header .alumno-name, .eval-header .alumno-name{
  font-size: 19px !important; font-weight: 800 !important; line-height: 1.15;
}
.rubric-header .progreso, .eval-header .chip-prog{
  font-size: 12.5px !important; font-weight: 800 !important;
  color: rgba(232,238,245,.45) !important;
  font-variant-numeric: tabular-nums;
}
/* el «no vino» sube aquí: es una decisión sobre ESTE alumno */
.m-novino-cab{
  width: 40px !important; min-width: 40px !important;
  height: 40px !important; min-height: 40px !important;
  padding: 0 !important; flex: 0 0 auto !important; margin: 0 0 0 10px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;
  border: 1px solid rgba(248,113,113,.45) !important;
  background: rgba(248,113,113,.10) !important;
  border-radius: var(--r-boton) !important;
}
.m-novino-cab::before{ content: '\1F6AB'; font-size: 17px; }
.m-novino-cab[style*="none"]{ display: none !important; }
.rubric-header .rh-right, .eval-header .eh-right{
  display: flex !important; align-items: center; gap: 0;
}

/* ---------- LA FILA DE ABAJO: ← · 🚪 · Siguiente (a la derecha) ---------- */
/* «El botón de la puerta me genera peligro»: pide confirmación. */
.m-salir.m-confirmar{
  width: auto !important; min-width: 0 !important; padding: 0 14px !important;
  font-size: 13px !important; font-weight: 800 !important;
  border-color: rgba(248,113,113,.65) !important;
  background: rgba(248,113,113,.16) !important;
  color: #fecaca !important;
}


/* =========================================================================
   (18-sep-2026, 3ª vuelta) TODO EN LA PRIMERA PANTALLA
   «Los grupos pueden ser un selector arriba, integrados en la misma línea
   donde está lo de sesión normal y el trimestre. Y que no te deje empezar
   hasta que hayas marcado uno: con cierto tintineo sutil.»
   ========================================================================= */
/* los cuadros grandes ya no hacen falta: el selector está arriba */
#view-home #grupos-home{ display: none !important; }
#view-home .app-header{ margin-bottom: 8px !important; padding-bottom: 8px !important; }
.mx-linea-home{ margin-bottom: 14px !important; }
.mx-linea .mx-hueco{ flex: 1 1 auto; }

.mx-grupos{ display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mx-grupo{
  height: var(--btn-1x1); padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-boton);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(232,238,245,.72);
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.mx-grupo:hover{ background: rgba(255,255,255,.08); color: #e8eef5; }
.mx-grupo.sel{
  border-color: var(--tono-borde);
  background: var(--tono-suave);
  color: var(--tono-claro);
}
/* hasta que no elija grupo, tintinean: se nota que falta ese paso */
.mx-falta-grupo .mx-grupo{ animation: mxLatir 1.9s ease-in-out infinite; }
.mx-falta-grupo .mx-grupo:nth-child(2){ animation-delay: .25s; }
.mx-falta-grupo .mx-grupo:nth-child(3){ animation-delay: .5s; }
.mx-falta-grupo .mx-grupo:nth-child(4){ animation-delay: .75s; }
@keyframes mxLatir{
  0%,100%{ border-color: rgba(255,255,255,.14); box-shadow: none; }
  50%    { border-color: var(--tono-borde); box-shadow: 0 0 0 3px var(--tono-suave); }
}
@media (prefers-reduced-motion: reduce){ .mx-falta-grupo .mx-grupo{ animation: none; } }

/* el nombre del grupo ya lo dice el chip encendido */
#view-confirmar .mx-linea .mx-grupo-nom,
#view-leccion .mx-linea .mx-grupo-nom{ display: none; }
#view-confirmar .mx-linea,
#view-leccion .mx-linea{ gap: 8px; }
#view-confirmar .mx-linea .mx-alumnos,
#view-leccion .mx-linea .mx-alumnos{ margin-right: auto; }

/* =========================================================================
   4ª VUELTA (18-sep-2026, Iago)
   «Pon en la misma línea cuarto A, cuarto B, botón manual, ajustes. Y lo de
   clase normal. Todo en la misma hilera. Y que sean botones cuadrados y
   suficientemente grandes. No hace falta que pongas cuarto G, E, A: lo de
   G, E no hay que ponerlo, solo se pone en G, P. Y debajo de eso ya pones el
   dictado que está precargado.»
   ========================================================================= */
:root{ --btn-cuadro: 60px; }

/* la hilera respira más y ya no lleva línea de separación pegada */
.mx-linea{ gap: 8px !important; padding-bottom: 14px !important; }

/* los grupos: CUADRADOS y grandes */
.mx-grupos{ gap: 8px !important; }
.mx-linea .mx-grupo,
.mx-grupo{
  width: var(--btn-cuadro) !important; min-width: var(--btn-cuadro) !important;
  height: var(--btn-cuadro) !important;
  padding: 0 !important;
  border-radius: var(--r-boton) !important;
  font-size: 19px !important; font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: rgba(232,238,245,.72) !important;
}
.mx-linea .mx-grupo.sel, .mx-grupo.sel{ color: var(--tono-claro) !important; }

/* manual y ajustes: los mismos cuadrados, en la misma hilera */
.mx-linea .mx-cuadro{
  width: var(--btn-cuadro) !important; min-width: var(--btn-cuadro) !important;
  height: var(--btn-cuadro) !important; min-height: var(--btn-cuadro) !important;
  aspect-ratio: auto !important;
  padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: #e8eef5 !important;
  border-radius: var(--r-boton) !important;
  opacity: .70; transition: opacity .15s, background .15s;
  position: relative;
}
.mx-linea .mx-cuadro:hover{ opacity: 1; background: rgba(255,255,255,.08) !important; }
.mx-linea .mx-cuadro .name, .mx-linea .mx-cuadro .meta{ display: none !important; }
.mx-linea .mx-cuadro::after{ border: 0 !important; content: none !important; }
.mx-linea .mx-manual::before{
  content: '\270D' !important; font-size: 22px !important;
  display: inline !important; position: static !important; inset: auto !important;
  background: none !important; padding: 0 !important; border: 0 !important;
  opacity: 1 !important; -webkit-mask: none !important; mask: none !important;
}
.mx-linea .mx-ajustes::before{
  content: '\2699' !important; font-size: 23px !important;
  display: inline !important; position: static !important; inset: auto !important;
  background: none !important; padding: 0 !important; border: 0 !important;
  opacity: 1 !important;
}

/* el de la sesión, a la derecha y con la misma altura */
.mx-linea .mx-tipo{
  height: var(--btn-cuadro) !important; padding: 0 16px !important;
  font-size: 14px !important; border-radius: var(--r-boton) !important;
  margin-left: auto !important;
}
/* mientras no haya grupo elegido, está esperando */
.mx-linea .mx-tipo.mx-espera{
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(232,238,245,.45) !important;
}

/* el botón de la pantalla del iPad sobra: en el móvil no se usa */
#view-home .btn-row #btn-abrir-pantalla,
#view-home #btn-abrir-pantalla,
#btn-abrir-pantalla{ display: none !important; }
/* y la fila de abajo de la portada se queda vacía */
#view-home .btn-row{ display: none !important; }

/* el tintineo, también con los cuadrados grandes */
@keyframes mxLatir{
  0%,100%{ border-color: rgba(255,255,255,.14); box-shadow: none; }
  50%    { border-color: var(--tono-borde); box-shadow: 0 0 0 4px var(--tono-suave); }
}

/* en pantallas estrechas, que la hilera pueda partirse antes que desbordar */
@media (max-width: 560px){
  :root{ --btn-cuadro: 54px; }
  .mx-linea{ flex-wrap: wrap !important; }
  .mx-linea .mx-alumnos{ order: 9; width: 100%; margin: 2px 0 0 !important; }
}

/* «12 alumnos» es un dato, no un empujador: que no se coma la hilera */
.mx-linea .mx-alumnos{ flex: 0 0 auto !important; margin-right: 0 !important; margin-left: 10px !important; }
.mx-linea .mx-hueco{ display: none !important; }

/* el icono de la corrección manual: hay que ganarle a la regla del contorno
   y a la de los botones de abajo, que son más específicas */
#mx-linea .mx-manual::before, #mx-linea-home .mx-manual::before,
.mx-linea #btn-corregir-manual::before{
  content: '\270D' !important; font-size: 22px !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  position: static !important; inset: auto !important; background: none !important;
  padding: 0 !important; border: 0 !important; opacity: 1 !important; color: #e8eef5 !important;
  -webkit-mask: none !important; mask: none !important; width: auto !important; height: auto !important;
}
#mx-linea .mx-ajustes::before, #mx-linea-home .mx-ajustes::before,
.mx-linea #btn-ir-gestion::before{
  content: '\2699' !important; font-size: 23px !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  position: static !important; inset: auto !important; background: none !important;
  padding: 0 !important; border: 0 !important; opacity: 1 !important; color: #e8eef5 !important;
}
.mx-linea #btn-corregir-manual::after, .mx-linea #btn-ir-gestion::after{ content: none !important; border: 0 !important; }
.mx-linea #btn-corregir-manual .name, .mx-linea #btn-corregir-manual .meta,
.mx-linea #btn-ir-gestion .name, .mx-linea #btn-ir-gestion .meta{ display: none !important; }

/* -------- retoques del 18-sep por la tarde (Iago, sobre el iPhone) -------- */
/* «Ya no necesito que pongas primer trimestre arriba» */
#chip-trim-actual{ display: none !important; }
#view-home .app-header{ padding-bottom: 6px !important; }

/* La hilera NO se parte: en el iPhone cabe entera si se aprieta un poco */
.mx-linea{ flex-wrap: nowrap !important; }
.mx-linea .mx-tipo{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px){
  :root{ --btn-cuadro: 52px; }
  .mx-linea{ gap: 6px !important; }
  .mx-grupos{ gap: 6px !important; }
  .mx-linea .mx-tipo{ padding: 0 12px !important; font-size: 13px !important; }
  .mx-linea .mx-alumnos{ display: none !important; }   /* el número de alumnos ya lo dice la pantalla siguiente */
}
@media (max-width: 400px){
  :root{ --btn-cuadro: 48px; }
  .mx-linea .mx-grupo{ font-size: 17px !important; }
  .mx-linea .mx-tipo{ padding: 0 10px !important; font-size: 12.5px !important; }
}

/* el grupo que toca AHORA, según el horario: un punto y ya */
.mx-grupo.mx-ahora{ position: relative; }
.mx-grupo.mx-ahora::after{
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tono-claro); box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

/* el ejercicio cargado, ya en la portada */
#view-home #card-dictado-activo.mx-dictado-home{ display: block !important; margin-top: 12px; }
#view-home #card-dictado-activo.mx-dictado-home #da-check{ display: none !important; }
#view-home #card-dictado-activo.mx-dictado-home #da-mini{ max-height: 42vh; object-fit: contain; }
/* en la portada, el ejercicio con el mismo aire que en la pantalla siguiente */
#view-home #card-dictado-activo.mx-dictado-home #da-info{ display: none !important; }
#view-home #card-dictado-activo.mx-dictado-home > p.dim{ display: none !important; }

/* ajustes pegado a la derecha, junto al botón de la sesión */
.mx-linea .mx-ajustes{ margin-left: auto !important; }
.mx-linea .mx-tipo{ margin-left: 0 !important; }

/* =========================================================================
   5ª VUELTA (18-sep-2026, tarde)
   ========================================================================= */
/* el menú del tipo de sesión, por encima y sin mover nada de lo de abajo */
.mx-linea{ position: relative; }
.mx-menu{
  position: absolute; top: calc(100% - 6px); right: 0; z-index: 90;
  min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: var(--r-modal);
  border: 1px solid rgba(255,255,255,.14);
  background: #12151c;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.85);
}
.mx-menu-op{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: var(--r-boton);
  background: transparent; color: rgba(232,238,245,.82);
  font-family: inherit; font-size: 14px; font-weight: 700;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.mx-menu-op:hover{ background: rgba(255,255,255,.06); color: #e8eef5; }
.mx-menu-op.sel{ background: var(--tono-suave); color: var(--tono-claro); }
.mx-menu-emo{ font-size: 16px; line-height: 1; }
.mx-tipo.abierto .mx-caret{ transform: rotate(180deg); }
/* el bloque de tipos de abajo ya no se despliega nunca: está en el menú */
#view-confirmar .card-eval-tipo,
#view-leccion .card-eval-tipo,
body.mx-tipos #view-confirmar .card-eval-tipo,
body.mx-tipos #view-leccion .card-eval-tipo{ display: none !important; }

/* «no necesito ese texto en verde»: con el título y la foto me sobra */
#da-estado{ display: none !important; }

/* el pestañeo al cambiar de grupo, tapado */
#view-confirmar > .container,
#view-leccion > .container,
#view-home > .container{ transition: opacity .12s ease; }
body.mx-cambiando #view-confirmar > .container,
body.mx-cambiando #view-leccion > .container,
body.mx-cambiando #view-home > .container{ opacity: 0 !important; }
body.mx-cambiando #mx-linea, body.mx-cambiando #mx-linea-home{ opacity: 1 !important; }

/* =========================================================================
   LAS OTRAS APPS (Entonación · Ritmo · Ritmo entonado · Fichas)
   (18-sep-2026, Iago) «En el momento en que defino qué grupo es, se despliega
   muchísima información que no me interesa. Solo quiero ver Lección activa ·
   Lección 1 y poquito más. Y la parte de arriba, la misma de la pantalla
   anterior. Nada de textos explicativos, nada de volver a poner el tipo de
   evaluación en ese formato antiguo.»
   ========================================================================= */
/* la cabecera grande sobra: la hilera de arriba ya dice el grupo */
#view-leccion .app-header{ display: none !important; }
/* los dos párrafos de «cómo funciona esto», fuera */
#view-leccion > .container > .card > p.dim{ display: none !important; }
/* el aviso largo de «Marcado en la preparación de clases», fuera */
#view-leccion .card-eval-tipo,
#view-leccion #eval-tipo-hint,
#view-leccion .eval-tipo-hint{ display: none !important; }

/* la tarjeta de la lección activa, al mismo aire que la del dictado */
#card-leccion-activa{
  margin: 0 !important;
  padding: 14px 15px !important;
}
#card-leccion-activa > h2{
  font-size: 17px !important; margin: 0 0 8px !important;
  display: flex; align-items: center; gap: 8px;
}
#card-leccion-activa .mx-lae-num{
  font-size: 22px !important; font-weight: 800 !important;
  color: var(--tono-claro) !important;
  margin: 0 0 10px !important; letter-spacing: -.01em;
}
#card-leccion-activa .mx-lae-num:empty{ display: none !important; }
#card-leccion-activa #lae-estado{ display: none !important; }
/* «Usar esta lección» es lo normal: que sea el botón de siempre, y «Cambiar»
   se queda discreto, como en el dictado */
#card-leccion-activa .mx-usar-leccion{ width: 100%; }
#view-leccion #btn-cambiar-leccion,
#view-leccion button.btn-ghost.btn-small{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(232,238,245,.6) !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  padding: 7px 12px !important; width: auto !important;
  box-shadow: none !important;
}
/* el número de lección a mano: compacto, no un formulario */
#view-leccion #field-leccion{ margin-top: 10px !important; }
#view-leccion #field-leccion .inp-lbl{
  font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(232,238,245,.42) !important;
}
/* Ritmo y Ritmo entonado: lo mismo, pero la tarjeta se llama en plural */
#card-lecciones-activas{ margin: 0 !important; padding: 14px 15px !important; }
#card-lecciones-activas > h2{ font-size: 17px !important; margin: 0 0 8px !important; }
#card-lecciones-activas .mx-lae-num{
  font-size: 22px !important; font-weight: 800 !important;
  color: var(--tono-claro) !important; margin: 0 0 10px !important;
}
#card-lecciones-activas .mx-lae-num:empty{ display: none !important; }
#card-lecciones-activas #la-estado{ display: none !important; }
#card-lecciones-activas .mx-usar-leccion{ width: 100%; }
/* el texto de «selecciona qué claves…» sobra: los botones se explican solos */
#view-leccion #hint-claves{ display: none !important; }


/* =====================================================================
   (18-sep-2026, Iago) «En la app de corrección de ritmo procura que el
   texto clave de sol y el de clave de fa estén en la misma altura.»
   Los dos glifos (𝄞 y 𝄢) no miden lo mismo ni caen siempre en la misma
   fuente, así que cada nombre acababa a una altura. Ahora el glifo va en
   una caja de alto fijo y el nombre se ancla abajo de la tarjeta: pase lo
   que pase con la tipografía, los dos textos quedan alineados.
   ===================================================================== */
.claves-list .clave-card{ justify-content: flex-start; }
.claves-list .clave-card .clave-glyph{
  height: 82px; min-height: 82px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.claves-list .clave-card .clave-nombre{ margin-top: auto; }


/* =========================================================================
   (18-sep-2026, tarde) LA CABECERA DE CORREGIR, COMO LA DE DICTADO
   «Lo de alumno siguiente, nota y botón «no vino» es un despropósito como
   está. Revisa ritmo y ritmo entonado; la de dictado sí está bien, tómala
   como referencia.»
   El fallo: en entonación y ritmo la columna derecha se apilaba en vertical
   (siguiente ARRIBA, nota DEBAJO y el ⛔ debajo del todo), y eso empujaba el
   nombre del alumno hasta cortarlo en «Diego Rodríg…» teniendo media pantalla
   libre. Ahora es UNA fila: el alumno a la izquierda con todo el ancho que
   necesita, y a la derecha, en horizontal, siguiente · nota · no vino.
   ========================================================================= */
#view-evaluacion .eval-header .eh-top{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px !important;
}
#view-evaluacion .eval-header .alumno-block{ min-width: 0 !important; }
/* el nombre ya no se corta: cabe entero, y si no, en dos líneas */
#view-evaluacion .eval-header .alumno-name{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}
/* la derecha, en horizontal y centrada, como en dictado */
#view-evaluacion .eval-header .eh-right{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
#view-evaluacion .eval-header .sig-box{
  display: flex !important; align-items: center; gap: 8px;
  padding: 6px 10px !important;
  max-width: 44vw;
}
#view-evaluacion .eval-header .sig-box .sig-nombre{
  display: inline-block; max-width: 13ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
#view-evaluacion .eval-header .nota-inline{ flex: 0 0 auto; }
#view-evaluacion .eval-header .m-novino-cab{ margin: 0 !important; }

/* en pantalla estrecha el «siguiente» pasa debajo, pero nota y ⛔ siguen juntos */
@media (max-width: 430px){
  #view-evaluacion .eval-header .eh-top{ grid-template-columns: minmax(0,1fr) auto; }
  #view-evaluacion .eval-header .sig-box{ max-width: 38vw; }
  #view-evaluacion .eval-header .sig-box .sig-nombre{ max-width: 9ch; }
}

/* ---- ritmo entonado: la misma cabecera, no una fila de pastillas sueltas -- */
#view-evaluacion .pareja-header{
  display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap;
}
#view-evaluacion .pareja-header .ph-left{
  display: flex !important; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
}
#view-evaluacion .pareja-header .chip-siguiente{
  display: inline-flex !important; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden;
}
#view-evaluacion .pareja-header .chip-siguiente #ev-siguiente-nombre{
  display: inline-block; max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
#view-evaluacion .pareja-header .chip-siguiente.hidden{ display: none !important; }

/* =========================================================================
   (18-sep-2026, tarde) QUE QUEPA SIN SCROLL
   «No quiero scrolleo en las pantallas de corregir, es molesto: compacta lo
   que hay para que quepa todo.»
   Lo que se comía la pantalla eran los tres deslizadores verticales, con
   230 px fijos de alto pasara lo que pasara. Ahora se ajustan a la altura
   real que hay, con un mínimo para que se sigan pudiendo mover con el dedo.
   ========================================================================= */
#view-evaluacion .sv-slider-wrap{
  height: clamp(130px, 30dvh, 230px) !important;
}
#view-evaluacion .sv-titulo{ min-height: 2.1em !important; font-size: 12.5px !important; }
#view-evaluacion .sv-val{ font-size: 20px !important; }
#view-evaluacion .sliderv{ padding: 8px 6px 10px !important; }
#view-evaluacion .sliders-wrap{ gap: 8px !important; margin-bottom: 8px !important; }
#view-evaluacion .eval-header{ margin-bottom: 8px !important; }
#view-evaluacion .flu-otro-row{ margin-bottom: 8px !important; }
/* en pantallas bajas, aún más justo */
@media (max-height: 740px){
  #view-evaluacion .sv-slider-wrap{ height: clamp(110px, 26dvh, 190px) !important; }
  #view-evaluacion .eval-header .alumno-name{ font-size: 17px !important; }
}