/* =========================================================================
   tema.css · «Ritmo Ge» · capa de estética (Iago 16-sep-2026)
   Va DESPUÉS de styles.css y solo cambia colores, tipografía y acabados:
   color temático #10b981 en fondo, cabecera, tarjetas, botones y controles.
   No toca estructura ni JS. Para volver atrás: quitar el <link> de tema.css.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --app:      #10b981;      /* color del icono */
  --app-2:    #34d399;     /* claro (texto/acentos sobre oscuro) */
  --app-3:    #a7f3d0;     /* muy claro (títulos) */
  --app-dark: #05261f;  /* velo del fondo */
  --accent:   #34d399;     /* lo que styles.css usa para botones, chips, nombres */
  --accent-2: #34d399;
}

html, body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
button, input, select, textarea { font-family: inherit; }

/* ---- fondo: la misma foto, con velo del color de la app ---- */
body::before { filter: blur(9px) saturate(1.05) !important; }
body::after {
  background:
    linear-gradient(180deg, rgba(5, 38, 31, .74) 0%, rgba(5, 38, 31, .86) 45%, rgba(8, 12, 24, .96) 100%),
    radial-gradient(820px 480px at 85% 110%, rgba(16, 185, 129, .26), transparent 70%),
    radial-gradient(600px 380px at 5% -10%, rgba(16, 185, 129, .18), transparent 70%) !important;
}

/* ---- cabecera ---- */
.app-header { padding: 22px 0 22px !important; }
.app-header h1 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.8px !important; line-height: 1.05 !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--app-3) 130%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
}
.app-header h1 .app-suf {
  background: linear-gradient(180deg, var(--app-3) 0%, var(--app-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
}
#view-home .app-header::before {
  content: 'Ritmo · Grado Elemental';
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--app-3); background: rgba(16, 185, 129, .16); border: 1px solid rgba(16, 185, 129, .45);
  padding: 5px 12px; border-radius: 999px;
}
.app-header .sub { color: rgba(255,255,255,.62) !important; font-size: 13.5px !important; font-weight: 500; }
.chip-trim-actual { font-family: inherit; }

/* ---- tarjetas de grupo (home) ---- */
.grupo-big {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(16, 185, 129, .20), rgba(16, 185, 129, .06) 55%, rgba(15,23,42,.35)) !important;
  border: 1px solid rgba(16, 185, 129, .42) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-radius: 20px !important;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.grupo-big::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--app-2), var(--app));
}
.grupo-big:hover { border-color: rgba(16, 185, 129, .75) !important; box-shadow: 0 14px 40px rgba(16, 185, 129, .18), inset 0 1px 0 rgba(255,255,255,.12) !important; }
.grupo-big .name { color: #ffffff !important; font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -1.5px; text-shadow: 0 6px 24px rgba(16, 185, 129, .35); }
.grupo-big .meta { color: var(--app-3) !important; font-weight: 600; letter-spacing: .3px; }

/* ---- tarjetas y paneles ---- */
.card, .panel, .card-eval-tipo, .pareja-card, .bloque-card, .alumno-block {
  border-color: rgba(16, 185, 129, .22) !important;
  background: linear-gradient(180deg, rgba(20,28,44,.72), rgba(15,23,42,.62)) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.card-aviso-examen { border-color: rgba(16, 185, 129, .45); }

/* ---- botones ---- */
.btn { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; letter-spacing: .1px; border-radius: 14px !important; }
.btn-primary, #btn-fin-confirmar {
  background: linear-gradient(135deg, var(--app-2) 0%, var(--app) 100%) !important;
  color: #ffffff !important; border: 0 !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255,255,255,.22) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.btn-primary:hover { filter: brightness(1.06) !important; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: rgba(16, 185, 129, .10) !important; border: 1px solid rgba(16, 185, 129, .45) !important; color: #fff !important; }
.btn-secondary:hover { background: rgba(16, 185, 129, .18) !important; }
.btn-ghost { color: rgba(255,255,255,.62) !important; border: 1px solid rgba(255,255,255,.10) !important; }
.btn-ghost:hover { color: #fff !important; border-color: rgba(16, 185, 129, .5) !important; }
#btn-usar-lecciones-activas { background: linear-gradient(135deg, var(--app-2), var(--app)) !important; color: #fff !important; }
#card-lecciones-activas { border-color: rgba(16, 185, 129, .55) !important; background: linear-gradient(160deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .05)) !important; }

/* ---- controles ---- */
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  border-color: var(--app-2) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, .22) !important; outline: none;
}
.clave-card.sel, .eval-tipo-tile.sel, .eval-tipo-tile:has(input:checked) {
  border-color: var(--app-2) !important;
  background: linear-gradient(160deg, rgba(16, 185, 129, .26), rgba(16, 185, 129, .10)) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, .35) inset !important;
}
.eval-tipo-tile.sel .et-label, .eval-tipo-tile:has(input:checked) .et-label, .clave-card.sel .clave-nombre { color: #fff !important; }
.clave-card.sel .clave-check { background: var(--app) !important; color: #fff !important; }
.chip, .chip-leccion, .chip-prog { border-color: rgba(16, 185, 129, .45) !important; color: var(--app-3) !important; background: rgba(16, 185, 129, .12) !important; }
.chip-siguiente { border-color: rgba(255,255,255,.14) !important; }
.inp-lbl, .pen-titulo, .sv-titulo, .cr-titulo { color: var(--app-3) !important; letter-spacing: .6px; }

/* cajas de nota / chips que iban en azul fijo */
.nota-inline, .chip-leccion { background: rgba(16, 185, 129, .12) !important; border-color: rgba(16, 185, 129, .38) !important; }
.btn-no-vino-duo, .btn-no-vino-sm { background: rgba(16, 185, 129, .08) !important; color: var(--app-3) !important; border: 1px solid rgba(16, 185, 129, .45) !important; }
.et-trim-actual, .chip-trim-actual { border-color: rgba(16, 185, 129, .5) !important; }

/* sliders genéricos (los que no llevan color semántico) */
.sv-slider::-webkit-slider-thumb, .cr-slider::-webkit-slider-thumb {
  background: var(--app-2) !important; border-color: #0b1020 !important; box-shadow: 0 0 0 6px rgba(16, 185, 129, .18), 0 4px 12px rgba(0,0,0,.4) !important;
}
.sv-slider::-webkit-slider-runnable-track, .cr-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(16, 185, 129, .30), rgba(16, 185, 129, .70)) !important;
}
.sv-val, .cr-val { color: var(--app-3) !important; }
.fluidez-switch input:checked + span, .fluidez-switch.on { background: var(--app) !important; }

#et-tile-sesion.sel, #et-tile-otro.sel, .eval-tipo-tile.sel, .eval-tipo-tile:hover {
  border: 2px solid rgba(16, 185, 129, .75) !important;
  background: linear-gradient(160deg, rgba(16, 185, 129, .28), rgba(16, 185, 129, .10)) !important;
}

/* ---- pantalla iPad (pantalla.html): misma foto desenfocada y velo del color ---- */
body.pantalla { background: transparent !important; }
body.pantalla .pantalla-header h1 { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.6px; }
body.pantalla .switch-grupo a { border-color: rgba(16, 185, 129, .35) !important; color: var(--app-3) !important; font-weight: 700; }
body.pantalla .switch-grupo a.sel { background: var(--app) !important; color: #fff !important; border-color: var(--app) !important; }
body.pantalla .alumno-card-ipad, body.pantalla .leccion-card-ipad { border-color: rgba(16, 185, 129, .30) !important; }
body.pantalla .alumno-card-ipad .nombre { font-family: 'Manrope', sans-serif; font-weight: 800; }


/* ---- pantalla iPad: 11–12 alumnos → 2 filas de 6, todo a la vista (16-sep-2026) ---- */
body.pantalla .grid-wrap { min-height: calc(100vh - 84px); }
.grid-alumnos.cols-6 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.grid-alumnos.cols-6 .alumno-card-ipad { padding: 8px 10px; gap: 6px; border-radius: 12px; }
.grid-alumnos.cols-6 .alumno-card-ipad .nombre { font-size: 14px; line-height: 1.15; }
.grid-alumnos.cols-6 .alumno-card-ipad .nota-grande { font-size: 26px; }
.grid-alumnos.cols-6 .crit-row { padding: 2px 6px; gap: 5px; grid-template-columns: 18px 1fr auto; }
.grid-alumnos.cols-6 .crit-row.no-ico { grid-template-columns: 1fr auto; }
.grid-alumnos.cols-6 .crit-row .crit-ico { font-size: 13px; }
.grid-alumnos.cols-6 .crit-row .crit-txt { font-size: 10.5px; }
.grid-alumnos.cols-6 .crit-row .crit-pts { font-size: 11px; }
.grid-alumnos.cols-6 .feedback-txt { font-size: 11px; padding-top: 3px; }
.grid-alumnos.cols-6 .fluido-tag { font-size: 10px; }
.grid-alumnos.cols-6 .gp-nota-box { padding: 5px 7px; }
.grid-alumnos.cols-6 .gp-nota-box .gp-val { font-size: 22px; }
.grid-alumnos.cols-6 .gp-nota-box .gp-lbl { font-size: 9.5px; }
.grid-alumnos.cols-6 .leccion-card-ipad { padding: 8px 5px 6px; gap: 4px; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-glyph    { font-size: 36px; height: 36px; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-glyph-fa { font-size: 28px; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-nombre   { font-size: 8px; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-nota     { font-size: 24px; margin: 2px 0 0; letter-spacing: -0.5px; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-nota.lci-nota-sinev { font-size: 11px; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-nota.lci-nota-vacia { font-size: 18px; }
.grid-alumnos.cols-6 .lci-chip { font-size: 9.5px; padding: 1px 5px; border-radius: 6px; }
.grid-alumnos.cols-6 .alumno-card-ipad .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- claves (16-sep-2026): como en un editor de partituras, Sol algo más pequeña y Fa algo
   más grande para que pesen igual. Antes la Fa iba al 78 % de la Sol y se veía enana. ---- */
.leccion-card-ipad .lci-glyph-sol { font-size: 46px !important; }
.leccion-card-ipad .lci-glyph-fa  { font-size: 54px !important; }
.grid-alumnos.cols-2 .leccion-card-ipad .lci-glyph-sol { font-size: 58px !important; }
.grid-alumnos.cols-2 .leccion-card-ipad .lci-glyph-fa  { font-size: 68px !important; }
.grid-alumnos.cols-3 .leccion-card-ipad .lci-glyph-sol { font-size: 49px !important; }
.grid-alumnos.cols-3 .leccion-card-ipad .lci-glyph-fa  { font-size: 57px !important; }
.grid-alumnos.cols-4 .leccion-card-ipad .lci-glyph-sol { font-size: 40px !important; }
.grid-alumnos.cols-4 .leccion-card-ipad .lci-glyph-fa  { font-size: 46px !important; }
.grid-alumnos.cols-5 .leccion-card-ipad .lci-glyph-sol { font-size: 36px !important; }
.grid-alumnos.cols-5 .leccion-card-ipad .lci-glyph-fa  { font-size: 42px !important; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-glyph-sol { font-size: 30px !important; }
.grid-alumnos.cols-6 .leccion-card-ipad .lci-glyph-fa  { font-size: 35px !important; }
/* tarjetas de elección de clave (inicio de la corrección) */
.clave-card[data-clave="1"] .clave-glyph { font-size: 62px !important; }
.clave-card[data-clave="2"] .clave-glyph { font-size: 74px !important; }
/* (16-sep-2026) En el iPad la Sol cuelga por debajo de su caja y roza el texto; la Fa queda alta.
   Se recolocan dentro de la caja fija sin cambiar el tamaño. */
.leccion-card-ipad .lci-glyph-sol { transform: translateY(-12%); }
.leccion-card-ipad .lci-glyph-fa  { transform: translateY(8%); }
.leccion-card-ipad .lci-nombre { margin-top: 4px; }