` (los otros 7 filtros: `.campo-etiqueta` aparte, encima del select/input) quiere columna. Antes la regla compartida ponía `align-items: center` sin fijar dirección para ninguna de las dos, así que la fila implícita (el valor por defecto de flex) también metía la etiqueta del `

` AL LADO de su select/input -- apretados en los 220px de `--w-campo-min` -- en vez de solo centrar el bloque dentro de una fila más alta (p. ej. junto al multiselect de Categoría). */ .rejilla-campos .campo { margin: 0; display: flex; min-height: var(--tap); } .rejilla-campos label.campo { align-items: center; } .rejilla-campos div.campo { flex-direction: column; justify-content: center; } /* Encabezado de bloque dentro de la rejilla de poderes (Tanda E del Bloque 3, D-10): con 37 casillas por perfil, una lista plana no se lee. `grid-column: 1 / -1` lo saca de la retícula de columnas y le da la fila entera; sin eso se coloca en una celda, al lado de una casilla, y no separa nada. */ .rejilla-grupo { grid-column: 1 / -1; margin: var(--sp-3) 0 0; font-size: var(--fs-100); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } /* Agrupado por sección de la ficha dinámica (T.x, Tarea 14): sin esto, 38 campos seguidos son un muro inusable. `

`/`

` nativos (según `plegable` en FieldDef) con el mismo espaciado que `.campo`. */ .ficha-seccion { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--bd); border-radius: var(--r-md); } .ficha-seccion > legend, .ficha-seccion > summary { font-size: var(--fs-100); font-weight: 600; padding: 0 var(--sp-2); cursor: default; } .ficha-seccion > summary { cursor: pointer; } .ficha-seccion .campo:first-of-type { margin-top: var(--sp-2); } /* Sub-bloque de participantes de la ficha T.x (Tarea 14): tinte de marca (`--primary`, ronda de arreglo I-1 de la revisión — antes un morado ajeno a la paleta, `#ddd6fe`/`rgba(124,58,237,.05)`, copiado sin querer del origen en React) con el mismo `color-mix` que ya usan `.cifras`/ `.btn--sec:hover` para variantes tintadas, nunca hex/rgba sueltos. */ .bloque-participantes { padding: var(--sp-4); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--bd)); border-radius: var(--r-md); } .participantes-lista { list-style: none; padding: 0; margin: 0 0 var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); } .participantes-lista li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); } .participante-nombre { flex: 1 1 180px; font-size: var(--fs-200); } .participante-responsable { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-100); font-weight: 600; cursor: pointer; white-space: nowrap; } .participante-sin-quitar { font-size: var(--fs-100); color: var(--text-muted); } .participantes-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .participantes-picker select { flex: 1 1 260px; max-width: 420px; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-300); background: var(--surface); color: var(--text); border: 1px solid var(--bd); border-radius: var(--r-md); } /* ---------- avisos ---------- */ .aviso { padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; border-left: 3px solid var(--text-muted); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--neutral-bg); font-size: var(--fs-200); max-width: var(--w-prose); } .aviso--success { background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); } .aviso--warning { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); } .aviso--error { background: var(--danger-bg); border-left-color: var(--danger); color: var(--danger); } .aviso--info { background: var(--neutral-bg); border-left-color: var(--text-muted); color: var(--text); } /* ---------- paginación ---------- */ .paginacion { display: flex; gap: var(--sp-1); align-items: center; margin: var(--sp-4) 0; font-size: var(--fs-200); } .paginacion-item { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bd); border-radius: var(--r-md); text-decoration: none; } .paginacion-item[aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } /* ---------- barra de proporción (informes) ---------- */ /* El ancho del relleno lo calcula la vista: `style="width:{{ pct|unlocalize }}%"`. Ese atributo es DATO, no estilo suelto, y se conserva — igual que en el Gantt. Ojo al `|unlocalize`: sin él, «83,5%» es CSS inválido y la barra sale vacía. */ .fila-dato { display: flex; align-items: center; gap: var(--sp-3); } .pista { flex: 1; height: 16px; overflow: hidden; border-radius: var(--r-pill); background: color-mix(in srgb, var(--primary) 8%, transparent); } .pista > div { height: 100%; border-radius: var(--r-pill); background: var(--primary); } /* ---------- impresión ---------- */ /* Los informes de dirección se imprimen: hay un botón «Imprimir / PDF». Sin esto saldrían la barra lateral y la cinta de contexto en el papel. Se añade `.migas` a la lista de ocultos, fuera del bloque literal que dio el controlador: es la cinta "⌂ Inicio …" de `_barra.html`, que vive FUERA de `.barra-global` (esa solo envuelve los selectores "ver como"/"ver rol") y por tanto no la tapaba `.barra-global{display:none}` sola. Sigue siendo solo CSS, dentro del fichero que esta ronda autoriza tocar. */ .no-print { display: revert; } @media print { body { background: var(--surface); } .app-nav, .barra-global, .migas, .app-head-acciones, .no-print, .paginacion { display: none; } .app { display: block; } .app-main { max-width: none; padding: 0; } .app-head::after { animation: none; } .card { break-inside: avoid; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } a { text-decoration: none; color: var(--text); } } /* ---------- ficha (pares dato–valor) ---------- */ .ficha { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); align-items: baseline; margin: var(--sp-4) 0; } .ficha-dato { font-size: var(--fs-100); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } .ficha-valor { font-size: var(--fs-200); } /* ---------- superficie editorial (portales públicos e informes) ---------- */ .editorial { max-width: var(--w-prose); margin: 0 auto; padding: var(--sp-7) var(--sp-5); } .editorial h1 { font-size: var(--fs-600); } .editorial p { font-size: var(--fs-300); line-height: var(--lh-prose); margin: var(--sp-4) 0; } .editorial small { color: var(--text-muted-cristal); } /* ---------- responsive ---------- */ /* El colapso a "iconos" por debajo de 1100px prometido en la spec no es viable sin un juego de iconos que no existe: el contenido íntegro de cada .app-nav-item es un de texto (T5, seis bases de app), así que ocultar el span dejaba enlaces de 44px clicables y vacíos, sin wordmark (el enlace a /) ni pie (cierre de sesión inalcanzable). En vez de un corte intermedio sin contenido, la barra lateral completa (vertical) se mantiene hasta 1100px y por debajo pasa directamente a la cinta horizontal desplazable, que sí conserva texto, wordmark y pie. */ @media (max-width: 1100px) { .app { flex-direction: column; } .app-nav { width: 100%; flex-direction: row; overflow-x: auto; padding: var(--sp-2); box-shadow: 0 8px 24px -6px rgba(46, 26, 20, .22); } .app-nav-marca { padding: 0 var(--sp-3); } .app-nav-item { border-left: 0; border-bottom: 2px solid transparent; } .app-nav-item.activo { border-left: 0; border-bottom-color: var(--accent-pale); } .app-nav-pie { margin-top: 0; margin-left: auto; } .app-main { padding: 0 var(--sp-4) var(--sp-6); } .cifras > * + * { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .cifras { flex-direction: column; } } /* ---------- gantt ---------- */ /* Cronograma de membresías de grupo (registro/grupo.html) y trayectoria de persona (registro/trayectoria.html). Las posiciones y anchos de las barras (`style="left:…%;width:…%"`) los calcula la vista: son DATOS, no estilo suelto, y viven en la plantilla — no se tocan aquí. Esta hoja solo dibuja el carril fijo. Las dimensiones internas que mantienen la barra centrada en su carril (alto de fila, ancho de la columna de nombre, alto/línea de la barra) van literales, no a un token: son geometría interna acoplada de una sola pieza, igual que un filete de 1px (G4) — snap-earlas a la escala de espaciado rompería la alineación vertical. */ .gantt { display: flex; flex-direction: column; gap: var(--sp-1); } .gantt-eje { position: relative; height: 1.1rem; margin-left: 170px; border-bottom: 1px solid var(--bd); } .gantt-eje .yl { position: absolute; top: 0; font-size: var(--fs-100); color: var(--text-muted); transform: translateX(-50%); } .gantt-fila { display: flex; align-items: center; gap: var(--sp-2); } .gantt-fila .nombre { width: 170px; flex: 0 0 170px; font-size: var(--fs-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track { position: relative; flex: 1; height: 1.5rem; border-radius: var(--r-sm); background: linear-gradient(var(--bd), var(--bd)) no-repeat center / 100% 1px; } .track .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bd); opacity: .6; } .barra { position: absolute; top: .18rem; height: 1.15rem; border-radius: var(--r-sm); color: var(--on-primary); font-size: var(--fs-100); line-height: 1.15rem; text-align: center; min-width: 3px; overflow: hidden; box-shadow: var(--sh-1); } /* `.prog` queda del original (sin uso hoy en la plantilla); se conserva por fidelidad al bloque que se traslada, no es un añadido nuevo. */ .barra.prog { opacity: .55; } /* Contorno del grupo PRINCIPAL de la persona (no confundir con el ★ del IP). */ .barra.princ { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-primary) 90%, transparent), var(--sh-1); } /* Banda de contrato/afiliación con la universidad (solo trayectoria.html). */ .barra.afil { background: repeating-linear-gradient(45deg, var(--ok), var(--ok) 6px, color-mix(in srgb, var(--ok) 75%, black) 6px, color-mix(in srgb, var(--ok) 75%, black) 12px); } .gantt-leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-items: center; margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--bd); font-size: var(--fs-100); color: var(--text-muted); } .gantt-leyenda .tit { font-weight: 700; } .gantt-leyenda .item { display: inline-flex; align-items: center; gap: var(--sp-1); } .gantt-leyenda .muestra { width: .85rem; height: .85rem; border-radius: var(--r-sm); display: inline-block; background: var(--bd); } .gantt-leyenda .muestra.princ { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-primary) 90%, transparent); border: 1px solid var(--bd); } .gantt-leyenda .muestra.afil { background: repeating-linear-gradient(45deg, var(--ok), var(--ok) 4px, color-mix(in srgb, var(--ok) 75%, black) 4px, color-mix(in srgb, var(--ok) 75%, black) 8px); } .gantt-leyenda .sub { flex-basis: 100%; } /* Asiento anulado en el libro de registro (grupo.html/trayectoria.html): una enmienda lo anula pero el asiento original sigue visible, tachado, para no perder el rastro notarial. No es del Gantt, pero solo lo usan estas dos plantillas y esta es la única hoja que esta tarea autoriza tocar. */ .anulado { text-decoration: line-through; color: var(--text-muted); } /* ---------- panorama del ecosistema (panel.html) ---------- */ /* Dashboard /panel//. Marcado SIN CAMBIOS respecto al original salvo quitar el