/* ══════════════════════════════════════════════════════════════════ MGL institucional · armazón e inicio (T-022, I-0a). Deriva de los bocetos inst.css, inst-r2.css e inst-r3.css de la dirección. Solo lee tokens: reportes/tokens.css (copia byte a byte del visor) y reportes/tokens-institucional.css (nivel 3). Los componentes comunes con los reportes (sello, cifras, tablas y «Fuentes y corte») están en reportes/componentes.css. Ningún color crudo, ninguna sombra fuera de --sombra-flotante, ninguna mayúscula forzada. El único movimiento es el productivo de la mesa de trabajo (dirección B, ≤ 0,55 s), con sus duraciones en tokens que valen 0 con movimiento reducido y al imprimir. ══════════════════════════════════════════════════════════════════ */ /* ───────────── base ───────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; accent-color: var(--accion); scroll-padding-top: calc(var(--cromo-alto) + var(--e-4)); } body { margin: 0; background: var(--lienzo); color: var(--texto); font: 400 var(--t-control)/var(--i-control) var(--fuente-ui); font-feature-settings: "kern", "liga", "lnum"; } h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; } /* sin viudas (T-130) */ p { margin: 0 0 var(--inst-ritmo-interior); max-width: var(--ancho-prosa); } a { color: var(--accion); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accion-hover); text-decoration-thickness: 2px; } button, input, select, textarea { font: inherit; color: inherit; } button, summary, select, label[for] { cursor: pointer; } :focus-visible { outline: var(--foco-anillo); outline-offset: 0; box-shadow: var(--foco-interior); } a:focus-visible { outline: 3px solid transparent; background-color: var(--foco); color: var(--texto); box-shadow: var(--foco-enlace-barra); text-decoration: none; } [hidden] { display: none; } .n { font-variant-numeric: tabular-nums lining-nums; } .vis-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .icono--s { width: 16px; height: 16px; } .salto { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cromo-fondo); color: var(--cromo-texto); padding: var(--e-3) var(--e-4); } .salto:focus { left: 0; } /* ───────────── franja de prueba (D-2, D-27) ───────────── */ .franja-prueba { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--e-1); height: var(--franja-prueba-alto); padding: 0 var(--e-5); background: var(--franja-prueba-fondo); color: var(--franja-prueba-texto); border-bottom: var(--franja-prueba-filete); font-size: var(--t-nota); line-height: 1; white-space: nowrap; overflow: hidden; } .franja-prueba .corta { display: none; } /* ───────────── armazón: dintel de noche a todo el ancho y carril de día debajo (D-28; T-118 §7, opción A) ───────────── */ .armazon-inst { min-height: 100vh; } .cuerpo { padding-left: var(--carril-inst-ancho); } .carril-inst { position: fixed; top: var(--cromo-alto); bottom: 0; left: 0; z-index: 40; width: var(--carril-inst-ancho); display: flex; flex-direction: column; overflow-y: auto; background: var(--carril-fondo); border-right: 1px solid var(--carril-borde); color: var(--carril-texto); } /* la marca vive en el dintel; la cabeza del carril solo aparece en el cajón del menú (< 1024 px) */ .carril-cabeza { display: none; align-items: center; justify-content: space-between; flex: none; background: var(--cromo-fondo); } /* la marca va siempre sobre la noche: dintel, cabeza del cajón y cabecera del acceso */ .carril-marca { display: flex; align-items: center; gap: var(--e-3); flex: none; height: var(--carril-marca-alto); padding-left: var(--carril-marca-relleno); padding-right: var(--e-2); color: var(--cromo-texto); text-decoration: none; white-space: nowrap; } .carril-marca:hover { color: var(--cromo-texto); } .carril-marca .marca-logo { height: var(--dintel-logo); width: auto; flex: none; } .carril-marca-texto { display: flex; flex-direction: column; line-height: var(--i-h1); } .carril-marca-titulo { font-size: var(--dintel-marca-titulo); font-weight: 800; } .carril-marca-sub { font-size: var(--dintel-marca-sub); color: var(--cromo-texto-2); } .carril-grupo { list-style: none; margin: 0; padding: var(--e-1) 0 0; } .carril-seccion { margin-top: var(--e-1); padding-top: var(--e-1); border-top: 1px solid var(--carril-borde); } .carril-seccion .carril-grupo { padding-top: 0; } .carril-rotulo { margin: var(--e-2) 0 var(--e-1); padding-left: calc(var(--carril-item-margen) + var(--carril-item-relleno)); font-size: var(--t-nota); line-height: 1.3; font-weight: 700; color: var(--texto-2); } .carril-item { position: relative; display: flex; align-items: center; gap: var(--carril-item-hueco); width: calc(100% - 2 * var(--carril-item-margen)); min-height: var(--carril-item-alto-moderno); margin: 0 var(--carril-item-margen); padding: var(--e-1) var(--e-2) var(--e-1) var(--carril-item-relleno); border-radius: var(--radio-control); color: var(--carril-texto); font: 500 var(--t-control)/1.2 var(--fuente-ui); text-decoration: none; } .carril-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carril-item:hover { background: var(--carril-hover); color: var(--carril-texto); } .carril-item[aria-current] { background: var(--carril-activo-fondo); color: var(--carril-activo-texto); } .carril-item[aria-current]::before { content: ""; position: absolute; left: calc(-1 * var(--carril-item-margen)); top: 50%; transform: translateY(-50%); width: var(--carril-barra-activa); height: var(--carril-barra-alto); border-radius: var(--carril-barra-radio); background: var(--carril-activo-marca); } /* en prueba (R1, D-m5): un punto ámbar de 8 px, el texto oculto en el enlace y una sola leyenda al pie */ .carril-prueba { flex: none; width: var(--carril-prueba-punto); height: var(--carril-prueba-punto); border-radius: 50%; background: var(--prueba-marca); } .carril-item .carril-prueba { margin-left: auto; } .carril-leyenda { display: flex; align-items: center; gap: var(--e-2); margin: auto 0 0; padding: var(--e-5) calc(var(--carril-item-margen) + var(--carril-item-relleno)) var(--e-3); color: var(--texto-2); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); } .carril-leyenda + .carril-pie { margin-top: 0; } .carril-item:focus-visible { outline: var(--foco-anillo); box-shadow: var(--foco-interior); background-color: var(--carril-hover); color: var(--texto); } .carril-pie { margin: auto 0 0; padding: var(--e-1) 0 var(--carril-item-margen); border-top: 1px solid var(--carril-borde); list-style: none; } .carril-cerrar { display: grid; place-items: center; width: var(--tactil); height: var(--tactil); margin-right: var(--e-1); padding: 0; border: 0; border-radius: var(--radio-control); background: none; color: var(--cromo-texto); } .carril-cerrar:hover { background: var(--cromo-hover); } .carril-cerrar[hidden] { display: none; } /* ───────────── dintel: marca, migas, corte activo y cuenta, de noche (D-29; T-118 §7.2) ───────────── */ .linea-inst { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: var(--carril-inst-ancho) minmax(0, 1fr) auto; align-items: center; gap: var(--e-5); height: var(--linea-alto); padding: 0 var(--e-5) 0 0; background: var(--linea-fondo); border-bottom: 1px solid var(--linea-borde); color: var(--cromo-texto); } html[data-entorno="prueba"] .linea-inst { top: var(--franja-prueba-alto); } .linea-inst .carril-marca { height: 100%; } /* dentro del dintel, el anillo amarillo basta (11,47 frente a la noche); los enlaces conservan el de la casa */ .linea-inst button:focus-visible, .linea-inst summary:focus-visible { box-shadow: none; } .migas ol { display: flex; align-items: center; gap: var(--e-1); margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; font-size: var(--t-control); color: var(--cromo-texto-3); } /* QA 5 (T-120 F1): los enlaces de la miga no se comprimen (no se pisan) y miden 24 px de alto (2.5.8); solo el último nivel, el actual, cede ancho y se corta con «…». */ .migas li { display: flex; flex: none; align-items: center; gap: var(--e-1); } .migas li:last-child { flex: 0 1 auto; min-width: 0; } .migas a { display: inline-flex; align-items: center; min-height: var(--objetivo-minimo); color: var(--cromo-texto-2); } .migas a:hover { color: var(--cromo-texto); } .migas [aria-current] { font-weight: 700; color: var(--cromo-texto); overflow: hidden; text-overflow: ellipsis; } .sesion { display: flex; align-items: center; gap: var(--e-4); min-width: 0; justify-self: end; } .sesion-ambito { margin: 0; font-size: var(--t-nota); color: var(--cromo-texto-2); white-space: nowrap; } .sesion-ambito strong { color: var(--cromo-texto); font-weight: 700; } .corte-activo { display: inline-flex; align-items: center; gap: var(--e-2); height: var(--corte-alto); padding: 0 var(--e-2); border: 1px solid var(--cromo-control); border-radius: var(--radio-etiqueta); color: var(--cromo-texto); text-decoration: none; font-size: var(--t-nota); line-height: 1; white-space: nowrap; } .corte-activo:hover { background: var(--cromo-hover); color: var(--cromo-texto); } .corte-rotulo { font-weight: 700; } .corte-fecha { color: var(--cromo-texto-3); } .cuenta { position: relative; } .cuenta summary { display: flex; align-items: center; gap: var(--e-1); height: var(--cuenta-alto); padding: 0 var(--e-2); border-radius: var(--radio-control); font-weight: 500; list-style: none; white-space: nowrap; } .cuenta summary::-webkit-details-marker { display: none; } .cuenta-corta { display: none; } .cuenta summary:hover { background: var(--cromo-hover); } /* el menú desplegado sigue siendo una hoja de día */ .cuenta-menu { position: absolute; right: 0; top: calc(100% + var(--e-1)); z-index: 45; min-width: 16rem; padding: var(--e-3) var(--e-4); box-shadow: var(--sombra-flotante); color: var(--texto); } .cuenta-usuario { margin: 0 0 var(--e-2); font-size: var(--t-nota); color: var(--texto-2); overflow-wrap: anywhere; } .boton-menu { display: none; } main { padding: var(--vista-relleno) var(--vista-relleno) var(--e-8); } main:focus { outline: none; } /* primera línea de la vista: «Vista en prueba» y el sello «Datos de prueba» (T-120 R1 y R2) */ .vista-avisos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 var(--inst-ritmo-interior); } .vista-avisos:not(:has(.calificador, .sello-prueba)) { display: none; } /* R12: un solo ancho de contenido para el inicio y las vistas (D10) */ .vista, .vista-avisos { max-width: var(--inst-ancho); } .ambito-movil { display: none; margin: 0 0 var(--e-3); font-size: var(--t-nota); color: var(--texto-2); } /* ───────────── botones, campos, superficies y etiquetas ───────────── */ .boton { display: inline-flex; align-items: center; gap: var(--e-2); height: var(--boton-alto); padding: 0 var(--e-4); border: 1px solid var(--boton-primario-fondo); border-bottom: 2px solid var(--boton-primario-borde-inferior); border-radius: var(--radio-control); background: var(--boton-primario-fondo); color: var(--boton-primario-texto); font-weight: 700; text-decoration: none; white-space: nowrap; transition-property: transform; transition-duration: var(--duracion-corta); transition-timing-function: var(--curva); /* A13: el fondo no se anima */ } .boton:hover { background: var(--accion-hover); color: var(--boton-primario-texto); } .boton:active { transform: var(--boton-pulsado); } /* T-130: la pulsación se ve antes de que llegue la página */ @media (prefers-reduced-motion: reduce) { .boton:active { transform: none; } } .boton:disabled, .boton:disabled:hover, .acceso-panel button[type="submit"]:disabled, .acceso-panel button[type="submit"]:disabled:hover { /* T-139: el envío único se ve deshabilitado */ background: var(--superficie); border-color: var(--borde-control); color: var(--texto-2); cursor: progress; opacity: 0.7; transform: none; } .boton:focus-visible { outline: var(--foco-anillo); box-shadow: var(--foco-interior); background: var(--foco); color: var(--texto); } .boton--secundario { background: var(--superficie); color: var(--boton-secundario-texto); border: 1px solid var(--boton-secundario-borde); } .boton--secundario:hover { background: var(--accion-suave); color: var(--accion-hover); } .boton--s { height: var(--objetivo); padding: 0 var(--e-3); font-size: var(--t-nota); } .boton--s .icono { width: 16px; height: 16px; } .entrada { height: var(--campo-alto); padding: 0 var(--e-3); width: 100%; max-width: 28rem; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie); } textarea.entrada { height: auto; min-height: var(--compositor-alto-min); padding: var(--e-2) var(--e-3); max-width: none; resize: vertical; line-height: var(--i-control); } .selector { height: var(--selector-alto); max-width: 100%; padding: 0 var(--e-2); border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie); color: var(--texto); font: 500 var(--t-control)/1 var(--fuente-ui); } .superficie { background: var(--superficie); border: 1px solid var(--filete-suave); border-radius: var(--radio-superficie); } .etiqueta { display: inline-flex; align-items: center; gap: var(--e-1); height: var(--etiqueta-alto); padding: 0 var(--e-2); border-radius: var(--radio-etiqueta); font-size: var(--t-nota); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; } .etiqueta--construccion { background: var(--etiqueta-construccion-fondo); border: var(--etiqueta-construccion-borde); color: var(--etiqueta-construccion-texto); } .etiqueta--aviso { background: var(--aviso-suave); border: 1px solid var(--aviso); color: var(--texto); height: auto; min-height: var(--etiqueta-alto); padding-block: 2px; white-space: normal; line-height: 1.25; } .aviso { padding: var(--e-3) var(--e-4); margin: 0 0 var(--e-4); border-radius: var(--radio-superficie); border-start-start-radius: 0; border-end-start-radius: 0; } .aviso p:last-child { margin-bottom: 0; } .aviso--calidad { border-left: var(--aviso-calidad-barra); background: var(--aviso-calidad-fondo); } .aviso--info { border-left: var(--aviso-info-barra); background: var(--aviso-info-fondo); } .aviso--error { border-left: var(--errores-barra); background: var(--error-suave); } .aviso-titulo { font-weight: 700; } .vacio { color: var(--texto-2); } /* ───────────── cabecera del inicio ───────────── */ /* una sola línea: institución, nivel, ámbito y vigencia, con «Abrir la mesa de trabajo» al final (07-10) */ .cabecera-inicio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); margin-bottom: var(--e-5); } .cabecera-inicio-accion { margin-left: auto; } .cabecera-inicio h1, .vista-titulo { font-size: var(--vista-titulo); line-height: var(--i-h2); letter-spacing: var(--tracking-h1); } .vista-titulo { margin-bottom: var(--inst-ritmo-interior-s); } .seccion-titulo { font-size: var(--t-h3); line-height: var(--i-h3); margin: 0 0 var(--e-3); } /* ───────────── franja de cifras (02 §c.3 con la revisión 3 §c: D-43, D-44) ───────────── */ /* compacta (07-10): ≤ 120 px de alto a 1366, la cifra a 36 px; el sello sube junto al contexto si cabe */ .franja-cifras { margin-bottom: var(--e-5); } .franja-cifras-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } .franja-cifras .cifra-panel { padding: var(--e-2) var(--e-3) var(--e-1); } .franja-cifras .cifra-panel-valor { margin: 0; } .franja-cifras .cifra-panel-valor .valor { white-space: normal; overflow-wrap: anywhere; } .franja-cifras .cifra-panel:not(.cifra-panel--sin-valor) .valor { font-size: var(--cifra-destacada-movil); } .cifra-panel-base { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-1) var(--e-2); margin-top: var(--e-2); } .franja-cifras .cifra-panel-pie { margin: 0; padding: 0; } /* ───────────── rejilla del inicio (02 §c.5) ───────────── */ .rejilla-trabajo { display: grid; grid-template-columns: minmax(0, 1fr) var(--lateral-ancho); gap: var(--e-5); align-items: start; } .columna-principal, .columna-lateral { min-width: 0; } .columna-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); } .hueco-etc { display: grid; align-content: center; gap: var(--e-2); min-height: var(--hueco-etc-alto); padding: var(--e-5); background: var(--modulo-pendiente-trama); border: var(--modulo-pendiente-borde); border-radius: var(--radio-superficie); } .hueco-etc-titulo, .hueco-etc-texto { justify-self: start; max-width: 36em; margin: 0; padding: var(--e-2) var(--e-3); background: var(--superficie); } .hueco-etc-titulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-h3); line-height: var(--i-h3); } .ultimos { margin-top: var(--e-5); } /* «Sus últimos reportes»: lista, no tabla; en el móvil la fecha baja sin cortarse (T-029 B1) */ .ultimos-lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border-top: var(--tabla-cabecera-filete); } .ultimos-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--e-4); min-height: var(--tabla-fila-alto-densa); padding: var(--e-1) var(--e-3); border-bottom: var(--tabla-fila-filete); } .ultimos-titulo { display: inline-flex; align-items: center; min-height: var(--objetivo); font-weight: 700; } .ultimos-meta { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); margin: 0; max-width: none; font-size: var(--t-nota); color: var(--texto-2); } /* acciones del nivel (02 §c.4) */ .acciones-panel { padding: var(--e-3) var(--e-4) var(--e-4); } .acciones-panel h2 { margin-bottom: var(--e-2); font-size: var(--t-h3); line-height: var(--i-h3); } .acciones-lista { list-style: none; margin: 0; padding: 0; } .acciones-lista > li { padding: var(--e-3) 0; border-top: 1px solid var(--filete-suave); } .acciones-lista > li:first-child { padding-top: 0; border-top: 0; } .acciones-lista p { max-width: none; } .acciones-lista form > .boton:not(.boton--s) { width: 100%; height: auto; min-height: var(--boton-alto); padding: var(--e-2) var(--e-3); justify-content: center; white-space: normal; text-align: center; } .accion-nota { margin: var(--e-1) 0 0; font-size: var(--t-nota); line-height: var(--i-nota); color: var(--texto-2); } .accion-titulo { display: block; margin: 0 0 var(--e-2); font-weight: 700; } .accion-titulo--inactiva { color: var(--texto-2); } .accion-fila { display: flex; flex-wrap: wrap; gap: var(--e-2); } /* «GeoJSON: próximamente» baja de línea en vez de salirse de la tarjeta */ .accion-fila .selector { flex: 1 1 auto; min-width: 0; } .accion-fila .boton { height: var(--selector-alto); } .accion-formatos { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0; color: var(--texto-2); font-size: var(--t-nota); } .accion-formato { display: inline-flex; align-items: center; gap: var(--e-1); } .accion-formato .icono { width: 16px; height: 16px; } .accion-asistente label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-1); font-weight: 700; } .accion-asistente textarea.entrada { min-height: 64px; margin-bottom: 0; } .accion-asistente form { display: grid; gap: var(--e-2); justify-items: start; } .accion-asistente form textarea.entrada { justify-self: stretch; } /* destinos de N4 y N5 (boceto 06) */ .destinos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--destino-min)), 1fr)); gap: var(--e-4); } .destino { position: relative; display: flex; flex-direction: column; gap: var(--e-2); min-height: var(--destino-alto-min); padding: var(--destino-relleno); background: var(--superficie); border: var(--destino-borde); border-radius: var(--radio-superficie); } .destino p { margin: 0; color: var(--texto-2); } .destino-cabeza { display: flex; align-items: center; gap: var(--e-2); } .destino-cabeza .icono { color: var(--texto-2); } .destino h3 { font-size: var(--t-h3); line-height: var(--i-h3); } .destino h3 a { text-decoration: none; } .destino h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .destino:hover { background: var(--destino-fondo-activo); border-color: var(--destino-borde-activo); } .destino:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; } .destino:has(a:focus-visible) { outline: var(--foco-anillo); box-shadow: var(--foco-interior); } .destino-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-2); font-size: var(--t-nota); color: var(--texto-2); } .destino--inactivo { background: var(--destino-inactivo-fondo); } .destino--inactivo:hover { background: var(--destino-inactivo-fondo); border-color: var(--filete-suave); } .destino--inactivo h3 { color: var(--destino-inactivo-texto); } /* ───────────── acceso (sin sesión) ───────────── */ body.acceso { background: var(--fondo); } .cabecera-acceso { display: flex; align-items: center; height: var(--linea-alto); padding: 0 var(--e-5); background: var(--linea-fondo); border-bottom: 1px solid var(--linea-borde); } .cabecera-acceso .carril-marca { padding-left: 0; } .acceso-contenido { padding: var(--e-7) var(--e-5); } .acceso-panel { max-width: 30rem; } .acceso-panel h1 { font-size: var(--vista-titulo); line-height: var(--i-h2); margin-bottom: var(--e-4); } .acceso-panel .panel { padding: 0; } .acceso-panel label { display: block; margin: var(--e-4) 0 var(--e-1); font-weight: 700; } .acceso-panel input[type="text"], .acceso-panel input[type="password"], .acceso-panel input[type="email"] { width: 100%; max-width: 28rem; height: var(--campo-alto); padding: 0 var(--e-3); border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie); } .acceso-panel button[type="submit"] { display: inline-flex; align-items: center; height: var(--boton-alto); margin-top: var(--e-5); padding: 0 var(--e-4); border: 1px solid var(--boton-primario-fondo); border-bottom: 2px solid var(--boton-primario-borde-inferior); border-radius: var(--radio-control); background: var(--boton-primario-fondo); color: var(--boton-primario-texto); font-weight: 700; } .acceso-panel button[type="submit"]:hover { background: var(--accion-hover); } .acceso-panel .error { padding: var(--e-2) var(--e-3); border-left: var(--errores-barra); background: var(--error-suave); color: var(--texto); font-weight: 700; } .acceso-panel .ayuda { margin-top: var(--e-3); font-size: var(--t-nota); color: var(--texto-2); } .acceso-panel .qr svg { width: 12rem; height: 12rem; } .acceso-panel code { padding: 0 var(--e-1); background: var(--fondo-sutil); overflow-wrap: anywhere; } /* ───────────── anchos ───────────── */ /* segmentado de los mapas: «Plano · Relieve» (T-049 §b) y «3D · Plano» de «Mi sector» (T-112); radios nativos */ .etc-segmentado { display: inline-flex; margin: 0; padding: var(--seg-relleno, var(--e-0)); border: var(--seg-pista-borde, var(--filete-fino)); border-radius: var(--seg-radio, var(--radio-control)); background: var(--seg-pista, var(--fondo-sutil)); } .etc-segmentado-opcion { position: relative; display: inline-flex; } .etc-segmentado-opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .etc-segmentado-opcion span { display: inline-flex; align-items: center; min-height: calc(var(--seg-alto, var(--objetivo)) - 2 * var(--seg-relleno, var(--e-0))); padding: 0 var(--e-3); border: 1px solid transparent; border-radius: var(--seg-radio, var(--radio-control)); color: var(--texto-2); font: 700 var(--t-nota)/1 var(--fuente-ui); } .etc-segmentado-opcion input:checked + span { background: var(--seg-pulgar, var(--superficie)); border: var(--seg-pulgar-borde, var(--filete-fino)); box-shadow: var(--seg-pulgar-sombra, none); color: var(--texto); } .etc-segmentado-opcion input:focus-visible + span { outline: var(--foco-anillo); outline-offset: 1px; } @media (max-width: 1279px) { /* T-130 (QA de la demo): entre 1024 y 1279 el dintel lleva corte, nivel y alcance; la miga deja solo la página actual, cortada con «…» (Inicio y la sección siguen en el carril), como en el teléfono. */ .migas li:not(:last-child) { display: none; } .rejilla-trabajo { grid-template-columns: minmax(0, 1fr); } .columna-lateral { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } } @media (max-width: 1023px) { :root { --cromo-alto: var(--barra-movil-alto); } html[data-entorno="prueba"] { --cromo-alto: calc(var(--franja-prueba-alto) + var(--barra-movil-alto)); } .cuerpo { padding-left: 0; } /* El carril pasa a ser un menú: sin JS se abre con el ancla #carril; con JS, como diálogo. Su cabeza (marca y cerrar) es de noche, a la altura del dintel; la lista, de día. */ .carril-inst { display: none; top: 0; width: var(--menu-carril-ancho); z-index: 60; box-shadow: var(--sombra-flotante); } html[data-entorno="prueba"] .carril-inst { top: var(--franja-prueba-alto); } .carril-inst:target, .carril-inst[data-abierto] { display: flex; } .carril-cabeza { display: flex; height: var(--barra-movil-alto); } /* «☰ Menú», logo, título de la vista truncado y «Cuenta» */ .linea-inst { height: var(--barra-movil-alto); padding: 0 var(--e-2); gap: var(--e-2); grid-template-columns: auto auto minmax(0, 1fr) auto; } .linea-inst .carril-marca { padding-left: 0; padding-right: 0; } .linea-inst .carril-marca-texto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .boton-menu { display: inline-flex; align-items: center; gap: var(--e-2); height: var(--tactil); padding: 0 var(--menu-relleno); border: 0; border-radius: var(--radio-control); background: none; color: var(--cromo-texto); font-weight: 700; text-decoration: none; } .boton-menu:hover { background: var(--cromo-hover); color: var(--cromo-texto); } .boton-menu[hidden] { display: none; } .migas li:not(:last-child) { display: none; } /* el título de la vista entra entero en el dintel del móvil: hasta dos líneas de 14 px y «Cuenta» corta (QA) */ .migas ol { font-size: var(--inst-t-meta); line-height: var(--i-h1); white-space: normal; } .migas [aria-current] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .cuenta-larga { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cuenta-corta { display: inline; } .sesion-ambito, .corte-activo { display: none; } .ambito-movil { display: block; } .franja-prueba { padding: 0 var(--e-4); } .franja-prueba .larga { display: none; } .franja-prueba .corta { display: inline; } .franja-cifras-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hueco-etc { min-height: var(--modulo-pendiente-alto); } } @media (max-width: 720px) { main { padding: var(--e-4) var(--e-4) var(--e-7); } main > .reporte--vista { margin-inline: calc(-1 * var(--e-4)); } .acceso-contenido { padding: var(--e-5) var(--e-4); } } @media (max-width: 600px) { .franja-cifras-lista { grid-template-columns: minmax(0, 1fr); } .ultimos-item { grid-template-columns: minmax(0, 1fr); padding-block: var(--e-2); } } @media print { .franja-prueba, .carril-inst, .linea-inst, .salto, .acciones-panel, .hueco-etc, .barra-reporte { display: none; } .cuerpo { padding-left: 0; } body { background: var(--fondo); } main { padding: 0; } } /* ───────────── vistas de trabajo (reportes y asistente) ───────────── */ .formulario label { display: block; margin-bottom: var(--e-1); font-weight: 700; } .formulario .selector { width: 100%; max-width: 32rem; } .formulario--ancho { max-width: var(--hilo-ancho); } .botonera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-4); } .plan { padding: var(--e-4); margin-bottom: var(--e-4); } .plan h2 { font-size: var(--t-h3); line-height: var(--i-h3); margin-bottom: var(--e-3); } .plan-bloques { display: grid; gap: var(--e-2); padding-left: 1.4em; } .plan-parametros { color: var(--texto-2); } .lista-plantillas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); padding-left: 1.4em; } /* Cruces; la pista a minmax(0, 1fr) para que el selector no la ensanche a 320 px (T-136) */ /* reporte en pantalla (boceto 09b): barra con su estado, la descarga y la vuelta */ .barra-reporte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-3); max-width: var(--reporte-ancho); margin: 0 auto var(--e-4); } .barra-reporte-estado { margin: 0; font-size: var(--t-nota); color: var(--texto-2); } .barra-reporte-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); } .barra-reporte-acciones form { margin: 0; } .barra-reporte-aviso { max-width: var(--reporte-ancho); margin-inline: auto; } .accion-inactiva { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--texto-2); font-weight: 700; } .enlace-volver { display: inline-flex; align-items: center; min-height: var(--objetivo); font-weight: 700; } /* ══════════════════════════════════════════════════════════════════ Mesa de trabajo de N1 a N3 (T-053a, D-53: dirección B ampliada con el acabado de la portada; T-049 §a). Cabecera con el hallazgo en Alegreya, barra de territorio y corte, cifras que cuentan, rejilla de 12 columnas con las tarjetas y el mapa lateral fijo (#mesa-mapa, de T-053b). Las piezas de figura (.figura-subtitulo, .como-leer, .clave-lista, .tabla-figura, .cortes) son las de reportes.css. ══════════════════════════════════════════════════════════════════ */ /* Puente hasta integrar los tokens de T-049 (tareas/evidencia/T-049/tokens.css §3 y movimiento): los mismos nombres y valores. :where() no pesa nada, así que en cuanto el bloque de T-049 entra en tokens-institucional.css (con :root), manda el suyo sin tocar este archivo. */ :where(html) { --mesa-columnas: 12; --mesa-hueco: var(--e-5); --tarjeta-fondo: var(--superficie); --tarjeta-borde: 1px solid var(--filete-suave); --tarjeta-radio: var(--radio-superficie); --tarjeta-sombra: 0 1px 2px rgb(var(--p-sombra) / .06), 0 1px 1px rgb(var(--p-sombra) / .04); --tarjeta-relleno: var(--e-5); --tarjeta-alto-min: 280px; --tarjeta-cabeza-hueco: var(--e-3); --tarjeta-fijada: 2px solid var(--accion); --tarjeta-subtitulo: var(--t-nota); --tarjeta-nota-fuente: var(--t-nota); --hallazgo-fuente: var(--fuente-titulo); --hallazgo-peso: 500; --tarjeta-cifra: var(--t-cifra); --tarjeta-cifra-peso: 800; --tarjeta-cifra-movil: var(--t-cifra-s); --herr-alto: var(--objetivo); --herr-icono: var(--control-icono); --herr-hueco: var(--e-1); --herr-texto: var(--texto-2); --herr-hover: var(--fondo-sutil); --herr-activo-fondo: var(--accion-suave); --herr-activo-texto: var(--accion); --mov-entrada-marca: 240ms; --mov-retardo-marca: 70ms; --mov-escalon: 20ms; --mov-escalon-max: 120ms; --mov-transicion: 240ms; --mov-resalte: 110ms; --mov-cuenta: 550ms; --curva-entrada: cubic-bezier(0, 0, .38, .9); --curva-transicion: cubic-bezier(.2, 0, .38, .9); --curva-cuenta: cubic-bezier(.33, 1, .68, 1); --graf-atenuado: .28; } @media (max-width: 720px) { :where(html) { --tarjeta-relleno: var(--e-4); --tarjeta-cifra: var(--tarjeta-cifra-movil); --mesa-hueco: var(--e-4); } } /* de 1100 a 1499 px (1366 en la sala): la primera pantalla tiene que llegar a la primera figura */ @media (min-width: 1100px) and (max-width: 1499px) { .mesa { --tarjeta-relleno: var(--e-4); } } @media (prefers-reduced-motion: reduce) { :where(html) { --mov-entrada-marca: 0ms; --mov-retardo-marca: 0ms; --mov-escalon: 0ms; --mov-escalon-max: 0ms; --mov-transicion: 0ms; --mov-resalte: 0ms; --mov-cuenta: 0ms; } } @media print { :where(html) { --mov-entrada-marca: 0ms; --mov-retardo-marca: 0ms; --mov-escalon: 0ms; --mov-escalon-max: 0ms; --mov-transicion: 0ms; --mov-resalte: 0ms; --mov-cuenta: 0ms; } } /* nivel 3 de la mesa: solo referencias (tablero.js lee --mesa-cuenta con getComputedStyle) */ .mesa { --mesa-cuenta: var(--mov-cuenta); /* cifras que cuentan: 550 ms */ --mesa-paso: calc(2 * var(--mov-escalon)); /* entrada escalonada: 40 ms por pieza, 6 como máximo */ --mesa-desplazamiento: var(--e-2); /* lo que entra sube 8 px */ --mesa-cargando: .45; /* tarjetas mientras llega el territorio nuevo */ --mesa-tope: 1760px; /* el proyector de 1920 usa todo el ancho */ --mesa-hallazgo: var(--inst-t-respuesta); /* Alegreya 500: 28 → 32 a 1366 → 36 (§5.2) */ --mesa-hallazgo-interlinea: var(--i-h3); /* 1,3: el hallazgo parte en varias líneas (QA) */ --mesa-avance-alto: 6px; --mesa-mapa-min: 420px; --mesa-tarjeta-alto: 30rem; /* altura mínima de toda tarjeta (T-068): la columna se lee pareja */ --mesa-tabla-alto: 24rem; /* «Ver los datos»: se desplaza dentro de la tarjeta */ --mesa-lateral-arriba: calc(var(--cromo-alto) + var(--e-4)); max-width: var(--mesa-tope); margin-inline: auto; } .mesa p { max-width: none; } /* cabecera de la Mesa (E2, modernización §6.1): H1 y acciones en una fila; debajo, el territorio y el corte en píldoras con «Aplicar». Sustituye a la barra de territorio. */ .mesa-cabeza { display: grid; gap: var(--cabecera-hueco); margin: 0 0 var(--inst-ritmo-interior); } .mesa-cabeza-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); } .mesa-h1 { margin: 0; font-size: var(--inst-t-vista); line-height: var(--inst-i-titular); font-weight: 700; } .mesa-h1:focus { outline: none; } .mesa-h1:focus-visible { outline: var(--foco-anillo); outline-offset: 2px; } .mesa-hallazgo { margin: var(--e-2) 0 0; max-width: 46ch; font-family: var(--hallazgo-fuente); font-weight: var(--hallazgo-peso); font-size: var(--mesa-hallazgo); line-height: var(--mesa-hallazgo-interlinea); letter-spacing: var(--tracking-h1); text-wrap: balance; } .mesa-hallazgo-sub { margin: var(--e-1) 0 var(--inst-ritmo-interior); font-size: var(--t-nota); line-height: var(--i-nota); color: var(--texto-3); } .mesa-territorio { margin: 0; } .mesa-estado { margin: 0; font-size: var(--t-nota); font-weight: 700; color: var(--texto-2); } .mesa-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); } .mesa-acciones form { margin: 0; } .mesa-error { margin-top: 0; } /* cifras clave «3 + 1» que cuentan (D-44 con la escala de la portada) */ .mesa-cifras-lista { gap: var(--mesa-hueco); margin-bottom: var(--e-4); } .mesa-cifra { display: flex; flex-direction: column; min-width: 0; padding: var(--hoja-relleno-tarjeta); background: var(--tarjeta-fondo); border: var(--hoja-borde); border-radius: var(--hoja-radio); box-shadow: var(--hoja-sombra); transition: opacity var(--mov-transicion) var(--curva-transicion); } .mesa-cifra[hidden] { display: none; } .mesa-cifra p { margin: 0; } .mesa-cifra-valor { display: flex; align-items: center; gap: var(--e-2); } /* la hoja del inicio (M1): el color va al dato, no a la tarjeta; el icono (aria-hidden) repetía el rótulo */ .mesa-cifra-icono { display: none; } .mesa-cifra-valor .valor { font-size: var(--inst-t-cifra-m); line-height: var(--i-cifra); font-weight: var(--tarjeta-cifra-peso); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } .mesa-cifra .mesa-cifra-contexto { margin-top: var(--e-1); font-size: var(--t-nota); color: var(--texto-2); } .mesa-cifra-contexto:empty { display: none; } .mesa-cifra-rotulo { margin-top: var(--e-1); font-size: var(--t-control); line-height: var(--i-h3); font-weight: 700; } .mesa-cifra:is([data-estado="pendiente"], [data-estado="sin_dato"], [data-estado="calculando"]) { border-style: dashed; } .mesa-cifra:is([data-estado="pendiente"], [data-estado="sin_dato"], [data-estado="calculando"]) .valor { font-size: var(--t-h3); line-height: var(--i-h3); color: var(--texto-2); } .mesa-avance { display: block; width: 100%; height: var(--mesa-avance-alto); margin-top: auto; padding-top: var(--e-2); overflow: visible; box-sizing: content-box; } .mesa-avance[hidden] { display: none; } .mesa-avance-pista { fill: var(--fondo-sutil); } .mesa-avance-valor { fill: var(--dominio-acento); transform-box: fill-box; transform-origin: left center; animation: mesa-avance var(--mov-cuenta) var(--curva-cuenta) both; } @keyframes mesa-avance { from { transform: scaleX(0); } } /* entrada escalonada (B): hallazgo, cifras y tarjetas; con movimiento reducido, los tokens valen 0 */ @keyframes mesa-entrar { from { opacity: 0; transform: translateY(var(--mesa-desplazamiento)); } } .mesa--entra .mesa-hallazgo, .mesa--entra .mesa-hallazgo-sub, .mesa--entra .mesa-cifra, .tarjeta--entra { animation: mesa-entrar var(--mov-entrada-marca) var(--curva-entrada) both; } .mesa--entra .mesa-hallazgo-sub { animation-delay: var(--mov-retardo-marca); } .mesa--entra .mesa-cifra:nth-child(1) { animation-delay: var(--mesa-paso); } .mesa--entra .mesa-cifra:nth-child(2) { animation-delay: calc(2 * var(--mesa-paso)); } .mesa--entra .mesa-cifra:nth-child(3) { animation-delay: calc(3 * var(--mesa-paso)); } .mesa--entra .mesa-cifra:nth-child(4) { animation-delay: calc(4 * var(--mesa-paso)); } .tarjeta--entra { animation-delay: calc(5 * var(--mesa-paso)); } .tarjeta--entra + .tarjeta--entra { animation-delay: calc(6 * var(--mesa-paso)); } .mesa[data-estado="cargando"] :is(.tarjeta, .mesa-cifra, .mesa-hallazgo) { opacity: var(--mesa-cargando); } .mesa-hallazgo { transition: opacity var(--mov-transicion) var(--curva-transicion); } /* cuerpo (T-068): 12 columnas. El mapa ocupa 7 y va fijo (sticky) al desplazar; las gráficas van en una sola columna de 5, en tarjetas de la misma altura mínima y agrupadas por tema (los grupos secundarios, plegados). En pantallas angostas (menos de 1100 px) el mapa va arriba y las gráficas debajo. */ .mesa-cuerpo { display: grid; grid-template-columns: repeat(var(--mesa-columnas), minmax(0, 1fr)); gap: var(--mesa-hueco); align-items: start; } .mesa-lateral { grid-column: 1 / span 7; grid-row: 1; position: sticky; top: var(--mesa-lateral-arriba); height: calc(100vh - var(--mesa-lateral-arriba) - var(--e-4)); min-height: var(--mesa-mapa-min); } /* a 1366 × 768 el lienzo de la Mesa es bajo: 35° (no 50) muestra el país entero, y la ficha fijada cede espacio. mapa.js lee los dos tokens del propio mapa con getComputedStyle; /mapa/ y el inicio conservan 50°. */ .mesa-lateral { --mapa-inclinacion-relieve: 35; } .mesa-lateral .etc--compacto { --etc-ficha-debajo-max: 24%; } .mesa-tarjetas { grid-column: 8 / span 5; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mesa-hueco); align-items: stretch; min-width: 0; } .mesa-mapa { height: 100%; } .mesa-mapa-hueco { height: 100%; min-height: 0; } .mesa-vacia, .mesa-sin-js { color: var(--texto-2); } .mesa-pie { margin: var(--e-6) 0 0; font-size: var(--t-nota); color: var(--texto-2); } /* E2 en Mesa › Panorama (D-m3, T-120 F2): dos grupos lado a lado; barra al 100 % con junta de tinta */ .mesa-e2-caja { display: contents; } /* E2 sigue al territorio de la Mesa: tablero.js cambia su contenido */ .mesa-e2 { margin: var(--inst-ritmo-grupo) 0 0; padding: var(--hoja-relleno-figura); } .mesa-e2-titular { margin: 0 0 var(--e-1); font: var(--figura-titular-peso) var(--figura-titular-tam)/var(--inst-i-titular) var(--figura-titular-fuente); } .mesa-e2-sub, .mesa-e2-clave { margin: 0 0 var(--inst-ritmo-interior-s); color: var(--texto-2); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); } .mesa-e2-clave { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); } .mesa-e2-clave .clave { display: inline-flex; align-items: center; gap: var(--e-1); } .mesa-e2-muestra { display: inline-block; width: var(--leyenda-muestra); height: var(--leyenda-muestra); background: var(--dato-pista); box-shadow: inset 0 0 0 1px var(--texto); } .mesa-e2-muestra--si { background: var(--dato-escuela); } .mesa-e2-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--inst-ritmo-interior) var(--e-6); } .mesa-e2-grupo-titulo { margin: 0 0 var(--e-1); color: var(--texto-2); font-size: var(--inst-t-meta); font-weight: 700; } .mesa-e2-filas { display: grid; margin: 0; padding: 0; list-style: none; } .mesa-e2-fila { display: grid; grid-template-columns: minmax(min(6rem, 25%), 1fr) minmax(var(--tabla-barras-barra-min), 2fr) var(--tabla-barras-valor); align-items: center; gap: var(--e-2); min-height: var(--tabla-barras-fila); font-size: var(--inst-t-meta); font-variant-numeric: tabular-nums; } .mesa-e2-barra { display: block; width: 100%; height: var(--cifra-barra-alto); overflow: visible; } .mesa-e2-si { fill: var(--dato-escuela); } .mesa-e2-no { fill: var(--dato-pista); } .mesa-e2-junta { stroke: var(--texto); stroke-width: 1; } .mesa-e2-valor { font-weight: 700; } .mesa-e2-tabla { width: 100%; border-collapse: collapse; font-size: var(--inst-t-meta); } .mesa-e2-tabla caption { text-align: left; font-weight: 700; padding-bottom: var(--e-1); } .mesa-e2-tabla th, .mesa-e2-tabla td { padding: var(--e-1) var(--e-2); border-bottom: 1px solid var(--filete-suave); text-align: left; font-weight: 400; } .mesa-e2-tabla thead th { font-weight: 700; } /* grupos de tarjetas por tema:
con su título; dentro, una columna de tarjetas de la misma altura mínima */ .mesa-grupo[hidden] { display: none; } .mesa-grupo-titulo { display: flex; align-items: baseline; gap: var(--e-2); min-height: var(--tactil); padding: var(--e-2) var(--e-1); cursor: pointer; font-weight: 700; font-size: var(--t-h3); line-height: var(--i-h3); color: var(--texto); list-style: none; border-bottom: 1px solid var(--filete-suave); } .mesa-grupo-titulo::-webkit-details-marker { display: none; } .mesa-grupo-titulo::before { content: ""; flex: none; align-self: center; width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--mov-transicion) var(--curva-transicion); } .mesa-grupo[open] > .mesa-grupo-titulo::before { transform: rotate(45deg); } .mesa-grupo-titulo:focus-visible { outline: var(--tarjeta-fijada); outline-offset: 2px; } .mesa-grupo-n { font-weight: 400; font-size: var(--t-nota); color: var(--texto-2); } .mesa-grupo-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(var(--mesa-tarjeta-alto), auto); gap: var(--mesa-hueco); padding-top: var(--mesa-hueco); } .mesa-grupo-tarjetas > .tarjeta { min-height: var(--mesa-tarjeta-alto); } .mesa-grupo-tarjetas > .tarjeta .tarjeta-cuerpo { display: flex; flex-direction: column; } .mesa-grupo-tarjetas > .tarjeta .tarjeta-dibujo { flex: 1 1 auto; } .mesa-tarjetas > :is(.mesa-vacia, .mesa-sin-js) { min-width: 0; } /* «Ver en el mapa»: la tarjeta que el mapa dibuja ahora queda marcada */ .tarjeta[data-en-mapa] { border-color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion); } .herramienta[data-accion="mapa"][aria-pressed="true"] { background: var(--herr-activo-fondo); color: var(--herr-activo-texto); box-shadow: inset 0 calc(-1 * var(--carril-barra-activa)) 0 var(--accion); } /* «En resumen»: un botón de la cabecera que abre la lista de hallazgos; cada uno lleva a su tarjeta */ .mesa-resumen { position: relative; } .mesa-resumen[hidden] { display: none; } .mesa-resumen > summary { list-style: none; } .mesa-resumen > summary::-webkit-details-marker { display: none; } .mesa-resumen-n { font-weight: 400; } .mesa-resumen-panel { position: absolute; right: 0; top: calc(100% + var(--e-1)); z-index: 45; width: min(36rem, 86vw); max-height: 70vh; overflow-y: auto; padding: var(--e-3) var(--e-4); box-shadow: var(--sombra-flotante); } .mesa-resumen-titulo { margin: 0 0 var(--e-2); font-size: var(--t-nota); font-weight: 700; color: var(--texto-2); } .mesa .mesa-resumen .resumen-lista { gap: 0; } .mesa .mesa-resumen .resumen-lista li { grid-template-columns: var(--resumen-muestra) minmax(0, 1fr); align-items: center; } .mesa .mesa-resumen .resumen-lista a { display: flex; align-items: center; min-height: var(--tactil); color: var(--texto); text-decoration: none; } .mesa .mesa-resumen .resumen-lista a:hover { color: var(--accion); text-decoration: underline; } /* tarjeta: cabeza (ficha H, titular en Alegreya, subtítulo y herramientas), cuerpo y pie */ .tarjeta { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: var(--tarjeta-relleno); scroll-margin-top: var(--mesa-lateral-arriba); background: var(--tarjeta-fondo); border: var(--tarjeta-borde); border-top: var(--cifra-filete-dominio) solid var(--dominio-acento, var(--texto)); border-radius: var(--tarjeta-radio); box-shadow: var(--tarjeta-sombra); transition: opacity var(--mov-transicion) var(--curva-transicion); } /* en la Mesa, la hoja de figura del inicio: sin filete de color, radio de la hoja */ .mesa .tarjeta { border-top: var(--hoja-borde); border-radius: var(--hoja-radio); } .tarjeta[data-fijada] { outline: var(--tarjeta-fijada); outline-offset: 2px; } .tarjeta:focus { outline: none; } .tarjeta:focus-visible, .tarjeta[data-fijada]:focus { outline: var(--tarjeta-fijada); outline-offset: 2px; } .tarjeta--esqueleto { min-height: var(--tarjeta-alto-min); background: var(--fondo-esqueleto); border-color: var(--fondo-esqueleto); box-shadow: none; } .tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: start; gap: var(--tarjeta-cabeza-hueco); } /* T-084: el titular pide 28rem; si la barra de herramientas no cabe a su lado, baja a su propia fila. */ .tarjeta-cabeza-texto { flex: 1 1 28rem; min-width: 0; } .tarjeta-cabeza p { margin: 0; } .tarjeta-titular { display: flex; align-items: baseline; gap: var(--e-2); margin: 0 0 var(--e-1); font: var(--figura-titular-peso) var(--figura-titular-tam)/var(--inst-i-titular) var(--figura-titular-fuente); } .tarjeta-titular .figura-titular-texto { flex: 1 1 auto; } .tarjeta-subtitulo { margin-top: var(--e-1); font-size: var(--tarjeta-subtitulo); line-height: var(--i-nota); color: var(--texto-3); } .tarjeta-cuerpo { flex: 1 1 auto; } .tarjeta .clave-lista { margin-top: var(--e-3); } .tarjeta-dibujo { min-height: var(--grafico-alto-min); margin: var(--e-4) 0 var(--e-2); } .tarjeta[data-sin-dibujo] .tarjeta-dibujo { display: none; } /* control de cortes: el de reportes.css (fieldset.cortes > .segmentado > .segmento), como en los reportes; con más de 4 cortes, un