/* ============================================================
   SiCCa · Ajustes propios
   Se carga DESPUÉS de app.min.css. Aquí va únicamente lo que
   SiCCa necesita y la hoja heredada no cubre, para no tocar
   nunca el archivo compartido con Vinculación.
   ============================================================ */

/* --- Menú lateral -------------------------------------------------
   La hoja heredada colorea cada pestaña con las variables --c/--c2/--c3
   que app.js define por posición. Antes se anulaban con !important porque
   nadie las alimentaba; ahora sí, así que solo se ajusta el tamaño y se
   deja pasar el color. */
#side #nav nav{display:flex; flex-direction:column; gap:5px}
#side #nav nav button{
  width:100%; text-align:left; min-height:40px;
  padding:9px 12px; border-radius:11px;
  font-size:13.5px; font-weight:560; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
#side #nav nav button svg{width:17px; height:17px; flex:none}

/* --- Pestañas internas de un panel ---------------------------------
   Antes se distinguían reutilizando el botón normal y su variante
   ghost, y con tantos botones alrededor no quedaba claro cuál estaba
   abierta. Ahora la activa lleva su propio estilo, no la ausencia de
   otro. */
.subtab{
  border:1px solid rgba(30,58,98,.14);
  background:rgba(255,255,255,.72);
  color:#33506f;
  border-radius:10px; padding:7px 14px;
  font-family:inherit; font-size:13px; font-weight:580; letter-spacing:-.01em;
  cursor:pointer; transition:.15s;
}
.subtab:hover{background:rgba(53,175,228,.14); border-color:rgba(53,175,228,.34)}
.subtab.on{
  background:linear-gradient(135deg,#3FB6E8,#1E8FC6);
  border-color:transparent; color:#fff;
  box-shadow:0 5px 14px rgba(30,143,198,.30);
}
.subtab.on:hover{background:linear-gradient(135deg,#3FB6E8,#1E8FC6)}

/* --- Tablas de datos --------------------------------------------- */
.tabla{width:100%; border-collapse:collapse; font-size:13px}
.tabla th{
  text-align:left; font-size:11px; font-weight:640; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft);
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tabla td{padding:9px 10px; border-bottom:.5px solid var(--line); vertical-align:top}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr:hover{background:rgba(53,175,228,.07)}
.tabla td.num{text-align:right; font-variant-numeric:tabular-nums}

/* Tabla de muchas columnas: los encabezados pueden partirse en dos líneas
   y el relleno se ajusta, para que entre completa sin barra lateral.
   Una barra horizontal obliga a mover la vista para leer una sola fila,
   que es justo lo que hay que evitar en una tabla de control. */
.tabla.compacta th,
.tabla.compacta td{padding:7px 7px; font-size:12.5px}
.tabla.compacta th{white-space:normal; line-height:1.25}
.tabla.compacta td.num{padding-left:4px; padding-right:4px}
/* Las acciones se reparten en varias líneas cuando no caben. Con
   nowrap, una fila con cuatro botones empujaba los primeros fuera del
   área visible de la tarjeta y parecía que la opción no existía. */
/* Las acciones van en una sola línea, alineadas a la derecha, y la
   columna se queda solo con el ancho que necesita. Repartirlas en varias
   líneas producía un escalonado desordenado y filas de triple altura;
   si la tabla no cabe, se desliza por dentro de su tarjeta. */
.tabla td.acc{
  text-align:right; white-space:nowrap; width:1%;
}
.tabla td.acc > *{vertical-align:middle}
.tabla td.acc .btn{
  padding:4px 10px; font-size:11.5px; line-height:1.3;
  min-height:0; border-radius:7px; margin-left:4px;
}
.tabla td.acc .btn:first-child{margin-left:0}

/* --- Etiquetas de estado ----------------------------------------- */
.chip{
  display:inline-block; padding:2.5px 9px; border-radius:99px;
  font-size:11.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
}
.chip.ok{background:var(--ok-bg); color:var(--ok)}
.chip.run{background:var(--run-bg); color:var(--run)}
.chip.wait{background:var(--wait-bg); color:var(--wait)}
.chip.stop{background:var(--stop-bg); color:var(--stop)}

/* --- Rejilla de formularios --------------------------------------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 16px}
.rejilla .ancho{grid-column:1/-1}

/* --- Barra de acciones sobre una tarjeta -------------------------- */
.barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.barra .crece{flex:1 1 auto}

/* --- Informe de validación de la carga de malla ------------------- */
.informe{max-height:340px; overflow:auto; margin-top:12px}
.informe .fila{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 10px; border-bottom:.5px solid var(--line); font-size:12.5px;
}
.informe .fila b{flex:none; min-width:64px; color:var(--ink-soft); font-weight:600}
.informe .fila.mal{background:var(--stop-bg)}
.informe .fila.mal b{color:var(--stop)}

/* --- Resumen numérico --------------------------------------------- */
.cifras{display:flex; gap:22px; flex-wrap:wrap; margin:2px 0 4px}
.cifras div{min-width:88px}
.cifras b{display:block; font-size:23px; font-weight:660; letter-spacing:-.03em}
.cifras span{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}

/* --- Zona de carga de archivo -------------------------------------
   Va con selectores propios y !important porque la hoja heredada
   estiliza los <label> del formulario y desalineaba este bloque. */
#main label.soltar{
  display:block !important;
  width:100%; margin:16px 0 0 !important; padding:26px 20px !important;
  border:1.5px dashed rgba(28,21,72,.24); border-radius:var(--r-md);
  background:rgba(28,21,72,.02);
  text-align:center !important; cursor:pointer; transition:.15s;
  box-sizing:border-box;
}
#main label.soltar:hover{
  border-color:var(--cyan); background:rgba(53,175,228,.07);
}
#main label.soltar b{
  display:block; margin:0 0 4px;
  font-size:14px; font-weight:640; letter-spacing:-.015em; color:var(--ink);
  text-transform:none;
}
#main label.soltar span{
  display:block; margin:0;
  font-size:12.5px; font-weight:400; letter-spacing:0; color:var(--ink-soft);
  text-transform:none;
}
#main label.soltar input{display:none}

/* --- Áreas de texto largas ---------------------------------------- */
textarea{min-height:64px; line-height:1.5; resize:vertical; font-family:var(--ui)}
.tabla textarea{min-height:44px}

/* --- Vista previa del documento -----------------------------------
   La hoja heredada ya trae .doc con el membrete de fondo y las reglas
   de impresión. Aquí solo se añaden las tablas del PEA. */
.doc table{width:100%; border-collapse:collapse; margin:6px 0 14px}
.doc th,.doc td{border:.5px solid #666; padding:4px 6px; vertical-align:top; font-size:11px}
.doc th{background:#eef3fa; font-weight:640; text-align:left}
.doc td.c{text-align:center}
.doc td.eje{background:#dff3e4}
.doc h4{margin:14px 0 4px; font-size:13px}
.doc h5{margin:16px 0 4px; font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink)}
.doc p{margin:0 0 8px; text-align:justify}
.doc ol,.doc ul{margin:0 0 10px; padding-left:20px}
.doc li{margin-bottom:3px; text-align:justify}
.doc .titulo{text-align:center; font-weight:700; margin:0 0 2px; font-size:13px}
.doc .firmas{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:36px;
  text-align:center; font-size:11px}
.doc .firmas div{border-top:.5px solid #333; padding-top:5px}

/* ============================================================
   HOJAS DEL DOCUMENTO
   La vista previa se reparte en hojas A4 separadas, como en un
   procesador de texto: fondo gris entre páginas en pantalla y
   un salto real de página al imprimir.
   ============================================================ */

#veil .sheet .doc{                       /* contenedor de medición */
  background:#fff !important; background-image:none !important;
  width:210mm; max-width:100%; margin:0 auto;
  padding:0 25mm !important; border:none; border-radius:0;
  font-size:11.5px; line-height:1.55; box-sizing:border-box;
}

.hojas{display:flex; flex-direction:column; align-items:center; gap:9mm}
.pagina{
  width:210mm; height:297mm;
  padding:25mm 25mm 22mm 25mm;
  background:#fff; color:var(--ink);
  box-shadow:0 3px 14px rgba(12,26,54,.22);
  box-sizing:border-box; overflow:hidden; position:relative;
  font-size:11.5px; line-height:1.55;
}
.pagina .cuerpo{height:100%; overflow:hidden}
.pagina .pie{
  position:absolute; left:25mm; right:25mm; bottom:10mm;
  text-align:center; font-size:9px; color:rgba(28,21,72,.45);
  border-top:.5px solid rgba(28,21,72,.12); padding-top:3mm;
}

/* Las tablas y títulos dentro de la hoja usan el mismo estilo del
   documento, así que se reaprovechan las reglas de .doc. */
.pagina table{width:100%; border-collapse:collapse; margin:6px 0 14px}
/* En un documento oficial el contenido de las tablas va centrado en la
   altura de su celda: el texto largo se justifica, pero queda alineado
   con los números y los rótulos de su misma fila. */
.pagina th,.pagina td{
  border:.5px solid #666; padding:4px 6px;
  vertical-align:middle; font-size:11px;
}
.pagina th{
  background:#eef3fa; font-weight:640;
  text-align:center; vertical-align:middle;
}
.pagina td.c{text-align:center}
.pagina h4{text-align:left; margin:12px 0 6px; font-size:13px}
.pagina h4:first-child{margin-top:0}
.pagina h5{margin:14px 0 4px; font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink)}
.pagina p{margin:0 0 8px; text-align:justify}
.pagina ol,.pagina ul{margin:0 0 10px; padding-left:20px}
.pagina li{margin-bottom:3px; text-align:justify}
.pagina .titulo{text-align:center; font-weight:700; margin:0 0 2px; font-size:13px}
/* --- Cuadro de firmas (sección X) --------------------------------- */
.pagina table.firmas{
  table-layout:fixed; width:100%; border-collapse:collapse;
  margin:6px 0 0; font-size:10px;
}
.pagina table.firmas th, .pagina table.firmas td{
  border:.5px solid #666; padding:5px 6px; text-align:center; vertical-align:middle;
}
.pagina table.firmas th{background:#eef3fa; text-align:left; font-weight:700; font-size:10.5px}
.pagina table.firmas tr.espacio td{height:22mm}   /* espacio para firmar */
.pagina table.firmas .cargo{font-weight:700}

/* ============================================================
   HOJA MEMBRETADA POR CARRERA
   El membrete va como fondo de cada hoja A4, no como imagen fija
   detrás de la página: así se repite en todas las hojas del PEA
   y sale igual en pantalla y en papel. Cuando la carrera no tiene
   membrete propio —Seguridad Ciudadana y Penitenciaria por
   ahora— no se pinta nada y la hoja queda en blanco.
   ============================================================ */

.pagina[data-membrete]{
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  /* El margen sube y se ensancha por la derecha para no invadir el
     encabezado de la carrera ni la franja vertical del lema. */
  padding:34mm 30mm 20mm 25mm;
}

/* Los navegadores omiten los fondos al imprimir salvo que se les
   pida lo contrario. Sin esto, el PEA sale en papel sin membrete. */
.pagina[data-membrete]{
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

.pagina[data-membrete="administracion"]{background-image:url(membretes/administracion.png)}
.pagina[data-membrete="contabilidad"]{background-image:url(membretes/contabilidad.png)}
.pagina[data-membrete="centro-idiomas"]{background-image:url(membretes/centro-idiomas.jpg)}
.pagina[data-membrete="desarrollo-software"]{background-image:url(membretes/desarrollo-software.png)}
.pagina[data-membrete="ensamblaje"]{background-image:url(membretes/ensamblaje.png)}
.pagina[data-membrete="monitoreo-ambiental"]{background-image:url(membretes/monitoreo-ambiental.png)}
.pagina[data-membrete="planificacion-transporte"]{background-image:url(membretes/planificacion-transporte.png)}
.pagina[data-membrete="procesamiento-alimentos"]{background-image:url(membretes/procesamiento-alimentos.png)}
.pagina[data-membrete="seguridad-riesgos"]{background-image:url(membretes/seguridad-riesgos.png)}
.pagina[data-membrete="vicerrectorado-colectivo"]{background-image:url(membretes/vicerrectorado-colectivo.jpg)}

/* El pie del documento sube y pierde su filete: la franja de redes
   sociales del membrete ya cierra la hoja, y una raya encima de ella
   solo agregaba ruido. Queda la numeración, que un documento oficial
   necesita para poder citarse por página. */
.pagina[data-membrete] .pie{
  bottom:19mm; left:30mm; right:30mm;
  border-top:none; padding-top:0;
}

@media print{
  @page{size:A4; margin:0}
  #hoja{display:none !important}
  .pagina[data-membrete]{
    padding:34mm 30mm 20mm 25mm;
    background-size:100% 100%;
  }
  .hojas{display:block; gap:0}
  .pagina{
    box-shadow:none; margin:0;
    width:210mm; height:296mm;
    /* El relleno se repite aquí: al fijar el alto, esta regla pisa la de
       pantalla y sin él el contenido queda pegado al borde del papel. */
    padding:25mm 25mm 22mm 25mm;
    page-break-after:always; break-after:page;
  }
  .pagina:last-child{page-break-after:auto; break-after:auto}
}

/* ============================================================
   FORMATO DE ARTÍCULO PARA LA GUÍA PRÁCTICA
   Tipografía serif, encabezado a todo el ancho y cuerpo a dos
   columnas, como un paper. Solo se aplica a la Guía: el PEA
   conserva una sola columna porque sus tablas son anchas.
   ============================================================ */

.pagina.paper{
  font-family:"Latin Modern Roman","Nimbus Roman","Liberation Serif",
              Georgia,"Times New Roman",serif;
  font-size:9.6pt; line-height:1.42; color:#111;
  padding:22mm 18mm 18mm 18mm;
}
.pagina.paper .cuerpo.dos-columnas{
  column-count:2; column-gap:7mm; column-fill:auto;
}

/* Bloques que cruzan las dos columnas: título, autoría y los
   encabezados de cada práctica. */
.pagina.paper .span{
  column-span:all; -webkit-column-span:all;
  margin:0 0 6px;
}

.pagina.paper p{margin:0 0 6px; text-align:justify; hyphens:auto}
.pagina.paper p + p{text-indent:4mm}          /* sangría de continuación */
.pagina.paper ul,.pagina.paper ol{margin:0 0 7px; padding-left:5mm}
.pagina.paper li{margin-bottom:2px; text-align:justify; hyphens:auto}

.pagina.paper .titulo-paper{
  font-size:15pt; font-weight:700; line-height:1.22;
  text-align:center; margin:0 0 8px;
}
.pagina.paper .autoria{
  text-align:center; font-size:9.2pt; margin:0 0 3px;
}
.pagina.paper .filiacion{
  text-align:center; font-size:8.2pt; font-style:italic;
  color:#333; margin:0 0 12px;
}
.pagina.paper .resumen{
  margin:0 0 14px; padding:0 12mm;
  font-size:9pt; text-align:justify;
}
.pagina.paper .resumen b{display:block; margin-bottom:3px; font-size:9.4pt}

.pagina.paper h4{
  font-size:11pt; font-weight:700; text-align:left;
  margin:12px 0 5px; break-after:avoid;
}
.pagina.paper h5{
  font-size:9.8pt; font-weight:700; text-transform:none; letter-spacing:0;
  color:#111; margin:9px 0 3px; break-after:avoid;
}
.pagina.paper table{
  width:100%; border-collapse:collapse; margin:5px 0 9px; font-size:8.6pt;
}
.pagina.paper th,.pagina.paper td{
  border:none; border-top:.5px solid #999; border-bottom:.5px solid #999;
  padding:3px 4px; text-align:left; vertical-align:top;
}
.pagina.paper th{background:none; font-weight:700; font-size:8.6pt}
.pagina.paper .pie{
  font-family:"Liberation Serif",Georgia,"Times New Roman",serif;
  font-size:8.5pt; border-top:.5px solid #bbb; left:18mm; right:18mm;
}

/* Enlaces que deben verse como botones (descarga de plantillas). */
a.btn{display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; line-height:1}

/* ============================================================
   CORRECCIÓN DE IMPRESIÓN
   La hoja heredada imprime la ventana modal con posición
   absoluta y alto fijo, de modo que el navegador solo ve lo que
   entra en una pantalla y manda una sola página. Aquí se libera
   el flujo para que salgan todas las hojas.
   ============================================================ */
@media print{
  html, body{
    height:auto !important; overflow:visible !important;
    /* Sin esto, el margen que el navegador da al cuerpo desplaza la
       primera hoja y sale una página en blanco al inicio. */
    margin:0 !important; padding:0 !important;
    background:#fff !important;
  }
  #wall, #side, #main, #mobileTop, #mobileScrim{display:none !important}

  #veil, #veil.on{
    position:static !important; inset:auto !important;
    display:block !important; place-items:initial !important;
    height:auto !important; max-height:none !important;
    overflow:visible !important;
    padding:0 !important; margin:0 !important;
    background:#fff !important; backdrop-filter:none !important;
  }
  #veil .sheet, #veil .sheet.wide, #veil .sheet.ancha{
    position:static !important;
    width:auto !important; max-width:none !important;
    height:auto !important; max-height:none !important;
    overflow:visible !important;
    margin:0 !important; padding:0 !important;
    background:#fff !important; box-shadow:none !important; border:none !important;
  }
  #veil .sheet > h3, #veil .sheet > .cap, #veil .act, #veil .xclose{display:none !important}

  .hojas{display:block !important; gap:0 !important; align-items:stretch !important}
  .pagina{
    display:block !important;
    width:210mm !important;
    /* El relleno se repite aquí porque, sin él, el contenido queda
       pegado al borde del papel: la regla de impresión pisa la de
       pantalla al fijar el alto. */
    padding:25mm 25mm 22mm 25mm !important;
    /* Un pelo por debajo del alto real de la hoja: si mide exactamente
       297 mm, el redondeo del navegador derrama un píxel a la página
       siguiente y aparece una hoja vacía entre cada una. */
    height:296mm !important;
    margin:0 !important; box-shadow:none !important; border:none !important;
    overflow:hidden !important;
    break-inside:avoid;
    page-break-after:always; break-after:page;
  }
  .pagina:first-child{page-break-before:avoid; break-before:avoid}
  .pagina:last-child{page-break-after:auto; break-after:auto}
  .hojas > *:first-child{margin-top:0 !important}
  .pagina .cuerpo{height:100% !important}
}

/* ============================================================
   GUÍA PRÁCTICA · FORMATO DE DOCUMENTO
   A una columna, con portada propia y jerarquía de títulos como
   la guía institucional impresa. La tipografía serif se conserva.
   ============================================================ */

.pagina.guia{
  font-family:"Times New Roman","Liberation Serif","Nimbus Roman",Times,serif;
  font-size:11pt; line-height:1.5; color:#111;
  padding:25mm 24mm 20mm 26mm;
}
.pagina.guia .cuerpo, .pagina.guia p, .pagina.guia li,
.pagina.guia h4, .pagina.guia h5, .pagina.guia h6{
  font-family:inherit;
}
.pagina.guia .cuerpo{column-count:initial; column-width:auto}

.pagina.guia p{margin:0 0 7px; text-align:justify; hyphens:auto}
.pagina.guia ul{margin:0 0 10px; padding-left:7mm}
.pagina.guia li{margin-bottom:5px; text-align:justify; hyphens:auto}

.pagina.guia h4{                       /* secciones mayores */
  font-size:14pt; font-weight:700; text-align:left;
  margin:0 0 10px; padding-bottom:3px;
  border-bottom:1px solid #999; break-after:avoid;
}
.pagina.guia h4.centrado{text-align:center; border-bottom:none; margin-bottom:14px}
.pagina.guia h5{                       /* las diez secciones de la práctica */
  font-size:11.5pt; font-weight:700; text-transform:none; letter-spacing:0;
  color:#111; margin:13px 0 4px; break-after:avoid;
}
.pagina.guia h6{                       /* 4.1, 7.2 … */
  font-size:11pt; font-weight:700; font-style:italic;
  margin:9px 0 3px; break-after:avoid;
}
/* Sub-items numerados. Van como bloque para que el paginador los
   mueva enteros: el número nunca queda separado de su texto. */
.pagina.guia .sub{margin:0 0 7px; break-inside:avoid}
.pagina.guia .sub p{margin:0 0 4px}
.pagina.guia .sub p b:first-child{margin-right:3px}
.pagina.guia .sub h6{margin:0 0 3px}
.pagina.guia .sub + .sub{margin-top:0}

.pagina.guia .ficha{
  margin:0 0 8px; padding:7px 10px; text-align:left;
  background:#f4f7fb; border-left:2px solid #8aa3c4;
}
.pagina.guia .firma{margin-top:14px; text-align:left}

/* --- Portada --- */
.pagina.guia .portada{
  height:100%; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding-top:14mm;
}
.pagina.guia .portada p{text-align:center; margin:0; hyphens:none}
.pagina.guia .portada .logo-portada-wrap{
  display:flex; align-items:center; justify-content:center;
  width:100%; margin:0 0 7mm;
}
.pagina.guia .portada .logo-portada{
  display:block; width:66.5mm; max-width:66.5mm; height:auto;
  object-fit:contain;
}
.pagina.guia .portada .ins{
  font-size:15pt; font-weight:700; letter-spacing:.06em; line-height:1.45;
  text-transform:uppercase;
  padding-bottom:5mm; margin-bottom:18mm;
  border-bottom:1.2px solid #333; width:78%;
}
.pagina.guia .portada .rot{
  font-size:10.5pt; font-style:italic; color:#555;
  letter-spacing:.02em; margin-bottom:2mm;
}
.pagina.guia .portada .dato{
  font-size:12pt; line-height:1.7; margin-bottom:14mm;
}
.pagina.guia .portada .tit{
  font-size:21pt; font-weight:700; line-height:1.32;
  margin:2mm 0 16mm; padding:6mm 6mm;
  border-top:.8px solid #999; border-bottom:.8px solid #999;
  width:88%;
}
.pagina.guia .portada .pie-portada{
  margin-top:auto; font-size:11.5pt; line-height:1.6;
  padding-top:6mm; border-top:.8px solid #999; width:56%;
}

/* Las celdas del PEA se alinean por medición en hoja.js: una línea va
   centrada y varias justificadas. Aquí solo se prepara el terreno. */
.pagina td{text-align:left; hyphens:auto}
.pagina td.c, .pagina td.num{text-align:center !important}

/* Rótulos del detalle de horas y de tutorías: angostos y sin partir,
   para que los cuatro pares entren en una sola línea. */
.pagina td.rot{
  font-weight:600; white-space:nowrap;
  width:1%; padding-left:5px; padding-right:5px;
}

/* --- Tabla del sistema de evaluación (sección V) ------------------
   Reproduce el formato institucional. Los anchos van en porcentaje para
   guardar la proporción del modelo impreso, y todo el contenido queda
   centrado en los dos ejes, como en el documento original. */
.pagina table.eval{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:6px 0 14px;
}
.pagina table.eval td, .pagina table.eval th{
  padding:2px 4px; line-height:1.2;
  text-align:center; vertical-align:middle;
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}
.pagina table.eval th{
  background:#eef3fa; font-weight:700; font-size:8.5px;
}
.pagina table.eval td.ev-nom{text-align:center; padding-left:6px; padding-right:6px}

/* Tipo de evaluación y criterios. El texto girado va dentro de un bloque
   propio: si se gira la celda entera, el centrado deja de funcionar
   porque los ejes de la tabla y del texto dejan de coincidir. Con el
   bloque adentro, la celda lo centra en horizontal y en vertical con las
   reglas normales de tabla. */
.pagina table.eval td.vert, .pagina table.eval th.vert{
  text-align:center; vertical-align:middle; padding:5px 1px;
}
.pagina table.eval .giro{
  display:block; margin:0 auto;          /* centrado horizontal seguro */
  width:max-content; max-height:100%;
  writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:center; white-space:normal;
  font-weight:600; font-size:8.5px; line-height:1.25;
}

/* Fila de cierre: el rótulo cruza las columnas de la izquierda y va
   centrado, como en el formato impreso. */
.pagina table.eval tr:last-child th{
  background:none; text-align:center; font-size:9px;
}

/* Un título y su tabla no se separan: viajan juntos a la hoja siguiente. */
.junto{break-inside:avoid}

/* --- Encabezados de tabla dentro del documento ---------------------
   La hoja heredada pone todas las «th» en mayúsculas y con espaciado de
   letras, porque allá son encabezados de listados de la interfaz. En un
   documento oficial los títulos van escritos tal como se redactaron. */
.pagina th{
  text-transform:none !important;
  letter-spacing:0 !important;
  color:inherit !important;
}

/* Blindaje del documento: dentro de una hoja, las clases utilitarias de
   la hoja heredada no deben alterar la maquetación de las tablas. */
.pagina table td.act, .pagina table th.act{
  display:table-cell !important; margin:0 !important;
  padding:3px 4px !important; border-top:none !important;
  justify-content:initial !important; gap:0 !important;
}

/* --- Tabla del sistema de evaluación (sección V) ------------------
   Reproduce el formato institucional. Los anchos van en porcentaje para
   guardar la proporción del modelo impreso, y todo el contenido queda
   centrado en los dos ejes, como en el documento original. */
.pagina table.eval{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:6px 0 14px;
}
.pagina table.eval td, .pagina table.eval th{
  padding:2px 4px; line-height:1.2;
  text-align:center; vertical-align:middle;
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}
.pagina table.eval th{
  background:#eef3fa; font-weight:700; font-size:8.5px;
}
.pagina table.eval td.ev-nom{text-align:center; padding-left:6px; padding-right:6px}

/* Tipo de evaluación y criterios. El texto girado va dentro de un bloque
   propio: si se gira la celda entera, el centrado deja de funcionar
   porque los ejes de la tabla y del texto dejan de coincidir. Con el
   bloque adentro, la celda lo centra en horizontal y en vertical con las
   reglas normales de tabla. */
.pagina table.eval td.vert, .pagina table.eval th.vert{
  text-align:center; vertical-align:middle; padding:5px 1px;
}
.pagina table.eval .giro{
  display:block; margin:0 auto;          /* centrado horizontal seguro */
  width:max-content; max-height:100%;
  writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:center; white-space:normal;
  font-weight:600; font-size:8.5px; line-height:1.25;
}

/* Fila de cierre: el rótulo cruza las columnas de la izquierda y va
   centrado, como en el formato impreso. */
.pagina table.eval tr:last-child th{
  background:none; text-align:center; font-size:9px;
}

/* Un título y su tabla no se separan: viajan juntos a la hoja siguiente. */
.junto{break-inside:avoid}

/* --- Encabezados de tabla dentro del documento ---------------------
   La hoja heredada pone todas las «th» en mayúsculas y con espaciado de
   letras, porque allá son encabezados de listados de la interfaz. En un
   documento oficial los títulos van escritos tal como se redactaron. */
.pagina th{
  text-transform:none !important;
  letter-spacing:0 !important;
  color:inherit !important;
}

/* Blindaje del documento: dentro de una hoja, las clases utilitarias de
   la hoja heredada no deben alterar la maquetación de las tablas. */
.pagina table td.act, .pagina table th.act{
  display:table-cell !important; margin:0 !important;
  padding:3px 4px !important; border-top:none !important;
  justify-content:initial !important; gap:0 !important;
}

/* --- Tabla de contenidos de enseñanza (sección VI) ----------------
   Veinticuatro columnas iguales: las filas de la unidad, las de
   contenidos y la de interrelación agrupan de maneras distintas y así
   ninguna deforma a las otras. */
.pagina table.cont{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:5px 0 4px;
}
.pagina table.cont td, .pagina table.cont th{
  padding:2.5px 4px; line-height:1.28; vertical-align:middle;
  text-align:left; word-break:normal; overflow-wrap:break-word;
}
.pagina table.cont th{
  background:#eef3fa; text-align:center; font-weight:700; font-size:8.5px;
}
.pagina table.cont td.c{text-align:center}

/* Un color por eje transversal. El contenido enlazado se pinta con el
   color de su eje, y el mismo color va en el rótulo de la fila de
   interrelación, de modo que la correspondencia se lea sin explicación. */
.pagina table.cont tr.eje-amb > td{background:#d6ecc0}   /* medio ambiente */
.pagina table.cont tr.eje-tic > td{background:#cfe0f5}   /* TICS */
.pagina table.cont tr.eje-val > td{background:#fae4b8}   /* formación en valores */
.pagina table.cont tr.eje-inv > td{background:#e2d3f0}   /* investigación */
.pagina table.cont td.eje-amb{background:#d6ecc0}
.pagina table.cont td.eje-tic{background:#cfe0f5}
.pagina table.cont td.eje-val{background:#fae4b8}
.pagina table.cont td.eje-inv{background:#e2d3f0}

/* Significado de las siglas, al pie de cada unidad. */
.pagina .leyenda{
  margin:0 0 16px; font-size:7.8px; line-height:1.35;
  color:#444; text-align:left;
}

/* Blindaje del documento: dentro de una hoja, las clases utilitarias de
   la hoja heredada no deben alterar la maquetación de las tablas. */
.pagina table td.act, .pagina table th.act{
  display:table-cell !important; margin:0 !important;
  padding:3px 4px !important; border-top:none !important;
  justify-content:initial !important; gap:0 !important;
}

/* --- Tabla de contenidos de enseñanza (sección VI) ----------------
   Doce columnas: permiten que las filas de datos de la unidad, las de
   contenidos y la de interrelación agrupen de maneras distintas sin
   deformar la tabla. */
.pagina table.cont{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:5px 0 16px;
}
.pagina table.cont td, .pagina table.cont th{
  padding:2.5px 4px; line-height:1.25; vertical-align:middle;
  text-align:left; word-break:normal; overflow-wrap:break-word;
}
.pagina table.cont th{
  background:#eef3fa; text-align:center; font-weight:700; font-size:8px;
  line-height:1.15;
}
.pagina table.cont td.c{text-align:center}
/* Contenido interrelacionado con un eje transversal. */
.pagina table.cont tr.eje > td{background:#cfe6a4}

/* Fila de interrelación: rótulos anchos y códigos angostos, con letra
   algo menor, para que la fila no crezca en alto. */
.pagina table.cont tr.inter td{padding:2px 3px; line-height:1.2}
.pagina table.cont td.rotulo{font-size:8px; font-weight:600}

/* Las dos tablas de una unidad se leen como una sola: se pegan sin
   separación y comparten el borde intermedio. */
.pagina table.cont.datos-unidad{margin-bottom:0}
.pagina table.cont.contenidos-unidad{margin-top:-0.5px}

/* Encabezado corrido, de la segunda hoja en adelante. Va sobre el
   relleno superior de la hoja, sin restarle espacio al contenido. */
.pagina .encabezado{
  position:absolute; left:25mm; right:25mm; top:13mm;
  font-size:8.5px; color:#555; text-align:center;
  padding-bottom:2mm; border-bottom:.5px solid #bbb;
}
.pagina.guia .encabezado{left:26mm; right:24mm; font-size:9pt; color:#333}

/* --- Cuadre de horas, al cierre de la sección VI ------------------ */
.pagina table.cuadre{
  table-layout:fixed; width:100%; font-size:9px; margin:5px 0 4px;
}
.pagina table.cuadre td, .pagina table.cuadre th{
  padding:3px 5px; text-align:center; vertical-align:middle;
}
/* En el resumen de ejes va todo centrado y en redonda: la negrita se
   reserva para los encabezados de la tabla. */
.pagina table.cuadre tr.cierre td{background:#f4f7fb}
.pagina table.cuadre tr.cierre td:first-child{font-weight:700}

/* Semáforo del cuadre. */
.pagina .semaforo{font-weight:700}
.pagina .semaforo.ok{background:#d6ecc0; color:#2c5c1f}
.pagina .semaforo.aviso{background:#fae4b8; color:#7a5410}
.pagina .semaforo.mal{background:#f4c4c4; color:#8a2020}

/* Justificación de la interrelación, al pie de cada unidad. */
.pagina table.cont tr.justi td{font-size:8.2px; padding:2px 4px}


/* ============================================================
   FONDO INSTITUCIONAL · GRANATE
   Solo cambia el telón. Los colores funcionales no se tocan:
   el rojo de --stop debe seguir queriendo decir «algo va mal»,
   y perdería ese significado si todo el sistema fuera rojo.
   ============================================================ */
body{background:#C4405A}

#wall{
  background:
    radial-gradient(120% 90% at 12% 8%,   #FF8A5C 0, transparent 56%),
    radial-gradient(110% 80% at 88% 12%,  #FF6F9C 0, transparent 52%),
    radial-gradient(120% 110% at 70% 100%, #E8523F 0, transparent 60%),
    linear-gradient(160deg, #E05A55 0, #A93258 100%);
}
#wall b:nth-child(1){background:radial-gradient(circle,#FFA574 0,transparent 70%)}
#wall b:nth-child(2){background:radial-gradient(circle,#FF8FB2 0,transparent 70%)}
#wall b:nth-child(3){background:radial-gradient(circle,#FFC79A 0,transparent 70%)}

/* El aviso de error del ingreso reserva su espacio siempre. Vacío se ve
   como una franja rosa suelta encima del botón, que sobre el granate
   parece un elemento roto. Se colapsa mientras no tenga qué decir. */
#lcard .err:empty{
  display:none!important; margin:0!important; padding:0!important;
  border:none!important; min-height:0!important;
}

/* Enlace de clave olvidada: un botón, para que responda al teclado y al
   lector de pantalla, con apariencia de enlace. */
#lcard .olvide{
  display:block; width:100%; margin-top:12px; padding:8px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:560;
  color:var(--run); border-radius:var(--r-sm); transition:.15s;
}
#lcard .olvide:hover{background:var(--run-bg)}

/* La palabra SiCCa del ingreso llevaba un degradado azul heredado.
   Se recalienta hacia el rosa y el durazno para que asiente sobre
   el granate en lugar de flotar encima. */
.sivi-word{
  background:linear-gradient(135deg,#fff 5%,#FFF0E4 34%,#FFD6C4 66%,#FFF6F0 100%);
  -webkit-background-clip:text; background-clip:text;
}
/* Sobre un fondo más claro, el texto blanco necesita más sombra para
   seguir despegándose del coral. */
.sivi-name{text-shadow:0 3px 16px rgba(96,20,32,.46)}
.sivi-tagline{text-shadow:0 2px 10px rgba(96,20,32,.38)}

/* Marca de agua de la esquina.
   El contenedor lleva opacity:.16 heredado, y eso multiplica cualquier
   color del texto: subir solo el blanco de las letras no cambia nada.
   Hay que levantar la opacidad del bloque. */
.sivi-login-corner{opacity:.72!important}
.sivi-app-corner{opacity:.66!important}
.sivi-login-corner-word,.sivi-app-corner-word{
  color:#FFFFFF;
  text-shadow:0 2px 16px rgba(140,30,45,.30);
}
.sivi-login-corner-sub,.sivi-app-corner-sub{
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(140,30,45,.26);
}
@media (max-width:760px){
  .sivi-login-corner{opacity:.62!important}
  .sivi-app-corner{opacity:.55!important}
}

/* ============================================================
   CONTENCIÓN HORIZONTAL
   Una celda de rejilla toma por ancho mínimo el de su contenido,
   así que una tabla ancha empuja el área de trabajo fuera de la
   pantalla y asoman los filos del fondo por la derecha. Con
   min-width:0 el área respeta su columna, y cada tarjeta se
   desliza por dentro en lugar de arrastrar la página entera.
   ============================================================ */
#main{min-width:0; max-width:100%; overflow-x:hidden}
#main .glass.card{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
/* La barra de filtros nunca desborda: sus controles se reparten. */
#main .barra{flex-wrap:wrap; max-width:100%}
#main .barra select{min-width:0}

/* La cabecera de sección tampoco. */
.head{max-width:100%; flex-wrap:wrap}

/* ============================================================
   TELÉFONO
   La hoja heredada resuelve el armazón; aquí se ordena lo que
   SiCCa agregó después y que en pantalla estrecha se desbordaba:
   tablas anchas, rejillas de formulario y barras de filtros.
   ============================================================ */
@media (max-width:760px){

  /* Las tablas no se comprimen: se deslizan dentro de su tarjeta.
     Apretar diez columnas en 380 px las vuelve ilegibles. */
  .tabla{min-width:560px}
  .tabla th,.tabla td{padding:8px 8px; font-size:12.5px}
  /* En el teléfono no hay ancho para cuatro botones seguidos: ahí sí
     se reparten, en bloque alineado a la derecha. */
  .tabla td.acc{white-space:normal; width:auto}
  .tabla td.acc .btn{margin:0 0 3px 4px}

  /* Un campo por línea: dos columnas en un teléfono no caben. */
  .rejilla{grid-template-columns:1fr!important}
  .rejilla .ancho{grid-column:auto!important}

  /* Las barras de filtros y acciones se apilan y ocupan el ancho. */
  .barra{flex-wrap:wrap; gap:7px}
  .barra .crece{flex-basis:100%}
  .barra select,.barra input{max-width:none!important; width:100%}
  .barra .btn{flex:1 1 auto}

  /* Cifras del inicio de dos en dos, no de una en una. */
  .grid.kpis{grid-template-columns:1fr 1fr!important; gap:9px}
  .glass.card.kpi b{font-size:22px}

  /* Los dos bloques del inicio, uno debajo del otro. */
  .dashboard-focus{grid-template-columns:1fr!important}
  .dashboard-alert{flex-wrap:wrap; gap:7px}
  .dashboard-alert .btn{width:100%}
  .role-dashboard-actions{flex-direction:column}
  .role-dashboard-actions .btn{width:100%}

  /* La cadena de seis pasos se lee en vertical. */
  .chain{flex-direction:column; align-items:stretch; gap:7px}
  .chain .step{width:100%; justify-content:flex-start}

  /* Cabeceras de sección: el título encima, las acciones debajo. */
  .head{flex-direction:column; align-items:stretch; gap:10px}
  .head h2{font-size:21px}
  .head select,.head .btn{width:100%}

  /* La lámina de trabajo ocupa la pantalla completa. */
  #hoja{width:100vw!important; max-width:100vw!important; border-radius:0!important}
  #hoja .act{flex-wrap:wrap; gap:7px}
  #hoja .act .btn{flex:1 1 46%}

  /* Casillas y campos con área de toque suficiente. */
  input,select,textarea{font-size:16px}      /* evita el zoom de iOS */
  input[type=checkbox]{width:19px; height:19px}
}

/* Pantallas muy estrechas: una sola cifra por fila. */
@media (max-width:400px){
  .grid.kpis{grid-template-columns:1fr!important}
  #hoja .act .btn{flex:1 1 100%}
}


/* ============================================================
   DISTRIBUTIVO · AJUSTE SIN BARRA HORIZONTAL EN ESCRITORIO
   Solo afecta la tabla "Por docente". No cambia el ancho del
   panel ni de las filas: reparte el espacio disponible entre las
   columnas y permite que texto/acciones partan cuando sea necesario.
   ============================================================ */
@media (min-width:761px){
  #distCuerpo{min-width:0; max-width:100%; overflow-x:hidden}
  #distCuerpo .dist-docentes-tabla{
    width:100%; min-width:0!important; max-width:100%; table-layout:fixed;
  }
  #distCuerpo .dist-docentes-tabla th,
  #distCuerpo .dist-docentes-tabla td{
    min-width:0; overflow-wrap:anywhere; word-break:normal;
  }
  #distCuerpo .dist-docentes-tabla th{white-space:normal}
  #distCuerpo .dist-docentes-tabla td.acc{
    width:auto; white-space:normal; text-align:right;
  }
  #distCuerpo .dist-docentes-tabla td.acc .btn{
    padding:4px 6px; margin:2px 0 2px 3px; font-size:10.7px;
    white-space:nowrap;
  }

  /* Con casilla de selección: 10 columnas, suma 100 %. */
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(1),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(1){width:3%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(2),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(2){width:15%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(3),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(3){width:15%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(4),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(4){width:12%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(5),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(5){width:7%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(6),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(6){width:7%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(7),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(7){width:8%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(8),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(8){width:7%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(9),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(9){width:8%}
  #distCuerpo .dist-docentes-tabla.con-seleccion th:nth-child(10),
  #distCuerpo .dist-docentes-tabla.con-seleccion td:nth-child(10){width:18%}

  /* Sin permisos de edición desaparece la casilla: 9 columnas. */
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(1),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(1){width:16%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(2),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(2){width:17%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(3),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(3){width:13%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(4),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(4){width:8%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(5),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(5){width:8%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(6),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(6){width:9%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(7),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(7){width:8%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(8),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(8){width:9%}
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) th:nth-child(9),
  #distCuerpo .dist-docentes-tabla:not(.con-seleccion) td:nth-child(9){width:12%}
}



/* ============================================================
   USUARIOS Y PERFILES · TODO VISIBLE SIN BARRA HORIZONTAL
   La tabla ocupa exactamente el ancho útil de la tarjeta. Se permite
   partir textos, chips y acciones; nunca se ensancha la página.
   ============================================================ */
.usuarios-card{min-width:0; max-width:100%; overflow-x:hidden!important}
.usuarios-tabla{width:100%; max-width:100%; min-width:0!important; table-layout:fixed}
.usuarios-tabla th,
.usuarios-tabla td{min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal}
.usuarios-tabla th{white-space:normal; line-height:1.2}
.usuarios-tabla .usuario-sel{text-align:center; padding-left:4px; padding-right:4px}
.usuarios-tabla .usuario-sel input[type="checkbox"]{
  width:15px!important; height:15px!important; margin:0; cursor:pointer;
}
.usuarios-tabla .usuario-perfiles{white-space:normal}
.usuarios-tabla .perfil-seleccionable{
  display:inline-flex; align-items:center; gap:3px; max-width:100%;
  white-space:normal; line-height:1.22; overflow-wrap:anywhere;
  margin-bottom:3px; vertical-align:top;
}
.usuarios-tabla .usuario-correo{font-size:11.5px!important; overflow-wrap:anywhere}
.usuarios-tabla td.usuario-acciones{
  width:auto; white-space:normal; text-align:right;
}
.usuarios-tabla td.usuario-acciones .btn{
  padding:4px 6px; margin:2px 0 2px 3px; font-size:10.7px;
  white-space:nowrap; min-width:0;
}

@media (min-width:761px){
  .usuarios-tabla.con-seleccion th:nth-child(1),
  .usuarios-tabla.con-seleccion td:nth-child(1){width:3%}
  .usuarios-tabla.con-seleccion th:nth-child(2),
  .usuarios-tabla.con-seleccion td:nth-child(2){width:11%}
  .usuarios-tabla.con-seleccion th:nth-child(3),
  .usuarios-tabla.con-seleccion td:nth-child(3){width:20%}
  .usuarios-tabla.con-seleccion th:nth-child(4),
  .usuarios-tabla.con-seleccion td:nth-child(4){width:35%}
  .usuarios-tabla.con-seleccion th:nth-child(5),
  .usuarios-tabla.con-seleccion td:nth-child(5){width:12%}
  .usuarios-tabla.con-seleccion th:nth-child(6),
  .usuarios-tabla.con-seleccion td:nth-child(6){width:19%}

  .usuarios-tabla:not(.con-seleccion) th:nth-child(1),
  .usuarios-tabla:not(.con-seleccion) td:nth-child(1){width:12%}
  .usuarios-tabla:not(.con-seleccion) th:nth-child(2),
  .usuarios-tabla:not(.con-seleccion) td:nth-child(2){width:21%}
  .usuarios-tabla:not(.con-seleccion) th:nth-child(3),
  .usuarios-tabla:not(.con-seleccion) td:nth-child(3){width:37%}
  .usuarios-tabla:not(.con-seleccion) th:nth-child(4),
  .usuarios-tabla:not(.con-seleccion) td:nth-child(4){width:12%}
  .usuarios-tabla:not(.con-seleccion) th:nth-child(5),
  .usuarios-tabla:not(.con-seleccion) td:nth-child(5){width:18%}
}

/* En móvil tampoco aparece una barra horizontal: cada registro se apila
   dentro del ancho disponible y conserva todas sus acciones. */
@media (max-width:760px){
  .usuarios-card{overflow-x:hidden!important}
  .usuarios-tabla{display:block; min-width:0!important; width:100%}
  .usuarios-tabla thead{display:none}
  .usuarios-tabla tbody{display:block}
  .usuarios-tabla tr{
    display:grid; grid-template-columns:34px 1fr; width:100%;
    border-bottom:1px solid var(--line); padding:8px 0;
  }
  .usuarios-tabla:not(.con-seleccion) tr{grid-template-columns:1fr}
  .usuarios-tabla td{display:block; width:auto!important; border-bottom:0; padding:5px 8px}
  .usuarios-tabla.con-seleccion td.usuario-sel{grid-column:1; grid-row:1 / span 5; align-self:start; padding-top:7px}
  .usuarios-tabla.con-seleccion td:not(.usuario-sel){grid-column:2}
  .usuarios-tabla td.usuario-acciones{text-align:left}
  .usuarios-tabla td.usuario-acciones .btn{margin:2px 4px 2px 0}
}


/* ============================================================
   AJUSTES FINOS DEL PEA
   - Se baja un poco el área útil para que el membrete superior
     no toque los encabezados del contenido.
   - Todas las tablas del documento usan el mismo grosor y la
     misma tonalidad de borde para un acabado uniforme.
   ============================================================ */
:root{
  --pea-borde-color:#7f8898;
  --pea-borde-width:.75px;
  --pea-cabecera-tabla:#eef3fa;
}

.pagina[data-membrete]{
  padding:35mm 29mm 20mm 27mm;
}

.pagina .pie{
  left:27mm;
  right:29mm;
}

/* El cuerpo arranca un poco más abajo dentro de la hoja membretada,
   para que el logo y el nombre de la carrera no rocen el texto. */
.pagina[data-membrete] .cuerpo{
  padding-top:0;
  box-sizing:border-box;
}

.doc th,.doc td,
.pagina th,.pagina td,
.pagina table.eval td,.pagina table.eval th,
.pagina table.cont td,.pagina table.cont th,
.pagina table.cuadre td,.pagina table.cuadre th,
.pagina table.firmas td,.pagina table.firmas th{
  border:var(--pea-borde-width) solid var(--pea-borde-color) !important;
}

.doc th,
.pagina th,
.pagina table.eval th,
.pagina table.cont th,
.pagina table.cuadre th,
.pagina table.firmas th{
  background:var(--pea-cabecera-tabla) !important;
}


/* Ajuste de aprovechamiento vertical del PEA: conserva aire bajo el
   membrete, pero evita huecos innecesarios entre secciones y tablas. */
.pagina h4{margin:9px 0 4px;}
.pagina h5{margin:10px 0 3px;}
.pagina table{margin:4px 0 10px;}
.pagina table.eval{margin:4px 0 10px;}
.pagina table.cont{margin-top:4px;}
.pagina .leyenda{margin-bottom:10px;}


/* ============================================================
   GUÍA PRÁCTICA · AJUSTE AL MODELO GP INSTITUCIONAL
   Los preliminares principales ocupan una hoja propia y la guía
   termina con una contraportada institucional.
   ============================================================ */
.pagina.guia .guia-prelim{
  width:100%;
  box-sizing:border-box;
}
.pagina.guia .guia-prelim h4{
  margin-top:0;
}
.pagina.guia .guia-lista{
  margin:0 0 10px;
  padding-left:7mm;
}
.pagina.guia .guia-lista li{
  margin-bottom:5px;
  text-align:justify;
  break-inside:avoid;
}
.pagina.guia .guia-final{
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-bottom:14mm;
}
.pagina.guia .guia-final-datos{
  width:100%;
  text-align:center;
  font-size:12pt;
  line-height:1.4;
}
.pagina.guia .guia-final-datos p{
  margin:0 0 2px;
  text-align:center;
  hyphens:none;
}
.pagina.guia .guia-final-datos .guia-web{
  color:#0645ad;
  text-decoration:underline;
}

/* ============================================================
   GUÍA PRÁCTICA · ÍNDICE Y FLUJO DE LOS 10 ÍTEMS
   Cada fila del índice y cada párrafo de las prácticas es un bloque
   paginable independiente para que ningún apartado quede recortado.
   ============================================================ */
.pagina.guia .guia-indice-titulo{
  margin-bottom:10px;
}
.pagina.guia .guia-indice-fila{
  display:flex;
  align-items:flex-end;
  gap:5px;
  min-height:20px;
  margin:0 0 2px;
  font-size:10.5pt;
  line-height:1.25;
  break-inside:avoid;
}
.pagina.guia .guia-indice-fila.nivel-1{
  padding-left:7mm;
  font-size:10pt;
}
.pagina.guia .guia-indice-texto{
  flex:0 1 auto;
  max-width:82%;
}
.pagina.guia .guia-indice-puntos{
  flex:1 1 auto;
  min-width:12px;
  border-bottom:1px dotted #9aa1aa;
  transform:translateY(-3px);
}
.pagina.guia .indice-pagina{
  flex:0 0 22px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.pagina.guia .guia-bullet{
  margin:0 0 5px 7mm;
  text-indent:-4mm;
  padding-left:4mm;
  text-align:justify;
  break-inside:auto;
}
.pagina.guia .guia-fluido{
  break-inside:auto;
  orphans:3;
  widows:3;
}
.pagina.guia .guia-subtitulo{
  margin-top:9px;
  margin-bottom:3px;
}

/* Corrección crítica: la Guía es de una sola columna normal, no un contenedor multicolumna.
   Con column-count:1 Chrome creaba columnas horizontales ocultas y recortaba los ítems 7-10. */
.pagina.guia .cuerpo{column-count:initial !important; column-width:auto !important; columns:auto !important;}


/* ============================================================
   GUÍA PRÁCTICA · TIMES NEW ROMAN 11 PT
   Todo el documento posterior a la carátula utiliza Times New Roman
   a 11 pt. La carátula conserva su jerarquía tipográfica original.
   Los títulos de preliminares quedan centrados.
   ============================================================ */
.pagina.guia .cuerpo > *:not(.portada),
.pagina.guia .cuerpo > *:not(.portada) *{
  font-family:"Times New Roman", Times, serif !important;
  font-size:11pt !important;
}

/* Títulos principales previos a las prácticas. */
.pagina.guia .guia-indice-titulo,
.pagina.guia h4[data-guia-id="pre-creditos"],
.pagina.guia h4[data-guia-id="pre-presentacion"],
.pagina.guia h4[data-guia-id="pre-objetivos"],
.pagina.guia h4[data-guia-id="pre-descripcion"]{
  text-align:center !important;
}

/* Conserva la portada exactamente con sus tamaños propios. */
.pagina.guia .portada,
.pagina.guia .portada *{
  font-family:"Times New Roman", Times, serif;
}
.pagina.guia .portada .ins{font-size:15pt !important;}
.pagina.guia .portada .rot{font-size:10.5pt !important;}
.pagina.guia .portada .dato{font-size:12pt !important;}
.pagina.guia .portada .tit{font-size:21pt !important;}
.pagina.guia .portada .pie-portada{font-size:11.5pt !important;}


/* ============================================================
   GUÍA PRÁCTICA · FIRMAS DE AUTORES EN CRÉDITOS DE LA OBRA
   Cada autor dispone de un espacio físico independiente para firmar.
   ============================================================ */
.pagina.guia .guia-atentamente{
  margin-top:10mm !important;
  margin-bottom:0 !important;
  text-align:left !important;
}
.pagina.guia .guia-firmas-autores{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10mm 14mm;
  margin-top:2mm;
  width:100%;
  break-inside:avoid;
}
.pagina.guia .guia-firmas-autores.una-firma{
  grid-template-columns:minmax(0,105mm);
  justify-content:center;
}
.pagina.guia .guia-firma-autor{
  text-align:center;
  break-inside:avoid;
}
.pagina.guia .guia-espacio-firma{
  height:24mm;
}
.pagina.guia .guia-linea-firma{
  width:88%;
  margin:0 auto 2mm;
  border-top:.7px solid #555;
}
.pagina.guia .guia-firma-autor p{
  margin:0 !important;
  text-align:center !important;
  line-height:1.25 !important;
}
.pagina.guia .guia-firma-autor .guia-rotulo-firma{
  margin-top:1mm !important;
  font-style:italic;
}
.pagina.guia .guia-sin-firma{
  margin-top:10mm !important;
  text-align:center !important;
}

/* ============================================================
   INFORME DEL COLECTIVO DE CÁTEDRA
   Formulario largo con la misma superficie, tipografía y controles
   del resto de SiCCa. Las matrices se desplazan solo dentro de su
   bloque cuando el número de asignaturas supera el ancho disponible.
   ============================================================ */
.coi-lista{display:grid;gap:14px}
.coi-nuevo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,210px) auto;
  gap:12px;align-items:center;padding:14px 15px;border:1px solid rgba(30,73,134,.14);
  border-radius:14px;background:linear-gradient(135deg,rgba(53,175,228,.08),rgba(255,255,255,.78));
}
.coi-nuevo div{display:grid;gap:3px}.coi-nuevo b{font-size:14px}.coi-nuevo span{font-size:12.5px;color:var(--ink-soft)}
.coi-lista-contenido{display:grid;gap:9px}
.coi-lista-item{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:11px 12px;border:1px solid rgba(30,73,134,.11);border-radius:13px;background:rgba(255,255,255,.74)
}
.coi-lista-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(53,175,228,.13);color:#1e8fc6;font-size:18px}
.coi-lista-info{min-width:0;display:grid;gap:2px}.coi-lista-info b{font-size:13.5px}.coi-lista-info span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coi-solo-lectura{padding:10px 12px;border-radius:11px;background:rgba(255,196,107,.16);border:1px solid rgba(154,107,16,.18);font-size:12.5px;color:#6f5216}

.coi-form{display:grid;gap:13px}
.coi-resumen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.coi-resumen>div{padding:10px 11px;border-radius:12px;background:rgba(53,175,228,.075);border:1px solid rgba(30,143,198,.12)}
.coi-resumen span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:3px}
.coi-resumen b{font-size:12.7px;line-height:1.3}
.coi-seccion{padding:15px;border-radius:15px;border:1px solid rgba(30,73,134,.13);background:rgba(255,255,255,.72);box-shadow:0 5px 18px rgba(12,41,83,.045)}
.coi-seccion-titulo{display:flex;align-items:baseline;gap:7px;margin:-2px 0 12px;color:var(--ink)}
.coi-seccion-titulo>b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:9px;background:rgba(53,175,228,.13);color:#167db3;font-size:12px}
.coi-seccion-titulo>span{font-size:15px;font-weight:680;letter-spacing:-.02em}
.coi-seccion-titulo small{font-size:11.5px;font-weight:500;color:var(--ink-soft)}
.coi-subtitulo{font-size:13px;font-weight:650;margin:15px 0 8px;color:var(--ink)}
.coi-ayuda{font-size:12.3px;line-height:1.45;margin:0 0 10px}
.coi-personas-grid,.coi-firmas-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coi-persona,.coi-firma-form{padding:12px;border-radius:12px;background:rgba(28,21,72,.025);border:1px solid rgba(28,21,72,.08)}
.coi-persona h4,.coi-firma-form h4{margin:0 0 10px;font-size:13px}
.coi-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;border-radius:10px}
.coi-scroll .tabla{min-width:620px}.coi-scroll .coi-larga{min-width:940px}.coi-scroll .coi-matriz{min-width:680px}
.coi-matriz th:not(:first-child),.coi-matriz td:not(:first-child){text-align:center}
.coi-matriz th{max-width:120px;white-space:normal!important}
.coi-matriz .coi-num{min-width:72px;text-align:center;padding-left:5px;padding-right:5px}
.coi-estudiante-celda input{min-width:170px}
.coi-foto-carga{display:block;padding:17px;border:1.5px dashed rgba(30,73,134,.22);border-radius:13px;background:rgba(53,175,228,.045);text-align:center;cursor:pointer;margin-bottom:12px}
.coi-foto-carga input{display:none}.coi-foto-carga b,.coi-foto-carga span{display:block}.coi-foto-carga b{font-size:13.5px}.coi-foto-carga span{font-size:11.8px;color:var(--ink-soft);margin-top:3px}
.coi-fotos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.coi-foto-card{display:grid;gap:7px;padding:9px;border:1px solid rgba(30,73,134,.12);border-radius:12px;background:rgba(255,255,255,.78)}
.coi-foto-card img{width:100%;height:190px;object-fit:cover;border-radius:9px;background:#eef3fa}.coi-foto-card textarea{min-height:52px}

/* Documento impreso del colectivo. */
.doc .coi-doc-head,.pagina .coi-doc-head{table-layout:fixed;font-size:9.8px}
.doc .coi-doc-head th,.doc .coi-doc-head td,.pagina .coi-doc-head th,.pagina .coi-doc-head td{font-size:9.6px;padding:3px 4px}
.doc .coi-doc-head th:first-child,.pagina .coi-doc-head th:first-child{width:22%}
.doc .coi-doc-matriz,.pagina .coi-doc-matriz{table-layout:fixed}
.doc .coi-doc-matriz th:first-child,.doc .coi-doc-matriz td:first-child,.pagina .coi-doc-matriz th:first-child,.pagina .coi-doc-matriz td:first-child{width:26%}
.doc th.coi-vertical,.pagina th.coi-vertical{height:28mm;width:8%;padding:2px;text-align:center;vertical-align:middle}
.doc th.coi-vertical span,.pagina th.coi-vertical span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:8.5px;line-height:1.05;max-height:26mm}
.doc th.coi-prom,.pagina th.coi-prom{color:#c52f48}.doc .coi-alto,.pagina .coi-alto{background:#dff3e4!important;color:#176c48;font-weight:700}.doc .coi-bajo,.pagina .coi-bajo{background:#f7dfe4!important;color:#a52b43;font-weight:700}
.doc .coi-nota-doc,.pagina .coi-nota-doc{font-size:9.2px;line-height:1.25;margin-top:-10px}
.doc .coi-doc-firmas td,.pagina .coi-doc-firmas td{font-size:10px}
.doc .coi-foto-doc,.pagina .coi-foto-doc{break-inside:avoid;margin:0 0 12mm;text-align:center}
.doc .coi-foto-doc img,.pagina .coi-foto-doc img{display:block;max-width:100%;max-height:105mm;margin:0 auto 4mm;object-fit:contain;border:1px solid #ddd}
.doc .coi-foto-doc p,.pagina .coi-foto-doc p{text-align:center;font-size:10px}

@media screen and (max-width:760px){
  .coi-nuevo{grid-template-columns:1fr}.coi-lista-item{grid-template-columns:34px minmax(0,1fr);align-items:start}.coi-lista-item>.chip,.coi-lista-item>.btn{grid-column:2;width:max-content}
  .coi-resumen{grid-template-columns:1fr 1fr}.coi-personas-grid,.coi-firmas-form,.coi-fotos-grid{grid-template-columns:1fr}
  .coi-seccion{padding:12px}.coi-foto-card img{height:auto;max-height:320px}
}
.doc .coi-anexo-titulo,.pagina .coi-anexo-titulo{text-align:center;border:none;margin-bottom:12mm}


/* ============================================================
   AJUSTE DEL FORMULARIO DE INFORME DE COLECTIVO
   Evita que el lado derecho de la ventana quede recortado en
   escritorios medianos o con scroll interno visible.
   ============================================================ */
#veil .sheet.wide{
  width:min(1180px, calc(100vw - 92px));
  max-width:calc(100vw - 92px);
}
#veil.on .sheet.wide{
  scrollbar-gutter:stable both-edges;
}
#veil .sheet.wide #hojaCuerpo{
  min-width:0;
  padding-right:8px;
}
#veil .sheet.wide .coi-form,
#veil .sheet.wide .coi-seccion,
#veil .sheet.wide .coi-personas-grid,
#veil .sheet.wide .coi-persona,
#veil .sheet.wide .rejilla,
#veil .sheet.wide label.f{
  min-width:0;
}
#veil .sheet.wide .coi-persona .rejilla{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#veil .sheet.wide .coi-persona input,
#veil .sheet.wide .coi-persona select,
#veil .sheet.wide .coi-persona textarea{
  min-width:0;
}
@media screen and (max-width:1240px){
  #veil .sheet.wide{
    width:min(1100px, calc(100vw - 72px));
    max-width:calc(100vw - 72px);
  }
}
@media screen and (max-width:980px){
  #veil .sheet.wide .coi-personas-grid{
    grid-template-columns:1fr;
  }
}
@media screen and (max-width:760px){
  #veil .sheet.wide #hojaCuerpo{
    padding-right:0;
  }
}

/* Colectivos de cátedra por curso/paralelo. */
.coi-filtros{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(170px,.7fr) auto;
  gap:12px;
  align-items:end;
  margin-top:14px;
  padding:13px 14px 2px;
  border:1px solid rgba(30,73,134,.11);
  border-radius:13px;
  background:rgba(53,175,228,.045);
}
.coi-filtros label.f{margin-bottom:10px;min-width:0}
.coi-filtro-limpiar{padding-bottom:10px}
.coi-nuevo.coi-nuevo-curso{grid-template-columns:minmax(0,1fr) auto}
@media screen and (max-width:760px){
  .coi-filtros{grid-template-columns:1fr;padding-bottom:12px}
  .coi-filtros label.f,.coi-filtro-limpiar{margin:0;padding:0}
  .coi-filtro-limpiar .btn{width:100%}
  .coi-nuevo.coi-nuevo-curso{grid-template-columns:1fr}
}


/* Ajuste de vista previa del informe de colectivo:
   las matrices anchas deben iniciar completas en la misma hoja que su
   título, evitando que se vea una parte del cuadro en una página y el
   resto en la siguiente. */
.doc .coi-doc-bloque-tabla,.pagina .coi-doc-bloque-tabla{
  break-inside:avoid;
  page-break-inside:avoid;
}
.doc .coi-doc-bloque-tabla > h4,.pagina .coi-doc-bloque-tabla > h4{
  margin-bottom:6px;
}

.coi-campo-ayuda{display:block;margin-top:5px;font-size:11.5px;line-height:1.35;color:var(--ink-soft)}

/* ============================================================
   Agenda del periodo
   ============================================================ */
.agenda-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr);gap:18px;align-items:start}
.agenda-card h3{margin:0 0 6px}
.agenda-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.agenda-head-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.agenda-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.agdot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle}
.agdot.propio{background:#4d83ff}
.agdot.publico{background:#c98934}
.agenda-grid-head,.agenda-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.agenda-grid-head{margin-bottom:8px}
.agenda-grid-head>div{padding:8px 0;text-align:center;font-size:12px;font-weight:700;color:#60708a;text-transform:uppercase;letter-spacing:.05em}
.agenda-dia{min-height:132px;background:#fff;border:1px solid rgba(126,139,164,.25);border-radius:16px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 20px rgba(33,45,89,.05);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.agenda-dia:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(33,45,89,.08);border-color:rgba(77,131,255,.35)}
.agenda-dia:disabled,.agenda-dia.fuera{opacity:.45;cursor:not-allowed;background:#f7f8fc}
.agenda-dia.hoy{outline:2px solid rgba(77,131,255,.35)}
.agenda-dia-vacio{min-height:132px}
.agenda-num{font-weight:800;font-size:15px;color:#27354b}
.agenda-chip-lista{display:flex;flex-direction:column;gap:6px;overflow:hidden}
.agenda-chip{font-size:11.3px;line-height:1.25;padding:6px 8px;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-chip.detalle{background:rgba(77,131,255,.12);color:#224a9b}
.agenda-chip.publico{background:rgba(201,137,52,.14);color:#8b5a10}
.agenda-mas{font-size:11px;color:#6e7b92;padding-left:2px}
.agenda-side{display:grid;gap:18px}
.agenda-proximas-lista{display:flex;flex-direction:column;gap:10px}
.agenda-proxima{width:100%;text-align:left;border:1px solid rgba(126,139,164,.22);background:#fff;border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 16px rgba(33,45,89,.04)}
.agenda-proxima b{font-size:13px;color:#2b3952}
.agenda-proxima span{font-size:12.4px;color:#687891}
.agenda-tip ul{margin:10px 0 0 18px;padding:0;color:#55657b}
.agenda-tip li{margin:7px 0}
.agenda-dia-panel{display:grid;gap:12px}
.agenda-item{border:1px solid rgba(126,139,164,.22);border-radius:16px;padding:14px;background:#fff;box-shadow:0 8px 18px rgba(33,45,89,.04)}
.agenda-item.mio{border-color:rgba(77,131,255,.28);background:linear-gradient(180deg,rgba(77,131,255,.06),rgba(255,255,255,.96))}
.agenda-item.asignado{border-color:rgba(45,181,111,.26);background:linear-gradient(180deg,rgba(45,181,111,.05),rgba(255,255,255,.96))}
.agenda-item.restringido{background:#faf7f2;border-color:rgba(201,137,52,.22)}
.agenda-item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.agenda-item-top b{font-size:15px;color:#27354b}
.agenda-item-top span{white-space:nowrap;font-weight:700;color:#44608a}
.agenda-item-meta{font-size:12.7px;color:#69788f;margin-top:7px}
.agenda-item small{display:block;margin-top:7px;color:#8a7353}
.agenda-item-actions{margin-top:10px;display:flex;justify-content:flex-end}
.agenda-form{display:grid;gap:16px}
.agenda-select-box{border:1px solid rgba(126,139,164,.2);border-radius:18px;padding:14px;background:#fbfcff}
.agenda-select-head{display:flex;justify-content:space-between;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:12px}
.agenda-select-head span{display:block;font-size:12.2px;color:#71819a;margin-top:3px}
.agenda-select-head input{min-width:220px;padding:10px 12px;border-radius:12px;border:1px solid rgba(126,139,164,.28);background:#fff}
.agenda-chip-seleccion{display:flex;gap:8px;flex-wrap:wrap;min-height:22px;margin-bottom:12px}
.agenda-sel-chip{border:none;border-radius:999px;padding:8px 12px;background:rgba(77,131,255,.12);color:#224a9b;font-size:12px}
.agenda-personas-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:340px;overflow:auto;padding-right:4px}
.agenda-persona-item{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(126,139,164,.2);border-radius:14px;padding:10px 11px;background:#fff}
.agenda-persona-item input{margin-top:3px}
.agenda-persona-item b{display:block;font-size:13px;color:#27354b}
.agenda-persona-item span{display:block;font-size:12px;color:#70819a;margin-top:2px;line-height:1.3}

@media (max-width: 1080px){
  .agenda-layout{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .agenda-toolbar{flex-direction:column}
  .agenda-grid-head,.agenda-grid{gap:6px}
  .agenda-dia,.agenda-dia-vacio{min-height:112px}
  .agenda-personas-lista{grid-template-columns:1fr}
  .agenda-head-actions{justify-content:flex-start}
}

/* Ajustes elegantes para Agenda: varios meses y lista compacta */
.agenda-main-stack{display:grid;gap:18px}
.agenda-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.24);color:#fff;font-size:12px;font-weight:700;letter-spacing:.01em}
.agenda-badge.small{padding:5px 9px;background:rgba(77,131,255,.12);color:#3158a5}
.agenda-meses-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.agenda-mes-card{border:1px solid rgba(126,139,164,.16);border-radius:20px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,251,255,.98))}
.agenda-mes-card.mes-actual{border-color:rgba(77,131,255,.28);box-shadow:0 14px 28px rgba(77,131,255,.08)}
.agenda-mes-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.agenda-mes-head h4{margin:0;font-size:24px;color:#25344a}
.agenda-grid-head.compacta>div{font-size:11px;padding:6px 0}
.agenda-grid.compacta{gap:6px}
.agenda-grid.compacta .agenda-dia,.agenda-grid.compacta .agenda-dia-vacio{min-height:94px;border-radius:14px;padding:8px}
.agenda-grid.compacta .agenda-num{font-size:14px}
.agenda-grid.compacta .agenda-chip{font-size:10.5px;padding:4px 6px;border-radius:8px}
.agenda-grid.compacta .agenda-mas{font-size:10px}
.agenda-form-elegante .rejilla{gap:14px}
.agenda-select-lista{padding:12px 14px}
.agenda-chip-seleccion{margin-bottom:10px}
.agenda-sel-chip{padding:7px 11px;font-size:11.8px}
.agenda-personas-lista.elegante{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto;padding-right:2px}
.agenda-persona-item.lista-elegante{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;border:1px solid rgba(126,139,164,.16);border-radius:12px;padding:8px 10px;background:#fff;box-shadow:none}
.agenda-persona-item.lista-elegante:hover{border-color:rgba(77,131,255,.22);background:#fbfcff}
.agenda-persona-check{display:flex;align-items:center;justify-content:center}
.agenda-persona-check input{margin:0}
.agenda-persona-texto{display:block;min-width:0}
.agenda-persona-texto b{display:block;font-size:13px;font-weight:700;color:#27354b;line-height:1.25;white-space:normal}
.agenda-persona-texto span{display:block;font-size:11.8px;color:#74839a;line-height:1.25;margin-top:2px}

@media (max-width: 1280px){
  .agenda-meses-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .agenda-mes-head h4{font-size:20px}
  .agenda-grid.compacta .agenda-dia,.agenda-grid.compacta .agenda-dia-vacio{min-height:82px;padding:7px}
  .agenda-grid.compacta .agenda-chip{font-size:10px}
}


/* Ajuste final de agenda: botones más pequeños y resaltado completo del día con reunión */
.agenda-grid.compacta .agenda-dia,
.agenda-grid.compacta .agenda-dia-vacio{
  min-height:78px;
  border-radius:13px;
  padding:6px;
}
.agenda-grid.compacta .agenda-num{
  font-size:13px;
}
.agenda-grid.compacta .agenda-chip-lista{
  gap:4px;
}
.agenda-grid.compacta .agenda-chip{
  font-size:9.8px;
  padding:3px 5px;
  border-radius:7px;
}
.agenda-grid.compacta .agenda-mas{
  font-size:9.6px;
}
.agenda-grid.compacta .agenda-dia.con-reunion.detalle{
  background:linear-gradient(180deg, rgba(77,131,255,.14), rgba(255,255,255,.96));
  border-color:rgba(77,131,255,.38);
  box-shadow:0 10px 18px rgba(77,131,255,.10);
}
.agenda-grid.compacta .agenda-dia.con-reunion.publica{
  background:linear-gradient(180deg, rgba(201,137,52,.14), rgba(255,255,255,.96));
  border-color:rgba(201,137,52,.34);
  box-shadow:0 10px 18px rgba(201,137,52,.08);
}
.agenda-grid.compacta .agenda-dia.con-reunion .agenda-num{
  color:#23324b;
}
.agenda-grid.compacta .agenda-dia.con-reunion.detalle:hover{
  border-color:rgba(77,131,255,.48);
  box-shadow:0 14px 22px rgba(77,131,255,.14);
}
.agenda-grid.compacta .agenda-dia.con-reunion.publica:hover{
  border-color:rgba(201,137,52,.46);
  box-shadow:0 14px 22px rgba(201,137,52,.12);
}
@media (max-width: 760px){
  .agenda-grid.compacta .agenda-dia,
  .agenda-grid.compacta .agenda-dia-vacio{
    min-height:70px;
    padding:5px;
  }
  .agenda-grid.compacta .agenda-chip{
    font-size:9.3px;
    padding:3px 4px;
  }
}


/* Ajuste más compacto para calendario multimensual */
.agenda-grid.compacta .agenda-dia,
.agenda-grid.compacta .agenda-dia-vacio{
  min-height:40px;
  border-radius:11px;
  padding:4px 5px;
}
.agenda-grid.compacta .agenda-num{
  font-size:11.2px;
  line-height:1;
}
.agenda-grid.compacta .agenda-chip-lista.mini{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:12px;
  gap:0;
}
.agenda-grid.compacta .agenda-chip,
.agenda-grid.compacta .agenda-mas{
  display:none;
}
.agenda-resumen-dia{
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
  line-height:1;
}
.agenda-resumen-dia.detalle{
  background:#2f6fff;
  color:#fff;
}
.agenda-resumen-dia.publico{
  background:#d08413;
  color:#fff;
}
.agenda-grid.compacta .agenda-dia.con-reunion.detalle{
  background:linear-gradient(180deg, rgba(47,111,255,.32), rgba(214,226,255,.92));
  border-color:rgba(34,89,214,.72);
  box-shadow:0 10px 18px rgba(47,111,255,.20);
}
.agenda-grid.compacta .agenda-dia.con-reunion.publica{
  background:linear-gradient(180deg, rgba(224,149,21,.34), rgba(255,234,202,.94));
  border-color:rgba(194,119,0,.72);
  box-shadow:0 10px 18px rgba(224,149,21,.18);
}
.agenda-grid.compacta .agenda-dia.con-reunion.detalle .agenda-num{
  color:#103c9d;
}
.agenda-grid.compacta .agenda-dia.con-reunion.publica .agenda-num{
  color:#8e5604;
}
.agenda-grid.compacta .agenda-dia.hoy{
  outline:1.5px solid rgba(77,131,255,.45);
}
@media (max-width: 760px){
  .agenda-grid.compacta .agenda-dia,
  .agenda-grid.compacta .agenda-dia-vacio{
    min-height:34px;
    padding:3px 4px;
  }
  .agenda-resumen-dia{
    min-width:14px;
    height:14px;
    font-size:8px;
  }
}


/* ============================================================
   MALLA CURRICULAR · MODAL DE ASIGNATURAS
   La malla completa tiene diez columnas. En escritorio se usa una
   hoja más ancha; si aun no cabe, únicamente la tabla se desplaza.
   ============================================================ */
#veil .sheet.malla-asignaturas-sheet{
  width:min(1240px,calc(100vw - 48px))!important;
  max-width:calc(100vw - 48px)!important;
  overflow-x:hidden!important;
}
#veil .sheet.malla-asignaturas-sheet #hojaCuerpo{
  min-width:0;
  max-width:100%;
}
.malla-asignaturas-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable;
  padding-bottom:4px;
}
.malla-asignaturas-tabla{
  min-width:1080px;
  width:100%;
}
.malla-asignaturas-tabla th,
.malla-asignaturas-tabla td{
  white-space:normal;
}
.malla-asignaturas-tabla td.mono{
  white-space:nowrap;
}
@media (max-width:760px){
  #veil .sheet.malla-asignaturas-sheet{
    width:100%!important;
    max-width:100%!important;
  }
  .malla-asignaturas-tabla{min-width:980px;}
}

/* ============================================================
   MENÚ LATERAL · BOTÓN CERRAR SESIÓN
   En escritorio ocupa el mismo ancho del selector de perfil.
   ============================================================ */
@media (min-width:761px){
  #side .me > .btn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:0;
    margin-right:0;
  }
}

/* ============================================================
   DISTRIBUTIVO · ACCIONES POR DOCENTE
   Dos columnas y dos niveles: Ver carga / Clasificar arriba,
   Editar / Eliminar abajo.
   ============================================================ */
#distCuerpo .dist-docentes-tabla td.acc .dist-acciones-grid{
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:4px;
  vertical-align:top;
}
#distCuerpo .dist-docentes-tabla td.acc .dist-acciones-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}
#distCuerpo .dist-docentes-tabla td.acc .dist-acciones-col .btn{
  margin:0!important;
}
@media (max-width:760px){
  #distCuerpo .dist-docentes-tabla td.acc .dist-acciones-grid{
    width:100%;
    justify-content:flex-start;
  }
}

/* ============================================================
   SiCCa · ADAPTACIÓN GLOBAL PARA TELÉFONOS
   Conserva la composición de escritorio. Estas reglas se aplican
   únicamente a pantallas de hasta 760 px y priorizan lectura,
   controles táctiles, tablas sin recorte y modales completos.
   ============================================================ */
@media screen and (max-width:760px){
  html,body{width:100%;max-width:100%;overflow:hidden}
  #app{width:100%;max-width:100%;min-width:0}
  #main{
    width:100%;max-width:100%;min-width:0;
    padding:10px 8px calc(24px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
  }
  #main>*{width:auto;max-width:100%!important;min-width:0!important}

  /* Encabezados */
  .head{margin-bottom:10px!important;gap:8px!important}
  .head h2{font-size:20px!important;line-height:1.15!important;overflow-wrap:anywhere}
  .head p{font-size:12.5px!important;line-height:1.42!important;overflow-wrap:anywhere}

  /* Tarjetas */
  #main .glass.card,#main .card,#main .agenda-card,#main .ios-card{
    width:100%;max-width:100%;min-width:0;
    padding:12px!important;margin-bottom:10px!important;
    border-radius:15px!important;
  }
  #main .glass.card{overflow-x:hidden!important}
  #main .card h3,#main .glass.card h3{overflow-wrap:anywhere;line-height:1.25}

  /* Formularios y filtros: una columna real */
  #main .rejilla,#main .cols2,#main .two,#main .agenda-layout,
  #main .agenda-form,#main .coi-filtros,#main .pc-selector-filtros,
  #veil .sheet .rejilla,#veil .sheet .cols2,#veil .sheet .agenda-form{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #main .barra:not(:has(.subtab)),
  #main .usuarios-barra,
  #main .agenda-toolbar,
  #main .agenda-head-actions,
  #veil .sheet .barra:not(:has(.subtab)){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:7px!important;
    width:100%;max-width:100%;
  }
  #main .barra:not(:has(.subtab))>.crece,
  #veil .sheet .barra:not(:has(.subtab))>.crece{width:100%}
  #main .barra select,#main .barra input,#main .barra textarea,
  #main .coi-filtros select,#main .coi-filtros input,
  #main .agenda-toolbar select,#main .agenda-toolbar input,
  #veil .sheet .barra select,#veil .sheet .barra input{
    width:100%!important;max-width:none!important;min-width:0!important;
  }

  /* Pestañas: una sola fila desplazable para no ocupar media pantalla. */
  #main .barra:has(.subtab),#veil .sheet .barra:has(.subtab){
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    gap:7px!important;width:100%;max-width:100%;overflow-x:auto!important;
    overflow-y:hidden!important;padding-bottom:4px;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  #main .barra:has(.subtab) .subtab,#veil .sheet .barra:has(.subtab) .subtab{
    flex:0 0 auto!important;min-height:40px;white-space:nowrap;
  }
  #main .barra:has(.subtab) .crece,#veil .sheet .barra:has(.subtab) .crece{display:none}

  /* Botones con área táctil suficiente. */
  #main .btn,#veil .sheet .btn,#side .btn{min-height:40px}
  #main .btn.mini,#veil .sheet .btn.mini{min-height:38px;padding:7px 10px}
  #main .act,#veil .sheet .act{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  #main .act>.btn,#veil .sheet .act>.btn{width:100%!important;max-width:none!important;margin:0!important}

  /* Carga de archivos */
  #main label.soltar{width:100%!important;min-height:108px;padding:18px 12px!important;text-align:center}
  #main label.soltar b,#main label.soltar span{overflow-wrap:anywhere}

  /* Tablas de interfaz convertidas por app.js a tarjetas verticales. */
  #main table.mobile-card-table,
  #veil .sheet table.mobile-card-table,
  #main table.mobile-card-table.tabla,
  #veil .sheet table.mobile-card-table.tabla,
  #main table.mobile-card-table.dist-docentes-tabla,
  #main table.mobile-card-table.usuarios-tabla,
  #veil .sheet table.mobile-card-table.malla-asignaturas-tabla{
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    table-layout:auto!important;overflow:visible!important;
  }
  #main table.mobile-card-table thead,#veil .sheet table.mobile-card-table thead{display:none!important}
  #main table.mobile-card-table tbody,#veil .sheet table.mobile-card-table tbody{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;width:100%!important;
  }
  #main table.mobile-card-table tr,#veil .sheet table.mobile-card-table tr{
    display:block!important;width:100%!important;max-width:100%!important;
    padding:5px 9px!important;margin:0!important;border:1px solid rgba(31,66,121,.11)!important;
    border-radius:13px!important;background:rgba(255,255,255,.9)!important;
    overflow:hidden!important;
  }
  #main table.mobile-card-table td,#veil .sheet table.mobile-card-table td{
    display:grid!important;grid-template-columns:minmax(92px,36%) minmax(0,1fr)!important;
    gap:8px!important;align-items:start!important;width:100%!important;max-width:100%!important;
    padding:7px 1px!important;border-top:1px solid rgba(31,66,121,.075)!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;text-align:left!important;
  }
  #main table.mobile-card-table td:first-child,#veil .sheet table.mobile-card-table td:first-child{border-top:0!important}
  #main table.mobile-card-table td::before,#veil .sheet table.mobile-card-table td::before{
    content:attr(data-label);display:block;min-width:0;color:#66758c;font-size:9.5px;line-height:1.3;
    font-weight:760;letter-spacing:.045em;text-transform:uppercase;overflow-wrap:anywhere;
  }
  #main table.mobile-card-table td[data-label=""]::before,#veil .sheet table.mobile-card-table td[data-label=""]::before{display:none}
  #main table.mobile-card-table td[data-label=""],#veil .sheet table.mobile-card-table td[data-label=""]{grid-template-columns:1fr!important}
  #main table.mobile-card-table td.acc,#main table.mobile-card-table td.usuario-acciones,
  #veil .sheet table.mobile-card-table td.acc{
    display:block!important;text-align:left!important;width:100%!important;
  }
  #main table.mobile-card-table td.acc::before,#main table.mobile-card-table td.usuario-acciones::before,
  #veil .sheet table.mobile-card-table td.acc::before{margin-bottom:6px}
  #main table.mobile-card-table td .btn,#veil .sheet table.mobile-card-table td .btn{
    width:100%!important;min-height:38px!important;margin:3px 0!important;
  }
  #distCuerpo table.mobile-card-table td.acc .dist-acciones-grid{
    display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:6px!important;
  }
  #distCuerpo table.mobile-card-table td.acc .dist-acciones-col{width:100%!important;gap:6px!important}

  /* Tablas complejas con colspan se conservan como tabla, pero se deslizan dentro del bloque. */
  #main .mobile-table-scroll,#veil .sheet .mobile-table-scroll{
    width:100%;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:3px;
  }
  #main table.mobile-scroll-table,#veil .sheet table.mobile-scroll-table{min-width:680px!important;width:100%!important}

  /* Ventanas/modales: siempre dentro del teléfono. */
  #veil{padding:6px!important;align-items:start!important}
  #veil.on{place-items:start center!important}
  #veil .sheet,#veil .sheet.ancha,#veil .sheet.wide,#veil .sheet.malla-asignaturas-sheet{
    width:100%!important;max-width:100%!important;min-width:0!important;
    max-height:calc(100dvh - 12px)!important;margin:0!important;padding:16px 12px 12px!important;
    border-radius:15px!important;overflow-x:hidden!important;overflow-y:auto!important;
  }
  #veil .sheet h3{padding-right:34px;font-size:17px!important;line-height:1.2;overflow-wrap:anywhere}
  #veil .sheet .cap{font-size:12.5px!important;line-height:1.4}
  #veil .sheet .xclose{top:10px!important;right:10px!important;width:34px!important;height:34px!important}
  #veil .sheet #hojaCuerpo{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  #veil .sheet .malla-asignaturas-scroll{overflow-x:visible!important;padding-bottom:0!important}
  #veil .sheet table.mobile-card-table.malla-asignaturas-tabla{min-width:0!important}

  /* Agenda: calendario y listados legibles sin recorte. */
  #main .agenda-meses-grid{grid-template-columns:1fr!important;gap:10px!important}
  #main .agenda-mes-card{padding:9px!important;min-width:0}
  #main .agenda-grid{width:100%;min-width:0}
  #main .agenda-grid-head{font-size:9px}
  #main .agenda-dia,#main .agenda-dia-vacio{min-width:0!important}
  #main .agenda-personas-lista{max-height:none!important}

  /* Listados/tarjetas y textos largos. */
  #main .agenda-item-top,#main .agenda-item-actions,#main .ios-card-header{
    flex-wrap:wrap!important;gap:7px!important;
  }
  #main .agenda-item-actions .btn,#main .agenda-head-actions .btn{width:100%!important}
  #main .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #main .mono{overflow-wrap:anywhere;word-break:break-word}

  /* Malla y distributivo: ningún ancho fijo heredado domina al móvil. */
  #distCuerpo{width:100%;max-width:100%;min-width:0;overflow-x:hidden!important}
  .malla-asignaturas-tabla.mobile-card-table{min-width:0!important}

  /* Selector de perfil y cierre de sesión dentro del cajón lateral. */
  #side .me>.btn{width:100%!important;display:flex!important;align-items:center;justify-content:center}
}

@media screen and (max-width:390px){
  #main{padding-left:6px!important;padding-right:6px!important}
  #main .glass.card,#main .card{padding:10px!important;border-radius:13px!important}
  #main table.mobile-card-table td,#veil .sheet table.mobile-card-table td{
    grid-template-columns:minmax(78px,34%) minmax(0,1fr)!important;gap:7px!important;
  }
  #distCuerpo table.mobile-card-table td.acc .dist-acciones-grid{grid-template-columns:1fr!important}
  #main .grid.kpis,#main .ios-kpi-grid{grid-template-columns:1fr!important}
}

/* ============================================================
   USUARIOS Y PERFILES · hoja de asignación
   La hoja heredada resuelve el marco modal; aquí se define el
   interior: ficha de la persona, botonera para conceder un
   perfil y una tarjeta por cada asignación, con su alcance y
   su vigencia a la vista.
   ============================================================ */

.hojaPerfiles #hojaCuerpo{max-height:min(68vh,660px); overflow:auto; padding-right:4px; margin-right:-4px}
.hojaPerfiles #hojaCuerpo::-webkit-scrollbar{width:9px}
.hojaPerfiles #hojaCuerpo::-webkit-scrollbar-thumb{background:rgba(28,21,72,.16); border-radius:99px}

/* ---------- ficha de la persona ---------- */

.rpPersona{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  padding:13px 15px; margin-bottom:14px; border-radius:16px;
  background:linear-gradient(120deg,rgba(28,21,72,.055),rgba(53,175,228,.10));
  border:.5px solid rgba(28,21,72,.10);
}
.rpAvatar{
  width:44px; height:44px; flex:none; border-radius:14px;
  display:grid; place-items:center; color:#fff; font-size:15px; font-weight:700;
  letter-spacing:.02em; background:linear-gradient(150deg,#3f7fd0,#1c1548);
  box-shadow:0 5px 14px rgba(28,21,72,.28);
}
.rpPersonaDatos{min-width:0; flex:1 1 220px}
.rpPersonaDatos b{display:block; font-size:14.5px; line-height:1.25}
.rpPersonaDatos small{display:block; margin-top:2px; color:var(--ink-soft); font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rpResumen{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.rpSinCambios{font-size:11.5px; color:var(--ink-soft); font-weight:600}

/* ---------- botonera para conceder un perfil ---------- */

.rpAgregarBarra{margin:0 0 12px}
.rpAgregarTitulo{
  display:block; margin-bottom:7px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.rpAgregarLista{display:flex; flex-wrap:wrap; gap:7px}
.rpAgregar{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px 6px 6px; border-radius:999px; cursor:pointer;
  background:var(--panel); border:.5px solid rgba(28,21,72,.16);
  color:var(--ink); font-size:12.5px; font-weight:600; font-family:var(--ui);
  box-shadow:0 1px 2px rgba(9,7,30,.06); transition:.16s;
}
.rpAgregar:hover:not(:disabled){transform:translateY(-1px); border-color:rgba(53,175,228,.55);
  box-shadow:0 6px 16px rgba(9,7,30,.12)}
.rpAgregar:active:not(:disabled){transform:scale(.985)}
.rpAgregar:disabled{opacity:.42; cursor:not-allowed}
.rpAgregar i{font-style:normal; font-size:14px; line-height:1; color:#1e8fc6; font-weight:700}

.rpSigla{
  width:30px; height:30px; flex:none; border-radius:10px; color:#fff;
  display:inline-grid; place-items:center; font-size:11px; font-weight:700; letter-spacing:.03em;
}
.rpSigla.mini{width:24px; height:24px; border-radius:8px; font-size:10px}

/* ---------- tarjetas de asignación ---------- */

.rpLista{display:flex; flex-direction:column; gap:9px}

.rpTarjeta{
  position:relative; display:flex; align-items:stretch; gap:12px;
  padding:12px 14px 12px 18px; border-radius:15px; overflow:hidden;
  background:var(--panel); border:.5px solid rgba(28,21,72,.12);
  box-shadow:0 1px 3px rgba(9,7,30,.06);
  animation:rpEntra .2s cubic-bezier(.2,.8,.2,1) both; transition:.18s;
}
.rpTarjeta:hover{box-shadow:0 8px 22px rgba(9,7,30,.12)}
.rpBanda{position:absolute; left:0; top:0; bottom:0; width:5px}
.rpCuerpo{flex:1; min-width:0}

.rpTitulo{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.rpNombre{min-width:0; flex:1}
.rpNombre b{display:block; font-size:13.5px; line-height:1.2}
.rpNombre small{display:block; margin-top:1px; color:var(--ink-soft); font-size:11.5px}

.rpCampos{display:grid; grid-template-columns:repeat(2,minmax(170px,1fr)); gap:10px}
.rpCampo{display:block; margin:0}
.rpCampo > span{
  display:block; margin-bottom:4px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
}
.rpCampo select{
  width:100%; padding:8px 10px; border-radius:10px; font-family:var(--ui); font-size:13px;
  color:var(--ink); background:var(--panel-2); border:.5px solid rgba(28,21,72,.14);
  transition:.15s;
}
.rpCampo select:focus{outline:none; border-color:#35AFE4; box-shadow:0 0 0 3px rgba(53,175,228,.20)}
.rpCampo select:disabled{opacity:.55}
.rpFijo{
  padding:8px 10px; border-radius:10px; font-size:13px; font-weight:600;
  background:rgba(28,21,72,.045); border:.5px dashed rgba(28,21,72,.16); color:var(--ink-soft);
}

.rpAcciones{display:flex; flex-direction:column; justify-content:center; flex:none}
.rpBoton{
  padding:6px 12px; border-radius:999px; cursor:pointer; font-family:var(--ui);
  font-size:12px; font-weight:620; transition:.15s;
  background:rgba(179,48,73,.09); color:var(--stop); border:.5px solid rgba(179,48,73,.22);
}
.rpBoton:hover{background:rgba(179,48,73,.16)}
.rpBoton.rpBotonDeshacer{background:rgba(28,21,72,.06); color:var(--ink); border-color:var(--line)}
.rpCandado{font-size:11px; color:var(--ink-soft); font-weight:600}

.rpTarjeta.esNueva{border-color:rgba(31,157,107,.42); background:linear-gradient(180deg,rgba(31,157,107,.06),transparent 60%)}
.rpTarjeta.esRetirada{opacity:.62; background:rgba(179,48,73,.045); border-color:rgba(179,48,73,.30)}
.rpTarjeta.esRetirada .rpNombre b{text-decoration:line-through}
.rpTarjeta.seVa{opacity:0; transform:translateY(-4px); transition:.16s}

.rpVacio{
  display:flex; flex-direction:column; gap:3px; align-items:center; text-align:center;
  padding:26px 16px; border-radius:15px; color:var(--ink-soft);
  border:1px dashed rgba(28,21,72,.20); background:rgba(28,21,72,.025);
}
.rpVacio b{font-size:13.5px; color:var(--ink)}
.rpVacio span{font-size:12.5px}

.rpPie{margin:12px 2px 0; font-size:12px; color:var(--ink-soft); line-height:1.45}

@keyframes rpEntra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---------- chips de perfil en la tabla de usuarios ---------- */

.perfilTag{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  margin:0 5px 5px 0; padding:4px 9px; border-radius:999px;
  font-size:11.5px; font-weight:620; color:var(--ink);
  background:color-mix(in srgb, var(--tono,#4A4770) 11%, #fff);
  border:.5px solid color-mix(in srgb, var(--tono,#4A4770) 30%, transparent);
}
.perfilTag .perfilPunto{width:7px; height:7px; flex:none; border-radius:50%; background:var(--tono,#4A4770)}
.perfilTag .perfilNombre{white-space:nowrap}
.perfilTag em{
  font-style:normal; font-weight:600; color:var(--ink-soft);
  padding-left:6px; margin-left:1px; border-left:1px solid rgba(28,21,72,.16);
}
.perfilTag .perfilQuitar{
  margin-left:2px; color:var(--ink-soft); text-decoration:none; font-size:11px;
  line-height:1; padding:2px 3px; border-radius:50%; transition:.14s;
}
.perfilTag .perfilQuitar:hover{background:rgba(179,48,73,.14); color:var(--stop)}
.perfilTag.caduco{opacity:.66; background:rgba(28,21,72,.05)}

@media (max-width:760px){
  .rpCampos{grid-template-columns:1fr}
  .rpTarjeta{flex-direction:column; gap:9px}
  .rpAcciones{flex-direction:row; justify-content:flex-end}
  .rpResumen{justify-content:flex-start; width:100%}
}

/* ============================================================
   PEA · barra de secciones
   Control segmentado compacto: una cápsula gris que agrupa los
   diez números romanos y, dentro de ella, la sección abierta en
   azul con su nombre al lado. El contenedor es un <div> y no un
   <nav>, porque la hoja base estira a todo el ancho cualquier
   botón que viva dentro de un nav (regla del menú lateral).
   ============================================================ */

.peaTabs{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px;
  max-width:100%; margin:2px 0 4px; padding:4px;
  border-radius:16px; background:#EEF2F8;
  border:1px solid rgba(30,73,134,.12);
  box-shadow:inset 0 1px 2px rgba(15,61,113,.06);
}

.peaTabs .peaTab{
  position:relative; flex:0 0 auto; width:auto; min-width:38px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 11px; margin:0; border-radius:12px;
  border:1px solid transparent; background:transparent; box-shadow:none;
  color:#4a5f7d; font-family:var(--ui); font-size:12.5px; font-weight:650;
  text-align:center; cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s, box-shadow .16s, border-color .16s;
}
.peaTabs .peaTab::before{display:none}
.peaTabs .peaTab b{
  font-family:var(--mono); font-size:11.5px; font-weight:800; letter-spacing:.04em;
}
.peaTabs .peaTab span{
  display:inline-block; max-width:0; overflow:hidden; opacity:0;
  font-weight:620; font-size:12.5px; vertical-align:middle;
  transition:max-width .24s cubic-bezier(.2,.8,.2,1), opacity .18s, margin .24s;
}

.peaTabs .peaTab:hover{
  background:#fff; color:#1b4f85;
  border-color:rgba(30,73,134,.12); box-shadow:0 2px 7px rgba(15,61,113,.10);
}

.peaTabs .peaTab.on{
  color:#fff; border-color:transparent;
  background:linear-gradient(145deg,#2589ee,#0f67cc);
  box-shadow:0 5px 14px rgba(15,103,204,.30), inset 0 1px 0 rgba(255,255,255,.26);
}
.peaTabs .peaTab.on span{
  max-width:260px; opacity:1; margin-left:8px; padding-left:8px;
  border-left:1px solid rgba(255,255,255,.40);
}
.peaTabs .peaTab:focus-visible{outline:3px solid rgba(22,119,232,.34); outline-offset:1px}

@media (max-width:760px){
  .peaTabs{display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .peaTabs::-webkit-scrollbar{display:none}
  .peaTabs .peaTab{height:36px}
  .peaTabs .peaTab.on span{max-width:170px}
}

/* ============================================================
   DISTRIBUTIVO · áreas y adscripción (clasificación manual)
   Medidores de avance, resúmenes lado a lado y una tabla donde
   cada cambio se guarda al instante.
   ============================================================ */

.clAvance{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 14px}
.clMedidor{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px; background:#F3F6FB; border:1px solid rgba(30,73,134,.10);
}
.clMedidor span{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#4a5f7d}
.clMedidor b{font-size:13px; color:#16325a; white-space:nowrap}
.clPista{height:8px; border-radius:999px; background:rgba(30,73,134,.10); overflow:hidden}
.clPista i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#35AFE4,#0f67cc); transition:width .45s cubic-bezier(.2,.8,.2,1)}

.clResumen{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; align-items:start}
.clResumenBloque{min-width:0; overflow-x:auto}
.clResumen tr.clSinDato td{color:#8a5a00; background:rgba(255,196,107,.10)}

.clBarra{margin-top:22px; gap:10px; flex-wrap:wrap; align-items:center}
.clFiltro{display:inline-flex; gap:3px; padding:3px; border-radius:12px; background:#EEF2F8;
  border:1px solid rgba(30,73,134,.12)}
.clFiltro button{border:0; background:transparent; padding:6px 12px; border-radius:9px; cursor:pointer;
  font-family:var(--ui); font-size:12.5px; font-weight:650; color:#4a5f7d; transition:.15s}
.clFiltro button.on{background:linear-gradient(145deg,#2589ee,#0f67cc); color:#fff;
  box-shadow:0 4px 12px rgba(15,103,204,.26)}
.clBuscar{width:220px; max-width:100%; padding:7px 11px; border-radius:10px; font-size:13px;
  border:1px solid rgba(30,73,134,.16); background:#fff; font-family:var(--ui)}
.clBuscar:focus{outline:none; border-color:#35AFE4; box-shadow:0 0 0 3px rgba(53,175,228,.20)}

.clTablaDoc select.clSel{width:100%; min-width:180px; padding:7px 9px; border-radius:10px; font-size:13px;
  border:1px solid rgba(30,73,134,.16); background:#F8FAFD; font-family:var(--ui); transition:.15s}
.clTablaDoc select.clSel:focus{outline:none; border-color:#35AFE4; box-shadow:0 0 0 3px rgba(53,175,228,.20)}
.clTablaDoc select.clSel:disabled{opacity:.55}
.clTablaDoc tr.clRecien td{animation:clDestello 1.2s ease}
@keyframes clDestello{0%{background:rgba(31,157,107,.16)} 100%{background:transparent}}

@media (max-width:900px){
  .clAvance, .clResumen{grid-template-columns:1fr}
  .clBuscar{width:100%}
}
.clIntro{display:flex; align-items:flex-start; gap:14px; margin:0 0 12px}
.clIntro p{margin:0; font-size:12.5px; flex:1}
.clIntro .clDescarga{flex:none; text-decoration:none; white-space:nowrap}
@media (max-width:760px){ .clIntro{flex-direction:column} }

/* ============================================================
   AGENDA · aviso por correo
   ============================================================ */
.agenda-correo{
  display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding:11px 14px;
  border-radius:12px; background:#F3F7FC; border:1px solid rgba(30,73,134,.14); cursor:pointer;
}
.agenda-correo input{width:auto; margin-top:3px}
.agenda-correo b{display:block; font-size:13px; color:#16325a}
.agenda-correo small{display:block; margin-top:2px; font-size:12px; color:#5B6275; line-height:1.45}
.agenda-sin-correo{
  font-style:normal; font-size:10.5px; font-weight:700; margin-left:6px; padding:1px 7px; border-radius:999px;
  color:#8A5A00; background:rgba(255,196,107,.28); vertical-align:middle;
}

/* ============================================================
   MALLAS · edición y recarga
   ============================================================ */
#veil .sheet .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px}
#veil .sheet .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px}
#veil .sheet .grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 12px}
@media (max-width:700px){
  #veil .sheet .grid2, #veil .sheet .grid3, #veil .sheet .grid4{grid-template-columns:1fr 1fr}
}
.malla-cabecera{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:0 0 14px; padding:12px 16px;
  border-radius:14px; background:#F3F7FC; border:1px solid rgba(30,73,134,.12);
}
.malla-cabecera span{display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#5B6275}
.malla-cabecera b{display:block; font-size:13.5px; color:#16123A; margin-top:2px}
.malla-cabecera-acc{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.malla-asignaturas-tabla tr.malla-retirada td{opacity:.55}
.malla-asignaturas-tabla tr.malla-retirada td.acc{opacity:1}
.malla-suma{margin:2px 0 10px; padding:8px 12px; border-radius:10px; font-size:12.5px; font-weight:650}
.malla-suma.ok{background:rgba(31,157,107,.12); color:#1F7A52}
.malla-suma.mal{background:rgba(179,48,73,.10); color:#B33049}
select.malla-req{min-height:132px; font-size:12.5px}
.malla-retirar{display:flex; gap:10px; align-items:flex-start; margin-top:10px; padding:10px 12px;
  border-radius:10px; background:#FFF8E8; border:1px solid rgba(138,90,0,.2); font-size:12.5px; cursor:pointer}
.malla-retirar input{width:auto; margin-top:2px}