/* Sistema de notas Villa Alegre.
   Idea visual: la libreta y el cuaderno cuadriculado. Notas aprobadas en tinta azul,
   desaprobadas en tinta roja, como en el registro de papel. */
:root {
    --tinta: #1c3f94;        /* azul de lapicero */
    --tinta-oscura: #142c66;
    --rojo: #c62828;         /* rojo de lapicero */
    --papel: #fbfcfe;
    --cuadricula: #dfe7f5;
    --grafito: #1f2430;
    --gris: #5d6678;
    --lapiz: #f2b705;        /* amarillo de lápiz, solo para el primer puesto y el foco */
    --linea: #cfd8ea;
    --letra: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --titulo: Cambria, "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--letra); color: var(--grafito); background: var(--papel); line-height: 1.5; }
h1, h2, h3 { font-family: var(--titulo); color: var(--tinta-oscura); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; margin-top: 1.8em; }
h3 { font-size: 1.05rem; }
a { color: var(--tinta); }
p { margin: 0 0 1em; max-width: 70ch; }
.oculto { position: absolute; opacity: 0; pointer-events: none; }
:focus-visible { outline: 3px solid var(--lapiz); outline-offset: 2px; }

/* ----- Estructura ----- */
.barra { position: fixed; inset: 0 0 auto 0; height: 52px; z-index: 5; display: flex; align-items: center; gap: 1rem;
    padding: 0 1.25rem 0 calc(240px + 1.25rem); background: #fff; border-bottom: 2px solid var(--tinta); }
.barra .colegio { font-family: var(--titulo); font-weight: 700; font-size: 1.1rem; color: var(--tinta-oscura); }
.barra .anio { margin-left: auto; color: var(--gris); font-size: .9rem; }
.boton-menu { display: none; font-size: 1.4rem; cursor: pointer; padding: .2rem .5rem; }
.menu { position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 6; background: var(--tinta-oscura); color: #fff; overflow-y: auto;
    display: flex; flex-direction: column; }
.menu .quien { padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.menu .quien strong { display: block; font-family: var(--titulo); font-size: 1.05rem; }
.menu .quien span { font-size: .85rem; opacity: .8; }
.menu ul { list-style: none; margin: 0; padding: .6rem 0; }
.menu ul.cuenta { margin-top: auto; border-top: 1px solid rgba(255,255,255,.18); }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: .5rem 1.25rem; color: #fff; text-decoration: none;
    background: none; border: 0; border-left: 4px solid transparent; font: inherit; cursor: pointer; }
.menu a:hover, .menu button:hover { background: rgba(255,255,255,.1); }
.menu a.activa { background: var(--papel); color: var(--tinta-oscura); border-left-color: var(--rojo); font-weight: 600; }
main { padding: calc(52px + 1.75rem) 1.75rem 3rem calc(240px + 1.75rem); max-width: 1500px; }
.sin-menu main { padding: 0; max-width: none; }

/* ----- Avisos ----- */
.aviso { padding: .7rem 1rem; margin: 0 0 1.2rem; border-left: 5px solid var(--tinta); background: #eef3fc; max-width: 80ch; }
.aviso.error { border-color: var(--rojo); background: #fdf0ef; }
.aviso code { font-size: 1.05em; font-weight: 700; background: #fff; padding: .1em .4em; border: 1px solid var(--linea); }

/* ----- Tablas ----- */
.tabla-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { padding: .5rem .7rem; border: 1px solid var(--linea); text-align: left; vertical-align: middle; }
thead th { background: var(--tinta); color: #fff; font-weight: 600; white-space: nowrap; border-color: var(--tinta); }
tbody tr:nth-child(even) td { background: #f6f8fd; }
td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }
td.acciones { white-space: nowrap; }
td.acciones form { display: inline; }
.vacio { color: var(--gris); padding: 1.2rem; border: 1px dashed var(--linea); background: #fff; }
.inactivo td { color: var(--gris); }

/* ----- Notas: tinta azul y roja ----- */
.nota { font-weight: 700; font-variant-numeric: tabular-nums; }
.nota.aprobada { color: var(--tinta); }
.nota.desaprobada { color: var(--rojo); }
.nota.vacia { color: #a9b1c2; font-weight: 400; }
.nota.grande { font-family: var(--titulo); font-size: 2.4rem; line-height: 1; }

/* ----- Formularios ----- */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], input[type=number], select {
    font: inherit; width: 100%; padding: .5rem .6rem; border: 1px solid #9aa6bf; border-radius: 3px; background: #fff; color: inherit; }
input:focus, select:focus { border-color: var(--tinta); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; align-items: end; margin-bottom: 1rem; }
.ficha { background: #fff; border: 1px solid var(--linea); border-top: 4px solid var(--tinta); padding: 1.2rem 1.3rem; margin-bottom: 1.5rem; max-width: 1000px; }
.ficha > h2:first-child, .ficha > h3:first-child { margin-top: 0; }
.ayuda { font-size: .87rem; color: var(--gris); font-weight: 400; }
.boton, button.boton { display: inline-block; font: inherit; font-weight: 600; padding: .5rem 1rem; border: 2px solid var(--tinta); border-radius: 3px;
    background: var(--tinta); color: #fff; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--tinta-oscura); border-color: var(--tinta-oscura); }
.boton.secundario { background: #fff; color: var(--tinta); }
.boton.secundario:hover { background: #eef3fc; }
.boton.peligro { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.boton.peligro:hover { background: #fdf0ef; }
.boton.chico { padding: .2rem .55rem; font-size: .85rem; border-width: 1px; }
.filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-bottom: 1.2rem; }
.filtros > div { min-width: 180px; }
.filtros .crece { flex: 1; }
.barra-acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border: 1px solid currentColor; border-radius: 99px; }
.etiqueta.ok { color: #1b6e3c; } .etiqueta.gris { color: var(--gris); } .etiqueta.rojo { color: var(--rojo); }

/* ----- Inicio ----- */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px solid var(--linea); background: #fff; margin-bottom: 1.8rem; max-width: 1000px; }
.resumen div { padding: 1rem 1.2rem; border-right: 1px solid var(--linea); }
.resumen div:last-child { border-right: 0; }
.resumen b { display: block; font-family: var(--titulo); font-size: 2rem; color: var(--tinta-oscura); line-height: 1.1; }
.resumen span { color: var(--gris); font-size: .9rem; }
.accesos { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.5rem; }

/* ----- Registro de notas ----- */
.registro th.grupo { text-align: center; }
.registro thead tr.evals th { background: #e8eefb; color: var(--tinta-oscura); font-weight: 600; font-size: .82rem; white-space: normal; min-width: 76px;
    max-width: 120px; text-align: center; vertical-align: bottom; border-color: var(--linea); }
.registro thead tr.evals th form { margin-top: .3rem; }
.registro td.celda { padding: 2px; text-align: center; }
.registro input.n { width: 62px; text-align: center; padding: .35rem .2rem; border: 1px solid transparent; background: transparent; font-weight: 700;
    color: var(--tinta); font-variant-numeric: tabular-nums; }
.registro input.n:hover { border-color: var(--linea); }
.registro input.n:focus { border-color: var(--tinta); background: #fff; }
.registro input.n.desaprobada { color: var(--rojo); }
.registro input.n.invalida { background: #fdf0ef; border-color: var(--rojo); }
.registro input.n:disabled { color: var(--gris); }
.registro td.alumno { white-space: nowrap; position: sticky; left: 0; background: #fff; }
.registro tbody tr:nth-child(even) td.alumno { background: #f6f8fd; }
.registro td.prom { background: #eef3fc !important; text-align: center; }
.pestanas { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.2rem; border-bottom: 2px solid var(--tinta); }
.pestanas a { padding: .5rem 1.1rem; text-decoration: none; color: var(--tinta); border: 1px solid var(--linea); border-bottom: 0; background: #fff; margin-right: -1px; }
.pestanas a.activa { background: var(--tinta); color: #fff; border-color: var(--tinta); font-weight: 600; }

/* ----- Puestos ----- */
.puestos { max-width: 720px; }
.puestos td.puesto { width: 4.5rem; text-align: center; font-family: var(--titulo); font-size: 1.25rem; font-weight: 700; color: var(--tinta-oscura); }
.puestos tr.primero td { background: #fff7d6 !important; }
.puestos tr.primero td.puesto { box-shadow: inset 5px 0 0 var(--lapiz); }
.puestos tr.yo td { font-weight: 700; }
.puestos tr.yo td:nth-child(2)::after { content: " (tú)"; color: var(--gris); font-weight: 400; }
.mi-puesto { background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--tinta); padding: .8rem 1rem; max-width: 720px; margin-bottom: 1.5rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; align-items: start; }

/* ----- Horario ----- */
table.horario { table-layout: fixed; min-width: 720px; }
table.horario th.hora { width: 76px; background: #e8eefb; color: var(--tinta-oscura); text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; border-color: var(--linea); }
table.horario tbody td { height: 62px; padding: 4px; vertical-align: top;
    background-image: linear-gradient(var(--cuadricula) 1px, transparent 1px), linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
    background-size: 16px 16px; background-color: #fff !important; }
.bloque { background: #fff; border: 1px solid var(--tinta); border-left-width: 5px; padding: .3rem .5rem; height: 100%; }
.bloque strong { display: block; color: var(--tinta-oscura); line-height: 1.2; }
.bloque span { font-size: .82rem; color: var(--gris); }

/* ----- Ingreso ----- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background-image: linear-gradient(var(--cuadricula) 1px, transparent 1px), linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
    background-size: 22px 22px; background-color: var(--papel); }
.libreta { width: min(430px, 100%); background: #fff; border: 1px solid var(--linea); border-top: 10px solid var(--tinta); padding: 2rem 2rem 1.6rem;
    box-shadow: 8px 8px 0 var(--cuadricula); }
.libreta h1 { font-size: 2rem; margin-bottom: .1em; }
.libreta .sub { color: var(--gris); margin-bottom: 1.4rem; }
.libreta .campo { margin-bottom: 1rem; }
.libreta .boton { width: 100%; padding: .65rem; font-size: 1.05rem; }
.libreta .margen { border-left: 2px solid var(--rojo); padding-left: 1.2rem; margin-left: -.4rem; }

@media (max-width: 860px) {
    .boton-menu { display: block; }
    .barra { padding-left: .6rem; }
    .barra .anio { display: none; }
    .menu { transform: translateX(-100%); transition: transform .2s; top: 52px; }
    #abrir-menu:checked ~ .menu { transform: none; }
    main { padding: calc(52px + 1.2rem) 1rem 2.5rem; }
    h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }
@media print {
    .barra, .menu, .filtros, .barra-acciones, .boton, .pestanas { display: none !important; }
    main { padding: 0; }
}

/* ----- Impresión de registros de notas ----- */
.solo-impresion { display: none; }
@media print {
    @page { margin: 12mm; }
    body { background: #fff; font-size: 11pt; }
    .solo-impresion { display: block; margin: 0 0 4mm; font-size: 10.5pt; }
    .aviso, .ficha, .quien { display: none !important; }
    h1 { font-size: 15pt; margin-bottom: 2mm; }
    .tabla-scroll { overflow: visible; }
    table { font-size: 9.5pt; max-width: none !important; }
    th, td { padding: 1.2mm 1.6mm; border: 1px solid #555 !important; }
    thead th, .registro thead tr.evals th, table.horario th.hora { background: #fff !important; color: #000 !important; }
    tbody tr:nth-child(even) td, .registro td.prom, .registro td.alumno { background: #fff !important; }
    .registro td.alumno { position: static; }
    .registro input.n { width: 100%; border: 0; padding: 0; }
    tr { break-inside: avoid; }
    thead { display: table-header-group; }
}

/* ----- Calificación literal ----- */
.nota.letra { letter-spacing: .02em; }
.leyenda { margin-top: -.6rem; max-width: 90ch; }
@media print { .leyenda { margin-top: 2mm; font-size: 9pt; } }

/* ----- Fotos ----- */
.foto { border-radius: 50%; object-fit: cover; background: var(--cuadricula); border: 1px solid var(--linea); flex: none; vertical-align: middle; }
.con-foto { display: inline-flex; align-items: center; gap: .55rem; }
.menu .quien { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; }
.menu .quien .foto { grid-row: span 2; border-color: rgba(255,255,255,.5); }
.menu .quien strong { align-self: end; }
.menu .quien span { align-self: start; }
.foto-editor { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; margin-bottom: 1rem; }
.foto-editor > div { flex: 1; min-width: 220px; }
input[type=file] { font: inherit; max-width: 100%; }
@media print { .foto { display: none; } }

/* ----- Asistencia ----- */
.est { display: inline-block; min-width: 1.5em; padding: 0 .25em; text-align: center; font-weight: 700; border-radius: 3px; font-size: .9em; line-height: 1.5; }
.est-P { color: var(--tinta); background: #e8eefb; }
.est-T { color: #7a5a00; background: #fff3c4; }
.est-F { color: #fff; background: var(--rojo); }
.est-J { color: var(--grafito); background: #e3e6ec; }
.est-vacio { color: #a9b1c2; font-weight: 400; }
.opciones-estado { display: inline-flex; border: 1px solid #9aa6bf; border-radius: 4px; overflow: hidden; background: #fff; }
.opciones-estado .op { margin: 0; cursor: pointer; font-weight: 700; }
.opciones-estado .op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones-estado .op span { display: block; min-width: 2.3rem; padding: .35rem .5rem; text-align: center; border-right: 1px solid var(--linea); color: var(--gris); }
.opciones-estado .op:last-child span { border-right: 0; }
.opciones-estado .op input:focus-visible + span { outline: 3px solid var(--lapiz); outline-offset: -3px; }
.opciones-estado .op-P input:checked + span { background: var(--tinta); color: #fff; }
.opciones-estado .op-T input:checked + span { background: var(--lapiz); color: #3d2e00; }
.opciones-estado .op-F input:checked + span { background: var(--rojo); color: #fff; }
.opciones-estado .op-J input:checked + span { background: #5d6678; color: #fff; }
.opciones-estado .op-vacio input:checked + span { background: #eef1f6; color: #8a93a6; }
form.asistencia input[type=time] { min-width: 7.5rem; }
form.asistencia td input[type=text] { min-width: 12rem; }
table.cuadro-mes { font-size: .85rem; }
table.cuadro-mes th, table.cuadro-mes td { padding: .25rem .2rem; }
table.cuadro-mes th.dia, table.cuadro-mes td.dia { text-align: center; min-width: 1.9rem; }
table.cuadro-mes th.dia { font-weight: 600; line-height: 1.15; }
table.cuadro-mes .finde { background: #e9edf5 !important; color: var(--gris); }
table.cuadro-mes thead th.finde { background: #45568f !important; color: #dfe7f5; }
table.cuadro-mes th.tot, table.cuadro-mes td.tot { text-align: center; min-width: 2rem; font-weight: 700; background: #eef3fc !important; color: var(--tinta-oscura); }
table.cuadro-mes td.alumno { white-space: nowrap; padding: .25rem .6rem; position: sticky; left: 0; background: #fff; }
table.cuadro-mes tbody tr:nth-child(even) td.alumno { background: #f6f8fd; }
table.cuadro-mes .est { min-width: 1.3em; padding: 0; background: none; }
table.cuadro-mes .est-F { color: var(--rojo); }
.leyenda-asistencia { max-width: none; }
@media print {
    .no-imprimir { display: none !important; }
    table.cuadro-mes { font-size: 7.5pt; }
    table.cuadro-mes th, table.cuadro-mes td { padding: .6mm .4mm; }
    table.cuadro-mes .finde, table.cuadro-mes thead th.finde { background: #ddd !important; color: #000 !important; }
    table.cuadro-mes th.tot, table.cuadro-mes td.tot { background: #fff !important; }
    table.cuadro-mes td.alumno { position: static; }
    .est { background: none !important; color: #000 !important; }
    .opciones-estado { border: 0; }
    .opciones-estado .op span { display: none; }
    .opciones-estado .op input:checked + span { display: inline; background: none !important; color: #000 !important; border: 0; padding: 0; }
}

/* ----- Ruleta ----- */
.ruleta-zona { display: grid; grid-template-columns: minmax(280px, 540px) minmax(260px, 1fr); gap: 2rem; align-items: start; }
.ruleta-lado { min-width: 0; }
.ruleta-marco { position: relative; max-width: 520px; margin: .6rem auto 1.2rem; }
.ruleta-marco canvas { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 6px var(--tinta-oscura); will-change: transform; }
.ruleta-flecha { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0;
    border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 38px solid var(--rojo); filter: drop-shadow(0 2px 0 #fff); }
.ruleta-boton { font-size: 1.15rem; padding: .7rem 2rem; }
.ruleta-boton:disabled { opacity: .5; cursor: default; }
.ruleta-resultado { display: grid; justify-items: center; gap: .5rem; text-align: center; background: #fff; border: 1px solid var(--linea); border-top: 4px solid var(--tinta); padding: 1.2rem; }
.ruleta-resultado strong { font-family: var(--titulo); font-size: 1.8rem; line-height: 1.2; color: var(--tinta-oscura); }
.ruleta-resultado.elegido { background: #fff7d6; border-top-color: var(--lapiz); }
.ruleta-lista { margin: 0 0 1rem; padding-left: 1.7rem; }
.ruleta-lista li { margin-bottom: .35rem; }
@media (max-width: 860px) { .ruleta-zona { grid-template-columns: 1fr; } }