/* Aula Docente — estilos */
:root {
  --bg: #f5f3ee;
  --papel: #fffefb;
  --tinta: #1f2a37;
  --tinta-2: #4b5563;
  --tinta-3: #8a8f98;
  --linea: #e4e0d6;
  --linea-2: #d6d1c4;
  --suave: #efece4;
  --acento: #2f5d8c;
  --ok: #2f7d4f;   --ok-bg: #e5f2e9;
  --warn: #a8660b; --warn-bg: #fbf0dc;
  --mal: #b23b3b;  --mal-bg: #f9e3e1;
  --info-bg: #e6eef7;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(31,42,55,.05), 0 4px 16px rgba(31,42,55,.05);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --curso: #3b6ea5;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--sans); color: var(--tinta); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font: 600 1.75rem/1.15 var(--serif); letter-spacing: -.01em; }
h2 { font: 600 1.2rem/1.2 var(--serif); }
h3 { font-size: 1rem; font-weight: 600; }
small, .muted { color: var(--tinta-3); }
.ico { width: 18px; height: 18px; flex: none; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: #1f2a37; color: #d8dde4; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; font: 600 1.15rem var(--serif); padding: 4px 8px 18px; }
.marca:hover { text-decoration: none; }
.marca-logo { width: 32px; height: 32px; border-radius: 9px; background: #f2c14e; color: #1f2a37; display: grid; place-items: center; font-weight: 700; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #c4cbd4; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav a.activo { background: rgba(255,255,255,.1); color: #fff; }
.nav-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #7f8a98; padding: 22px 10px 6px; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.nav a.nuevo { color: #f2c14e; }
.sidebar-pie { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-pie strong { display: block; color: #fff; font-size: .9rem; }
.sidebar-pie small { color: #8a95a3; font-size: .78rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #3b4a5c; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; flex: none; }
.sidebar .btn-icono { color: #8a95a3; margin-left: auto; }
.contenido { padding: 28px 36px 60px; max-width: 1280px; width: 100%; min-width: 0; }
.contenido-solo { margin: 0 auto; max-width: 460px; padding-top: 8vh; }
.velo, .barra-movil, .solo-movil { display: none; }

/* ---------- Cabecera de curso ---------- */
.curso-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 4px 0 16px 16px; border-left: 5px solid var(--curso); margin-bottom: 4px; }
.curso-inst { color: var(--tinta-2); font-size: .9rem; margin-bottom: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: .78rem; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--curso) 14%, white); color: color-mix(in srgb, var(--curso) 80%, black); font-weight: 600; }
.chip-suave { background: var(--suave); color: var(--tinta-2); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linea-2); margin: 10px 0 24px; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: flex; align-items: center; gap: 7px; padding: 10px 14px; color: var(--tinta-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--tinta); text-decoration: none; }
.tabs a.activo { color: var(--tinta); border-color: var(--curso); }
.tabs a.activo .ico { color: var(--curso); }

/* ---------- Componentes ---------- */
.titulo-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.titulo-pagina p { margin: 2px 0 0; color: var(--tinta-2); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 18px; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.tarjeta-cab h2, .tarjeta-cab h3 { margin: 0; }
.grilla { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stack > * + * { margin-top: 18px; }
.stack, .grilla > * { min-width: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 9px; border: 1px solid transparent; font: 600 .9rem var(--sans); cursor: pointer; background: var(--tinta); color: #fff; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(1.12); }
.btn-curso { background: var(--curso); }
.btn-fantasma { background: var(--papel); color: var(--tinta); border-color: var(--linea-2); }
.btn-fantasma:hover { background: var(--suave); filter: none; }
.btn-peligro { background: var(--papel); color: var(--mal); border-color: #e7c3bf; }
.btn-wa { background: #1f9d55; }
.btn-chico { padding: 5px 10px; font-size: .82rem; border-radius: 7px; }
.btn-icono { background: none; border: 0; padding: 6px; border-radius: 7px; color: var(--tinta-3); cursor: pointer; display: inline-flex; }
.btn-icono:hover { background: var(--suave); color: var(--tinta); }
.btn-icono.peligro:hover { color: var(--mal); background: var(--mal-bg); }

.aviso { padding: 11px 15px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; border: 1px solid; }
.aviso-ok { background: var(--ok-bg); color: var(--ok); border-color: #c4e2cd; }
.aviso-error { background: var(--mal-bg); color: var(--mal); border-color: #eec7c3; }
.aviso-info { background: var(--info-bg); color: var(--acento); border-color: #c9d9ec; }

.alerta-faltas { display: flex; gap: 14px; align-items: flex-start; background: var(--warn-bg); border: 1px solid #f0d9ae; border-radius: var(--radio); padding: 14px 18px; margin-bottom: 20px; }
.alerta-faltas > .ico { color: var(--warn); width: 22px; height: 22px; margin-top: 2px; }
.alerta-faltas strong { color: #7a4a06; }
.alerta-faltas ul { margin: 6px 0 0; padding: 0; list-style: none; }
.alerta-faltas li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed #ecd3a3; }
.alerta-faltas li:first-child { border-top: 0; }

/* Formularios */
label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 5px; color: var(--tinta-2); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=tel], input[type=url], input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--tinta); background: #fff; border: 1px solid var(--linea-2); border-radius: 9px; padding: 9px 11px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--curso) 35%, transparent); border-color: var(--curso); }
textarea { min-height: 90px; resize: vertical; }
.campo { margin-bottom: 14px; }
.campo-ayuda { font-size: .8rem; color: var(--tinta-3); margin-top: 4px; }
.fila { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
input[type=color] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--linea-2); border-radius: 9px; background: #fff; }
.colores { display: flex; gap: 8px; flex-wrap: wrap; }
.colores label { margin: 0; cursor: pointer; }
.colores input { display: none; }
.colores span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--linea-2); }
.colores input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px var(--tinta); }

/* Tablas */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; background: #faf8f3; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfaf6; }
td.num, th.num { text-align: center; }
.col-fija { position: sticky; left: 0; background: var(--papel); z-index: 1; min-width: 190px; }
th.col-fija { background: #faf8f3; z-index: 2; }

/* Badges / estados */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--suave); color: var(--tinta-2); white-space: nowrap; }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-mal { background: var(--mal-bg); color: var(--mal); }
.b-info { background: var(--info-bg); color: var(--acento); }
.b-evaluacion { background: #f6e1e6; color: #9b2c4a; }
.b-entrega, .b-tp { background: #e8e4f6; color: #5a3fa0; }
.b-actividad { background: var(--info-bg); color: var(--acento); }
.b-recordatorio { background: var(--warn-bg); color: var(--warn); }
.b-acto { background: var(--ok-bg); color: var(--ok); }
.peso { letter-spacing: 1px; color: #e0a526; font-size: .8rem; }

/* Estadísticas */
.stat { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); }
.stat-num { font: 600 2rem/1 var(--serif); margin: 6px 0 2px; }
.stat-label { font-size: .82rem; color: var(--tinta-2); font-weight: 500; }
.barra { height: 7px; border-radius: 99px; background: var(--suave); overflow: hidden; margin-top: 10px; }
.barra > span { display: block; height: 100%; border-radius: 99px; background: var(--curso); }
.pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.pct-ok { color: var(--ok); } .pct-warn { color: var(--warn); } .pct-mal { color: var(--mal); }
.mini-barra { display: inline-block; width: 60px; height: 6px; background: var(--suave); border-radius: 99px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.mini-barra span { display: block; height: 100%; }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 0; }
.lista .fecha-caja { width: 46px; text-align: center; flex: none; border-radius: 9px; background: var(--suave); padding: 4px 0; line-height: 1.1; }
.fecha-caja b { display: block; font: 600 1.15rem var(--serif); }
.fecha-caja small { font-size: .68rem; text-transform: uppercase; color: var(--tinta-2); }
.lista .info { flex: 1; min-width: 0; }
.lista .info strong { display: block; }
.vacio { text-align: center; color: var(--tinta-3); padding: 28px 10px; }
.vacio .ico { width: 34px; height: 34px; margin-bottom: 6px; color: var(--linea-2); }

/* Tarjetas de curso (inicio) */
.curso-card { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); border-top: 5px solid var(--c); color: inherit; transition: transform .12s; }
.curso-card:hover { text-decoration: none; transform: translateY(-2px); }
.curso-card h3 { font: 600 1.08rem var(--serif); margin: 4px 0 2px; }
.curso-card .meta { display: flex; gap: 14px; margin-top: 14px; font-size: .85rem; color: var(--tinta-2); flex-wrap: wrap; }

/* Asistencia: toma de lista */
.toma-lista .alumno { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linea); }
.toma-lista .alumno:last-child { border-bottom: 0; }
.toma-lista .nombre { flex: 1; font-weight: 500; min-width: 0; }
.estados { display: flex; gap: 4px; }
.estados input { display: none; }
.estados label { margin: 0; width: 38px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--linea-2); cursor: pointer; font-weight: 700; color: var(--tinta-3); background: #fff; user-select: none; }
.estados input:checked + label.e-P { background: var(--ok); border-color: var(--ok); color: #fff; }
.estados input:checked + label.e-A { background: var(--mal); border-color: var(--mal); color: #fff; }
.estados input:checked + label.e-T { background: #d89a1d; border-color: #d89a1d; color: #fff; }
.estados input:checked + label.e-J { background: #6b7a8c; border-color: #6b7a8c; color: #fff; }
.celda-e { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: .74rem; font-weight: 700; }
.celda-P { background: var(--ok-bg); color: var(--ok); }
.celda-A { background: var(--mal-bg); color: var(--mal); }
.celda-T { background: var(--warn-bg); color: var(--warn); }
.celda-J { background: #e7ebf0; color: #5b6878; }
.th-fecha { font-size: .7rem; text-align: center; padding: 6px 4px; line-height: 1.1; }
.th-fecha a { color: inherit; }
.grilla-asis td { padding: 6px 4px; text-align: center; }
.grilla-asis td.col-fija { text-align: left; padding: 6px 12px; }

/* Calificaciones */
.input-nota { width: 62px !important; text-align: center; padding: 6px !important; font-weight: 600; }
.input-nota.bajo { color: var(--mal); }
.prom { font: 600 1.05rem var(--serif); }

/* Horario semanal */
.horario { display: grid; grid-template-columns: 56px repeat(var(--dias), minmax(110px, 1fr)); position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; min-width: 640px; }
.horario-col { position: relative; border-left: 1px solid var(--linea); }
.horario-cab { height: 44px; display: grid; place-items: center; font-weight: 600; border-bottom: 1px solid var(--linea); background: #faf8f3; font-size: .88rem; }
.horario-cab.hoy { color: var(--acento); background: var(--info-bg); }
.horario-horas { position: relative; }
.hora-label { position: absolute; right: 8px; font-size: .72rem; color: var(--tinta-3); transform: translateY(-50%); }
.horario-linea { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--linea); }
.bloque { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 6px 8px; font-size: .78rem; line-height: 1.25; overflow: hidden; color: #fff; background: var(--c); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.bloque:hover { text-decoration: none; filter: brightness(1.08); }
.bloque strong { display: block; font-size: .82rem; }
.bloque.fuera { opacity: .45; }

/* Calendario mensual */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--linea); gap: 1px; }
.cal-cab { background: #faf8f3; text-align: center; font-size: .76rem; font-weight: 600; text-transform: uppercase; color: var(--tinta-3); padding: 8px 0; }
.cal-dia { background: var(--papel); min-height: 108px; padding: 6px; font-size: .78rem; }
.cal-dia.otro { background: #f9f7f2; color: var(--tinta-3); }
.cal-dia.hoy .cal-num { background: var(--tinta); color: #fff; }
.cal-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 600; margin-bottom: 3px; }
.cal-ev { display: block; padding: 2px 6px; border-radius: 5px; margin-bottom: 3px; background: color-mix(in srgb, var(--c) 15%, white); border-left: 3px solid var(--c); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { text-decoration: none; }
.cal-clase { font-size: .7rem; color: var(--tinta-3); }

/* Libro de temas */
.tema { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.tema:last-child { border-bottom: 0; }
.tema-fecha { text-align: center; }
.tema-fecha b { display: block; font: 600 1.5rem/1 var(--serif); }
.tema-fecha small { display: block; text-transform: capitalize; }
.tema dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; font-size: .92rem; }
.tema dt { color: var(--tinta-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.tema dd { margin: 0; white-space: pre-line; }

/* OCR */
.ocr-zona { border: 2px dashed var(--linea-2); border-radius: var(--radio); padding: 32px; text-align: center; background: #fff; cursor: pointer; }
.ocr-zona:hover, .ocr-zona.sobre { border-color: var(--curso); background: color-mix(in srgb, var(--curso) 5%, white); }
.ocr-zona .ico { width: 40px; height: 40px; color: var(--curso); }
.ocr-preview { max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--linea); display: block; margin: 0 auto; }
.progreso { height: 8px; background: var(--suave); border-radius: 99px; overflow: hidden; }
.progreso span { display: block; height: 100%; width: 0; background: var(--curso); transition: width .2s; }
.ocr-texto { font: .82rem/1.45 ui-monospace, Menlo, monospace; background: #faf8f3; border: 1px solid var(--linea); border-radius: 9px; padding: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.ocr-entrada { border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; margin-bottom: 14px; background: #fff; }

/* Modal (dialog) */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--tinta); }
dialog::backdrop { background: rgba(31,42,55,.45); }
.modal-cuerpo { padding: 22px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; background: #faf8f3; border-top: 1px solid var(--linea); }
.msg-previo { background: #faf8f3; border: 1px solid var(--linea); border-radius: 10px; padding: 12px; font-size: .9rem; white-space: pre-wrap; }

/* Auth */
.auth-card { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 32px; box-shadow: var(--sombra); }
.auth-marca { display: flex; align-items: center; gap: 10px; font: 600 1.3rem var(--serif); margin-bottom: 22px; }
.auth-card .btn { width: 100%; padding: 11px; }

/* Vista alumno */
.alumno-wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; }
.consigna { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; margin-bottom: 14px; border-left: 4px solid var(--curso); }
.consigna-texto { white-space: pre-line; margin-top: 8px; }


/* ---------- Utilidades nuevas ---------- */
.h-seccion { font: 600 1.4rem/1.2 var(--serif); margin: 0; }
.volver { display: inline-block; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.g-cal { grid-template-columns: minmax(0, 1fr) 300px; }
.col-fija { box-shadow: 6px 0 8px -6px rgba(0,0,0,.08); }
.col-fija-der { position: sticky; right: 0; background: var(--papel); z-index: 1; box-shadow: -6px 0 8px -6px rgba(0,0,0,.12); }
th.col-fija-der { background: #faf8f3; z-index: 2; }
.btn-bloque { width: 100%; padding: 12px; font-size: 1rem; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--tinta); cursor: pointer; font-size: .9rem; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--curso); }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: latido 1.6s infinite; }
@keyframes latido { 50% { opacity: .25; } }
.barra-guardar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.dialog-ancho { width: min(720px, calc(100vw - 32px)); }
.bloque-opcion { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; background: #fcfbf8; }
.bloque-opcion .fila { margin-top: 10px; }
.bloque-opcion .campo { margin-bottom: 4px; }
.chips-check { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips-check label { display: inline-flex; gap: 6px; align-items: center; margin: 0; padding: 5px 10px; border: 1px solid var(--linea-2); border-radius: 99px; background: #fff; font-weight: 500; color: var(--tinta); cursor: pointer; }

/* ---------- Toma de lista con concepto ---------- */
.lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: #faf8f3; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.nav-fecha { display: flex; gap: 6px; align-items: center; }
.nav-fecha input { width: auto; }
.toma-lista .alumno, .toma-encabezado { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 82px; align-items: center; gap: 12px; }
.toma-encabezado { padding: 8px 14px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; border-bottom: 1px solid var(--linea); }
.toma-encabezado span:first-child { grid-column: 1 / 3; }
.toma-lista .nombre small { display: block; }
.toma-lista:not(.con-concepto) .alumno, .toma-lista:not(.con-concepto) .toma-encabezado { grid-template-columns: 38px minmax(0, 1fr) auto; }
.toma-lista:not(.con-concepto) .col-concepto { display: none; }
.sel-concepto { padding: 7px 6px; text-align: center; font-weight: 600; }
.sel-concepto:disabled { opacity: .35; }
.sel-concepto.bajo { color: var(--mal); }

/* ---------- Calificaciones ---------- */
.th-inst { text-transform: none !important; letter-spacing: 0 !important; min-width: 92px; max-width: 140px; white-space: normal !important; vertical-align: bottom; }
.th-titulo { display: block; color: var(--tinta); font-size: .84rem; font-weight: 600; margin-bottom: 3px; line-height: 1.2; }
.th-meta { display: block; font-weight: 500; margin-top: 2px; }
.th-meta .ico { width: 14px; height: 14px; vertical-align: -2px; }
.th-calificar { display: inline-block; margin-top: 4px; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--suave); color: var(--tinta-2); }
.th-calificar:hover { background: color-mix(in srgb, var(--curso) 15%, white); text-decoration: none; }
.input-nota::placeholder { color: #a9a49a; font-weight: 500; }
.input-nota.manual { background: #fff8e6; }
.input-nota.grande { width: 84px !important; font-size: 1.1rem; padding: 10px 6px !important; }
.fila-calif { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--linea); }
.fila-calif:last-child { border-bottom: 0; }
.fila-calif .info { flex: 1; min-width: 0; }
.fila-calif .info strong { display: block; }
.calif-resumen { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linea-2); font-size: .9rem; }
.calif-resumen > div { flex: 1; }

/* ---------- Actividades ---------- */
.acceso-alumnos { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.acceso-link { flex: 1; min-width: 200px; }
.codigo-grande { font: 600 1.6rem ui-monospace, monospace; letter-spacing: 4px; }
.consigna h3 { margin: 0; font: 600 1.12rem/1.25 var(--serif); }
.consigna-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.consigna-acc { white-space: nowrap; display: flex; align-items: center; gap: 2px; }
.consigna.borrador { border-left-color: var(--linea-2); background: #faf8f3; }
.consigna.vencida { opacity: .72; }
.adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adjunto { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linea-2); background: #fff; color: var(--tinta); font-weight: 500; font-size: .9rem; }
.adjunto:hover { border-color: var(--curso); text-decoration: none; }
.adjunto .ico { color: var(--mal); }
.adjunto small { color: var(--tinta-3); margin-left: 4px; white-space: nowrap; }

/* ---------- Materiales ---------- */
.zona-pdf { display: block; padding: 22px; }
.g-mats { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mat-card { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.mat-card.borrador { opacity: .7; }
.mat-portada { position: relative; display: grid; place-items: center; height: 150px; background: linear-gradient(135deg, color-mix(in srgb, var(--curso) 14%, white), #f4f1ea); overflow: hidden; border-bottom: 1px solid var(--linea); }
.mat-portada canvas { position: absolute; inset: 0; width: 100%; height: auto; }
.mat-portada.con-mini .mat-tipo { display: none; }
.mat-tipo { font: 700 1.1rem var(--sans); color: #fff; background: var(--mal); padding: 8px 12px; border-radius: 8px; letter-spacing: .05em; }
.mat-info { padding: 12px 14px 4px; flex: 1; min-width: 0; }
.mat-info strong { display: block; line-height: 1.25; }
.mat-desc { font-size: .85rem; color: var(--tinta-2); margin: 6px 0 0; }
.mat-acc { display: flex; align-items: center; gap: 2px; padding: 8px 10px 12px 14px; }
.mat-acc .btn { margin-right: auto; }
.lista-mats { padding: 4px 16px; }
.mat-ico { width: 44px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--mal-bg); color: var(--mal); font: 700 .75rem var(--sans); letter-spacing: .05em; }
.mat-ico:hover { text-decoration: none; }

/* ---------- Formas de cargar estudiantes ---------- */
.formas-carga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.forma { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); text-align: left; font: inherit; cursor: pointer; box-shadow: var(--sombra); }
.forma:hover { border-color: var(--curso); text-decoration: none; }
.forma > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: color-mix(in srgb, var(--curso) 13%, white); color: var(--curso); }
.forma b { display: block; }
.forma small { display: block; line-height: 1.3; }
tr.inactivo { opacity: .5; }
.tabla-ocr input { padding: 6px 8px; }
.tabla-ocr td { vertical-align: top; }
.tabla-ocr .badge { margin-top: 4px; }

/* ---------- QR de inscripción ---------- */
.g-qr { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.qr-tarjeta { position: relative; text-align: center; padding: 28px 20px; }
.qr-curso { font: 600 1.3rem/1.2 var(--serif); }
.qr-curso small { display: block; font: 500 .9rem var(--sans); color: var(--tinta-3); margin-top: 4px; }
.qr-img { width: min(100%, 380px); aspect-ratio: 1; margin: 18px auto; }
.qr-img svg { width: 100%; height: 100%; display: block; }
.qr-apagado { opacity: .18; filter: blur(1px); }
.qr-instr { color: var(--tinta-2); }
.qr-link { word-break: break-all; color: var(--tinta); }
.qr-cerrado { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.qr-tarjeta:fullscreen, .qr-tarjeta.qr-full { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 0; }
.qr-tarjeta:fullscreen .qr-curso { font-size: 3vw; }
.qr-tarjeta:fullscreen .qr-img { width: min(70vh, 80vw); }
.qr-tarjeta:fullscreen .qr-instr { font-size: 1.6vw; }
.qr-tarjeta.qr-full { position: fixed; inset: 0; z-index: 100; }
.lista li.recien { animation: recien 2.4s; }
@keyframes recien { 0% { background: var(--ok-bg); } 100% { background: transparent; } }

/* ---------- Páginas públicas (inscripción, alumnos) ---------- */
.pagina-publica { background: var(--bg); }
.publica-wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }
.insc-cabecera { background: var(--curso); color: #fff; border-radius: 16px; padding: 22px 20px; margin-bottom: 16px; box-shadow: var(--sombra); }
.insc-cabecera small { color: #fff; opacity: .85; font-size: .85rem; }
.insc-cabecera h1 { color: #fff; margin: 4px 0 6px; }
.insc-cabecera > span { opacity: .9; font-size: .92rem; }
.chip-claro { background: rgba(255,255,255,.2); color: #fff; }
.input-codigo { text-transform: uppercase; letter-spacing: 3px; font: 600 1.2rem ui-monospace, monospace !important; text-align: center; }
.insc-ok { text-align: center; }
.insc-check { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.insc-check svg { width: 34px; height: 34px; }
.aviso-link { display: block; color: var(--acento); }
.aviso-link:hover { text-decoration: none; filter: brightness(.97); }
.alumno-cab { margin-bottom: 18px; }
.tabs-alumno { margin-top: 4px; }
.tabs-alumno a { gap: 6px; }
.tabs-alumno .badge { padding: 0 6px; }
.tabs.tabs-alumno a { flex-direction: row !important; font-size: .92rem !important; min-width: 0 !important; padding: 10px 12px !important; }

/* ---------- Lector de PDF ---------- */
body.lector { background: #525659; }
.lector-barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1f2a37; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.lector-barra .btn-icono { color: #d8dde4; font-size: 1.3rem; min-width: 36px; height: 36px; justify-content: center; align-items: center; text-decoration: none; }
.lector-barra .btn-icono:hover { background: rgba(255,255,255,.1); color: #fff; }
.lector-volver { font-size: 1.8rem !important; line-height: 1; }
.lector-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lector-titulo small { color: #9aa5b1; }
.lector-ctrl { display: flex; align-items: center; gap: 2px; }
.lector-pag { font-size: .85rem; color: #c4cbd4; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lector-desc { background: #fff8e6; color: var(--tinta); padding: 10px 16px; font-size: .9rem; }
.lector-paginas { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; min-height: 80vh; overflow-x: auto; }
.lector-hoja { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); flex: none; }
.lector-cargando { margin: 30vh auto 0; width: min(320px, 80vw); color: #e5e7eb; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.lector-respaldo { padding: 0; }
.lector-respaldo iframe { width: 100%; height: calc(100vh - 60px); border: 0; background: #fff; }
.lector-respaldo p { color: #fff; text-align: center; }

/* ---------- Barra superior en el teléfono ---------- */
.marca-mini { width: 24px; height: 24px; border-radius: 7px; font-size: .8rem; display: inline-grid; place-items: center; }
.barra-movil-titulo { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta); min-width: 0; }
.barra-movil-titulo:hover { text-decoration: none; }

.agenda-movil { display: none; }
.agenda-dia { margin-bottom: 14px; }
.agenda-dia h3 { font: 600 .82rem var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); margin: 0 0 6px; }
.agenda-dia.hoy h3 { color: var(--acento); }
.agenda-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--c); border-radius: 10px; margin-bottom: 6px; color: var(--tinta); }
.agenda-item:hover { text-decoration: none; }
.agenda-item .hora { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 48px; font-size: .9rem; }
.agenda-item .info { flex: 1; min-width: 0; }
.agenda-item small { display: block; color: var(--tinta-3); }

/* Accesos rápidos del panel */
.accesos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.acceso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; text-align: center; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); font-weight: 600; font-size: .86rem; box-shadow: var(--sombra); line-height: 1.2; }
.acceso:hover { border-color: var(--curso); text-decoration: none; }
.acceso .ico { width: 24px; height: 24px; color: var(--curso); }
.acceso small { display: block; font-weight: 500; color: var(--tinta-3); font-size: .75rem; }
.acceso.principal { background: var(--curso); color: #fff; border-color: var(--curso); }
.acceso.principal .ico, .acceso.principal small { color: #fff; opacity: .95; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1100px) {
  .contenido { padding: 24px 24px 60px; }
  .accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .accesos .principal { grid-column: span 2; flex-direction: row; gap: 10px; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .g-cal, .g-qr { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet vertical y teléfonos: menú lateral desplegable */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 270px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .menu-abierto .sidebar { transform: none; }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; }
  .menu-abierto { overflow: hidden; }
  .contenido { padding: 0 20px 70px; }
  .barra-movil { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 40; margin: 0 -20px 16px; padding: 8px 12px; background: rgba(245,243,238,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
  .barra-movil .btn-icono { color: var(--tinta); padding: 8px; }
  .barra-movil .ico { width: 22px; height: 22px; }
  .contenido-solo { padding-top: 6vh; }
  .formas-carga { grid-template-columns: 1fr 1fr 1fr; }
  .forma { flex-direction: column; text-align: center; gap: 6px; padding: 12px 8px; }
  .forma small { display: none; }
}

/* Teléfonos */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  h1 { font-size: 1.4rem; }
  .h-seccion { font-size: 1.2rem; }
  .contenido { padding: 0 14px 90px; }
  .barra-movil { margin: 0 -14px 12px; }
  .ocultar-movil { display: none !important; }
  .solo-escritorio { display: none !important; }
  .solo-movil { display: block; }
  .g-2, .g-3, .g-mats { grid-template-columns: minmax(0, 1fr); }
  .g-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tarjeta { padding: 16px; }
  .grilla { gap: 12px; }
  .stack > * + * { margin-top: 12px; }

  /* Cabecera del curso compacta */
  .curso-cabecera { flex-direction: row; align-items: flex-start; padding: 0 0 10px 12px; border-left-width: 4px; }
  .curso-cabecera > div { min-width: 0; }
  .curso-cabecera h1 { font-size: 1.3rem; }
  .curso-cabecera .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .curso-cabecera .chip { white-space: nowrap; }
  .curso-cabecera .btn { padding: 8px 10px; }
  .curso-inst { font-size: .8rem; }

  /* Pestañas: ícono arriba, texto abajo, desplazables */
  .tabs { margin: 6px -14px 16px; padding: 0 8px; gap: 0; }
  .tabs a { flex-direction: column; gap: 3px; padding: 8px 10px 9px; font-size: .7rem; min-width: 66px; }
  .tabs a span { display: inline !important; }
  .tabs .ico { width: 20px; height: 20px; }

  .titulo-pagina { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .titulo-pagina p { font-size: .9rem; }
  .titulo-pagina .acciones { justify-content: flex-start; }
  .stat { padding: 12px 14px; }
  .stat-num { font-size: 1.55rem; }
  .stat-label { font-size: .76rem; }

  /* Diálogos como hoja inferior */
  dialog, .dialog-ancho { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  dialog[open] { animation: subir .2s ease-out; }
  @keyframes subir { from { transform: translateY(40px); opacity: .6; } }
  .modal-cuerpo { padding: 18px 16px; max-height: calc(92vh - 70px); overflow-y: auto; }
  .modal-pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .fila { grid-template-columns: 1fr; gap: 0; }
  .bloque-opcion .fila { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  input, select, textarea { font-size: 16px; }   /* evita el zoom automático en iPhone */

  /* Barra de guardar fija abajo */
  .barra-guardar { position: sticky; bottom: 0; z-index: 30; margin: 14px -14px -90px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,254,251,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--linea); }
  .barra-guardar { flex-wrap: nowrap; }
  .barra-guardar .btn-curso { flex: 1; padding: 12px; min-width: 0; }
  .barra-guardar .btn-fantasma, .barra-guardar .btn-peligro { padding: 12px 10px; flex: none; }

  /* Toma de lista: nombre arriba, botones abajo */
  .toma-encabezado { display: none !important; }
  .toma-lista .alumno, .toma-lista:not(.con-concepto) .alumno { grid-template-columns: 1fr auto; grid-template-areas: "nombre nombre" "estados concepto"; gap: 8px 10px; padding: 12px 14px; }
  .toma-lista:not(.con-concepto) .alumno { grid-template-areas: "nombre nombre" "estados estados"; }
  .toma-lista .avatar { display: none; }
  .toma-lista .nombre { grid-area: nombre; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .toma-lista .estados { grid-area: estados; }
  .toma-lista .col-concepto { grid-area: concepto; }
  .estados { gap: 6px; }
  .estados label { width: 44px; height: 42px; font-size: 1rem; }
  .sel-concepto { width: 72px; height: 42px; }
  .lista-cab { padding: 10px 14px; }
  .nav-fecha { width: 100%; }
  .nav-fecha input { flex: 1; }

  .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .accesos .principal { grid-column: 1 / -1; padding: 14px; font-size: 1rem; }
  .acceso { padding: 12px 4px; font-size: .78rem; }
  .tabla-panel .mini-barra { display: none; }
  .tabla-panel td, .tabla-panel th { padding: 9px 6px; }

  /* Tablas como tarjetas */
  .tabla-resp thead { display: none; }
  .tabla-resp, .tabla-resp tbody, .tabla-resp tr, .tabla-resp td { display: block; width: 100%; }
  .tabla-resp tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
  .tabla-resp tr:last-child { border-bottom: 0; }
  .tabla-resp td { border: 0; padding: 2px 0; }
  .tabla-resp td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 80px; color: var(--tinta-3); font-size: .78rem; font-weight: 600; }
  .tabla-resp .celda-titulo { padding-right: 90px; margin-bottom: 4px; }
  .tabla-resp .celda-acciones { position: absolute; top: 6px; right: 6px; width: auto; text-align: right; }
  .tabla-resp .celda-acciones .btn-chico { padding: 5px 7px; }
  .celda-larga { word-break: break-all; }
  .tabla-ocr td { padding: 4px 0; }
  .tabla-ocr td[data-label]::before { display: block; margin-bottom: 2px; }
  .tabla-ocr td[data-label="Incluir"] { position: absolute; top: 10px; right: 12px; width: auto; }
  .tabla-ocr td[data-label="Incluir"]::before { display: none; }
  .tabla-ocr td[data-label="Nombre"] { padding-right: 36px; }
  .tabla-ocr input[type=checkbox] { width: 22px; height: 22px; }

  /* Planilla de asistencia y notas: más compacta */
  .grilla-asis .col-fija { min-width: 130px; max-width: 150px; font-size: .85rem; white-space: normal; }
  .col-fija-der { position: static; box-shadow: none; }

  /* Libro de temas */
  .tema { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .tema-fecha { grid-column: 1; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .tema dl { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr; gap: 0; }
  .tema dt { margin-top: 6px; }
  .tema > div:last-child { grid-column: 2; grid-row: 1; }

  /* Calendario: la grilla se reemplaza por agenda */
  .cal { display: none; }
  .agenda-movil { display: block; }
  .horario-wrap { display: none; }

  .consigna { padding: 16px; }
  .consigna-cab { flex-direction: column; }
  .consigna-acc { align-self: flex-end; margin-top: -6px; }
  .calif-resumen { flex-direction: column; align-items: stretch; }
  .acceso-alumnos { gap: 10px; }
  .formas-carga { gap: 8px; }
  .forma { padding: 10px 6px; font-size: .85rem; }
  .forma > .ico { width: 30px; height: 30px; padding: 6px; }
  .fila-calif { padding: 10px 14px; }
  .lista .fecha-caja { width: 42px; }
  .alerta-faltas { padding: 12px 14px; gap: 10px; }
  .alerta-faltas > .ico { display: none; }
  .alerta-faltas li { gap: 4px 8px; }
  .alerta-faltas li > span[style*="margin-left:auto"] { margin-left: 0 !important; width: 100%; }
  .qr-tarjeta { padding: 20px 14px; }
  .lector-titulo small { display: none; }
  .lector-barra { gap: 4px; padding: 6px 8px; }
  .lector-paginas { padding: 8px 0; gap: 8px; }
  .auth-card { padding: 22px 18px; border-radius: 14px; }
  .insc-cabecera { border-radius: 14px; }
  .alumno-wrap { padding: 16px 14px 40px; }
}
@media (max-width: 380px) {
  .estados label { width: 38px; }
  .sel-concepto { width: 62px; }
  .g-4 { grid-template-columns: 1fr; }
}