/* Criterios · estilos propios sobre Bootstrap 5 */
:root {
  --plano: #f6f6f3;
  --superficie: #fcfcfb;
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  --tinta-3: #898781;
  --rejilla: #e1e0d9;
  --eje: #c3c2b7;
  --borde: rgba(11, 11, 11, .10);
  --serie-alumno: #2a78d6;  /* categórico 1 */
  --serie-clase: #eb6834;   /* categórico 2 (y discontinua) */
  --aprobado: #52514e;
  --sube: #006300;
  --baja: #d03b3b;
  --nota-sus: #d03b3b;
  --nota-apr: #e3f1e3;
  --nota-apr-tinta: #0f5a0f;
  --nota-not: #2a78d6;
}
body { background: var(--plano); color: var(--tinta); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.navbar { background: var(--superficie) !important; }
.navbar-brand { display: flex; align-items: center; gap: .5rem; }
.navbar-brand img { width: 26px; height: 26px; }
.nav-link.activo { color: var(--tinta) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--serie-alumno); }
main > .breadcrumb, nav[aria-label="Ruta"] .breadcrumb { font-size: .9rem; }

/* Bloques */
.cabecera-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: #ecebe6; color: var(--tinta-2); font-size: .85rem; }
.tarjeta, .card { background: var(--superficie); border: 1px solid var(--borde); border-radius: .6rem; }
.tarjeta { padding: 1rem 1.1rem; }
.tarjeta-titulo { font-weight: 600; color: var(--tinta); }
.table { --bs-table-bg: var(--superficie); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #f3f2ee; }

/* Fichas de cifras (tutoría) */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: .6rem; padding: .8rem 1rem; }
.ficha-titulo { color: var(--tinta-2); font-size: .85rem; }
.ficha-valor { font-size: 2rem; font-weight: 600; line-height: 1.2; }
.ficha-pie { color: var(--tinta-2); font-size: .8rem; }
.delta-sube { color: var(--sube); font-weight: 600; }
.delta-baja { color: var(--baja); font-weight: 600; }

/* Notas: suspenso / aprobado / notable o más (misma regla que la web antigua) */
.badge.nota-sus { background: var(--nota-sus); color: #fff; }
.badge.nota-apr { background: var(--nota-apr); color: var(--nota-apr-tinta); box-shadow: inset 0 0 0 1px #b9dab9; }
.badge.nota-not { background: var(--nota-not); color: #fff; }
.badge.nota-nada { background: #ecebe6; color: var(--tinta-2); }

/* Tablas largas: cabecera y primera columna fijas */
.table-responsive:has(.tabla-notas), .tabla-fija { max-height: 78vh; overflow: auto; border-radius: .5rem; border: 1px solid var(--borde); }
.tabla-notas, .tabla-calor { margin-bottom: 0; }
.tabla-notas thead th, .tabla-calor thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie); box-shadow: inset 0 -1px 0 var(--eje); vertical-align: bottom; font-weight: 600; }
.tabla-notas tbody td:first-child, .tabla-notas tbody th:first-child, .tabla-calor tbody th, .tabla-calor tfoot th { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
.tabla-notas thead th:first-child, .tabla-calor thead th:first-child { left: 0; z-index: 3; }
.tabla-numeros td, .ficha-valor, .tabla-calor td { font-variant-numeric: tabular-nums; }
.tabla-matriz td { padding: .2rem .35rem; }
.tabla-matriz th:first-child { position: sticky; left: 0; background: var(--superficie); }

/* Mapa de calor: divergente alrededor del 5 */
.celda-calor { font-variant-numeric: tabular-nums; }
.tabla-calor td.celda-calor { padding: 0; border: 2px solid var(--superficie); }
.tabla-calor td.celda-calor a { display: block; padding: .35rem .5rem; color: inherit; text-decoration: none; }
.tabla-calor td.celda-calor a:hover, .tabla-calor td.celda-calor a:focus { box-shadow: inset 0 0 0 2px var(--tinta); }
.calor-r3 { --calor: #c43c3c; --calor-tinta: #fff; }
.calor-r2 { --calor: #e8807b; --calor-tinta: #0b0b0b; }
.calor-r1 { --calor: #f5c4c0; --calor-tinta: #0b0b0b; }
.calor-0  { --calor: #f0efec; --calor-tinta: #0b0b0b; }
.calor-b1 { --calor: #cde2fb; --calor-tinta: #0b0b0b; }
.calor-b2 { --calor: #6da7ec; --calor-tinta: #0b0b0b; }
.calor-b3 { --calor: #1c5cab; --calor-tinta: #fff; }
.calor-vacio { --calor: transparent; --calor-tinta: var(--tinta-3); }
.celda-calor { background-color: var(--calor); color: var(--calor-tinta); }
/* Bootstrap pinta el fondo de las celdas con sus variables: se las damos */
.tabla-calor > tbody > tr > td.celda-calor { --bs-table-bg: var(--calor); --bs-table-bg-type: var(--calor); --bs-table-color: var(--calor-tinta); --bs-table-color-type: var(--calor-tinta); background-color: var(--calor); color: var(--calor-tinta); }
.leyenda-calor { display: flex; flex-wrap: wrap; gap: 2px; font-size: .78rem; }
.leyenda-calor .celda-calor { padding: .15rem .5rem; border-radius: 3px; }
.leyenda-calor .calor-vacio { box-shadow: inset 0 0 0 1px var(--rejilla); }
.fila-media th, .fila-media td { box-shadow: inset 0 1px 0 var(--eje); background: var(--superficie); }

/* Gráficas */
.viz { width: 100%; overflow-x: auto; }
.viz-svg { width: 100%; max-width: 980px; height: auto; display: block; font-family: inherit; }
.viz-rejilla { stroke: var(--rejilla); stroke-width: 1; }
.viz-aprobado { stroke: var(--aprobado); stroke-width: 1; stroke-dasharray: 2 3; }
.viz-eje { fill: var(--tinta-3); font-size: 11px; }
.viz-categoria { fill: var(--tinta-2); font-size: 12px; }
.viz-etiqueta { fill: var(--tinta); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-linea.serie-alumno { stroke: var(--serie-alumno); }
.viz-linea.serie-clase { stroke: var(--serie-clase); stroke-dasharray: 6 4; }
.viz-punto { stroke: var(--superficie); stroke-width: 2; }
.viz-punto.serie-alumno { fill: var(--serie-alumno); }
.viz-punto.serie-clase { fill: var(--serie-clase); }
.serie-clase-texto { fill: var(--tinta-2); font-weight: 400; }
.viz-union { stroke: var(--eje); stroke-width: 2; stroke-linecap: round; }
.viz-marca-clase { fill: var(--serie-clase); }
.viz-diana { fill: transparent; cursor: pointer; outline: none; }
.viz-diana:hover, .viz-diana:focus { fill: rgba(11, 11, 11, .06); }
.viz-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--tinta-2); margin: .4rem 0; }
.viz-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.viz-tip { position: fixed; z-index: 1080; pointer-events: none; background: #1a1a19; color: #f0efec; font-size: .8rem; padding: .35rem .55rem; border-radius: .35rem; max-width: 22rem; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* Utilidades */
.caja-login { max-width: 24rem; }
.lista-corta { max-width: 36rem; }
.lista-media { max-width: 60rem; }
.input-corto { width: 5.5rem; }
.select-brm { min-width: 4rem; }
details > summary { list-style: none; display: inline-block; }
details > summary::-webkit-details-marker { display: none; }
[title] { cursor: help; }
a[title], button[title] { cursor: pointer; }
@media print {
  nav, .btn, form button, details > summary { display: none !important; }
  body { background: #fff; }
  .table-responsive:has(.tabla-notas), .tabla-fija { max-height: none; overflow: visible; border: 0; }
}

/* Notas detalladas: composición de la nota de cada tema */
.parte-1 { --parte: #2a78d6; } .parte-2 { --parte: #eb6834; } .parte-3 { --parte: #1baf7a; }
.parte-4 { --parte: #eda100; } .parte-5 { --parte: #e87ba4; } .parte-6 { --parte: #008300; }
.parte-0 { --parte: #898781; }
.tabla-detalle th, .tabla-detalle td { min-width: 9.5rem; }
.tabla-detalle th:first-child, .tabla-detalle td:first-child { min-width: 12rem; }
.tema-cab { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; }
.fila-clase th { top: auto; position: static; background: #f3f2ee !important; font-size: .85rem; }
.celda-tema { cursor: help; }
.celda-tema:focus { outline: 2px solid var(--serie-alumno); outline-offset: -2px; }
.nota-grande, .nota-chica { display: inline-block; font-weight: 700; border-radius: .3rem; font-variant-numeric: tabular-nums; }
.nota-grande { font-size: 1.05rem; padding: 0 .4rem; min-width: 2.6rem; text-align: center; }
.nota-chica { font-size: .8rem; padding: 0 .35rem; }
.nota-grande.nota-sus, .nota-chica.nota-sus { background: var(--nota-sus); color: #fff; }
.nota-grande.nota-apr, .nota-chica.nota-apr { background: var(--nota-apr); color: var(--nota-apr-tinta); }
.nota-grande.nota-not, .nota-chica.nota-not { background: var(--nota-not); color: #fff; }
.barra-nota { display: flex; gap: 2px; height: 10px; margin: .3rem 0 .2rem; }
.tramo { position: relative; display: block; flex-grow: 0; flex-shrink: 0; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--parte) 16%, #fcfcfb); overflow: hidden; }
.tramo b { display: block; height: 100%; background: var(--parte); }
.tramo.falta { background: repeating-linear-gradient(135deg, #fcfcfb 0 3px, color-mix(in srgb, var(--parte) 55%, #fcfcfb) 3px 5px); }
.partes-texto { display: flex; flex-wrap: wrap; gap: 0 .5rem; font-size: .72rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.falta-texto { color: var(--baja); }
.aviso-mini { font-size: .68rem; color: var(--baja); border: 1px solid currentColor; border-radius: .25rem; padding: 0 .25rem; }
.sin-nota { color: var(--tinta-3); font-size: .85rem; }
.leyenda-partes { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--tinta-2); }
.leyenda-partes span { display: inline-flex; align-items: center; gap: .35rem; }
.muestra { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--parte); }
.muestra.parte-falta { --parte: #898781; background: repeating-linear-gradient(135deg, #fcfcfb 0 3px, #b9b8b2 3px 5px); box-shadow: inset 0 0 0 1px #c3c2b7; }

/* Criterios y competencias */
.viz-barra { fill: var(--serie-alumno); }
.tabla-criterios th, .tabla-criterios td { min-width: 4.6rem; }
.tabla-criterios th:first-child { min-width: 12rem; }
.cab-competencias { font-weight: 400; font-size: .7rem; color: var(--tinta-2); }
.cab-temas { font-weight: 400; font-size: .68rem; color: var(--tinta-3); }
.chip-comp { display: inline-block; font-size: .68rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 999px; background: #ecebe6; color: var(--tinta-2); vertical-align: 1px; }
.leyenda-nombres { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .15rem 1rem; font-size: .82rem; color: var(--tinta-2); }
.leyenda-nombres strong { color: var(--tinta); margin-right: .3rem; }
.titulo-bloque { font-size: .9rem; font-weight: 600; margin: 1rem 0 .35rem; color: var(--tinta); border-bottom: 1px solid var(--rejilla); padding-bottom: .2rem; }
.leyenda-criterios { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .85rem; margin: 0; }
.leyenda-criterios dt { font-variant-numeric: tabular-nums; }
.leyenda-criterios dd { margin: 0; color: var(--tinta-2); }

/* Lista de criterios de un alumno: texto + barra 0-10 con el alumno y la clase */
.lista-criterios { display: flex; flex-direction: column; }
.fila-criterio { display: grid; grid-template-columns: 3.6rem minmax(12rem, 1fr) minmax(9rem, 16rem) 3.4rem 4.4rem; gap: .4rem .8rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid #efeee9; }
.crit-codigo { font-weight: 600; font-variant-numeric: tabular-nums; }
.crit-texto { font-size: .86rem; line-height: 1.3; }
.crit-temas { color: var(--tinta-3); font-size: .75rem; }
.crit-barra { position: relative; height: 18px; border-radius: 3px; background: linear-gradient(var(--rejilla), var(--rejilla)) center / 100% 2px no-repeat; cursor: help; }
.crit-barra:focus { outline: 2px solid var(--serie-alumno); outline-offset: 2px; }
.crit-aprobado { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--aprobado); }
.crit-union { position: absolute; top: 8px; height: 2px; background: var(--eje); }
.crit-clase { position: absolute; top: 1px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--serie-clase); }
.crit-alumno { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--serie-alumno); box-shadow: 0 0 0 2px var(--superficie); }
.crit-nota { text-align: right; }
.crit-clase-num { font-size: .78rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.punto-leyenda { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--serie-alumno); }
.marca-leyenda { display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--serie-clase); }
.aprobado-leyenda { display: inline-block; width: 0; height: 14px; border-left: 1px dashed var(--aprobado); }
@media (max-width: 760px) {
  .fila-criterio { grid-template-columns: 3.2rem 1fr 3.4rem; }
  .crit-barra { grid-column: 2 / 3; }
  .crit-clase-num { grid-column: 3 / 4; }
}
.input-codigo { max-width: 10rem; }
.lista-destacados { padding-left: 1.2rem; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; }
.lista-destacados .crit-texto { display: block; color: var(--tinta-2); font-size: .8rem; }
.panel-correo { padding-top: .6rem; padding-bottom: .6rem; }
.lista-envio { max-height: 18rem; overflow: auto; border: 1px solid var(--borde); border-radius: .4rem; padding: .4rem .6rem; display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }

/* Notas detalladas: una línea por parte de la nota */
.partes-lista { display: flex; flex-direction: column; gap: 3px; margin-top: .35rem; }
.parte-fila { display: grid; grid-template-columns: 2.1rem 1fr 2.2rem 2.4rem; align-items: center; gap: .35rem; font-size: .74rem; line-height: 1.1; }
.parte-nombre { color: var(--tinta-2); white-space: nowrap; overflow: hidden; }
.parte-barra { display: block; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--parte) 16%, #fcfcfb); overflow: hidden; }
.parte-barra b { display: block; height: 100%; background: var(--parte); border-radius: 0 2px 2px 0; }
.parte-valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.parte-peso { text-align: right; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.parte-fila.falta .parte-barra { background: repeating-linear-gradient(135deg, #fcfcfb 0 3px, color-mix(in srgb, var(--parte) 55%, #fcfcfb) 3px 5px); }
.parte-fila.falta .parte-valor { color: var(--baja); }
.tabla-detalle th, .tabla-detalle td { min-width: 10.5rem; }