/* AITOI — shell de la consola interna (UBI-117). Tema por (UBI-127): el oscuro son los tokens de [data-tema="oscuro"] en design_tokens.css; el claro, los de :root (los del portal) con el ajuste de [data-tema="claro"]. Los bloques de contenido son componentes ui-* de componentes.css. Solo tokens: sin colores propios (guardia en apps/consola/tests/test_shell.py). Sin JavaScript. Escritorio (≥ 900 px): barra arriba y navegación lateral. Móvil: barra y, debajo, las tres secciones en tres columnas iguales, todas a la vista y del alto de un dedo (44 px). */ html { font-family: var(--fuente); font-size: 100%; line-height: var(--interlineado); color: var(--texto); background: var(--fondo); -webkit-text-size-adjust: 100%; } body.consola { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto); } [hidden] { display: none !important; } .consola-marco { display: grid; grid-template-columns: 1fr; grid-template-areas: "barra" "nav" "contenido"; min-height: 100vh; } .consola-barra { grid-area: barra; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); min-height: var(--altura-header); box-sizing: border-box; padding: var(--espacio-2) var(--espacio-4); background: var(--superficie); border-bottom: 1px solid var(--borde); } .consola-barra .ui-relleno { flex: 1; } .consola-barra form { margin: 0; flex: none; } .consola-barra .ui-etiqueta { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* en móvil cede ella, no «Salir» */ .consola-tema { display: flex; gap: var(--espacio-1); } /* selector Claro / Oscuro (UBI-127); en el iPhone baja, con «Salir», a otro renglón */ /* Foco visible en los dos temas: --acento-texto pasa AA sobre la superficie clara y la oscura. */ .consola-barra .ui-boton:focus-visible, .consola-modos a:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; } .consola-marca { font-size: var(--texto-md); color: var(--texto-2); white-space: nowrap; } .consola-marca strong { color: var(--acento-texto); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-etiqueta); } .consola-nav { grid-area: nav; background: var(--superficie); border-bottom: 1px solid var(--borde); padding: var(--espacio-2) var(--espacio-3); } .consola-nav .ui-nav-lateral { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); } .consola-nav .ui-nav-lateral li { margin: 0; min-width: 0; } .consola-nav .ui-nav-lateral a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 2.75rem; box-sizing: border-box; text-align: center; line-height: var(--interlineado-corto); } .consola-nav a:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; } .consola-contenido { grid-area: contenido; min-width: 0; box-sizing: border-box; width: 100%; max-width: var(--ancho-amplio); padding: var(--espacio-6) var(--espacio-4); } .consola-contenido .ui-tabla-marco { margin-bottom: var(--espacio-6); } .consola-entrar { box-sizing: border-box; padding: var(--espacio-12) var(--espacio-4); } @media (min-width: 900px) { .consola-marco { grid-template-columns: 15rem 1fr; grid-template-rows: auto 1fr; grid-template-areas: "barra barra" "nav contenido"; } .consola-barra { gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-5); } .consola-nav { border-bottom: 0; border-right: 1px solid var(--borde); padding: var(--espacio-4) var(--espacio-3); } .consola-nav .ui-nav-lateral { display: block; } .consola-nav .ui-nav-lateral li { margin-bottom: 2px; } .consola-nav .ui-nav-lateral a { justify-content: flex-start; height: auto; min-height: 0; text-align: left; } .consola-contenido { padding: var(--espacio-8); } } /* Modo Light (UBI-126). Pestañas Light / Avanzada arriba del contenido; la vista Light no lleva la navegación de secciones (es de Avanzada), así que su marco es de una sola columna también en escritorio. Las cuatro tarjetas de carril van en .ui-mosaico: una columna en el iPhone (390–430 px), sin scroll horizontal; en escritorio, en fila. */ .consola-marco.consola-solo-contenido { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "barra" "contenido"; } .consola-modos .ui-pestanas { flex-wrap: nowrap; } .consola-modos .ui-pestanas a { min-height: 2.75rem; } .consola-carriles { margin-top: 0; margin-bottom: var(--espacio-4); } .consola-campos { display: grid; gap: var(--espacio-3); margin: 0; } .consola-campos > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); min-width: 0; } .consola-campos dt { flex: 1 1 0; min-width: 0; font-size: var(--texto-sm); color: var(--texto-2); } .consola-campos dd { flex: 0 1 auto; margin: 0; min-width: 0; text-align: right; font-weight: var(--peso-negrita); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .consola-alertas { margin-bottom: var(--espacio-2); }