body {
    margin: 0;
    font-family: 'Montserrat', Helvetica Neue, Arial, Sans-serif;
}

/* franja-azul-header */

.franja-azul-header {
    height: 40px;
    background-color: #36c;
    border-radius: 5px 5px 0 0;
}

.grid-contenedor-franja-azul-footer {
    height: 40px;
}

.franja-azul-footer {
    height: 40px;
    background-color: #36c;
    border-radius: 0 0 5px 5px;
}

.izquierda-franja-azul-header,
.izquierda-franja-azul-footer {
    display: none;
}


.centro-franja-azul-header,
.centro-franja-azul-footer {
    display: block;
    height: 100%;
    margin: 0 30px 0;
}

@media screen and (min-width: 1200px) {

    .centro-franja-azul-header,
    .centro-franja-azul-footer {
        margin: 0;
    }
}

@media screen and (max-width: 278px) {

    .centro-franja-azul-header,
    .centro-franja-azul-footer {
        margin: 0 8px 0;
    }
}

.contenedor-logo-gov {
    height: 40px;
}


.grid-contenedor-logo-gov {
    display: flex;
    height: 100%;
    align-items: center;
}

.logo-gov-header,
.logo-gov-footer {
    display: flex;
    justify-self: flex-start;
}

.logo-gov-header img,
.logo-gov-footer img {
    display: block;
    width: auto;
    height: 30px;
    padding-left: 20px;
    cursor: pointer;
}

@media screen and (max-width: 400px) {

    .logo-gov-header img{
        padding-left: 30px;
    }
    .logo-gov-footer img {
        padding-left: 2px;
    }
}

@media screen and (max-width: 350px) {
    .logo-gov-header .logo-gov-footer img {
        padding: 0px;
    }
}



.logo_co {
    display: flex;
    justify-self: flex-start;
}

.logo_co img {
    display: block;
    width: auto;
    height: 30px;
    padding-left: 70px;
    cursor: pointer;
}

@media screen and (max-width: 400px) {

    .logo_co img {
        padding-left: 30px;
    }
}

@media screen and (max-width: 350px) {
    .logo_co img {
        padding-left: 15px;
    }
}

/* --> franja-azul-header */

/* franja-blanca */
.grid-contenedor-franja-blanca {
    height: 90%;
    padding-top: 10px;
    padding-bottom: 25px;
}

.contenedor-franja-blanca {
    height: 90%;
    padding-top: 20px;
}



@media screen and (min-width: 576px) {
    .grid-contenedor-logos-cra {
        justify-content: center;
        align-items: center;
        padding: 0;
    }


    .grid-contenedor-logos-cra {
        justify-content: center;
        align-items: center;
        padding: 0 70px 0 30px;
    }

}

/* --> franja-blanca*/

/* panel-logo-cra */

.panel-logo-cra {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: flex-start;
}

@media screen and (min-width: 576px) {
    .panel-logo-cra {
        justify-content: center;
        align-items: center;
        padding: 0;
    }
}

.logo-cra a {
    display: flex;
}

.logo-cra img {
    width: 67.98px;
    height: 98.96px;
    cursor: pointer;
}

@media screen and (min-width: 576px) {
    .logo-cra img {
        width: 67.98px;
        height: 98.96px;
    }
}

/* -> panel-logo-cra */


/* titulo-cra */

.titulo-cra a:visited {
    color: #ffffff;
}



.titulo-cra {
    display: flex;
    text-align: center;
    justify-content: center;
}

.titulo-cra a:focus,
.titulo-cra a:hover {
    cursor: pointer;

}a {
    text-decoration: none;
}
.titulo-cra a {
  max-width: 250px; /* ajusta según tu diseño */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titulo-cra a {
  font-family: 'Montserrat', Helvetica Neue, Arial, Sans-serif;
  font-size: 15px; /* más equilibrado */
  font-weight: 600; /* más consistente con Montserrat */
  letter-spacing: 0.4px;
  color: #fff;
  background-color: #6699ff;
  display: flex;
  border-radius: 4px;
  text-align: center;
  padding: 6px 10px;
  max-width: 240px; /* un poco más de espacio */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 275px) {
  .titulo-cra a {
    font-size: 13px; /* más compacto */
    padding: 4px 8px; /* menos espacio lateral */
    max-width: 200px; /* se adapta mejor al espacio reducido */
  }
}

/* --> titulo cra */


/* panel-buscador */
.panel-buscador {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    margin: 20px 0 0 0;
    padding: 0 0px 20px 0px;
}

@media screen and (min-width: 768px) {
    .panel-buscador {
        justify-self: left;
        margin: 0;
        padding: 20px 0 10px 0;
    }
}

@media screen and (min-width: 992px) {
    .panel-buscador {
        padding: 20px 0 10px 0;
    }
}

@media screen and (min-width: 1280px) {
    .panel-buscador {
        justify-self: left;
        margin-top: 0;
    }
}

@media screen and (min-width: 768px) {
    .casilla-busqueda-header {
        margin-right: 20px;
    }
}

@media screen and (min-width: 992px) {
    .casilla-busqueda-header {
        margin-left: 20px;
    }
}

.entrada-casilla-busqueda {
    font-size: 14px;
    font-family: 'Montserrat', Helvetica Neue, Arial, Sans-serif;
}

#entrada-casilla-busqueda-en-header {
    height: 40px;
    width: 200px;
    color: #413f3f;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #e2e2e2;
    border-right: none;
    border-radius: 6px 0 0 6px;
    transition: border-color 0.3s ease;
    padding: 0 10px;
    outline: none;
}

@media screen and (max-width: 278px) {
    #entrada-casilla-busqueda-en-header {
        margin-left: 20px;
        width: 150px;
    }
}

@media screen and (max-width: 295px) {
    #entrada-casilla-busqueda-en-header {
        margin-left: 20px;
        width: 100px;
    }
}

.contenedor-panel-botones:hover #entrada-casilla-busqueda-en-header,
.contenedor-panel-botones:hover .boton-buscar-texto {
    border-color: #3367cc;
}

#entrada-casilla-busqueda-en-header:focus {
    border-color: #3367cc;
}

.contenedor-panel-botones:has(#entrada-casilla-busqueda-en-header:focus) .boton-buscar-texto {
    border-color: #3367cc;
}

.show-index {
    display: block;
}

.boton-buscar-texto {
    display: flex;
    width: 40px;
    height: 40px;
    font-size: 14px;
    color: #ffffff;
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-left: none;
    border-radius: 0 6px 6px 0;
    transition: border-color 0.3s ease;
    margin: 0 20px 0 0;
    align-items: center;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .boton-buscar-texto {
        margin: 0;
    }

}

.boton-buscar-texto img {
    width: 20px;
    height: 20px;
}

.contenedor-boton-buscar-texto {
    display: flex;
    height: 28px;
    width: 28px;
    line-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #3367cc;
}

#text {
    margin: 0px;
    padding: 0px 0px 0px 0px;
}

/* --> panel-buscador */

/* Franja menu superior institucional */

.franja-menu {
    min-height: 65px;
    background-color: #fff;
    font-family: 'Montserrat', Helvetica Neue, Arial, Sans-serif;

}

@media screen and (max-width: 979px) {
    .franja-menu {
        border-bottom: none;
    }

}


/*  Estructura interna de la franja */


.grid-contenedor-franja-menu{
    border-bottom: 2px solid #f42f63;
}
.izquierda-panel-franja-menu {
    display: none;
}

.derecha-panel-franja-menu {
    display: none;
}

.centro-panel-franja-menu {
    display: flex;
    height: 100%;
    align-items: center;
    position: static;
    z-index: 10;
}


/*  Contenedor del menú institucional */

.contenedor-menu {
    width: 100%;
    overflow: visible;
}

.centro-panel-franja-menu,
.contenedor-menu {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
}


@media screen and (min-width: 980px) {
    .grid-contenedor-menu {
        display: flex;
        height: 100%;
        align-items: center;
    }

}

/*  Menú horizontal principal */
.menu-horizontal-primera-opcion {
    background-color: #e9e9e9;
}

.menu-horizontal-franja-menu {
    display: none;

}

@media screen and (min-width: 980px) {
    .menu-horizontal-franja-menu {
        display: block;
        overflow: visible;
        text-align: center;
        position: relative;
        z-index: 20;

    }
}

.menu-horizontal-franja-menu ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-horizontal-franja-menu li {
    position: relative;
    display: flex;
    align-items: center;
    height: 75px;
    color: #727272;
    font-size: 14px;
    line-height: 18px;
}

.menu-horizontal-franja-menu li a {
    display: inline-block;
    text-align: center;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    padding: 0 10px;
}

.menu-horizontal-franja-menu>ul>li:hover:not(:has(.submenu:hover)) {
    background-color: #e9e9e9;
}


/*  --> Menú horizontal principal */


/* Contenedor del menú vertical */
/* Icono/logo del menu vertical */
/* Encabezado del menú */
.menu-franja-menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 72px;
}

/* Muestra el enlace que al oprimirlo abre y cierra el menú superior (.icon) */
.icon-menu-franja-menu-institucional {
    display: inline-flex;
    height: 72px;
    /* Misma altura de franja-menu-institucional */
    color: #007BFF;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    justify-self: center;
    cursor: pointer;
    width: 100%;
    justify-content: flex-end;
}

@media screen and (min-width: 980px) {

    /* Límite igual en .grid-contenedor-menu-institucional, .menu-horizontal-franja-menu-institucional y en .menu-vertical-franja-menu-institucional */
    .icon-menu-franja-menu-institucional {
        display: none;
    }
}

.icon-menu-franja-menu-institucional:hover {
    text-decoration: underline;
}

.logo-menu-franja-menu-institucional {
    width: 33px;
    background-color: #ffffff;
    align-self: center;
    margin: 0 20px 0 5px;
    transition: all .15s;
    transition-timing-function: ease;
    transition: .3s box-shadow ease, .3s transform ease;
}



.logo-menu-franja-menu-institucional:hover {
    background-color: #ffffff;
}

.logo-menu-franja-menu-institucional:focus {
    background-color: #ffffff;
}

.logo-menu-franja-menu-institucional:active {
    outline: 0;
    background-color: #ffffff;
    border: 1px solid #8c8c8c;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.menu-vertical-franja-menu-institucional {
    display: none;
    background-color: #e6f0f6;
    z-index: 2;
    width: 100%;
    justify-self: start;
    padding-left: 0;
}

@media screen and (min-width: 980px) {
    .menu-vertical-franja-menu-institucional {
        display: none;
    }
}

.menu-vertical-franja-menu-institucional a {
    display: block;
    color: #2a2b2b;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    padding: 12px 12px;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Montserrat', Helvetica Neue, Arial, Sans-serif;
    font-weight: 700;
}

.menu-vertical-franja-menu-institucional a:hover {
    background-color: #d4d4d4;
}

.menu-vertical-franja-menu-institucional a.menu-vertical-opcion-activa {
    color: #2a2b2b;
    background-color: #d4d4d4;

}

@media screen and (min-width: 980px) {
    .menu-vertical-franja-menu-institucional a {
        padding: 12px 16px;
        font-size: 14px;
    }
}

.menu-vertical-franja-menu-institucional {
    display: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.menu-vertical-franja-menu-institucional.activo {
    display: block;
}


/* En pantallas grandes, lo ocultamos completamente */
@media screen and (min-width: 980px) {
    .menu-vertical-franja-menu-institucional {
        display: none !important;
    }
}


/* --> Contenedor del menú vertical */


/* Contenedor-migas*/
.migas {
    display: none;
    height: 40px;
    margin: 20px 20px 0 20px;
    background-color: #fff;
}

@media screen and (min-width: 980px) {

    .migas {
        display: block;
    }
}

.migas img {
    width: 16.67px;
    height: 14.17px;
    margin-left: 20px;
}

.contenedor-migas {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
}

.miga {
    color: #074982;
}

.miga-activa {
    color: #5b5b5b;
    cursor: pointer;
}

.contenedor-miga-inicio {
    height: 40px;
    width: auto;
    align-items: center;
    text-align: left;
}

.texto-miga-inicio {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-left: 22px;
}

#imagen-miga-inicio {
    padding: 0px 0px 0px 0px;
    color: #3367cc;
    text-align: left;
}

.texto-miga-inicio-gris {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-left: 22px;
}

.texto-miga-inicio {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-left: 20px;
    border-left: 1px solid #c5c5c5;
    padding-left: 20px;
}

#imagen-miga-inicio {
    padding: 0px 0px 0px 0px;
    color: #3367cc;
}

/* --> Contenedor-migas*/
/* --> Franja menu superior institucional */