/* ========================================================= HOJA DE ESTILOS PRINCIPAL — LAYOUT FLEX RESPONSIVO ========================================================= DESCRIPCIÓN GENERAL --------------------------------------------------------- Este archivo CSS define la estructura visual y funcional principal de una interfaz basada en: - Layout Flexbox - Columnas dinámicas - Scroll interno controlado - Responsive Design - Variables CSS globales - Tipografías personalizadas - Contenedores adaptativos - Manejo avanzado de overflow - Scrollbars personalizadas - Distribución vertical completa El sistema está diseñado para: - evitar scroll global - usar scroll interno por secciones - mantener layout fijo y estable - permitir columnas laterales dinámicas - adaptarse a pantallas pequeñas ========================================================= TIPOGRAFÍAS PERSONALIZADAS ========================================================= @font-face --------------------------------------------------------- Define fuentes externas personalizadas. Fuentes: - Jost - Swis721_Light Ambas fuentes se cargan desde: - archivos TTF - archivos WOFF2 ========================================================= VARIABLES GLOBALES ========================================================= :root --------------------------------------------------------- Variables CSS reutilizables globales. Variables definidas: --colizq Ancho de la columna izquierda. --alt-header Altura del encabezado. --alt-footer Altura del footer. --alt-main Altura máxima del contenido principal. Estas variables permiten: - modificar layout dinámicamente - centralizar tamaños - facilitar mantenimiento ========================================================= RESET GLOBAL ========================================================= * --------------------------------------------------------- Reinicia: - márgenes - paddings - box-sizing Se usa: box-sizing: border-box; para evitar problemas de cálculo de tamaños. ========================================================= HTML Y BODY ========================================================= html, body --------------------------------------------------------- Configuración global del documento: - altura total del viewport - ancho máximo completo - sin scroll global - tipografía base - tamaño de fuente reducido Características importantes: overflow: hidden; Elimina el scroll general del navegador. height: 100vh; Fuerza altura completa de pantalla. ========================================================= HEADER ========================================================= header --------------------------------------------------------- Encabezado principal del sistema. Usa Flexbox para: - distribuir elementos horizontalmente - centrar verticalmente Características: - ancho completo - padding interno - altura dinámica mediante variable CSS ========================================================= MAIN ========================================================= main --------------------------------------------------------- Contenedor principal de contenido. Funciones: - ocupa el espacio restante de pantalla - organiza contenido verticalmente - evita overflow externo Características importantes: overflow: hidden; Previene scroll global accidental. height: calc(...) Calcula dinámicamente el espacio restante considerando: - header - footer ========================================================= IFRAMES ========================================================= iframe --------------------------------------------------------- Configuración base de iframes: - ancho completo - altura completa - borde básico Permite incrustar: - páginas - documentos - vistas internas ========================================================= CONTENEDOR PRINCIPAL ========================================================= .contenedor --------------------------------------------------------- Layout principal del sistema. Usa: - Flexbox horizontal - columnas adaptativas Características: - ocupa todo el espacio restante - evita desbordamientos - ancho completo - padding interno Propiedades clave: flex: 1; Expande el contenedor. min-height: 0; SOLUCIÓN importante para overflow en layouts flex. ========================================================= COLUMNAS DINÁMICAS ========================================================= .columna-izquierda --------------------------------------------------------- Panel lateral izquierdo. Funciones: - menú - navegación - índices - controles Características: - ancho configurable mediante variable - scroll interno vertical - corte automático de palabras Propiedades importantes: overflow-y: auto; Scroll interno automático. hyphens: auto; División automática de palabras. --------------------------------------------------------- .columna-derecha --------------------------------------------------------- Panel principal derecho. Funciones: - contenido principal - detalles - visualización Características: - ancho dinámico - altura limitada - borde decorativo - padding interno Importante: Actualmente tiene: overflow-y: hidden; lo que: - oculta contenido excedente - elimina scroll vertical También usa: width: max-content; lo que: - ajusta ancho al contenido --------------------------------------------------------- .columna_derecha_scroll --------------------------------------------------------- Variante de columna derecha con scroll interno. Diferencia principal: overflow-y: auto; Esto permite: - desplazamiento vertical - mantener layout fijo - evitar crecimiento excesivo overflow-x: hidden; Evita scroll horizontal. ========================================================= LISTAS Y ENLACES ========================================================= ul --------------------------------------------------------- Elimina viñetas de listas. li --------------------------------------------------------- Agrega separación vertical entre elementos. a --------------------------------------------------------- Configuración base de enlaces: - sin subrayado - hereda color del contenedor ========================================================= RESPONSIVE DESIGN ========================================================= @media (max-width: 900px) --------------------------------------------------------- Adaptación para pantallas pequeñas. Cambios aplicados: main --------------------------------------------------------- - altura automática - scroll permitido html, body --------------------------------------------------------- - habilita scroll global .contenedor --------------------------------------------------------- - cambia de horizontal a vertical columnas --------------------------------------------------------- - ancho completo - elimina márgenes laterales Resultado: - diseño tipo móvil/tablet - columnas apiladas ========================================================= SCROLL PERSONALIZADO ========================================================= ::-webkit-scrollbar --------------------------------------------------------- Personaliza barra de scroll: - ancho reducido ::-webkit-scrollbar-thumb --------------------------------------------------------- Personaliza el "thumb" del scroll. Características: - color gris - bordes redondeados Hover: - color más oscuro Compatible principalmente con: - Chrome - Edge - Safari ========================================================= FOOTER ========================================================= footer --------------------------------------------------------- Pie de página principal. Usa Flexbox horizontal. Características: - distribución lateral - centrado vertical - fondo gris - padding lateral - ancho completo Incluye: - sombra decorativa - alineación uniforme ========================================================= MANEJO DE OVERFLOW ========================================================= overflow: hidden --------------------------------------------------------- Usado para: - evitar scroll global - controlar desbordamientos overflow-y: auto --------------------------------------------------------- Usado para: - scroll interno automático overflow-x: hidden --------------------------------------------------------- Evita: - scroll horizontal ========================================================= FLEXBOX UTILIZADO ========================================================= display: flex --------------------------------------------------------- Utilizado en: - header - main - footer - contenedor principal flex-direction --------------------------------------------------------- Controla: - filas - columnas justify-content --------------------------------------------------------- Distribución horizontal. align-items --------------------------------------------------------- Alineación vertical. ========================================================= FUNCIONALIDAD PRINCIPAL DEL SISTEMA ========================================================= Este CSS está diseñado para crear: ✔ interfaces tipo dashboard ✔ paneles administrativos ✔ layouts con menú lateral ✔ sistemas SPA ✔ vistas con iframe ✔ interfaces sin scroll global ✔ scroll interno independiente ========================================================= OBSERVACIONES IMPORTANTES ========================================================= 1. min-height: 0; es una propiedad crítica para que Flexbox permita scroll interno. 2. overflow global está desactivado intencionalmente. 3. El sistema depende fuertemente de: - Flexbox - calc() - variables CSS 4. El responsive convierte columnas horizontales en verticales. 5. La columna derecha tiene dos modos: - fijo sin scroll - scroll interno ========================================================= */ @font-face { font-family: "Jost"; src: url("/media/fonts/jost/static/Jost-Light.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Swis721_Light'; font-style: normal; font-weight: normal; src: local('Swis721 LtEx BT W03 Light'), url('/media/fonts/Swis721 LtEx BT W03 Light/0dd66765d92de2afd4cb56c928db1d08.woff2') format('woff2'); } :root { --colizq: 25%; --alt-header: 10%; --alt-footer: 10%; --alt-main: 80vh } /* ========================= RESET Y BASE ========================= */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100vh; /* 🔥 altura total pantalla */ width: 100%; max-width: 100%; overflow: hidden; /* 🔥 sin scroll global */ font-size: smaller; font-family: 'Swis721_Light', 'Jost'; } /* ========================= HEADER ========================= */ header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; /* opcional: altura fija más controlable */ height: calc(var(--alt-header)); } /* ========================= MAIN (CONTENEDOR GLOBAL) ========================= */ main { min-height: calc(100vh - var(--alt-header) - var(--alt-footer)); display: flex; flex-direction: column; overflow: visible; margin-bottom: 0; } iframe { border: 1; width: 100%; height: 100%; } /* ========================= CONTENEDOR PRINCIPAL ========================= */ .contenedor { /* (vacío, --colizq se puede definir en :root o en otro selector global) */ flex: 1; /* 🔥 ocupa todo el main */ min-height: 0; /* 🔥 CLAVE (fix overflow flex) */ display: flex; flex-direction: row; justify-content: space-between; width: 100%; max-width: 100vw; padding: 15px; } /* ========================= COLUMNAS DINÁMICAS ========================= */ /* Columna izquierda */ .contenedor>.columna-izquierda { flex: 0 0 var(--colizq , 25%); margin-right: 20px; min-height: 0; max-height: var(--alt-main); /* 🔥 CLAVE */ max-width: 100%; overflow-y: auto; /* 🔥 scroll interno */ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } /* Columna derecha */ .contenedor>.columna-derecha { flex: 0 0 calc(100% - var(--colizq) - 5%); margin-right: 15%; min-height: 0; max-height: var(--alt-main); /* 🔥 CLAVE */ max-width: 100%; overflow-y: hidden; /* 🔥 scroll interno */ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; border: 2px dashed #999; padding: 10px; /* height: max-content; */ width: max-content; } /* Columna izquierda con scroll interno vertical */ .contenedor>.columna_izquierda_scroll { flex: 0 0 var(--colizq , 25%); margin-right: 15%; min-height: 0; /* 🔥 esto faltaba */ max-height: var(--alt-main); max-width: 100%; overflow-y: auto; overflow-x: hidden; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; border: 2px dashed #999; padding: 10px; } /* Columna derecha con scroll interno vertical */ .contenedor>.columna_derecha_scroll { flex: 0 0 calc(100% - var(--colizq) - 5%); margin-right: 15%; min-height: 0; /* 🔥 esto faltaba */ max-height: var(--alt-main); max-width: 100%; overflow-y: auto; overflow-x: hidden; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; border: 2px dashed #999; padding: 10px; } /* ========================= ELEMENTOS INTERNOS ========================= */ /* Iframe adaptable */ /* #iframeDetalle { width: 100%; max-width: 100%; height: 100%; border: 1px solid #999; } */ /* Menú */ ul { list-style: none; } li { margin-bottom: 5px; } a { text-decoration: none; color: inherit; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 900px) { main { height: auto; overflow: auto; } html, body { overflow: auto; } .contenedor { flex-direction: column; } .contenedor>.columna-izquierda, .contenedor>.columna-derecha { flex: 0 0 100%; margin-right: 0; } } /* ========================= SCROLL ESTÉTICO (opcional) ========================= */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #888; } footer { display: flex; justify-content: space-between; vertical-align: middle; align-items: center; flex-direction: row; /* margin-top: 2%; */ padding-left: 5%; padding-right: 5%; /* gap: 20px; */ width: 100%; /* margin: 20px; */ background-color: rgb(218, 218, 218); backdrop-filter: text; box-shadow: 0 10px 10 px rgb(165, 165, 165); }