:root {
  --bg: #f2f4f8;
  --paper: #ffffff;
  --ink: #1b2a41;
  --ink-2: #53627a;
  --line: #d8dee8;
  --accent: #24478f;
  --accent-hover: #1a3670;
  --on-accent: #ffffff;
  --margin: #b3372b;
  --ok: #2b7654;
  --ok-bg: #e5f3ec;
  --warn: #8a5a00;
  --warn-bg: #fdf1d8;
  --bad: #a3271d;
  --bad-bg: #fbe6e3;
  --orange: #a45f00;
  --orange-bg: #fdf1e0;
  --azul: #2b5fa8;
  --azul-bg: #e7effb;
  --verde: #2b7654;
  --verde-bg: #e6f4ec;
  --ne-azul: #aecbeb;
  --ne-naranja: #f6cb8e;
  --ne-rojo: #eeaea3;
  --top: #16233a;
  /* Alto máximo del formulario y de la tabla cuando cada uno se desplaza por su cuenta */
  --panel-maxh: calc(100vh - 2rem);
  /* Colores de identidad por asignatura en el Horario (sin relación con los colores de calificación) */
  --hc0: #6a5bd1; --hc1: #1d8c8c; --hc2: #b5509a; --hc3: #4f8a3d;
  --hc4: #c77b1f; --hc5: #2f6fae; --hc6: #9a5230; --hc7: #637087;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111826; --paper: #182236; --ink: #e6ebf4; --ink-2: #9aa9c0; --line: #2b3852;
    --accent: #7ea2ee; --accent-hover: #9bb8f4; --on-accent: #0e1626; --margin: #e0705f;
    --ok: #6fd0a2; --ok-bg: #16362a; --warn: #f0c26b; --warn-bg: #3a2e12;
    --bad: #f0958a; --bad-bg: #3d1c19; --orange: #f2b56b; --orange-bg: #3a2a14; --azul: #8fb4ee; --azul-bg: #1a2a45; --verde: #78cfa3; --verde-bg: #163628; --ne-azul: #89a9cf; --ne-naranja: #d1a565; --ne-rojo: #c8968b; --top: #0b1220;
    --hc0: #a99bf0; --hc1: #5fc6c6; --hc2: #e08fcb; --hc3: #8fcf78;
    --hc4: #eab06a; --hc5: #85aee0; --hc6: #c98f69; --hc7: #a7b2c4;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.15rem; margin-bottom: .9rem; }
a { color: var(--accent); }
code { background: color-mix(in srgb, var(--line) 55%, transparent); padding: .05em .35em; border-radius: 4px; font-size: .92em; }

/* Barra superior */
.top { background: var(--top); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; padding: .6rem 1.25rem; }
.brand { font-family: var(--serif); font-size: 1.1rem; color: #fff; text-decoration: none; font-weight: 600; }
.top nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.top nav a { color: #c9d4e8; text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
.top nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.top nav a.on { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 6px 6px 0 0; }

main { max-width: 1300px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.lead { color: var(--ink-2); margin: .35rem 0 1.25rem; max-width: 70ch; }
.hint { color: var(--ink-2); font-size: .85rem; margin: .75rem 0 0; max-width: 70ch; }

/* Tarjetas y disposición */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
.listcol { min-width: 0; }

/* Formulario: margen rojo, como una libreta */
.formcard { border-left: 3px solid var(--margin); position: sticky; top: 1rem;
  max-height: var(--panel-maxh); overflow-y: auto; }
@media (max-width: 900px) { .formcard { position: static; max-height: none; overflow-y: visible; } }
.field { margin-bottom: .9rem; }
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
.req { color: var(--margin); }
input[type=text], input[type=tel], input[type=number], input[type=search], input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 7px; padding: .5rem .65rem;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.field small { display: block; color: var(--ink-2); margin-top: .25rem; font-size: .8rem; }
.check { display: flex; align-items: center; gap: .45rem; font-weight: 400; margin: 0; }
.check.small { font-size: .82rem; color: var(--ink-2); }
input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--accent); }

.actions, .bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.actions { margin-top: 1.1rem; }
.spacer { flex: 1; }
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .9rem;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.btn.danger:hover { background: var(--bad-bg); border-color: var(--bad); }

/* Mensajes */
.msg { border-radius: 8px; padding: .65rem .9rem; margin-bottom: .75rem; border: 1px solid; }
.msg ul { margin: 0; padding-left: 1.1rem; }
.msg.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.msg.aviso { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.msg.error { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.reporte h2 { margin-bottom: .4rem; }
.reporte.ok { border-left: 3px solid var(--ok); }
.reporte.mal { border-left: 3px solid var(--bad); }
.reporte ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* Trimestres */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.card .chips { margin-bottom: 0; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; background: var(--paper); }
.chip b { margin-right: .35rem; }
.chip.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.chip.falta { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.chip.mal { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.chip.vacio { color: var(--ink-2); }

/* Importar / exportar */
.csv summary { cursor: pointer; font-weight: 600; }
.csvbody { margin-top: .9rem; }
.importform { display: grid; gap: .75rem; max-width: 560px; }
.importform .btn { justify-self: start; }

/* Filtros y tabla */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filters input[type=search] { flex: 1 1 200px; width: auto; }
.filters select { flex: 0 1 200px; width: auto; }
.tablewrap { overflow-x: auto; overflow-y: auto; max-height: var(--panel-maxh); }
@media (max-width: 900px) { .tablewrap { max-height: none; overflow-y: visible; } }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; color: var(--ink-2); font-weight: 600; padding: .45rem .6rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tr.editing { background: color-mix(in srgb, var(--margin) 9%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.sel { width: 2rem; }
.row-actions { text-align: right; white-space: nowrap; }
td.empty { text-align: center; color: var(--ink-2); padding: 1.6rem; }
.bulkbar { margin-top: .9rem; }
.count, .pager { color: var(--ink-2); font-size: .85rem; }
.pager a { margin: 0 .35rem; }

/* Inicio */
.pasos { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.pasos a { display: flex; gap: .9rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); }
.pasos a:hover { border-color: var(--accent); }
.pasos small { color: var(--ink-2); }
.pn { font-family: var(--serif); font-size: 1.9rem; min-width: 2.4rem; text-align: center; color: var(--accent); }

/* ===== Estudiantes: tabla profesional, insignias y previsualización ===== */
.muted { color: var(--ink-2); }
.badge { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); white-space: nowrap; }
.enlace { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.enlace:hover { color: var(--accent); text-decoration-color: var(--accent); }
td code { font-size: .85em; }

.nm { font-weight: 600; }

.tabletools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.seltxt { color: var(--ink-2); font-size: .85rem; }
.tools-hint { margin: 0 0 .75rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.tablewrap { border: 1px solid var(--line); border-radius: 10px; }
table.pro { border-collapse: separate; border-spacing: 0; }
table.pro thead th { background: var(--paper); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); color: var(--ink-2); z-index: 2;
  text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; padding: .7rem .75rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; }
table.pro tbody td { padding: .6rem .75rem; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
table.pro tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
table.pro tbody tr:last-child td { border-bottom: 0; }
table.pro tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.pro tr.editing { background: color-mix(in srgb, var(--margin) 9%, transparent); }
table.pro tr.fila-hoy td { background: var(--verde-bg); }
table.pro tr.fila-hoy:hover td { background: color-mix(in srgb, var(--verde-bg) 80%, var(--accent) 20%); }
table.pro tr.fila-retraso-azul td { background: var(--azul-bg); }
table.pro tr.fila-retraso-azul:hover td { background: color-mix(in srgb, var(--azul-bg) 80%, var(--accent) 20%); }
table.pro tr.fila-retraso-naranja td { background: var(--orange-bg); }
table.pro tr.fila-retraso-naranja:hover td { background: color-mix(in srgb, var(--orange-bg) 80%, var(--accent) 20%); }
table.pro tr.fila-retraso-rojo td { background: var(--bad-bg); }
table.pro tr.fila-retraso-rojo:hover td { background: color-mix(in srgb, var(--bad-bg) 80%, var(--accent) 20%); }
table.pro tr.hc0 td:first-child, table.pro tr.hc1 td:first-child, table.pro tr.hc2 td:first-child,
table.pro tr.hc3 td:first-child, table.pro tr.hc4 td:first-child, table.pro tr.hc5 td:first-child,
table.pro tr.hc6 td:first-child, table.pro tr.hc7 td:first-child { border-left: 4px solid transparent; }
table.pro tr.hc0 td:first-child { border-left-color: var(--hc0); }
table.pro tr.hc1 td:first-child { border-left-color: var(--hc1); }
table.pro tr.hc2 td:first-child { border-left-color: var(--hc2); }
table.pro tr.hc3 td:first-child { border-left-color: var(--hc3); }
table.pro tr.hc4 td:first-child { border-left-color: var(--hc4); }
table.pro tr.hc5 td:first-child { border-left-color: var(--hc5); }
table.pro tr.hc6 td:first-child { border-left-color: var(--hc6); }
table.pro tr.hc7 td:first-child { border-left-color: var(--hc7); }

/* Horario de hoy (página de Inicio) */
.horario-hoy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.horario-hoy li { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; background: var(--paper); }
.horario-hoy .hora { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); min-width: 8.5em; }
.horario-hoy .detalle { flex: 1; min-width: 0; }
.horario-hoy .detalle .clase { font-weight: 600; }
.horario-hoy .detalle .lugar { color: var(--ink-2); font-size: .85rem; }
.horario-hoy li.hc0 { border-left-color: var(--hc0); }
.horario-hoy li.hc1 { border-left-color: var(--hc1); }
.horario-hoy li.hc2 { border-left-color: var(--hc2); }
.horario-hoy li.hc3 { border-left-color: var(--hc3); }
.horario-hoy li.hc4 { border-left-color: var(--hc4); }
.horario-hoy li.hc5 { border-left-color: var(--hc5); }
.horario-hoy li.hc6 { border-left-color: var(--hc6); }
.horario-hoy li.hc7 { border-left-color: var(--hc7); }
.horario-vacio { color: var(--ink-2); margin: 0; }

/* Ícono de libro junto a cada hora, que abre la bitácora de esa clase (Inicio) */
.libro-btn { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.libro-btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); color: var(--accent); border-color: var(--accent); }
.libro-btn svg { width: 1.05rem; height: 1.05rem; }

/* Horario de hoy + Recordatorios pendientes, uno junto al otro, 50 % / 50 % (página de Inicio) */
.inicio-dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .inicio-dos-col { grid-template-columns: 1fr; } }

/* Ventana flotante con la bitácora de una clase (ícono de libro en Horario de hoy, Inicio) */
dialog.dlg-bitacora { border: none; border-radius: 12px; padding: 0; width: min(440px, calc(100vw - 3rem));
  background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px rgba(16, 24, 40, .25); }
dialog.dlg-bitacora::backdrop { background: rgba(27, 42, 65, .45); }
.dlg-bitacora form { padding: 1.4rem 1.5rem; }
.dlg-bitacora-head { display: flex; align-items: center; gap: .6rem; }
.dlg-bitacora-icono { flex: none; width: 2rem; height: 2rem; border-radius: 8px; background: var(--warn-bg); color: var(--warn);
  display: flex; align-items: center; justify-content: center; }
.dlg-bitacora-icono svg { width: 1rem; height: 1rem; }
.dlg-bitacora-head h3 { flex: 1; margin: 0; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.dlg-cerrar { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-2); cursor: pointer; font-size: .95rem; line-height: 1; }
.dlg-cerrar:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.dlg-bitacora-meta { margin: .6rem 0 0; color: var(--ink-2); font-size: .84rem; }
.dlg-bitacora-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .1rem; margin: .7rem 0 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dlg-nav-btn { display: flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); border-radius: 7px; padding: .3rem .6rem; font-size: .78rem; font-family: var(--sans); cursor: pointer; }
.dlg-nav-btn svg { width: .8rem; height: .8rem; }
.dlg-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); color: var(--accent); border-color: var(--accent); }
.dlg-nav-btn:disabled { opacity: .35; cursor: default; }
.dlg-bitacora-fecha { font-size: .76rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.dlg-bitacora-cuerpo:not([hidden]) { display: flex; flex-direction: column; gap: .9rem; }
.dlg-bitacora-etq { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .2rem; }
.dlg-bitacora-txt { font-size: .88rem; white-space: pre-line; }
.dlg-bitacora-bloque.bit-pendiente .dlg-bitacora-etq, .dlg-bitacora-bloque.bit-pendiente .dlg-bitacora-txt { color: var(--bad); }
.dlg-bitacora-bloque.bit-tarea .dlg-bitacora-etq, .dlg-bitacora-bloque.bit-tarea .dlg-bitacora-txt { color: var(--verde); }
.dlg-bitacora-bloque .dlg-bitacora-txt.vacio { color: var(--ink-2); }
.dlg-bitacora-vacio { margin: 0; }
.dlg-bitacora-pie { margin: 1.1rem 0 0; text-align: right; }

/* Recordatorios pendientes (página de Inicio) */
.recordatorios-hoy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 22rem; overflow-y: auto; }
.recordatorios-hoy li { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; background: var(--paper); }
.recordatorios-hoy .fecha { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); min-width: 4.5em; }
.recordatorios-hoy .detalle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recordatorios-hoy li.prio-alta { border-left-color: var(--bad); }
.recordatorios-hoy li.prio-media { border-left-color: var(--orange); }
.recordatorios-hoy li.prio-baja { border-left-color: var(--verde); }
.recordatorios-hoy li.vencido .fecha { color: var(--bad); }

.lote summary { cursor: pointer; font-weight: 600; }
.lote-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; align-items: end; margin-top: .9rem; }
.pasoslote { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .9rem 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .85rem; counter-reset: p; }
.pasoslote li::before { counter-increment: p; content: counter(p); display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem;
  margin-right: .4rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; }

.resumen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.estado { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.estado.nuevo { background: var(--ok-bg); color: var(--ok); }
.estado.actualiza { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.estado.igual, .estado.omitido { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.estado.error { background: var(--bad-bg); color: var(--bad); }
tr.fila-error td { background: color-mix(in srgb, var(--bad) 6%, transparent); }
tr.fila-inactiva td { color: var(--ink-2); }
.notas { margin: 0; padding-left: 1rem; font-size: .82rem; }
.notas .e { color: var(--bad); }
.previa-acciones { position: sticky; bottom: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem 1rem; margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; box-shadow: 0 -6px 16px rgba(0,0,0,.05); }

/* ===== Calificaciones ===== */
.tabs { display: flex; gap: .25rem; margin: 1rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .55rem 1rem; text-decoration: none; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

.selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; align-items: end; }
.selector .field { margin: 0; }
select:disabled { opacity: .55; }
.filtros-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; align-items: end; }
.filtros-rep .field { margin: 0; }

.aporte-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 1.1rem 0 .2rem; }
.aporte-info h2 { margin: 0; }
.aporte-info .meta { color: var(--ink-2); font-size: .88rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin: .9rem 0 1.1rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.stat .k { display: block; color: var(--ink-2); font-size: .78rem; }
.stat .v { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1.25; }
.stat small { color: var(--ink-2); font-size: .75rem; }
.stat.naranja .v.on { color: var(--orange); }
.stat.rojo .v.on { color: var(--bad); }
.stat.verde .v.on { color: var(--verde); }
.stat.azul .v.on { color: var(--azul); }

.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--ink-2); font-size: .82rem; }
.punto { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .3rem; }
.punto.naranja { background: var(--orange); opacity: .75; }
.punto.rojo { background: var(--bad); opacity: .7; }
.punto.verde { background: var(--verde); opacity: .7; }
.punto.azul { background: var(--azul); opacity: .75; }
.filtros-chip { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .9rem; }
.chipbtn { font: inherit; font-size: .82rem; padding: .25rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.chipbtn:hover { border-color: var(--ink-2); }
.chipbtn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

table.notas td.notacol { width: 7.5rem; }
input.nota { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; max-width: 6.5rem; }
input.coment { min-width: 14rem; }
.sub { font-size: .78rem; color: var(--ink-2); }
.extracto { display: inline-block; max-width: 42rem; white-space: pre-line; }
.bit-extra { font-size: .78rem; max-width: 42rem; white-space: pre-line; margin-top: .2rem; }
.bit-pendiente { color: var(--bad); }
.bit-tarea { color: var(--verde); }

.buscar-fk { position: relative; }
.buscar-fk-txt { width: 100%; }
.buscar-fk-res {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .25rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12); max-height: 15rem; overflow-y: auto;
}
.buscar-fk-item { padding: .5rem .75rem; cursor: pointer; font-size: .92rem; }
.buscar-fk-item:hover, .buscar-fk-item:focus { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.buscar-fk-vacio { padding: .5rem .75rem; color: var(--ink-2); font-size: .9rem; }
.buscar-fk-extra { margin: .35rem 0 0; color: var(--ink-2); }
tr.nota-naranja td { background: color-mix(in srgb, var(--orange) 8%, transparent); }
tr.nota-rojo td { background: color-mix(in srgb, var(--bad) 7%, transparent); }
tr.nota-verde td { background: color-mix(in srgb, var(--verde) 6%, transparent); }
tr.nota-azul td { background: color-mix(in srgb, var(--azul) 7%, transparent); }
tr.nota-naranja input.nota { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); color: var(--orange); background: var(--orange-bg); }
tr.nota-rojo input.nota { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); color: var(--bad); background: var(--bad-bg); }
tr.nota-verde input.nota { border-color: color-mix(in srgb, var(--verde) 45%, var(--line)); color: var(--verde); background: var(--verde-bg); }
tr.nota-azul input.nota { border-color: color-mix(in srgb, var(--azul) 50%, var(--line)); color: var(--azul); background: var(--azul-bg); }
tr.nota-invalida input.nota { border-color: var(--bad); outline: 1px solid var(--bad); }
.pill { display: inline-block; min-width: 3.2rem; text-align: center; padding: .1rem .55rem; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pill.naranja { background: var(--orange-bg); color: var(--orange); }
.pill.rojo { background: var(--bad-bg); color: var(--bad); }
.pill.verde { background: var(--verde-bg); color: var(--verde); }
.pill.azul { background: var(--azul-bg); color: var(--azul); }
td.coment-txt { max-width: 22rem; color: var(--ink-2); font-size: .86rem; }
.acciones-notas { position: sticky; bottom: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem 1rem; margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; box-shadow: 0 -6px 16px rgba(0,0,0,.05); }
/* Reserva espacio para que esta barra fija nunca tape las últimas filas de una tabla corta */
form:has(.acciones-notas) { padding-bottom: 4.5rem; }

/* Encabezados ordenables */
a.orden, button.orden { font: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
a.orden:hover, button.orden:hover { color: var(--accent); }
a.orden .flecha, button.orden .flecha { font-size: .7rem; opacity: .4; }
a.orden.activo, button.orden.activo { color: var(--accent); }
a.orden.activo .flecha, button.orden.activo .flecha { opacity: 1; }

/* ===== Barra de navegación: grupos desplegables ===== */
.top nav { align-items: center; }
.grupo { position: relative; }
.grupo > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: .4rem;
  color: #c9d4e8; padding: .35rem .7rem; border-radius: 6px; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::after { content: ''; width: .4rem; height: .4rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); opacity: .75; }
.grupo[open] > summary::after { transform: translateY(.25rem) rotate(225deg); }
.grupo > summary:hover, .grupo[open] > summary { background: rgba(255,255,255,.1); color: #fff; }
.grupo > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.grupo.on > summary { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 6px 6px 0 0; }
.grupo .menu { position: absolute; top: calc(100% + .3rem); left: 0; z-index: 50; min-width: 13rem; display: flex; flex-direction: column;
  padding: .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.grupo .menu a { color: var(--ink); padding: .5rem .75rem; border-radius: 6px; text-decoration: none; box-shadow: none; }
.grupo .menu a:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); }
.grupo .menu a.on { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; box-shadow: none; }
.grupo .menu .sep { border: none; border-top: 1px solid var(--line); margin: .3rem .3rem; }
@media (max-width: 700px) {
  .grupo { flex: 1 1 100%; }
  .grupo .menu { position: static; margin: .25rem 0 .5rem; box-shadow: none; }
}

/* ===== Promedios ===== */
table.prom { font-variant-numeric: tabular-nums; }
table.prom thead th { vertical-align: bottom; }
table.prom th.cat { text-align: center; color: var(--ink); border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 11%, var(--paper)); }
table.prom th small { display: block; margin: .1rem 0 0; font-weight: 400; font-size: .7rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
table.prom th.cat small { display: inline; margin-left: .35rem; }
table.prom th.aporte { text-align: center; white-space: nowrap; min-width: 5.2rem; }
table.prom th.aporte small { white-space: normal; max-width: 8rem; margin-left: auto; margin-right: auto; }
table.prom th.aporte small.fechas { font-size: .62rem; opacity: .68; margin-top: 0; }
table.prom th, table.prom td { padding-left: .55rem; padding-right: .55rem; }
table.prom td.num, table.prom th.num { text-align: center; }
table.prom .promcat { border-left: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 4%, transparent); }
table.prom th.promcat { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
table.prom .califcol { border-left: 2px solid var(--line); }
table.prom tfoot th, table.prom tfoot td { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); border-top: 2px solid var(--line);
  font-weight: 600; padding: .65rem .75rem; text-align: left; }
table.prom tfoot td.num { text-align: center; }

.btn.copiado { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

/* ===== Novedades ===== */
.btn.small { padding: .3rem .65rem; font-size: .82rem; }
button.linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--bad); cursor: pointer; text-decoration: none; }
button.linklike:hover { text-decoration: underline; }
.row-actions form { display: inline; }
.row-actions > * + * { margin-left: .5rem; }

.envio-btn { font: inherit; cursor: pointer; border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.envio-btn.pendiente { background: var(--bad-bg); border: 1px solid var(--bad); color: var(--bad); }
.envio-btn.pendiente:hover { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.envio-btn.enviada { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok); }
.envio-btn.enviada:hover { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

.btn.whatsapp { background: #25d366; border-color: #1da851; color: #fff; }
.btn.whatsapp:hover { background: #1da851; border-color: #168a41; }

/* ===== Campo "Necesidad": tres círculos de color (formulario y tabla) ===== */
.semaforo { display: flex; align-items: center; gap: .65rem; padding: .15rem 0; }
.circulo-opcion { position: relative; display: inline-flex; cursor: pointer; padding: .2rem; border-radius: 50%; }
.circulo-opcion input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.circulo-opcion .circulo { width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent) inset; }
.circulo-opcion input:checked + .circulo { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.circulo-opcion input:focus-visible + .circulo { outline: 2px solid var(--accent); outline-offset: 3px; }
.circulo-opcion:hover .circulo { filter: brightness(1.08); }
.circulo-mini { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent) inset; }
.circulo-azul    { background: var(--ne-azul); }
.circulo-naranja { background: var(--ne-naranja); }
.circulo-rojo    { background: var(--ne-rojo); }
td:has(> .circulo-mini) { text-align: center; }
th.ne-col, td.ne-col { width: 2.2rem; }

.lista-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem .9rem; }
.lista-cursos .check { font-weight: 400; }

/* ===== Informe Estudiantil (pestaña de Promedios) ===== */
.ie-selector { grid-template-columns: minmax(230px, 2fr) repeat(2, minmax(190px, 1fr)); }
.ie-campo-estudiante { position: relative; }

.ie-estudiante .ie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem 1.4rem; }
.ie-estudiante .ie-observ { grid-column: 1 / -1; }
.ie-etq { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .2rem; }
.ie-val { font-size: .95rem; }

.ie-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }

.ie-reporte .ie-cab { text-align: center; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--accent); }
.ie-reporte .ie-cab h2 { margin: 0 0 .5rem; font-family: var(--serif); color: var(--accent); }
.ie-reporte .ie-cab p { margin: .15rem 0; color: var(--ink-2); }
.ie-reporte .ie-cab p:first-of-type { color: var(--ink); font-weight: 600; font-size: 1.02rem; }

table.ie-tabla th:first-child, table.ie-tabla td:first-child { width: 48%; }
table.ie-tabla .sub { display: block; }
table.ie-tabla .fechas { display: block; font-size: .72rem; opacity: .7; margin-top: .1rem; }
table.ie-tabla .ie-coment small { font-size: .8rem; color: var(--ink-2); }
table.ie-tabla tfoot th, table.ie-tabla tfoot td { border-top: 2px solid var(--line); font-weight: 700; }

.ie-pie { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.ie-pie br + * { font-weight: 600; }

/* Ventana flotante para pedir el teléfono antes de enviar el informe por WhatsApp */
dialog.dlg-whatsapp { border: none; border-radius: 12px; padding: 0; width: min(380px, calc(100vw - 3rem));
  background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px rgba(16, 24, 40, .25); }
dialog.dlg-whatsapp::backdrop { background: rgba(27, 42, 65, .45); }
.dlg-whatsapp form { padding: 1.4rem 1.5rem; }
.dlg-whatsapp .field { margin: 1rem 0; }
.dlg-acciones { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }

@media print {
  header.top, .tabs, .ie-selector, .ie-acciones, .hint, .msg { display: none !important; }
  main { max-width: none; padding: 0; }
  .ie-estudiante, .ie-reporte { border: none; box-shadow: none; padding: 0; }
  .ie-reporte { margin: 0; }
  table.ie-tabla thead th { background: none !important; color: var(--ink) !important; }
  .pill { box-shadow: none; }
}

/* Planificaciones: archivo ya adjunto (al editar) y ventana flotante «Ver» con el PDF ------- */
.plan-archivo-actual { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .7rem; margin-bottom: .5rem; background: color-mix(in srgb, var(--accent) 5%, var(--paper)); font-size: .85rem; }
.plan-archivo-actual svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--margin); }
.plan-archivo-actual span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

dialog.dlg-plan { border: none; border-radius: 12px; padding: 0; width: min(760px, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem); background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px rgba(16, 24, 40, .25); }
dialog.dlg-plan::backdrop { background: rgba(27, 42, 65, .45); }
.dlg-plan form { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-height: calc(100vh - 6rem); }
.dlg-plan-head { display: flex; align-items: flex-start; gap: .8rem; }
.dlg-plan-head h3 { flex: 1; margin: 0 0 .2rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.dlg-plan-etq { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .15rem; }
.dlg-plan-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.1rem; font-size: .85rem; }
.dlg-plan-meta b { display: block; font-weight: 600; }
.dlg-plan-meta .muted { display: block; font-size: .78rem; color: var(--ink-2); font-weight: 400; }
.dlg-plan-visor { flex: 1; min-height: 50vh; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.dlg-plan-visor iframe { width: 100%; height: 100%; min-height: 50vh; border: none; display: block; }
.dlg-plan-nueva { font-size: .82rem; }
@media (max-width: 560px) { .dlg-plan-meta { grid-template-columns: 1fr; } }

/* Comportamiento y Asistencia ------------------------------------------------------------
   Faltas (violeta, magenta, pizarra) y comportamiento (verde, azul, ámbar, rojo) tienen paletas distintas.
   Cada clase define --cm-c (color fuerte), --cm-bg (fondo suave) y --cm-tx (texto). */
.cmp-f-J { --cm-c: #6a5bd1; --cm-bg: #ece9fb; --cm-tx: #3d3294; }
.cmp-f-I { --cm-c: #9a2f7a; --cm-bg: #f9e4f1; --cm-tx: #7a1f61; }
.cmp-f-A { --cm-c: #3f6b78; --cm-bg: #e2f0f3; --cm-tx: #254b57; }
.cmp-c-S { --cm-c: #2b7654; --cm-bg: #e5f3ec; --cm-tx: #1f5a41; }
.cmp-c-F { --cm-c: #2b5fa8; --cm-bg: #e7effb; --cm-tx: #1a3f7a; }
.cmp-c-O { --cm-c: #a45f00; --cm-bg: #fdf1d8; --cm-tx: #6b4500; }
.cmp-c-N { --cm-c: #a3271d; --cm-bg: #fbe6e3; --cm-tx: #8a1f17; }
.cmp-f-X, .cmp-c-X { --cm-c: #6b7790; --cm-bg: #eef1f6; --cm-tx: #3a465c; }
@media (prefers-color-scheme: dark) {
  .cmp-f-J { --cm-c: #9d90f0; --cm-bg: #272248; --cm-tx: #cfc8fa; }
  .cmp-f-I { --cm-c: #e07fc0; --cm-bg: #3b1d33; --cm-tx: #f3bde0; }
  .cmp-f-A { --cm-c: #7fc0d1; --cm-bg: #17323a; --cm-tx: #bfe3ec; }
  .cmp-c-S { --cm-c: #78cfa3; --cm-bg: #163628; --cm-tx: #b6e8cf; }
  .cmp-c-F { --cm-c: #8fb4ee; --cm-bg: #1a2a45; --cm-tx: #c3d7f6; }
  .cmp-c-O { --cm-c: #f2b56b; --cm-bg: #3a2a14; --cm-tx: #f8d9ab; }
  .cmp-c-N { --cm-c: #f0958a; --cm-bg: #3d1c19; --cm-tx: #f8c4bd; }
  .cmp-f-X, .cmp-c-X { --cm-c: #8b97ae; --cm-bg: #212c42; --cm-tx: #c3ccdc; }
}

.cmp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-grupo { display: flex; flex-wrap: wrap; gap: .35rem; }
.cmp-grupo-letras { flex-wrap: nowrap; }

/* Botón seleccionable: radio o casilla real, oculta, dentro de una etiqueta con aspecto de botón */
.cmp-btn { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .3rem .7rem;
  border: 1.5px solid var(--cm-c); border-radius: 8px; background: var(--cm-bg); color: var(--cm-tx);
  font-weight: 600; font-size: .88rem; cursor: pointer; user-select: none; line-height: 1.2; }
.cmp-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cmp-btn:hover { filter: brightness(.97); }
.cmp-btn:has(input:checked) { background: var(--cm-c); color: #fff; }
.cmp-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-btn:has(input:checked)::after { content: ''; }
.cmp-btn .cmp-letra { background: var(--cm-c); color: #fff; width: 1.55rem; height: 1.55rem; font-size: .8rem; }
.cmp-btn:has(input:checked) .cmp-letra { background: #fff; color: var(--cm-c); }
.cmp-grupo-letras .cmp-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: .3rem; font-size: 1rem; font-weight: 700; }
.cmp-filtros .cmp-btn, .cmp-dia-filtros .cmp-btn { min-height: 34px; padding: .2rem .6rem; font-size: .82rem; }
.cmp-filtros .cmp-grupo-letras .cmp-btn, .cmp-masivo { min-width: 0; }
.cmp-masivo { min-height: 36px; }
@media (prefers-color-scheme: dark) { .cmp-btn:has(input:checked) { color: #0e1626; } .cmp-btn:has(input:checked) .cmp-letra { color: #0e1626; } }

.cmp-letra { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; font-weight: 700; font-size: .78rem; background: var(--cm-c); color: #fff; }
@media (prefers-color-scheme: dark) { .cmp-letra { color: #0e1626; } }
.cmp-comp { display: inline-flex; align-items: center; gap: .45rem; }
.cmp-comp-txt { font-size: .85rem; color: var(--ink-2); }
.cmp-pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--cm-c); background: var(--cm-bg); color: var(--cm-tx); white-space: nowrap; }

.cmp-est { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.cmp-est > .circulo { flex: none; width: 1.05rem; height: 1.05rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent) inset; }
.cmp-est > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.cmp-est .sub { font-size: .78rem; color: var(--ink-2); font-weight: 400; }
.cmp-ne-linea { margin-top: .4rem; font-size: .85rem; color: var(--ink-2); }
.cmp-detalle { max-width: 28ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; font-size: .82rem; color: var(--ink-2); margin: .6rem 0; }
.cmp-leyenda-t { font-weight: 600; color: var(--ink); }
.cmp-leyenda-i { display: inline-flex; align-items: center; gap: .4rem; }
.cmp-fecha-f { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-2); }
.cmp-fecha-f input { width: auto; }

.cmp-filtros-botones { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: flex-end; margin-bottom: .4rem; }
.cmp-filtro-t { display: block; font-size: .75rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.cmp-filtros-acc { display: flex; gap: .5rem; margin-left: auto; }

.cmp-dia-cab { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.cmp-dia-cab .field { margin: 0; flex: 1 1 190px; max-width: 280px; }
.cmp-dia td { vertical-align: middle; }
.cmp-fila.cmp-tocada { background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.cmp-fila[hidden] { display: none; }
.cmp-dia input[type=text] { width: 100%; min-width: 150px; }
.cmp-barra { position: sticky; bottom: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem 1rem; margin-top: .9rem; gap: .6rem 1rem; flex-wrap: wrap; box-shadow: 0 -4px 14px rgba(27, 42, 65, .08); }
.cmp-barra #dResumen { font-weight: 600; color: var(--ink); flex: 1 1 280px; }

.cmp-exportar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .9rem; }
.cmp-print-cab { text-align: center; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--accent); }
.cmp-print-cab h2 { margin: 0 0 .3rem; }
.cmp-print-cab p { margin: .1rem 0; }
.cmp-ficha { margin: 0 0 .9rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 8px; }
.cmp-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin: .8rem 0 1.1rem; }
.cmp-tot { border: 1px solid var(--line); border-top: 4px solid var(--cm-c, var(--line)); border-radius: 8px; padding: .5rem .8rem; background: var(--paper); }
.cmp-tot .k { display: block; font-size: .75rem; color: var(--ink-2); }
.cmp-tot .v { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.cmp-num { display: inline-block; min-width: 1.6rem; padding: .05rem .4rem; border-radius: 999px; text-align: center; font-weight: 700;
  background: var(--cm-bg); color: var(--cm-tx); border: 1px solid var(--cm-c); }
.cmp-informe h3 { font-family: var(--serif); font-size: 1.05rem; margin: 1.1rem 0 .5rem; }
.cmp-print-cab { display: block; }

@media (max-width: 720px) { .cmp-filtros-acc { margin-left: 0; } }

@media print {
  .cmp-noprint, .cmp-exportar, .cmp-barra { display: none !important; }
  .cmp-informe { border: none; padding: 0; box-shadow: none; }
  .cmp-pill, .cmp-letra, .cmp-num, .cmp-tot, .circulo, .cmp-btn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cmp-informe table { page-break-inside: auto; }
  .cmp-informe tr { page-break-inside: avoid; }
  .cmp-informe thead { display: table-header-group; }
}
.cmp-barra, .cmp-dia-filtros + .cmp-leyenda + form > .row, #dForm > .row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.cmp-exportar .meta, #dForm .meta, .cmp-barra .meta { color: var(--ink-2); font-size: .85rem; }
.cmp-grupo-comp .cmp-btn { flex: 1 1 calc(50% - .35rem); }
.cmp-dia-cab input[type=date] { width: 100%; box-sizing: border-box; }
.filters #cmpEstTxt { flex: 1 1 260px; width: auto; }

/* Alerta Temprana -------------------------------------------------------------------------
   Bajo rendimiento (índigo) e Inasistencia por nivel (amarilla, naranja, roja). Reutiliza --cm-c / --cm-bg / --cm-tx. */
.alt-BR       { --cm-c: #4a5fb0; --cm-bg: #e6eafb; --cm-tx: #26357a; }
.alt-amarilla { --cm-c: #d9b400; --cm-bg: #fff4c2; --cm-tx: #5c4500; }
.alt-naranja  { --cm-c: #e8892b; --cm-bg: #ffe3c7; --cm-tx: #7a3b00; }
.alt-roja     { --cm-c: #c0392b; --cm-bg: #fbe0dc; --cm-tx: #8a1f17; }
.alt-todas    { --cm-c: #6b7790; --cm-bg: #eef1f6; --cm-tx: #3a465c; }
@media (prefers-color-scheme: dark) {
  .alt-BR       { --cm-c: #8fa0f0; --cm-bg: #1e2447; --cm-tx: #c9d2fa; }
  .alt-amarilla { --cm-c: #e6c84a; --cm-bg: #3a3210; --cm-tx: #f6e7a0; }
  .alt-naranja  { --cm-c: #f2a45c; --cm-bg: #3d2610; --cm-tx: #fbd3a8; }
  .alt-roja     { --cm-c: #f0958a; --cm-bg: #3d1c19; --cm-tx: #f8c4bd; }
  .alt-todas    { --cm-c: #8b97ae; --cm-bg: #212c42; --cm-tx: #c3ccdc; }
}
.alt-dot { display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cm-c); }
.alt-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--cm-c); background: var(--cm-bg); color: var(--cm-tx); white-space: nowrap; }
.alt-ind { display: block; color: var(--cm-tx); }
td .alt-ind + .sub { display: block; font-size: .78rem; color: var(--ink-2); }
.alt-ind.alt-BR { color: var(--bad); }

.alt-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .2rem; }
.alt-chips .cmp-filtro-t { margin: 0 .25rem 0 0; }
.alt-chips .meta { color: var(--ink-2); font-size: .8rem; }
.alt-chip-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .25rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  text-decoration: none; color: var(--ink); background: var(--paper); border: 1.5px solid var(--cm-c); }
.alt-chip-link:hover { background: var(--cm-bg); }
.alt-chip-link.on { background: var(--cm-c); color: #fff; }
.alt-chip-link.on .alt-dot { background: #fff; }
@media (prefers-color-scheme: dark) { .alt-chip-link.on { color: #0e1626; } .alt-chip-link.on .alt-dot { background: #0e1626; } }
.alt-chip-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.alt-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 0 0 1rem; }
.alt-tarjeta { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--cm-c); border-radius: 8px; padding: .5rem .9rem; }
.alt-tarjeta .k { display: block; font-size: .75rem; color: var(--ink-2); }
.alt-tarjeta .v { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }

.alt-tabla td { vertical-align: top; }
.alt-tabla .row-actions { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; text-align: center; }
.alt-tabla .row-actions > * + * { margin-left: 0; }
.alt-print-cab { display: none; text-align: center; margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 2px solid var(--accent); }
.alt-print-cab h2 { margin: .2rem 0; }
.alt-print-cab p { margin: .1rem 0; }
.alt-hoja .alt-print-cab { display: block; }

/* Registrar */
.alt-banner { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--cm-c); background: var(--cm-bg); color: var(--cm-tx); }
.alt-banner .alt-pill { background: var(--paper); }
.alt-protocolo { font-size: .88rem; }
.alt-chip { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .8rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .88rem;
  border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); color: var(--ink); }
.alt-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.alt-chip.sugerida { border-style: dashed; }
.alt-chip:has(input:checked) { background: var(--accent); color: var(--on-accent, #fff); border-style: solid; }
.alt-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.alt-otra { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.alt-otra:first-of-type { border-top: 0; }

/* Informe individual y reglas */
.alt-firmas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; }
.alt-firmas > div { border-top: 1px solid var(--ink); padding-top: .4rem; text-align: center; }
.alt-firmas span, .alt-firmas small { display: block; }
.alt-firmas small { color: var(--ink-2); }
.alt-reglas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.alt-fechas { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem .9rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.alt-fechas legend { font-weight: 600; padding: 0 .3rem; }
.alt-fechas label { display: flex; flex-direction: column; font-size: .85rem; color: var(--ink-2); gap: .2rem; }
.alt-atrasos { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.alt-atrasos input[type=number] { width: 4.5rem; display: inline-block; }
.alt-clases input[type=number] { width: 5.5rem; text-align: right; }
.alt-niveles td:first-child { white-space: nowrap; width: 1%; }

@media print {
  .alt-noprint { display: none !important; }
  .alt-informe { border: none; padding: 0; box-shadow: none; }
  .alt-print-cab { display: block; }
  .alt-pill, .alt-tarjeta, .alt-dot, .cmp-tot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .alt-informe tr { page-break-inside: avoid; }
  .alt-informe thead { display: table-header-group; }
  .alt-tabla .row-actions { display: none; }
}

/* Alerta Temprana · Fase 1: estados del ciclo de vida y ficha */
.alt-est { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink); white-space: nowrap; margin: .1rem .15rem .1rem 0; }
.alt-est-notificada  { background: #e3edfb; border-color: #8fb0e3; color: #1c3d73; }
.alt-est-refuerzo    { background: #ffe3c7; border-color: #e8892b; color: #7a3b00; }
.alt-est-valoracion  { background: #ece4fa; border-color: #a58ad6; color: #43286f; }
.alt-est-cerrada     { background: #dff3e3; border-color: #6cb97d; color: #1d5a2c; }
.alt-est-continuidad { background: #fff4c2; border-color: #d9b400; color: #5c4500; }
.alt-est-derivada    { background: #fbe0dc; border-color: #c0392b; color: #8a1f17; }
@media (prefers-color-scheme: dark) {
  .alt-est-notificada  { background: #1c2f4d; border-color: #4f78b8; color: #cfe0fa; }
  .alt-est-refuerzo    { background: #4a2d12; border-color: #c4742a; color: #ffd8b0; }
  .alt-est-valoracion  { background: #33284f; border-color: #8466bd; color: #dccdf6; }
  .alt-est-cerrada     { background: #173a22; border-color: #4a9a5c; color: #c4ebcd; }
  .alt-est-continuidad { background: #44390c; border-color: #b39700; color: #fbe9a0; }
  .alt-est-derivada    { background: #4d1d18; border-color: #b0402f; color: #f8cbc5; }
}
.alt-fechas3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.alt-tarjeta .sub { display: block; font-size: .78rem; opacity: .8; }
@media print { .alt-est { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.grid.alt-ficha { grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); }
.alt-ficha .formcard { position: static; max-height: none; overflow: visible; }
@media (max-width: 900px) { .grid.alt-ficha { grid-template-columns: 1fr; } }

/* Inicio: la clase en curso se resalta en verde */
.horario-hoy li.ahora { background: var(--ok-bg); border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.horario-hoy li.ahora .hora { color: var(--ok); }
.ahora-tag { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; background: var(--ok); color: var(--ok-bg);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.dlg-bitacora-pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }

/* Marca: ícono en la barra superior y logo en Inicio (siempre sobre blanco para que se lean los colores del logo) */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-logo { display: inline-flex; background: #fff; border-radius: 8px; padding: 2px; }
.brand-logo img { display: block; width: 30px; height: 30px; }
.inicio-marca { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.inicio-logo { display: inline-flex; background: #fff; border-radius: 10px; padding: .3rem .6rem; }
.inicio-logo img { display: block; height: 72px; width: auto; }
.inicio-marca-txt { border-left: 3px solid #f59a33; padding-left: 1.2rem; color: var(--ink-2); }
.inicio-marca-titulo { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
@media print { .inicio-marca { display: none; } }

/* ---- Editor de texto enriquecido (Plan de Clase → Anotaciones) ---- */
.ed { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); display: flex; flex-direction: column; min-width: 0; }
.ed:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ed .barra { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .4rem; border-bottom: 1px solid var(--line); background: var(--bg); border-radius: 8px 8px 0 0; }
.ed .eg { display: inline-flex; gap: .15rem; padding-right: .35rem; margin-right: .15rem; border-right: 1px solid var(--line); }
.ed .espacio { flex: 1; }
.ed .bt { min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.ed .bt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ed .bt[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--accent); }
.ed .bt svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed .bt b, .ed .bt i, .ed .bt u { font-family: var(--serif); font-size: 1rem; }
.ed .bt.h { font-weight: 700; font-family: var(--serif); }
.ed .pal { position: relative; display: inline-flex; }
.ed .pal .bt { gap: .15rem; padding: 0 .35rem 0 .5rem; }
.ed .letra { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1; display: inline-flex; flex-direction: column; align-items: center; }
.ed .letra svg { width: 1rem; height: 1rem; }
.ed .franja { display: block; width: 1rem; height: .22rem; border-radius: 2px; margin-top: 1px; background: var(--c, transparent); border: 1px solid var(--line); }
.ed .pal > .bt > svg { width: .6rem; height: .6rem; }
.ed .em { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.18); width: 11.5rem; }
.ed .em[hidden] { display: none; }
.ed .em .tit { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .35rem; }
.ed .muestras { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.ed .mu { height: 1.9rem; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; background: var(--c); display: inline-flex; align-items: center; justify-content: center; font: 700 .95rem var(--serif); padding: 0; }
.ed .mu:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed .em .quitar { margin-top: .45rem; width: 100%; font: inherit; font-size: .82rem; padding: .3rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.ed .area { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.ed .cuerpo { padding: .8rem 1rem; min-height: 11rem; max-height: 22rem; overflow: auto; outline: none; line-height: 1.6; }
.ed .cuerpo:empty::before { content: attr(data-ph); color: var(--ink-2); }
.rt h3 { font-family: var(--serif); font-size: 1.2rem; margin: .5rem 0 .25rem; }
.rt h4 { font-family: var(--serif); font-size: 1.05rem; margin: .45rem 0 .2rem; }
.rt h5 { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: .45rem 0 .2rem; }
.rt p { margin: .25rem 0; } .rt ul, .rt ol { margin: .25rem 0; padding-left: 1.5rem; }
.rt span[style*="background"] { color: #1b2a41; border-radius: 2px; }
.dlg-bitacora-txt .rt h3 { font-size: 1rem; } .dlg-bitacora-txt .rt h4 { font-size: .95rem; }
.dlg-bitacora-txt:has(.rt) { white-space: normal; }
.ed .pie { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .7rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-2); }
.ed .lateral, .ed .solo-full { display: none; }
.ed.full .solo-full { display: inline-flex; }
.ed.full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; border: 0; }
.ed.full .barra { border-radius: 0; padding-block: .55rem; }
.ed.full .area { flex-direction: row; overflow: hidden; }
.ed.full .centro { flex: 1; min-width: 0; overflow: auto; }
.ed.full .cuerpo { max-height: none; overflow: visible; width: min(46rem, 100%); margin: 0 auto; padding: 1.6rem 1.2rem; font-size: 1.05rem; }
.ed.full .pie { padding-inline: 1.2rem; }
.ed.full.con-panel .lateral { display: flex; flex-direction: column; width: min(22rem, 38%); border-left: 1px solid var(--line); background: var(--bg); min-height: 0; }
.ed .lat-tabs { display: flex; border-bottom: 1px solid var(--line); }
.ed .lat-tabs button { flex: 1; font: inherit; font-size: .85rem; font-weight: 600; padding: .6rem .5rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; }
.ed .lat-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.ed .lat-cont { padding: .8rem; overflow: auto; flex: 1; display: grid; gap: .7rem; align-content: start; }
.ed .lat-cont[hidden] { display: none; }
.ed .ant-lista { display: grid; gap: .7rem; }
.ed .ed-nota { font-size: .85rem; color: var(--ink-2); }
.ed .prev { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; font-size: .88rem; }
.ed .prev .f { font-size: .72rem; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .2rem; }
.ed .prev .ins { font: inherit; font-size: .75rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--accent); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ed .prev .ins:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ed .lat-cont textarea { min-height: 6rem; width: 100%; }
body.ed-bloqueado { overflow: hidden; }
.ed-anc { position: static !important; z-index: auto !important; overflow: visible !important; max-height: none !important; transform: none !important; }

.celda-rt { max-height: 6.2em; overflow: hidden; font-size: .9rem; line-height: 1.4; }
.celda-rt.corta { -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.celda-rt .rt h3, .celda-rt .rt h4 { font-size: .95rem; margin: .1rem 0; } .celda-rt .rt h5 { margin: .1rem 0; }
.celda-rt .rt p { margin: .1rem 0; } .celda-rt .rt ul, .celda-rt .rt ol { margin: .1rem 0; }
.link-btn { font: inherit; padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; }
.dlg-ver-plan { max-width: min(34rem, 94vw); }
.dlg-ver-plan .dlg-bitacora-pie { display: flex; gap: .5rem; }

/* Condiciones para Alertas: pestañas y barra de guardado fija */
.alt-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin: 1rem 0; overflow-x: auto; }
.alt-tab { font: inherit; font-weight: 600; font-size: .92rem; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-2); padding: .6rem .9rem; cursor: pointer; white-space: nowrap; }
.alt-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.alt-tab .alt-pt { display: none; width: .5rem; height: .5rem; border-radius: 50%; background: #d98a00; margin-left: .4rem; vertical-align: middle; }
.alt-tab.mod .alt-pt { display: inline-block; }
.alt-panel[hidden] { display: none; }
.alt-panel { margin-bottom: 5rem; }
.alt-sub { display: flex; gap: .8rem; align-items: baseline; margin: 1.3rem 0 .5rem; }
.alt-cambiar { font-size: .82rem; font-weight: 600; margin-left: auto; }
.alt-pend { color: #a4570a; font-weight: 600; }
.alt-limites td { border: 0; padding: .35rem .4rem; }
.alt-limites td:first-child { white-space: nowrap; width: 1%; }
.alt-limites input[type=number] { width: 4.5rem; display: inline-block; text-align: right; }
.alt-err { color: #a33; font-weight: 600; }
.alt-barra { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.08); padding: .7rem 1rem; z-index: 20; }
.alt-barra-in { max-width: 70rem; margin: 0 auto; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
#alt-estado { font-size: .88rem; color: var(--ink-2); }
#alt-estado.mod { color: #a4570a; font-weight: 600; }
.alt-volver { margin-left: auto; }
.alt-barra .btn:disabled { opacity: .45; cursor: default; }
@media print { .alt-barra { display: none; } }

/* Filtro por botones (p. ej. día de clase en el Plan de Clase) */
.pills-filtro { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.pills-et { font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-right: .3rem; }
.pill { font: inherit; font-size: .9rem; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill.hoy::after { content: " · hoy"; font-weight: 400; font-size: .78rem; }

/* Barra compacta de listados */
.barra-c { position: relative; align-items: center; }
.oculto-c { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; padding: 0; border: 0; }
.ico-btn { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.ico-btn svg { width: 1rem; height: 1rem; flex: none; }
.ico-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.cnt-filtros { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; }
.menu-wrap { position: relative; }
.menu-exp { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; min-width: 17rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .4rem; }
.menu-exp[hidden], .panel-filtros[hidden] { display: none; }
.menu-obj { font-size: .8rem; color: var(--ink-2); padding: .4rem .6rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.menu-obj b { color: var(--ink); }
.menu-exp button { display: block; width: 100%; text-align: left; font: inherit; font-size: .92rem; background: none; border: 0; border-radius: 6px; padding: .5rem .6rem; cursor: pointer; color: var(--ink); }
.menu-exp button:hover { background: var(--bg); }
.panel-filtros { flex: 1 1 100%; display: grid; gap: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .8rem .9rem; }
.selects-filtros { display: flex; flex-wrap: wrap; gap: .8rem; }
.fl-c { display: grid; gap: .25rem; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.fl-c select { font-weight: 400; min-width: 11rem; }
.quitar-filtros { justify-self: start; font-size: .85rem; }
.etiquetas-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.4rem 0 .8rem; }
.etq-f { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .35rem .15rem .7rem; }
.etq-f a { text-decoration: none; color: var(--ink-2); padding: .05rem .35rem; border-radius: 50%; }
.etq-f a:hover { background: var(--line); }

.menu-exp a { display: block; width: 100%; text-align: left; font-size: .92rem; border-radius: 6px; padding: .5rem .6rem; color: var(--ink); text-decoration: none; }
.menu-exp a:hover { background: var(--bg); }
.cnt-filtros[hidden] { display: none; }
form[data-compacto] > .panel-filtros { margin-top: .6rem; }
@media print { .barra-c, .panel-filtros, .etiquetas-filtros { display: none !important; } }
form[data-compacto] + .etiquetas-filtros { margin: .6rem 0 .8rem; }

/* WhatsApp al tutor (Alerta Temprana) */
.wa-det { position: relative; display: inline-block; }
.wa-det > summary { list-style: none; cursor: pointer; }
.wa-det > summary::-webkit-details-marker { display: none; }
.wa-menu { right: auto; left: 0; min-width: 18rem; }
.wa-menu a small { color: var(--ink-2); }
.wa-btn { border-color: #1f9d55; color: #14783f; }
.wa-btn:hover { background: color-mix(in srgb, #1f9d55 10%, var(--paper)); }
@media print { .wa-det, .wa-btn { display: none !important; } }

/* Alerta Temprana: cambio rápido de estado */
.alt-estado-f { display: inline-block; margin: 0 .25rem .2rem 0; }
.alt-estado-sel { font: inherit; font-size: .8rem; padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); max-width: 8.5rem; }
.alt-est-det { display: inline-block; position: relative; margin: 0 .25rem .2rem 0; }
.alt-est-det > summary { list-style: none; cursor: pointer; }
.alt-est-det > summary::-webkit-details-marker { display: none; }
.alt-est-menu { position: absolute; z-index: 20; left: 0; top: 100%; min-width: 10rem; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: .3rem; }
.alt-est-menu button { text-align: left; background: none; border: 0; padding: .4rem .6rem; border-radius: 6px; font: inherit; color: var(--ink); cursor: pointer; }
.alt-est-menu button:hover:not(:disabled) { background: var(--bg); }
.alt-est-menu button:disabled { color: var(--ink-2); cursor: default; font-weight: 600; }
@media print { .alt-est-det { display: none; } }

/* ---- Acceso (ingreso, primer uso, recuperación) ---- */
body.acceso { min-height: 100vh; }
.acc-centro { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem max(16px, env(safe-area-inset-left, 0px)); }
.acc-tarjeta { width: 100%; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem; }
.acc-marca { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; }
.acc-marca h1 { font-size: 1.2rem; }
.acc-marca span { font-size: .85rem; color: var(--ink-2); }
.acc-logo { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex: none; }
.acc-logo img { display: block; width: 44px; height: 44px; object-fit: contain; }
.acc-tarjeta h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.acc-campo { margin-bottom: 1rem; }
.acc-campo label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.acc-campo input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; }
.acc-ayuda { font-size: .82rem; color: var(--ink-2); margin: .3rem 0 0; }
.acc-aviso { border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem; }
.acc-aviso.err { background: var(--bad-bg); color: var(--bad); }
.acc-aviso.warn { background: var(--warn-bg); color: var(--warn); }
.acc-aviso.ok { background: var(--ok-bg); color: var(--ok); }
.acc-full { width: 100%; justify-content: center; text-align: center; }
.acc-pie { margin: 1rem 0 0; font-size: .88rem; }
.acc-ver { position: relative; }
.acc-ver button { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--accent); cursor: pointer; font-size: .82rem; padding: .3rem; }
.acc-codigo { font: 600 1.15rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-align: center; background: var(--bg); border: 1px dashed var(--ink-2); border-radius: 10px; padding: .9rem; margin: .75rem 0; user-select: all; }
.acc-fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.acc-check { display: flex; gap: .5rem; margin: 1rem 0; font-weight: 500; }
/* Menú de usuario y aviso de inactividad */
.usuario-menu { margin-left: auto; }
.usuario-menu .menu { right: 0; left: auto; }
.usuario-menu .menu form { margin: 0; }
.menu-btn { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .45rem .8rem; color: inherit; font: inherit; cursor: pointer; border-radius: 6px; }
.menu-btn:hover { background: var(--bg); }
.inact-fondo { position: fixed; inset: 0; background: rgba(10,15,25,.55); display: grid; place-items: center; padding: 1rem; z-index: 1000; }
.inact-fondo[hidden] { display: none; }
.inact-caja { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; max-width: 380px; }
.inact-bt { display: flex; gap: .6rem; flex-wrap: wrap; }
.inact-bt form { margin: 0; }
.print-logo { display: none; }
@media print { .print-logo { display: block; margin-bottom: .4rem; max-height: 48px; width: auto; } .usuario-menu, .inact-fondo { display: none !important; } }

/* ---- Configuración ---- */
input[type=password], input[type=email], input[type=url] { width: 100%; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; }
.alt-barra[hidden] { display: none; }
.cfg-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1.5rem; }
.cfg-previa { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-top: .5rem; font-size: .9rem; }
.cfg-previa small { display: block; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); font-size: .72rem; font-weight: 600; margin-bottom: .3rem; }
.cfg-previa span { white-space: pre-line; }
.cfg-logo { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.cfg-logo-caja { width: 160px; height: 100px; border: 1px dashed var(--ink-2); border-radius: 10px; display: grid; place-items: center; background: #fff; color: #53627a; font-size: .85rem; overflow: hidden; }
.cfg-logo-caja img { max-width: 100%; max-height: 100%; }
.cfg-nota { display: block; color: var(--ink-2); font-size: .82rem; margin-top: .4rem; max-width: 46rem; }
.cfg-check { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; font-weight: 500; }
.cfg-fila { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.cfg-resp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.cfg-resp div { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; }
.cfg-resp b { display: block; font-size: 1.05rem; }
.cfg-resp span { font-size: .8rem; color: var(--ink-2); }
.alt-panel-extra { margin-bottom: 5rem; }
.alt-panel-extra[hidden] { display: none; }
.alt-panel#alt-p-seguridad { margin-bottom: 1rem; }
.cfg-sesion { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
.cfg-sesion form { margin: 0; }
.cfg-inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cfg-inline input { width: 12rem; }
#cfg-estado { font-size: .88rem; color: var(--ink-2); }
#cfg-estado.mod { color: #a4570a; font-weight: 600; }

/* ---- Acerca de… ---- */
.acerca-dlg { border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem; max-width: 420px; width: calc(100% - 2rem); background: var(--paper); color: var(--ink); text-align: center; }
.acerca-dlg::backdrop { background: rgba(10,15,25,.55); }
.acerca-logo { margin: 0 0 .9rem; }
.acerca-logo img { display: block; margin: 0 auto; max-width: 100%; height: auto; background: #fff; border-radius: 10px; padding: 4px 8px; }
.acerca-dlg h2 { font-size: 1.3rem; margin: 0; }
.acerca-sub { color: var(--ink-2); font-size: .88rem; margin: .2rem 0 1.1rem; }
.acerca-dev { border-top: 1px solid var(--line); padding-top: 1rem; }
.acerca-dev small { display: block; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); font-size: .72rem; font-weight: 600; margin-bottom: .5rem; }
.acerca-dev b { display: block; font-size: 1.05rem; }
.acerca-dev span { display: block; color: var(--ink-2); }
.acerca-copy { margin: 1.1rem 0; font-size: .85rem; color: var(--ink-2); }
.acerca-dlg form { margin: 0; }
@media print { .acerca-dlg, #acerca-abrir { display: none !important; } }