-> flex: 1 (se queda con TODO el espacio vertical restante, sea cual sea el alto de pantalla) 3) Dentro de

, .left-panel y .right-panel también son columnas flex que reparten SU espacio disponible entre sus propias secciones internas (ver KPI.css, grafico_de_lineas.css y Carousel.css: ahí están las reglas que hacen que el gráfico de líneas y el carrusel de evidencias "se estiren" para ocupar el espacio sobrante en vez de tener una altura fija en píxeles). ¿CÓMO AJUSTAR SI ALGO SE VE MUY APRETADO EN UNA PANTALLA CHICA (DE ESCRITORIO, no celular)? - Reduce el alto de las KPI cards: buscar ".kpi-card" en KPI.css (usa clamp(), así que ya se adapta un poco solo). - Reduce el padding de .main-header más abajo en este archivo. - Si necesitas MÁS margen de maniobra, puedes bajar el "min-height: 0" de algún contenedor flex-child, pero cuidado: quitar min-height:0 puede hacer que ese contenedor vuelva a desbordar. ¿Y EN CELULAR? Ahí NO aplica nada de "sin scroll": todo este esquema de alturas fijas/repartidas se DESACTIVA por completo abajo de 768px de ancho (ver "MODO CELULAR" al final del archivo) y la página vuelve a comportarse como una página normal que crece hacia abajo y se scrollea. =========================================================================== */ html, body { height: 100%; /* body ocupa el 100% del alto de , que a su vez... */ overflow: hidden; /* ...NUNCA permite scroll, sin importar cuánto contenido haya */ } body { display: flex; flex-direction: column; /* Header arriba, KPIs debajo, main ocupando el resto */ } /* Opción A: aplicar la fuente a TODO el sitio de una vez. Como los botones, inputs y selects normalmente NO heredan la fuente del body en algunos navegadores, los incluimos explícitamente aquí también. */ body, button, input, select, textarea { font-family: 'Poppins', Arial, sans-serif; } /* Opción B: clase utilitaria para aplicar la fuente SOLO donde tú quieras (tal como recordabas). Úsala así en el HTML:

Este texto usa Poppins

Es redundante si ya usaste la Opción A arriba, pero te sirve si en el futuro cambias el font-family global a otra fuente y quieres mantener Poppins solo en ciertos textos puntuales. */ .font-primor { font-family: 'Poppins', Arial, sans-serif; } /* .main-header { display: flex; justify-content: space-between; background-color: #0A703D; padding: 0.5rem; color: #fff; flex-shrink: 0; } */ .main-header { display: flex; justify-content: space-between; background-color: #0A703D; padding: 0.2rem 0.5rem; /* Reducido verticalmente para achicar la franja */ color: #fff; flex-shrink: 0; } .contenedor-logo-texto { display: flex; } .contenedor-botones-filtros { display: flex; align-items: center; gap: 1rem; /* Espacio uniforme entre cada filtro */ } /* Texto de "Última actualización" pegado a la derecha */ .texto-derecha { text-align: right; padding: 0.4rem 1rem 0 0; font-size: 12px; color: #80868B; /* Gris claro, mismo tono que usas en .value */ } /* =========================================================== IMAGEN DEMO DEL DASHBOARD (maqueta del gráfico de KPIs) =========================================================== */ .left-panel { background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); padding: 1rem 1.2rem; /* --- Para que .tablero-grafico-linea pueda estirarse y ocupar el alto disponible en vez de quedar con altura fija (ver grafico_de_lineas.css) --- */ display: flex; flex-direction: column; height: 100%; min-height: 0; /* OJO: aquí NO va overflow:hidden. Si lo agregas, vuelve a recortar el tooltip de "semana" del gráfico de líneas/barras cuando aparece pegado al borde superior de la tarjeta. El "no-scroll" de la página ya está 100% garantizado por html/body/main en este mismo archivo, así que no hace falta repetirlo aquí. */ } .panel-header h2 { font-size: 15px; font-weight: 800; color: #202124; letter-spacing: 0.3px; margin-bottom: 0.9rem; } .chart-image-container { display: flex; flex-direction: column; align-items: center; } .chart-demo-image { width: 100%; height: auto; border-radius: 10px; display: block; } .chart-demo-note { font-size: 11px; color: #80868B; font-style: italic; margin-top: 0.5rem; align-self: flex-start; } /* =========================================================== LAYOUT PRINCIPAL (panel izquierdo + panel derecho) =========================================================== */ main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; padding: 0 1rem 1rem; align-items: start; /* --- Piso flexible del layout "sin scroll" (ver comentario arriba del archivo) --- */ flex: 1 1 auto; /* Ocupa TODO el alto restante debajo del header + KPIs */ min-height: 0; /* Imprescindible en flex/grid para que pueda encogerse sin desbordar */ overflow: hidden; /* Refuerzo extra: nada dentro de

puede generar scroll */ align-items: stretch; /* (antes: start) — para que left-panel/right-panel midan el 100% del alto de

*/ } .right-panel { display: flex; flex-direction: column; gap: 1rem; /* --- Para que pueda repartir el alto completo entre sus secciones internas --- */ height: 100%; min-height: 0; overflow: hidden; } .evidence-section { background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); padding: 1rem 1.2rem; /* --- CAMBIO IMPORTANTE --- Antes esto era "flex: 1 1 auto", es decir, esta sección se ESTIRABA para ocupar todo el alto sobrante de .right-panel. Eso tenía sentido cuando el carrusel de evidencias también crecía para llenar ese espacio — pero desde que el carrusel pasó a tener una altura FIJA y compacta (130px, ver Carousel.css), esta sección se seguía estirando igual, dejando un hueco en blanco enorme debajo del carrusel y encima de "Feedback de Actividades". Ahora mide justo lo que su contenido necesita (encabezado + carrusel de 130px + paddings), y el espacio que antes quedaba en blanco se lo lleva .feedback-wrapper (ver más abajo), que es donde realmente hace falta más espacio. */ display: flex; flex-direction: column; flex: 0 0 auto; overflow: hidden; /* red de seguridad, sin riesgo de recortar tooltips (esta sección no tiene) */ } .evidence-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.8rem; flex-shrink: 0; /* Que el carrusel de abajo nunca le quite espacio a este título */ } .evidence-header h2 { font-size: 15px; font-weight: 800; color: #202124; } .evidence-filters { font-size: 11px; color: #80868B; } /* =========================================================== FEEDBACK — envoltorio que ahora recibe el espacio sobrante del panel derecho (antes se lo quedaba .evidence-section sin usarlo, dejando el hueco en blanco entre el carrusel y "Feedback de Actividades" — ver el comentario grande en .evidence-section). =========================================================== */ .feedback-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; /* se estira para ocupar TODO el alto sobrante */ min-height: 0; /* para que pueda encogerse si hiciera falta, en vez de desbordar */ } /* La tarjeta de feedback (definida en feedback.css) llena por completo este envoltorio, para que el espacio extra se use de verdad — no se queda pegada arriba con un hueco debajo. */ .feedback-wrapper .feedback-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* .contenedor-logo, .contenedor-texto { padding: 0rem 1rem; display: flex; justify-content: center; align-items: center; } */ .contenedor-logo, .contenedor-texto { padding: 0rem 0.8rem; /* Reducido ligeramente el espacio a los lados */ display: flex; justify-content: center; align-items: center; } /* Línea vertical divisoria entre el logo y el título */ .contenedor-texto { border-left: 1px solid rgba(255, 255, 255, 0.4); } /* .contenedor-texto h1 { font-size: 25px; font-family: Arial, sans-serif; font-weight: bold; } */ .contenedor-texto h1 { font-size: 20px; /* Reducido (antes 25px) */ font-family: Arial, sans-serif; font-weight: bold; } /* .logo-primor { max-width: 80px; height: auto; } */ .logo-primor { max-width: 65px; /* Achicado (antes 80px) */ height: auto; } /* =========================================================================== MODO CELULAR (max-width: 768px) =========================================================================== Punto de quiebre único usado en TODOS los archivos CSS del proyecto (styles.css, botones.css, KPI.css, grafico_de_lineas.css, Carousel.css). Si algún día quieres cambiar dónde empieza el "modo celular", cambia este número EN LOS 5 ARCHIVOS por igual. Qué hace este bloque, en resumen: DESACTIVA todo el esquema de "alturas repartidas / sin scroll" de arriba y deja que la página se comporte de forma normal (crece hacia abajo, el navegador scrollea solo). Cada sección pasa a apilarse una debajo de otra en vez de repartirse el ancho/alto de la pantalla. =========================================================================== */ @media (max-width: 768px) { /* 1) Le devolvemos a la página su comportamiento normal de scroll VERTICAL — pero bloqueamos el HORIZONTAL explícitamente. Por qué: con overflow:visible, CUALQUIER elemento que se pase por apenas unos píxeles del ancho de pantalla (a veces de forma casi invisible — un ícono, un texto muy largo sin wrap, un redondeo de píxeles en un cálculo con calc()) hace que el navegador agregue una barra de scroll horizontal para TODA la página, con ese espacio en blanco extra tan feo. En celular el scroll horizontal NUNCA es deseable (a diferencia del vertical, que sí pediste permitir), así que lo bloqueamos de raíz acá, en vez de perseguir cada posible elemento causante uno por uno. */ html, body { height: auto; /* ya no fijamos el alto exacto de la ventana */ overflow-y: visible; /* el scroll VERTICAL sí se permite */ overflow-x: hidden; /* el scroll HORIZONTAL se bloquea siempre */ } /* 2)

deja de repartirse un alto exacto y de forzar 2 columnas: ahora es 1 sola columna, y left-panel/right-panel se apilan verticalmente (primero el gráfico, después las evidencias) */ main { grid-template-columns: 1fr; flex: none; min-height: 0; overflow: visible; padding: 0 0.6rem 1rem; gap: 0.8rem; } /* 3) Los paneles ya no necesitan medir "el 100% del alto disponible": cada uno mide lo que su contenido necesite */ .left-panel { height: auto; min-height: 0; padding: 0.8rem; } .right-panel { height: auto; min-height: 0; } .evidence-section { flex: none; padding: 0.8rem; } /* 4) Header: en pantallas angostas no caben el título y los 4 filtros en una sola fila, así que el header pasa a 2 filas: arriba el logo+título, abajo los filtros. */ /* .main-header { flex-wrap: wrap; row-gap: 0.6rem; } */ .main-header { flex-wrap: wrap; row-gap: 0.4rem; /* Reducido el espacio entre filas */ } /* Los filtros se acomodan en una cuadrícula de 2 columnas x 2 filas (envuelven naturalmente), en vez de salirse de la pantalla o convertirse en una franja con scroll horizontal. IMPORTANTE: antes esto usaba "overflow-x: auto" para lograr un scroll horizontal, pero eso causaba un bug feo: cuando defines overflow-x sin definir también overflow-y, el navegador activa overflow-y:auto SOLO, generando un scroll vertical no deseado dentro de la franja (con espacios en blanco). Por eso ahora no usamos overflow en absoluto — usamos flex-wrap para que los botones simplemente pasen a una 2da fila. */ /* .contenedor-botones-filtros { width: 100%; flex-wrap: wrap; row-gap: 0.6rem; } .contenedor-texto h1 { font-size: 18px; } .logo-primor { max-width: 60px; } */ .contenedor-botones-filtros { width: 100%; flex-wrap: wrap; row-gap: 0.4rem; /* Reducido el espacio entre botones apilados */ } .contenedor-texto h1 { font-size: 16px; /* Aún más pequeño en celular */ } .logo-primor { max-width: 50px; /* Logo más pequeño en celular */ } .contenedor-logo, .contenedor-texto { padding: 0 0.5rem; } }