/* ===================================================================== APP — Cáscara común de las vistas operativas Barra lateral, encabezado, tarjetas, filtros y tabla. La usan tanto Monitor Logístico como Órdenes de Compra, así las dos pantallas se ven iguales sin tener que mantener dos copias. Cargar siempre DESPUÉS de base.css. Respecto del css propio de la página: · oc.css se escribió para complementar esta hoja, así que va después. · index.css arrastra reglas del diseño anterior con los mismos nombres de clase (.card, .filters, .app-header). Ahí app.css va AL FINAL, para ganarles; lo viejo queda sirviendo solo a la pantalla de acceso. Criterios (los mismos de base.css): · Esquinas cuadradas en todo. Sin excepción. · La jerarquía se marca con borde y contraste, no con sombras. · Los colores salen de las fichas de base.css, así el tema día/noche funciona solo, sin reglas por pantalla. ===================================================================== */ :root { --sb-ancho: 232px; } /* Fichas propias de la cáscara, en su versión clara. base.css ya trae la paleta de acentos; acá solo van las superficies del tablero. */ [data-tema="dia"] { --sb-fondo: #0f2744; /* la barra queda oscura también de día: es el ancla visual y separa el menú del contenido */ --sb-activo: #1f6feb; --panel: #ffffff; --lienzo: #f4f6fa; --linea: #e4e8ef; --tinta: #16233a; --tinta-suave: #5a6678; } /* Noche es el tema por defecto (sin atributo o con data-tema="noche"). */ :root:not([data-tema="dia"]) { --sb-fondo: #0d131d; --sb-activo: #2879ff; --panel: #12161f; --lienzo: #0b0e14; --linea: #252c39; --tinta: #ffffff; --tinta-suave: #aab3c0; } /* --------------------------------------------------------------------- ESTRUCTURA --------------------------------------------------------------------- */ .app-marco { display: flex; width: 100%; /* el de index.css centra con flex para la pantalla de acceso; sin este ancho el tablero se encogía al contenido y, mientras cargaba el camión, quedaba angosto en medio de la pantalla */ min-height: 100vh; background: var(--lienzo); } .app-contenido { flex: 1; min-width: 0; padding: 24px 28px 40px; } /* --------------------------------------------------------------------- BARRA LATERAL --------------------------------------------------------------------- */ .app-sidebar { width: var(--sb-ancho); flex-shrink: 0; background: var(--sb-fondo); color: #cdd8e8; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; } .marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; } .marca-logo { width: 38px; height: 38px; background: var(--sb-activo); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; } .marca-txt strong { display: block; color: #fff; font-size: .95rem; letter-spacing: .04em; } .marca-txt span { font-size: .64rem; letter-spacing: .18em; opacity: .7; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .nav-titulo { margin: 14px 10px 6px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .5; } /* Mismo alto y alineación para enlaces y botones: sin esto los