/* ========================================================================== HEADER-FIX.CSS Rediseño exclusivo del comportamiento RESPONSIVE del header (topbar + logo + botón de informes). No modifica el diseño de escritorio. Se carga al final de a propósito: así sus reglas ganan la cascada sobre las de estilos.css / estilos2.css / estilos3.css / estilos4.css / estiloNuevo.css sin necesidad de abusar de !important. ========================================================================== */ /* ---- Tablet / pantallas medianas: todavía cómodo, solo se ajustan espacios ---- */ @media screen and (max-width: 1100px) { #topbar { padding: 0.5rem 1rem; } #logo { padding: 0.6rem 1rem; } } /* ---- Header compacto: a partir de aquí se activa el diseño "profesional" ---- */ @media screen and (max-width: 700px) { /* --- Topbar: una sola línea, discreta, sin desbordes --- */ #topbar { padding: 0.35rem 0.75rem; } #topbar ul { flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.9rem; } #topbar ul li { font-size: 0.72rem; padding: 0.1rem 0; white-space: nowrap; } /* El horario ocupa mucho texto y es lo menos urgente en móvil: se oculta, dejando visibles teléfono y correo, que son accionables (tap-to-call). */ #topbar ul li:first-child { display: none; } #topbar ul li i { font-size: 0.85rem; margin-right: 0.3rem; } /* --- Logo: fila compacta de dos niveles, logo+botón arriba y credencial MINEDU abajo, todo en una sola franja delgada --- */ #logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.55rem 0.9rem; gap: 0.4rem 0.6rem; } #logo h1 { order: 1; margin: 0; line-height: 0; } #logo img { max-width: 118px; height: auto; } .boton-container { order: 2; flex: 0 0 auto; width: auto; margin-top: 0; } .boton-informes { padding: 0.5rem 0.9rem; font-size: 0.72rem; border-radius: 4px; white-space: nowrap; } .ministerio-container { order: 3; flex: 0 0 100%; width: 100%; justify-content: flex-start; flex-direction: row; align-items: center; gap: 0.5rem; text-align: left; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 0.4rem; margin-top: 0.1rem; } .ministerio-container img { max-width: 36px; flex-shrink: 0; } .ministerio-text { line-height: 1.15; } .instituto-licenciado { font-size: 0.65rem; margin-bottom: 0.1rem; white-space: nowrap; } .ministerio-text p { font-size: 0.62rem; } } /* ---- Móviles pequeños: ajuste fino, sigue siendo legible y ordenado ---- */ @media screen and (max-width: 400px) { #topbar ul li { font-size: 0.68rem; } #logo img { max-width: 96px; } .ministerio-container img { max-width: 30px; } .instituto-licenciado { font-size: 0.6rem; } .ministerio-text p { font-size: 0.58rem; } .boton-informes { padding: 0.45rem 0.75rem; font-size: 0.68rem; } }