/* Wayra · cuadrícula fina (48 columnas x filas de 12 px). Sin !important.
   Cada panel se coloca por celdas con grid-column / grid-row; el navegador
   alinea los bordes y el espacio entre paneles (12 px) es siempre el mismo. */
.gl-grid {
  --gl-cols: 48;
  --gl-row: 12px;
  --gl-gap: 12px;
  display: grid;
  grid-template-columns: repeat(var(--gl-cols), minmax(0, 1fr));
  grid-auto-rows: var(--gl-row);
  gap: 0;
  align-items: stretch;
  justify-items: stretch;
  align-content: start;
  grid-template-rows: none;
  position: relative;
  width: calc(100% + var(--gl-gap));
  margin: calc(var(--gl-gap) / -2) calc(var(--gl-gap) / -2) calc(var(--gl-gap) / 2);
}
.gl-grid.gl-measure { grid-auto-rows: auto; align-items: start; }
.gl-grid.gl-measure > .gl-card { align-self: start; }

.gl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: calc(var(--gl-gap) / 2);
  padding: 8px 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #cfcfc8);
  border-radius: 10px;
  box-shadow: var(--shadow, 0 2px 8px rgba(36, 36, 32, .1));
  box-sizing: border-box;
  overflow: hidden;
  resize: none;
  align-self: stretch;
}
.gl-card > .panel-header { flex: 0 0 auto; cursor: default; }
.gl-card .drag-handle { display: none; }
.gl-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.gl-body > * { flex: 0 0 auto; }
.gl-body > .table-wrap,
.gl-body > form { max-width: 100%; }

/* Gráficos: llenan el panel y se adaptan al tamaño que elija el usuario. */
.gl-grid:not(.gl-measure) .gl-body > .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
.gl-body > .svg-chart { flex: 1 1 auto; min-height: 120px; }
.gl-body > .svg-chart svg { display: block; width: 100%; height: 100%; }
.gl-body > .vertical-bars,
.gl-body > .mini-histogram { flex: 1 1 auto; height: auto; min-height: 120px; }
.gl-measure .gl-body > .svg-chart { min-height: 220px; }
.gl-measure .gl-body > .svg-chart svg { height: auto; }
.gl-measure .gl-body > .vertical-bars,
.gl-measure .gl-body > .mini-histogram { height: 200px; }

/* Rejilla visible solo mientras se editan los paneles. */
.gl-editing {
  padding-bottom: 96px;
  background-image:
    linear-gradient(to right, rgba(18, 79, 159, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 79, 159, .07) 1px, transparent 1px);
  background-size: calc(100% / var(--gl-cols)) var(--gl-row);
}
.gl-editing > .gl-card { border-color: #8fb6cc; }
.gl-card.gl-active { z-index: 6; box-shadow: 0 10px 28px rgba(20, 90, 134, .28); outline: 2px solid var(--primary, #124f9f); }
body.gl-dragging { user-select: none; cursor: grabbing; }

.gl-tools {
  display: none;
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 5;
  gap: 2px;
  align-items: center;
  padding: 3px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line, #cfcfc8);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.gl-editing .gl-tools { display: inline-flex; }
.gl-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--line, #cfcfc8); }
.gl-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--line, #cfcfc8);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--primary-dark, #08366f);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.gl-btn:hover:not(:disabled) { background: #e8f0f5; border-color: var(--primary, #124f9f); }
.gl-btn:focus-visible { outline: 2px solid var(--primary, #124f9f); outline-offset: 1px; }
.gl-grip { cursor: grab; touch-action: none; }

.gl-rz { display: none; position: absolute; z-index: 4; touch-action: none; }
.gl-editing .gl-rz { display: block; }
.gl-rz-e { top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.gl-rz-s { left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.gl-rz-se {
  right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--primary, #124f9f) 50%);
  border-radius: 0 0 9px 0;
}
.gl-editing .gl-rz-e:hover { background: rgba(18, 79, 159, .18); }
.gl-editing .gl-rz-s:hover { background: rgba(18, 79, 159, .18); }

.gl-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  min-height: 24px;
}
.gl-toolbar-label { margin-right: auto; color: var(--muted, #66645f); font-size: 11px; }
.gl-toolbar .active { background: #fff0cd; color: #7a4a00; border-color: #dfbd73; }

html.wayra-layout-booting .gl-grid { visibility: hidden; }

/* Pantallas angostas: los paneles se apilan en una columna, en el orden de la cuadrícula. */
.gl-stack { display: flex; flex-direction: column; gap: var(--gl-gap); width: auto; margin: 0 0 var(--gl-gap); background-image: none; padding-bottom: 0; }
.gl-stack > .gl-card { margin: 0; }

/* ---- Más espacio útil: cabecera y avisos más compactos en todas las páginas ---- */
.page-content { padding-top: 6px; }
.page-heading { margin-bottom: 4px; }
.analysis-nav { margin-bottom: 4px; }
.run-meta { margin-bottom: 4px; }
.topbar { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
.topbar .button { padding: 2px 8px; min-height: 22px; font-size: 11px; }

/* ---- Botones dentro de tablas (Ver evolución, PDF, Word, Excel…) ---- */
table .button,
.table-wrap .button {
  padding: 1px 7px;
  min-height: 20px;
  font-size: 10px;
  line-height: 1.25;
  border-radius: 5px;
}

/* ---- Panel principal: cifras en la misma fila que el título ---- */
.dashboard-page .page-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dashboard-page .page-heading > div:first-child { flex: 0 0 auto; }
.dashboard-page .page-heading .heading-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 112px);
  gap: 6px;
  margin: 0;
}
.dashboard-page .heading-stats .stat { padding: 2px 8px; }
.dashboard-page .page-heading .page-actions { flex: 0 0 auto; }

/* ---- Carolina: condiciones de interpretación, letra más chica ---- */
.gl-card[data-panel-id="copy-contract"] li { font-size: 11px; line-height: 1.3; margin-bottom: 3px; }
.gl-card[data-panel-id="copy-contract"] ul { margin: 2px 0; padding-left: 16px; }

/* ---- Barra superior compacta: miga de pan como pestaña, menú y "Volver" en la misma fila ---- */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; height: auto; padding: 0 0 2px; }
.topbar-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; flex: 1 1 auto; }
.topbar-navigation {
  display: block;
  padding: 1px 2px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--primary);
}
.topbar-navigation a { color: inherit; }
.topbar-left .utility-nav { width: 100%; margin: 0; }
.topbar-actions { flex: 0 0 auto; align-self: center; }

/* ---- Casillas de cifras y pasos más compactas (la letra no cambia) ---- */
.stat-grid .stat,
.progress-steps .step { padding: 3px 8px; }

/* "hidden" debe ganarle a .button { display: inline-flex } en la barra de diseño. */
.gl-toolbar [hidden] { display: none; }

/* ---- Menú superior: sin barra de desplazamiento; la letra se ajusta al ancho y, si
   aun así no cabe, baja de línea. ---- */
.topbar-left .utility-nav {
  position: static;
  overflow: visible;
  scrollbar-width: none;
  flex-wrap: wrap;
  gap: 0 6px;
  min-height: 0;
  padding: 0 2px;
  border-bottom: 0;
  background: transparent;
  font-size: clamp(9px, .6vw, 12px);
}
.topbar-left .utility-nav::-webkit-scrollbar { display: none; }
.topbar-left .utility-link { font-size: inherit; padding: 3px 5px; }

/* ---- Carolina: aviso de enlace en una sola línea ---- */
.page-content > .carolina-link-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
  padding: 2px 10px;
  resize: none;
}
.carolina-link-panel h2,
.carolina-link-panel p { margin: 0; }

/* ---- Franja "Prueba vinculada" y pasos en la misma fila (la plantilla los envuelve) ---- */
.gl-inline-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; align-items: stretch; margin: 0 0 4px; }
/* La caja azul y las 4 casillas miden exactamente lo que su contenido necesita (sin porcentajes
   de la fila). Si la pantalla es angosta, la fila baja de línea en vez de estirar nada. */
.gl-inline-row > .snapshot-note { flex: none; width: max-content; max-width: 100%; margin: 0; min-width: 0; }
.gl-inline-row > .progress-steps { flex: none; width: max-content; max-width: 100%; margin: 0; min-width: 0; grid-template-columns: repeat(4, max-content); }
.gl-inline-row > .progress-steps .step { min-width: 0; }

/* Panel principal: título, cifras y filtro quedan juntos (sin repartirse por el ancho). */
.dashboard-page .page-heading { justify-content: flex-start; }

/* Carolina: "Prueba hermana: ..." con la misma letra que el texto "Modo espejo ...". */
.carolina-link-panel p a,
.carolina-link-panel p a strong,
.carolina-link-panel p + p,
.carolina-link-panel p + p strong { font-size: 14px; font-weight: 400; }

/* La miga de pan usa el azul de los enlaces. Reglas antiguas del tema fijan su color
   con !important, por eso esta regla (la única de este archivo) también lo usa. */
body .topbar .topbar-navigation,
body .topbar .topbar-navigation > div,
body .topbar .topbar-navigation a { color: var(--primary) !important; }

/* ---- Páginas de análisis: título, botones de sección y acciones en una sola fila ---- */
/* Aviso "Completado con advertencias": más pequeño y discreto. */
.warning-summary { margin: 0 0 4px; }
.warning-summary summary { padding: 1px 8px; min-height: 0; font-size: 9px; }
.warning-summary summary .status { font-size: 9px; padding: 1px 6px; }
.warning-body { padding: 3px 8px; font-size: 10px; }

/* ---- Modelación IRT: gráfico, leyenda y selector llenan el panel al redimensionarlo ---- */
.gl-grid:not(.gl-measure) .gl-body > .irt-overlay-chart { display: flex; flex: 1 1 auto; min-height: 120px; padding: 4px; }
.gl-grid:not(.gl-measure) .irt-overlay-chart .irt-overlay-svg { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; max-width: none; }
.gl-grid:not(.gl-measure) .gl-body > .irt-overlay-legend,
.gl-grid:not(.gl-measure) .gl-body > .irt-item-selector { flex: 1 1 auto; max-height: none; min-height: 0; }

/* Reglas antiguas (.full-panel, .settings-panel) cambian el margen inferior de algunos
   paneles; el margen de la cuadrícula debe ser el mismo en todos. */
.gl-grid > .gl-card { margin: calc(var(--gl-gap) / 2); }
.gl-grid.gl-stack > .gl-card { margin: 0; }

/* ---- Cabecera de análisis: botones en la línea del título; advertencia recogida bajo el estado ---- */

/* ---- Cabecera de análisis en filas: título, botones de sección y acciones en la misma línea;
   debajo, el estado de la ejecución y la advertencia recogida (no ensanchan la columna del título). ---- */
.page-heading.gl-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  justify-content: stretch;
}
.gl-heading > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
.gl-heading > .analysis-nav {
  grid-column: 2; grid-row: 1; align-self: start; min-width: 0;
  margin: 3px 0 0; padding: 0; overflow: visible; flex-wrap: wrap;
}
.gl-heading > .page-actions { grid-column: 3; grid-row: 1; align-self: start; margin: 3px 0 0; }
.gl-subleft > .run-meta { margin: 2px 0 0; gap: 8px; flex-wrap: wrap; font-size: 9px; }
.gl-subleft > .run-meta .status { font-size: 9px; padding: 1px 6px; }
.gl-subleft > .warning-summary { width: 560px; max-width: 100%; margin: 3px 0 0; }

/* Los botones de sección quedan centrados con el título y las acciones. La densidad compacta fuerza
   el margen de esta barra con !important, por eso se baja con relleno superior. */
.page-heading.gl-heading > .analysis-nav { padding-top: 3px; }

/* ---- Una sola línea: título + botones de sección + acciones. La letra y el relleno de los
   botones de esta fila se ajustan al ancho de la ventana, así caben con cualquier fuente. ---- */
.page-heading.gl-heading > .analysis-nav { flex-wrap: nowrap; gap: 3px; }
.gl-heading > .analysis-nav a { flex: 0 0 auto; padding: 3px 6px; white-space: nowrap; }
.page-heading.gl-heading > .page-actions { display: flex; flex-wrap: nowrap; gap: 4px; white-space: nowrap; }
.gl-heading > .page-actions .button,
.gl-heading > .page-actions .status { padding: 1px 8px; min-height: 20px; font-size: clamp(9px, .64vw, 11px); line-height: 1.25; }

/* El tamaño de letra de los botones lo gobierna --font-size-control (con !important en el tema);
   se redefine solo dentro de esta fila y así sigue respetando la escala de letra del usuario. */
.gl-heading > .analysis-nav,
.gl-heading > .page-actions { --font-size-control: var(--gl-hfs, 11px); }

/* Último recurso del ajuste automático: si ni con 8 px cabe en una línea, los botones de sección bajan. */
.page-heading.gl-heading.gl-heading-wrap > .analysis-nav { flex-wrap: wrap; }

/* ============================================================================================
   SISTEMA TIPOGRÁFICO COMPACTO — único punto de ajuste para toda la plataforma.
   El tema calcula todas las letras con estas variables (reglas !important que las leen y las
   multiplican por la escala de letra del usuario). Redefinirlas aquí compacta botones, campos y
   etiquetas (control), títulos de panel (section) y textos de ayuda (meta) en todas las páginas,
   sin tocar la barra lateral ni el título de página.
   ============================================================================================ */
.main-content {
  --font-size-control: 11px;
  --font-size-section: 14px;
  --font-size-meta: 10px;
}

/* ---- Barra "Mover paneles / Publicar / Restablecer" en la línea del estado y la advertencia ---- */
.gl-heading > .gl-subrow { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; }
.gl-subleft { display: flex; flex-direction: column; min-width: 0; }
.gl-subrow > .gl-toolbar { margin: 0; flex: 0 0 auto; min-height: 0; }
.gl-toolbar.gl-toolbar-in-heading { margin: 0 0 0 auto; flex: 0 0 auto; min-height: 0; }

/* Segundo escalón del ajuste: tipografía condensada para los botones de la cabecera. */
.gl-heading-condensed > .analysis-nav a,
.gl-heading-condensed > .page-actions .button {
  font-family: "Arial Narrow", "Liberation Sans Narrow", "Arial Nova Condensed", Arial, sans-serif;
  padding-left: 4px; padding-right: 4px;
}

/* ---- Decisión del usuario: el menú de secciones va en su propia línea, debajo del título.
   Línea 1: título + acciones. Línea 2: menú de secciones. Línea 3: estado/advertencia + barra de diseño. ---- */
.page-heading.gl-heading > .analysis-nav { grid-column: 1 / -1; grid-row: 2; padding-top: 0; margin-top: 2px; }
.page-heading.gl-heading > .page-actions { grid-column: 3; grid-row: 1; }
.page-heading.gl-heading > .gl-subrow { grid-row: 3; }

/* ---- Panel principal (diseño pedido por el usuario) ----
   Fila 1: título y subtítulo + las cinco cifras repartidas a lo ancho.
   Fila 2: filtro de institución y "Crear evaluación" a la izquierda; barra de paneles a la derecha.
   Fila 3: estado del diseño, discreto. ---- */
.gl-toolbar-btns { display: contents; }
.dashboard-page .page-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "title tiles tiles" "actions actions btns" "label label label";
  column-gap: 12px; row-gap: 4px; align-items: center;
}
.dashboard-page .page-heading > div:first-child { grid-area: title; }
.dashboard-page .page-heading .heading-stats { grid-area: tiles; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-page .page-heading .page-actions { grid-area: actions; align-items: flex-end !important; justify-self: start; }
.dashboard-page .page-heading > .gl-toolbar { display: contents; }
.dashboard-page .page-heading > .gl-toolbar .gl-toolbar-btns { display: flex; gap: 5px; grid-area: btns; justify-self: end; align-self: end; }
.dashboard-page .page-heading > .gl-toolbar .gl-toolbar-label { grid-area: label; margin: 0; font-size: 10px; }
@media (max-width: 900px) {
  .dashboard-page .page-heading { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tiles" "actions" "btns" "label"; }
  .dashboard-page .page-heading > .gl-toolbar .gl-toolbar-btns { justify-self: start; }
}

/* ---- Separación uniforme (8 px) entre bloques de la página: cabecera, avisos, cifras,
   pasos, paneles sueltos y la cuadrícula de paneles. La barra de diseño conserva la suya. ---- */
body .page-content > *:not(.gl-grid):not(.gl-toolbar):not(script):not(style) { margin-bottom: 8px !important; }
body .page-content > .gl-toolbar { margin-bottom: 6px; }

/* ---- Paneles de configuración como franja (la disposición que el usuario fijó en Distractores):
   ancho completo, título pequeño y todos los campos en una sola fila con el botón al final.
   El texto explicativo y el aviso van debajo, discretos, en lugar de ocupar una columna. ---- */
.gl-card.gl-strip { padding: 6px 10px; }
.gl-card.gl-strip > .panel-header { margin: 0 0 4px; padding: 0 0 2px; }
.gl-card.gl-strip > .gl-body > form {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
  gap: 4px 10px !important; align-items: end; margin: 0 !important;
}
.gl-card.gl-strip > .gl-body > form.test-retest-form { grid-template-columns: minmax(0, .4fr) minmax(0, 1fr) auto !important; }
.gl-card.gl-strip > .gl-body > form > .button { width: auto !important; white-space: nowrap; align-self: end; }
.gl-card.gl-strip > .gl-body > form > label { min-width: 0; }
.gl-card.gl-strip > .gl-body > form select,
.gl-card.gl-strip > .gl-body > form input:not([type="hidden"]) { min-width: 0; width: 100%; }
.gl-card.gl-strip .setting-explanation { grid-column: 1 / -1; padding: 0; margin: 0; font-size: 10px; line-height: 1.3; }
.gl-card.gl-strip .alert { grid-column: 1 / -1; margin: 0; padding: 2px 8px; font-size: 10px; line-height: 1.3; }
@media (max-width: 900px) {
  .gl-card.gl-strip > .gl-body > form,
  .gl-card.gl-strip > .gl-body > form.test-retest-form { grid-template-columns: 1fr !important; }
}
.gl-card.gl-strip > .gl-body > form.test-retest-form > .button { grid-row: 1; grid-column: 3; }
.gl-card.gl-strip > .gl-body > form.test-retest-form > .setting-explanation { grid-row: 2; }
.gl-card.gl-strip > .gl-body > form.test-retest-form > .alert { grid-row: 3; }
body .gl-card.gl-strip { margin: calc(var(--gl-gap) / 2) !important; padding: 6px 10px !important; min-height: 0 !important; overflow: hidden !important; }
body .gl-card.gl-strip > .panel-header { margin: 0 0 4px !important; padding: 0 0 2px !important; border-bottom: 1px solid var(--line, #cfcfc8) !important; }
body .gl-card.gl-strip > .panel-header h2 { font-size: calc(var(--font-size-section) * var(--font-scale, 1)) !important; }
body .gl-card.gl-strip > .gl-body { overflow: visible; }

/* ---- Arreglo de toda la plataforma: un texto de ayuda (.field-help) o explicativo
   (.setting-explanation) nunca queda encerrado en una columna angosta de una rejilla
   de varias columnas, dejando espacio vacío al lado. Si comparte fila con un campo,
   esa fila pasa a ocupar todo el ancho disponible, sin importar la página. ---- */
label:has(> .field-help),
label:has(> .setting-explanation) { grid-column: 1 / -1 !important; flex-basis: 100% !important; width: 100%; }
.settings-grid > .field-help,
.settings-grid > .setting-explanation,
.score-settings-form > .field-help,
.metric-check-grid ~ .field-help { grid-column: 1 / -1 !important; }

/* ---- Institutions: la confirmación "Escriba <nombre>" + botón "Eliminar institución" iba en
   columna (texto centrado, luego el campo, luego el botón rojo debajo), triplicando el alto de
   esa fila de la tabla y dejando vacío el resto. Todo en una sola línea, alineado a la izquierda. ---- */
table td:has(form.stack-form.compact) { text-align: left; white-space: nowrap; }
table td form.stack-form.compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
table td form.stack-form.compact label {
  display: flex; align-items: center; gap: 6px;
  font-weight: 400; white-space: nowrap; margin: 0;
}
table td form.stack-form.compact input { width: 130px; min-width: 0; }
table td form.stack-form.compact .button { white-space: nowrap; flex: 0 0 auto; }

/* ---- IRT / TRI formal: "Seleccionar preguntas" — el formulario crece para llenar el panel
   cuando el usuario lo extiende (antes se quedaba del mismo alto y el espacio de más se
   perdía); el recuadro de preguntas es lo único que crece, con casillas más juntas para
   necesitar menos scroll de entrada. ---- */
.gl-card .gl-body > form.compact-irt-form {
  display: flex !important; flex-direction: column; flex: 1 1 auto !important; min-height: 0;
}
.gl-card .gl-body > form.compact-irt-form > .form-grid,
.gl-card .gl-body > form.compact-irt-form > .selector-toolbar,
.gl-card .gl-body > form.compact-irt-form > .button,
.gl-card .gl-body > form.compact-irt-form > p { flex: 0 0 auto; }
.gl-card .gl-body > form.compact-irt-form > .irt-item-selector {
  flex: 1 1 auto !important; max-height: none !important; min-height: 60px;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important;
  gap: 2px !important; align-content: start;
}
.gl-card .gl-body > form.compact-irt-form > .irt-item-selector label { padding: 1px 0; }

/* ---- Gráficas: el cuerpo ya se encoge con el panel (ver .gl-body > .svg-chart arriba);
   si el panel baja de cierto alto, el SVG se recorta en vez de reducirse por completo
   porque conserva una altura mínima mayor a la disponible. Sin piso mínimo dentro de la
   cuadrícula: siempre ocupa exactamente lo que el panel le deja. ---- */
.gl-grid:not(.gl-measure) .gl-body > .svg-chart,
.gl-grid:not(.gl-measure) .gl-body > .vertical-bars,
.gl-grid:not(.gl-measure) .gl-body > .mini-histogram { min-height: 0 !important; }

/* .vertical-histogram (Distribución) traía una altura fija en píxeles (205px u otra según
   la densidad), así que no se achicaba con el panel. Dentro de la cuadrícula pasa a ocupar
   exactamente el alto que el panel le deje, como las demás gráficas. */
.gl-grid:not(.gl-measure) .gl-body > .vertical-histogram {
  flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
}

/* ---- Planes / Servicio por institución: al encoger el panel el usuario quiere conservar
   las dos columnas (más ajustadas), no que se desarmen en una sola columna larga y
   desperdicien el espacio del centro. Dos columnas fijas dentro de la cuadrícula; el
   contenido de cada tarjeta se ajusta al ancho que le queda. ---- */
.gl-grid:not(.gl-measure) .gl-body > .commercial-plan-grid,
.gl-grid:not(.gl-measure) .gl-body > .institution-service-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.gl-grid:not(.gl-measure) .commercial-card > summary { gap: 6px; min-width: 0; }
.gl-grid:not(.gl-measure) .commercial-card > summary > span:first-child { min-width: 0; }
.gl-grid:not(.gl-measure) .commercial-card > summary strong,
.gl-grid:not(.gl-measure) .commercial-card > summary small { overflow-wrap: anywhere; }

/* ---- Panel principal: resumen del plan y sus botones, en la fila de "Crear evaluación",
   en el espacio libre a su derecha. Reutiliza el mismo texto/botones que ya existían en
   la franja de plan (ahora retirada de aquí: el detalle completo sigue en "Mi plan"). ---- */
.dashboard-page .page-actions { gap: 14px !important; }
.heading-plan-compact { display: grid; gap: 0; line-height: 1.2; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--line, #cfcfc8); }
.heading-plan-compact .plan-usage-kicker { font-size: 9px; }
.heading-plan-compact strong { font-size: 13px; }
.heading-plan-compact small { color: var(--muted, #66645f); }

/* ---- Botones del título de la evaluación: la casilla "Confirmar cálculo parcial" vivía
   dentro de un <form> sin estilo, que la ponía en su propia línea arriba del botón "Calcular
   ahora" y desalineaba todo el renglón (CALCULADO / casilla / Calcular ahora / Acceso /
   Administrar evaluación). Ahora el formulario es una fila, y toda la línea queda centrada
   a la misma altura. ---- */
.page-heading .page-actions:has(.calculate-form) { align-items: center !important; }
.page-heading .page-actions .calculate-form { display: inline-flex; align-items: center; gap: 8px; }
.page-heading .page-actions .checkbox-label.compact { margin: 0; white-space: nowrap; }

/* Fila del título: CALCULADO, casilla, texto de la casilla y botones con un mismo centro vertical.
   El texto de la casilla va en una sola línea y la casilla queda a su altura. */
.page-heading .page-actions .calculate-form { align-items: center !important; }
.page-heading .page-actions .calculate-form .checkbox-label.compact {
  display: inline-flex !important; flex-direction: row; align-items: center !important; gap: 6px;
  white-space: nowrap; line-height: 1.2; margin: 0; align-self: center;
}
.page-heading .page-actions .calculate-form .checkbox-label.compact input[type="checkbox"] { margin: 0; align-self: center; }
.page-heading .page-actions > .status { align-self: center; }

/* Paneles de Acciones: el título de cada botón (16 px) era demasiado grande frente a su descripción.
   Se baja a 13 px para que título y descripción queden proporcionados. */
body .action-grid > .action-card strong,
body .action-grid > .action-card-form .action-card strong { font-size: 13px !important; line-height: 1.15 !important; }

/* Paginas de analisis: la barra "Diseño bloqueado / Mover paneles / Publicar / Restablecer" sube a
   la misma línea que las pestañas de sección (a la derecha); el estado y las advertencias quedan
   debajo. Así se libera una fila y el contenido de abajo gana espacio. */
.page-heading.gl-heading > .gl-subrow { display: contents; }
.page-heading.gl-heading > .analysis-nav { grid-column: 1 / 3; grid-row: 2; }
.page-heading.gl-heading > .gl-subrow > .gl-toolbar { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; margin: 0; }
.page-heading.gl-heading > .gl-subrow > .gl-subleft { grid-column: 1 / -1; grid-row: 3; }
.page-heading.gl-heading > .analysis-nav { padding-top: 0 !important; margin-top: 0 !important; align-items: center; }
.page-heading.gl-heading > .analysis-nav { height: 22px; box-sizing: border-box; }
.page-heading.gl-heading > .gl-subrow > .gl-toolbar { height: 22px; box-sizing: border-box; min-height: 0; padding: 0; }
.page-heading.gl-heading > .gl-subrow > .gl-toolbar { position: relative; top: -1.5px; }

/* Publicar resultados a evaluados: la casilla y su texto comparten centro vertical; el texto del
   enlace sube para ganar espacio. */
html body [data-panel-id="results-portal"] label.checks.checks.checks { display: flex !important; flex-direction: row; align-items: center !important; gap: 6px; margin: 0; }
html body [data-panel-id="results-portal"] label.checks.checks.checks input[type="checkbox"] { margin: 0; align-self: center; }
[data-panel-id="results-portal"] p.small { margin: 6px 0 4px; }
[data-panel-id="results-portal"] label.checks > span { line-height: 1.2; margin: 0; }

/* Casillas con su texto (label > input[type=checkbox]) en toda la plataforma: la casilla y el texto
   comparten centro vertical. style.css las alineaba al inicio (texto arriba, casilla abajo). */
label:has(> input[type="checkbox"]):not(.palette-card):not(.resource-check):not(.check-option) { align-items: center !important; }
label:has(> input[type="checkbox"]):not(.palette-card):not(.resource-check):not(.check-option) > input[type="checkbox"] { margin: 0 !important; align-self: center !important; }

/* Seguimiento de estudiante: (1) Descargar gráfica JPG y Descargar gráficas del grupo ocupan una
   misma fila, con el mismo tamaño y repartiendo el ancho por igual; (2) las cinco cifras caben en una
   sola línea (algo más pequeñas); (3) el texto de ayuda del comparador va arriba, dentro de su recuadro. */
.follow-up-controls { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.follow-up-controls > .follow-up-download-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.follow-up-download-row > button { width: 100%; margin: 0; min-height: 30px; }
.follow-up-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; }
.follow-up-kpis > span { padding: 4px 6px !important; min-width: 0; }
.follow-up-kpis > span strong { font-size: 11.5px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.follow-up-kpis > span small { font-size: 10px !important; }
.follow-up-comparison-list > #follow-up-comparison-help { grid-column: 1 / -1; order: -1; margin: 0 0 4px; }
.follow-up-comparison-list > #follow-up-comparison-help small { display: block; font-size: 11px; line-height: 1.3; white-space: normal; }

/* Pagar upgrade / Pagar renovación y Pagar con QR Bancolombia: ahora van separados (8 px), en fila
   o apilados según el ancho de la tarjeta. */
form:has(> .legal-checkout-consent) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Seguimiento: Medida, Tipo de gráfica, Serie, Tamaño y Actualizar gráfica en una sola línea (cada
   uno con su ancho), y debajo los dos botones de descarga con el mismo tamaño, repartiendo el ancho. */
.follow-up-controls { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: start !important; }
.follow-up-controls > .follow-up-chart-actions { margin: 0; display: flex; }
.follow-up-controls > .follow-up-chart-actions > button { width: 100%; margin: 0; white-space: nowrap; }
.follow-up-controls > label select { min-width: 0; width: 100%; }
.follow-up-controls > .follow-up-download-row { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px; min-width: 0; }
.follow-up-download-row > button { min-width: 0; white-space: normal; width: 100%; margin: 0; }
.follow-up-download-row > button { grid-column: auto !important; }
.follow-up-controls > .follow-up-chart-actions { margin-top: 13px !important; }

/* Seguimiento, fila de controles: Medida, Tipo, Serie, Tamaño y Actualizar gráfica en una sola línea
   con anchos repartidos (los menús se encogen); el botón no se empalma con ningún menú. Las descargas
   quedan en la fila de abajo, con el mismo tamaño. */
.follow-up-controls { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 8px !important; grid-template-columns: none !important; }
.follow-up-controls > label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.follow-up-controls > label select { width: 100%; min-width: 0; }
.follow-up-controls > .follow-up-chart-actions { flex: 0 0 auto; margin: 0 !important; display: flex; }
.follow-up-controls > .follow-up-chart-actions > button { white-space: nowrap; width: auto; margin: 0; }
.follow-up-controls > .follow-up-download-row { flex: 0 0 100%; }

/* Prueba virtual: las cifras de las casillas (Resultados, Promedio, Alfa, KR-21, Spearman-Brown, Mín/máx)
   eran demasiado grandes frente a la letra del resto de la plataforma; se bajan para que quepan bien. */
html body .test-longitudinal-panel .stat-grid.four .stat strong { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* Prueba virtual: la gráfica gana el espacio del panel y crece al redimensionarlo (como las demás gráficas). */
.gl-grid:not(.gl-measure) .gl-body > .test-longitudinal-chart-wrap { flex: 1 1 auto !important; min-height: 160px; display: flex; margin-bottom: 0; }
.gl-grid:not(.gl-measure) .test-longitudinal-chart-wrap > svg.test-longitudinal-chart { flex: 1 1 auto; height: 100%; width: 100%; min-height: 0; }

/* Páginas de análisis: la barra de herramientas ocupa su propia línea, a la derecha y con todo el
   ancho disponible, debajo del estado. Así no se encima con las pestañas ni con su etiqueta. */
.page-heading.gl-heading > .gl-subrow > .gl-toolbar { grid-column: 1 / -1; grid-row: 4; justify-self: end; align-self: start; height: auto !important; min-height: 0; margin: 2px 0 0; padding: 0; top: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.gl-toolbar-label { white-space: nowrap; }