/* Panel del colegio */
body.panel { background: var(--fondo); }
.lado {
    position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--m-950); color: #fff; padding: 1.2rem .9rem; display: flex; flex-direction: column; gap: .2rem; z-index: 30;
    background-image: radial-gradient(120% 60% at 0% 0%, rgba(124,58,237,.45), transparent 60%), radial-gradient(80% 40% at 100% 100%, rgba(31,220,170,.12), transparent 60%);
    transition: transform .3s ease;
}
.lado .marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; padding: .2rem .5rem 1.2rem; }
.lado .marca img { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 8px 20px -6px rgba(124,58,237,.8); }
.lado .marca small { display: block; font-size: .72rem; font-weight: 600; opacity: .6; letter-spacing: 0; }
.lado nav { display: grid; gap: .15rem; }
.lado nav button { display: flex; align-items: center; gap: .75rem; border: 0; background: transparent; color: rgba(255,255,255,.72); padding: .72rem .8rem; border-radius: 13px; font-weight: 600; font-size: .93rem; text-align: left; transition: all .15s; position: relative; }
.lado nav button svg { width: 20px; height: 20px; }
.lado nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.lado nav button.activo { background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(109,40,217,.35)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -10px rgba(124,58,237,.8); }
.lado nav .num { margin-left: auto; background: var(--menta); color: var(--m-900); font-size: .72rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; }
.lado .pie { margin-top: auto; padding: .8rem; border-radius: 16px; background: rgba(255,255,255,.06); font-size: .82rem; }
.lado .pie b { display: block; }
.lado .pie button { margin-top: .6rem; width: 100%; }

.principal { margin-left: 252px; min-height: 100vh; }
.barra-sup { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.8rem; position: sticky; top: 0; z-index: 20; background: rgba(244,242,250,.85); backdrop-filter: blur(14px); }
.barra-sup h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.03em; flex: 1; }
.barra-sup h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.barra-sup .menu { display: none; }
.contenido { padding: .4rem 1.8rem 3rem; }
@media (max-width: 900px) {
    .lado { transform: translateX(-100%); }
    .lado.abierto { transform: none; box-shadow: 0 0 0 100vmax rgba(20,6,45,.45); }
    .principal { margin-left: 0; }
    .barra-sup { padding: .9rem 1rem; }
    .barra-sup .menu { display: grid; }
    .contenido { padding: .4rem 1rem 3rem; }
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.kpi { position: relative; overflow: hidden; }
.kpi .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--m-50); color: var(--m-600); margin-bottom: .8rem; }
.kpi .ic svg { width: 22px; height: 22px; }
.kpi .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--suave); font-size: .85rem; font-weight: 600; }
.kpi.destacado { background: var(--grad); color: #fff; box-shadow: 0 20px 40px -18px rgba(109,40,217,.8); }
.kpi.destacado .ic { background: rgba(255,255,255,.16); color: #fff; }
.kpi.destacado .l { color: rgba(255,255,255,.8); }
.kpi.destacado::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -60px; top: -60px; background: rgba(255,255,255,.08); }

.dos-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 1100px) { .dos-col { grid-template-columns: 1fr; } }
.grafico { display: flex; align-items: flex-end; gap: .7rem; height: 200px; padding-top: 1rem; }
.grafico .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; justify-content: flex-end; }
.grafico .barras { display: flex; gap: 4px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.grafico .barras i { width: 40%; max-width: 22px; border-radius: 8px 8px 4px 4px; min-height: 4px; animation: crecer .7s cubic-bezier(.2,.8,.3,1) both; transform-origin: bottom; }
.grafico .barras i.r { background: linear-gradient(180deg, var(--menta-2), var(--menta)); }
.grafico .barras i.v { background: linear-gradient(180deg, var(--m-400), var(--m-700)); }
.grafico .col span { font-size: .74rem; color: var(--suave); font-weight: 600; }
@keyframes crecer { from { transform: scaleY(0); } }
.leyenda { display: flex; gap: 1rem; font-size: .8rem; color: var(--suave); font-weight: 600; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }

.herramientas { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.herramientas .buscar { position: relative; flex: 1; min-width: 220px; }
.herramientas .buscar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--suave); }
.herramientas .buscar .entrada { padding-left: 2.7rem; }

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 700; padding: .7rem .8rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .75rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover { background: #faf9fd; }
.tabla tbody tr[data-click] { cursor: pointer; }
.tabla .persona { display: flex; align-items: center; gap: .7rem; }
.tabla .persona .avatar { width: 38px; height: 38px; border-radius: 12px; font-size: .82rem; }
.tabla .persona b { display: block; }
.tabla .persona small { color: var(--suave); }
.tabla .der { text-align: right; }
.tabla input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--m-600); }
.codigo { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; letter-spacing: .08em; background: var(--m-50); padding: .15rem .45rem; border-radius: 8px; color: var(--m-700); font-weight: 700; font-size: .85rem; }

.ficha-cab { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.ficha-cab .avatar { width: 72px; height: 72px; border-radius: 22px; font-size: 1.4rem; position: relative; }
.ficha-cab h3 { margin: 0; }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1rem 0; }
.datos div { background: #fff; border-radius: 14px; padding: .7rem .9rem; }
.datos small { display: block; color: var(--suave); font-size: .76rem; font-weight: 600; }
.datos b { font-size: 1rem; }
.hoja.ancha { max-width: 720px; }

.receptor-card { display: flex; gap: 1rem; align-items: center; }
.receptor-card .estado { width: 12px; height: 12px; border-radius: 50%; background: #c9c4d6; flex: none; }
.receptor-card .estado.ok { background: var(--menta); box-shadow: 0 0 0 5px rgba(31,220,170,.2); animation: latido 2s infinite; }
.receptor-card .estado.mal { background: var(--rojo); box-shadow: 0 0 0 5px rgba(229,72,77,.15); }
@keyframes latido { 50% { box-shadow: 0 0 0 9px rgba(31,220,170,.05); } }
.codigo-vinculo { font-size: 2.6rem; font-weight: 800; letter-spacing: .25em; text-align: center; color: var(--m-700); margin: .5rem 0; font-variant-numeric: tabular-nums; }
.qr-subida { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; }
.qr-subida .previa { width: 120px; height: 120px; border-radius: 16px; background: var(--m-50); display: grid; place-items: center; overflow: hidden; color: var(--m-300); }
.qr-subida .previa img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.qr-subida .previa svg { width: 40px; height: 40px; }
.grid-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.grid-ajustes h3 { margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; }
.grid-ajustes h3 .ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 800; }

/* ───────── Impresión de tarjetas ───────── */
#impresion { display: none; }
@media print {
    @page { size: A4; margin: 10mm; }
    body.imprimiendo > *:not(#impresion) { display: none !important; }
    body.imprimiendo #impresion { display: block; }
    body.imprimiendo { background: #fff; }
}
.hoja-tarjetas { display: grid; grid-template-columns: repeat(2, 85.6mm); gap: 6mm 8mm; justify-content: center; }
.tarjeta-imp {
    width: 85.6mm; height: 54mm; border-radius: 3.5mm; overflow: hidden; position: relative; color: #fff; padding: 4mm 4.5mm; display: grid; grid-template-columns: 1fr 26mm; gap: 3mm;
    background: linear-gradient(135deg, #7c3aed, #4c1d95 60%, #2e0f5c); -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; font-family: var(--fuente);
}
.tarjeta-imp::before { content: ''; position: absolute; width: 50mm; height: 50mm; border-radius: 50%; border: 6mm solid rgba(255,255,255,.07); right: -20mm; top: -22mm; }
.tarjeta-imp .izq { display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.tarjeta-imp .m { display: flex; align-items: center; gap: 2mm; font-weight: 800; font-size: 11pt; }
.tarjeta-imp .m img { width: 6.5mm; height: 6.5mm; border-radius: 2mm; }
.tarjeta-imp .col { font-size: 6.5pt; opacity: .8; margin-top: .6mm; }
.tarjeta-imp .foto { width: 14mm; height: 14mm; border-radius: 3mm; background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 800; font-size: 11pt; overflow: hidden; }
.tarjeta-imp .foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-imp .nom { font-weight: 800; font-size: 9pt; line-height: 1.15; text-transform: uppercase; }
.tarjeta-imp .gr { font-size: 7pt; opacity: .85; }
.tarjeta-imp .der { background: #fff; border-radius: 2.5mm; display: grid; place-items: center; align-self: center; padding: 1.5mm; position: relative; }
.tarjeta-imp .der img { width: 100%; display: block; }
.tarjeta-imp .der small { color: #2e0f5c; font-size: 5.5pt; font-weight: 700; text-align: center; display: block; margin-top: .6mm; }
.ficha-padres { width: 85.6mm; height: 54mm; border: .3mm dashed #a78bfa; border-radius: 3.5mm; padding: 4mm 4.5mm; font-family: var(--fuente); color: #1d1433; font-size: 7.5pt; line-height: 1.4; break-inside: avoid; }
.ficha-padres b.t { font-size: 9.5pt; display: block; margin-bottom: 1mm; color: #5b21b6; }
.ficha-padres .cod { font-size: 15pt; font-weight: 800; letter-spacing: .25em; color: #5b21b6; margin: 1mm 0; }
.ficha-padres ol { margin: 1mm 0 0; padding-left: 4mm; }