/* ==========================================================================
SIP - Navbar de una sola linea (referencia: sitioweb.marn.gob.gt)
Se carga al final del para sobrescribir el tema metronic.
Para revertir: quitar el en Site.Master y este archivo.
========================================================================== */
/* --- Topbar: imagenes centradas ------------------------------------------- */
.sip-topbar-imgs {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding: 10px 0;
}
.sip-topbar-imgs img {
max-height: 110px;
width: auto;
}
/* --- Solicitud de Informacion Publica: banner sobre la tabla de decretos en
Inicio. La imagen (solicita.png) ya trae su propio diseño (fondo, texto,
icono), por eso se muestra a ancho completo sin card ni marco. */
.sip-solicitud-inicio {
display: flex;
justify-content: center;
padding: 20px 0 30px;
}
.sip-solicitud-inicio a {
display: block;
width: 100%;
max-width: 1431px;
border-radius: 12px;
overflow: hidden;
line-height: 0;
transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.sip-solicitud-inicio a:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}
.sip-solicitud-inicio img {
display: block;
width: 100%;
height: auto;
}
/* El tema trae padding-top:140px en .front-header (style.css:130), pensado
para compensar la topbar de dos imagenes que ya no existe. Sin la topbar
ese padding queda huerfano y deja un espacio en blanco arriba del navbar. */
.sip-header {
padding-top: 0 !important;
}
/* --- Contenedor principal ------------------------------------------------- */
.sip-header {
background: #f7f8f9;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
/* El .container de Bootstrap 2 es de ancho fijo (~1170px) y deja el navbar
comprimido en pantallas grandes. Se ensancha solo para la cabecera. */
.sip-header > .container {
width: auto;
max-width: 1600px;
padding: 0 30px;
}
.sip-header .navbar {
margin: 0;
}
/* Estructura en una sola fila flex, SIN position:absolute (fragil, salia
del flujo y colapsaba la altura del navbar):
[ Logo ] --- margin-left:auto --- [ Menu ] --- margin-left:auto --- [ Accesos ]
Con margin-left:auto en .sip-center y en .sip-access, el espacio libre
se reparte en dos mitades iguales a cada lado del menu, lo que lo deja
centrado en el espacio disponible entre logo y accesos. */
.sip-header .navbar-inner {
background: none !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0;
filter: none;
margin: 0;
padding: 0;
min-height: 0;
display: flex;
align-items: center;
flex-wrap: nowrap;
position: relative;
}
.sip-header .sip-center {
display: flex;
align-items: center;
gap: 24px;
flex: 0 1 auto;
min-width: 0;
margin-left: auto;
}
/* display/height forzados SOLO en escritorio: en movil (media query mas
abajo) el plugin collapse.js de Bootstrap necesita controlar height y
la clase .in libremente para poder abrir Y CERRAR el menu. Forzarlos
aqui con !important sin restriccion de ancho rompia el cierre. */
@media (min-width: 980px) {
.sip-header .nav-collapse {
flex: 0 1 auto;
min-width: 0;
display: block !important;
height: auto !important;
overflow: visible !important;
padding: 0;
margin: 0;
}
}
/* --- Logo (izquierda) ------------------------------------------------------ */
.sip-header .sip-brand {
flex: 0 0 auto;
display: block;
padding: 12px 0;
line-height: 0;
}
.sip-header .sip-brand img {
height: 54px;
width: auto;
}
/* --- Accesos: Ingreso / Webmail / buscador (extremo derecho real) --------- */
/* Enlaces (Ingreso/Webmail) arriba y buscador abajo, en columna angosta:
asi el bloque completo ocupa menos ANCHO horizontal y no compite tanto
con el menu por espacio en pantallas medianas. */
.sip-header .sip-access {
flex: 0 0 auto;
margin-left: auto; /* reparte el espacio libre junto con .sip-center */
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
padding: 0;
font-size: 11px;
white-space: nowrap;
}
.sip-header .sip-access-links {
display: flex;
align-items: center;
gap: 6px;
}
.sip-header .sip-access-link {
color: #6b7780;
text-decoration: none;
white-space: nowrap;
}
.sip-header .sip-access-link:hover {
color: #1a9dd9;
}
.sip-header .sip-access-link i {
margin-right: 5px;
}
.sip-header .sip-access-sep {
color: #ccd2d7;
}
.sip-header .sip-access-search {
height: 26px;
width: 160px;
margin: 0;
padding: 2px 12px;
font-size: 11px;
border: 1px solid #dbe0e4;
border-radius: 13px;
background: #ffffff;
box-shadow: none;
}
.sip-header .sip-access-search:focus {
border-color: #1a9dd9;
outline: none;
}
/* --- Menu principal (centrado, una sola linea) ---------------------------- */
/* El tema aplica "float:right" a .nav-collapse > ul (style.css:192), lo que
saca el menu del flujo y lo superpone a los accesos. Se anula aqui con la
misma especificidad. */
.sip-header .navbar-inner .nav-collapse > ul {
float: none !important;
margin-right: 0;
}
.sip-header #principal-nav {
float: none !important;
margin: 0 !important;
padding: 0;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
list-style: none;
}
/* El indicador vive en el LI (no en el A) con position:absolute anclado a
bottom:0 del propio LI. Asi queda inmune a cualquier padding que el tema
o los media queries le pongan al : siempre pega contra el borde
inferior real de la caja del item de menu. */
.sip-header #principal-nav > li {
float: none !important;
display: block;
flex: 0 0 auto;
background: none !important;
box-shadow: none !important;
border: none !important;
position: relative !important;
}
.sip-header #principal-nav > li::after {
content: "";
display: block;
position: absolute;
left: 10px;
right: 10px;
bottom: 0;
height: 3px;
background: #1a9dd9;
opacity: 0;
transition: opacity .15s ease-in-out;
pointer-events: none;
}
.sip-header #principal-nav > li > a {
color: #23282d !important;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
padding: 30px 10px;
background: none !important;
border: none !important;
text-shadow: none;
text-transform: none;
position: relative;
display: block;
white-space: nowrap;
}
.sip-header #principal-nav > li:hover::after,
.sip-header #principal-nav > li.open::after,
.sip-header #principal-nav > li.active::after {
opacity: 1;
}
.sip-header #principal-nav > li > a:hover {
color: #1a9dd9 !important;
}
/* El tema y Bootstrap agregan al item de menu un border-top azul, fondo gris
y sombra en los estados hover/open/active (pensados para el navbar azul
original). Se eliminan: el unico indicador debe ser la linea inferior. */
.sip-header .navbar-inner #principal-nav > li > a,
.sip-header .navbar-inner #principal-nav > li > a:hover,
.sip-header .navbar-inner #principal-nav > li > a:focus,
.sip-header .navbar-inner #principal-nav > li.open > a,
.sip-header .navbar-inner #principal-nav > li.active > a,
.sip-header .navbar-inner #principal-nav > li.active:hover > a,
.sip-header .navbar .nav > li.dropdown.open > .dropdown-toggle,
.sip-header .nav > li.dropdown.open.active > a:hover,
.sip-header .nav > li.dropdown.open.active > a:focus {
border: none !important;
border-top: none !important;
border-color: transparent !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
/* padding completo: el tema usa 30px 7px 25px y descuadra la linea */
padding: 30px 10px 28px !important;
position: relative !important;
filter: none;
}
/* Opcion activa: color de texto */
.sip-header #principal-nav > li.active > a {
color: #1a5fa8 !important;
}
/* Iconos de redes sociales: sin subrayado */
.sip-header #principal-nav > li.visible-desktop::after,
.sip-header #principal-nav > li.visible-tablet::after {
display: none;
}
.sip-header #principal-nav > li.visible-desktop > a,
.sip-header #principal-nav > li.visible-tablet > a {
color: #1a5fa8 !important;
padding: 30px 5px 28px !important;
font-size: 15px;
}
/* El tema oculta/apila estos li con display:block en su media query;
dentro del flex (escritorio) deben comportarse como los demas.
Restringido a escritorio: en movil hay otra regla que los pone en fila
con inline-block (mas abajo, dentro de @media max-width:979px). */
@media (min-width: 980px) {
.sip-header #principal-nav > li.visible-desktop,
.sip-header #principal-nav > li.visible-tablet {
display: block !important;
}
}
/* --- Submenus ------------------------------------------------------------- */
/* Flecha indicadora de submenu: solo en items marcados con .has-submenu
(via JS, para no depender de :has() en CSS). Se posiciona respecto al LI
(no al padding del ) para que el texto nunca se desplace en hover. */
.sip-header #principal-nav > li.has-submenu {
padding-right: 14px;
}
.sip-header #principal-nav > li.has-submenu > a::before {
content: "";
position: absolute;
right: 2px;
top: 50%;
width: 5px;
height: 5px;
margin-top: -5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: .7;
}
.sip-header #principal-nav > li.has-submenu.open > a::before {
transform: rotate(-135deg);
margin-top: -2px;
}
.sip-header #principal-nav .dropdown-menu {
background: #1a9dd9;
border: none;
border-radius: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
padding: 0;
margin-top: 0;
text-align: left;
min-width: 230px;
}
.sip-header #principal-nav .dropdown-menu > li > a {
color: #ffffff;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
padding: 13px 20px;
white-space: normal;
border-bottom: 1px solid rgba(255, 255, 255, .15);
text-shadow: none;
}
.sip-header #principal-nav .dropdown-menu > li:last-child > a {
border-bottom: none;
}
.sip-header #principal-nav .dropdown-menu > li > a:hover {
background: #1789bd;
color: #ffffff;
}
/* --- Responsive ----------------------------------------------------------- */
/* Pantallas medianas: se compacta todo antes que romper la linea */
@media (max-width: 1400px) {
.sip-header #principal-nav > li > a {
font-size: 12px;
padding: 30px 7px 28px !important;
}
.sip-header #principal-nav > li::after {
left: 7px;
right: 7px;
}
.sip-header .sip-access-search {
width: 130px;
}
.sip-header .sip-brand img {
height: 44px;
}
}
@media (max-width: 1200px) {
.sip-header #principal-nav > li > a {
font-size: 11px;
padding: 28px 5px 26px !important;
}
.sip-header #principal-nav > li::after {
left: 5px;
right: 5px;
}
.sip-header .sip-brand img {
height: 38px;
}
/* Se ocultan los textos de los accesos, quedan los iconos */
.sip-header .sip-access-link span.sip-access-text {
display: none;
}
.sip-header .sip-access-search {
width: 110px;
}
}
/* Movil / tablet: se apila en vertical y vuelve el menu colapsable */
@media (max-width: 979px) {
.sip-header .navbar-inner {
display: block;
min-height: 0;
padding: 10px 14px;
}
/* En vertical no hay "centrado horizontal": se vuelve al flujo normal */
.sip-header .sip-center {
margin-left: 0;
max-width: 100%;
display: block;
}
.sip-header .sip-brand {
display: inline-block;
padding: 8px 0;
}
/* En movil hay ancho vertical de sobra: vuelve a una sola fila */
.sip-header .sip-access {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
padding: 8px 0;
}
.sip-header .sip-access-search {
width: 160px;
height: 30px;
font-size: 12px;
}
/* Se restituyen los textos ocultos en la franja 1200px */
.sip-header .sip-access-link span.sip-access-text {
display: inline;
}
/* El menu vuelve a ser colapsable: se deja que collapse.js (Bootstrap)
controle height y la clase .in libremente via JS -- por eso NO se
fuerza height con !important aqui (eso impedia que "collapse" (el
estado cerrado, sin .in) volviera a colapsar tras abrirse una vez). */
.sip-header .nav-collapse.collapse {
overflow: hidden;
}
.sip-header .nav-collapse.collapse:not(.in) {
height: 0;
display: none;
}
.sip-header .nav-collapse.in {
overflow: visible;
}
.sip-header #principal-nav {
display: block;
}
/* Cada opcion del menu, en su propia fila */
.sip-header #principal-nav > li:not(.visible-desktop):not(.visible-tablet) {
display: block;
}
.sip-header #principal-nav > li > a {
padding: 11px 14px;
font-size: 13px;
}
.sip-header #principal-nav > li::after {
display: none;
}
/* Los iconos sociales van juntos, en una sola fila horizontal */
.sip-header #principal-nav > li.visible-desktop,
.sip-header #principal-nav > li.visible-tablet {
display: inline-block;
}
.sip-header #principal-nav > li.visible-desktop > a,
.sip-header #principal-nav > li.visible-tablet > a {
padding: 11px 10px !important;
}
}
/* ==========================================================================
FOOTER - fondo verde con SVG de vegetacion, logo, datos y mapa embebido.
Verde tomado del propio SVG (Footer-naturaleza2026.svg: fill #2b5746) para
que la ilustracion se funda con el fondo sin costura visible.
========================================================================== */
/* El SVG es de un solo color (#2b5746, el mismo verde del footer): si el
fondo detras tiene ese color, la silueta se pierde. El fondo debe ser
claro (blanco) para que se vea el dibujo; el verde solido arranca
despues de la imagen, en .sip-footer-body. */
.sip-footer {
background: #ffffff;
color: #ffffff;
margin-top: 40px;
}
/* El wrapper mantiene fondo BLANCO de ancho completo -- necesario para que
la silueta verde del SVG siga contrastando (el propio SVG no tiene fondo
propio). El SVG se reduce dentro de el, centrado, sin recortarse: se
limita el ANCHO (no la altura), asi se ve completo, solo mas pequeno. */
.sip-footer-veg-wrap {
background: #ffffff;
text-align: center;
}
.sip-footer-veg {
display: inline-block;
width: 96%;
max-width: 1850px;
height: auto;
}
/* El verde solido arranca aqui, justo debajo del SVG */
.sip-footer-body {
background: #2b5746;
padding: 40px 0 35px;
}
/* El .container por defecto de Bootstrap mide 940px fijos y dejaba las
columnas apretadas. Se amplia solo para el footer, igual que ya se hizo
con .sip-header, para usar mas ancho de pantalla. */
.sip-footer .container {
width: auto;
max-width: 1500px;
padding: 0 30px;
}
/* flex-grow:0 en las columnas para que NO se estiren a llenar todo el
ancho -- si crecen, absorben el gap y el espacio central no se nota.
justify-content:center las agrupa, dejando aire real a los lados. */
.sip-footer-cols {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 140px;
padding: 0 15px;
}
.sip-footer-col {
flex: 0 1 340px;
min-width: 280px;
padding: 5px;
}
/* El mapa necesita mas ancho que la columna de texto para verse proporcionado
(como en el sitio de referencia) */
.sip-footer-mapa {
flex-basis: 520px;
}
.sip-footer-logo {
height: 60px;
width: auto;
}
.sip-footer-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, .35);
margin: 16px 0 18px;
width: 100%;
}
/* Iconos de redes sociales: entre el logo y la linea divisoria */
.sip-footer-social {
display: flex;
align-items: center;
gap: 16px;
margin: 14px 0 0;
}
.sip-footer-social a {
color: #ffffff;
font-size: 20px;
line-height: 1;
text-decoration: none;
opacity: .9;
}
.sip-footer-social a:hover {
opacity: 1;
color: #bfe3d5;
}
.sip-footer-col p {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.5;
color: #ffffff;
}
.sip-footer-col p i {
width: 18px;
display: inline-block;
text-align: center;
opacity: .9;
}
.sip-footer-col a {
color: #ffffff;
text-decoration: underline;
}
.sip-footer-col a:hover {
color: #bfe3d5;
}
.sip-footer-mapa p {
margin-bottom: 10px;
}
/* Sin marco blanco: el borde redondeado se aplica directo al iframe */
.sip-footer-mapa-frame {
border-radius: 14px;
line-height: 0;
overflow: hidden; /* recorta el iframe al radio del contenedor */
}
.sip-footer-mapa-frame iframe {
display: block;
width: 100%;
border-radius: 14px;
}
/* Barra inferior: cuadro blanco con el copyright */
.sip-footer-bar {
background: #ffffff;
color: #2b5746;
text-align: center;
font-size: 13px;
padding: 12px 15px;
}
@media (max-width: 767px) {
.sip-footer-cols {
flex-direction: column;
gap: 25px;
}
}