/* main.css define .sub-navbar con margin-top:60px pensado para cuando
   iba position:fixed apilada debajo de la barra institucional. Aquí
   va en flujo normal dentro de <main> (como indica la guía oficial en
   gob.mx/guias/grafica/v1), así que ese offset sobra y solo deja un
   hueco en blanco entre las dos barras. */
.sub-navbar {
    margin-top: 0;
    /* Pega el menú al hacer scroll, justo debajo de la barra
       institucional (80px de alto). position:sticky arranca en
       flujo normal (como pide la guía oficial) y solo se "pega"
       cuando el scroll lo alcanza, sin necesitar cálculos de margen. */
    position: sticky;
    top: 80px;
}

/* Submenú anidado (ej. "Histórico" dentro de "Informes oficiales").
   main.css no trae soporte para dropdown-menu anidados dentro de otro
   dropdown-menu; sin esto el segundo nivel nunca se muestra. */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}

.dropdown-submenu > a:after {
    content: " ";
    float: right;
    margin-top: 7px;
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent #999;
}

.dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* main.css define .img-responsive con max-width:100%, nunca width:100%
   (comportamiento estándar de Bootstrap). Una imagen más chica en px reales
   que su columna se queda en su tamaño natural en vez de estirarse a
   llenarla, dejando un hueco en blanco al lado — pasa en varias tarjetas
   de Default.aspx y de otras páginas (algunas ya lo parchaban a mano con
   style="width:100%" en vez de arreglarlo una sola vez aquí). */
.img-responsive {
    width: 100%;
}