html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#base_home {

    height: 44px;
    color: #FFFFFF;
}

.cabecera_home {
    position: relative;
    width: auto;
    height: 44px;
    margin-left: 6px;
    z-index: 1000;

    background: linear-gradient(to bottom,
            #041224 0%,
            #041224 90%,
            #081c34 100%);

    border-bottom: 1px solid rgba(90, 160, 255, 0.25);

    box-shadow:
        inset 0 -8px 10px rgba(255, 255, 255, 0.03);
}

.cabecera_cerrar {
    float: right;
}

.cabecera_icono_cerrar {
    width: 32px;
    height: 34px;
    background-image: url('../img/home/salir.png');
    background-size: 34px 34px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.cabecera_icono_arcgis {
    width: 85px;
    height: 36px;
    background-image: url('../img/home/arcgis.png');
    background-size: 85px 36px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.cabecera_logo_descripcion {
    float: left;
}

.cabecera_logo_titulo {
    width: 32px;
    height: 34px;
    background-size: 34px 34px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #4370b9;
    font-size: 22px;
    font-weight: bold;

}

.cabecera_logo_texto {
    width: 252px;
    height: 34px;
    background-size: 252px 34px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 10px;

}

/* En celular no entran el logo+subtitulo (izquierda) y los iconos de
   arcgis/cerrar sesion (derecha, .cabecera_cerrar) en el mismo ancho de
   pantalla -- .cabecera_logo_descripcion y .cabecera_cerrar son floats
   independientes, y cuando no caben juntos en una linea el float derecho
   (los iconos) se cae DEBAJO de la barra de 44px en vez de quedar
   alineado en ella. Se oculta el subtitulo (el logo "SAI" solo ya
   identifica la app) para liberar el ancho que necesitan los iconos. */
@media (max-width: 600px) {
    .cabecera_logo_texto {
        display: none;
    }
}

.cabecera_flecha_abajo {
    background-image: url('../img/selec_filtro.png');
    width: 32px;
    height: 36px;
    background-size: 28px 28px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 5px;
}

.cabecera_menu_modulos {
    background-image: url('../img/home/menu_modulos.png');
    width: 32px;
    height: 36px;
    background-size: 28px 28px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 5px;
}

/* Antes: height: 50% (dependía de una cadena de % sin ancestro con altura fija).
   Ahora: se calcula en base al viewport, independiente de si los padres tienen
   altura definida o no. 44px = alto de la cabecera (#base_home / .cabecera_home). */
.contenido_inicio {
    min-height: calc(100vh - 44px);
    overflow-y: auto;
}

/********************************************************
********************* MENÚ SAI ***************************
********************************************************/

#box_servicios {

    position: fixed;
    top: 44px;
    left: -250px;
    width: 250px;
    height: calc(100vh - 44px);

    background: linear-gradient(to bottom,
            #061528,
            #081b33,
            #0b2342);

    border-right: 1px solid rgba(70, 150, 255, .20);

    box-shadow:
        8px 0 35px rgba(0, 0, 0, .45);

    overflow-y: auto;
    overflow-x: hidden;

    transition:
        left .35s ease,
        box-shadow .35s ease;

    z-index: 900;
    padding: 20px 0;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 12;
}

#box_servicios table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
}

.item_menu {
    cursor: pointer;
    transition: .25s;
}

.item_menu td {
    padding: 8px 10px;
    vertical-align: middle;
    transition: .25s;
}

.item_menu:hover td {

    background: linear-gradient(90deg,
            rgba(46, 120, 220, .35),
            rgba(20, 60, 120, .15));

}

.item_menu:hover {

    transform: translateX(6px);

}

.item_menu:hover .CajaServiciosIcono {

    transform: scale(1.10);
    filter: brightness(120%);
}

.item_menu:hover .DescripcionModulo {

    color: #55A8FF;
}


/*======================
    MENÚ ABIERTO
=======================*/

#box_servicios.menu_abierto {

    left: 0;

}


/*======================
      SCROLL
=======================*/

#box_servicios::-webkit-scrollbar {

    width: 8px;

}

#box_servicios::-webkit-scrollbar-thumb {

    background: #2A5EA5;

    border-radius: 20px;

}


/*======================
      BOTONES
=======================*/

.CajaServiciosIcono {

    width: 46px;
    height: 46px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;

    transition: .25s;
}

.DescripcionModulo {

    margin: 0;

    color: #FFF;

    font-size: 13px;

    font-weight: 100;

    transition: .25s;
}


.item_menu {

    position: relative;
}

.item_menu::before {

    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 4px;

    border-radius: 10px;

    background: #2F92FF;

    opacity: 0;

    transition: .25s;
}

.item_menu:hover::before {

    opacity: 1;
}


/*======================
       TOOLTIP
=======================*/

.tooltip {

    width: 100%;

}


/*======================
 MENSAJE SIN SERVICIOS
=======================*/

.bg_gris {

    width: 230px;

    margin: 30px auto;

    color: #B7C5D9;

    font-size: 12px;

    text-align: center;

    line-height: 20px;

}

/* Antes: height: 80% (rota, dependía de ancestros sin altura definida).
   Ahora: min-height calculado desde el viewport, así el contenido del
   módulo (dashboard, tablas, etc.) siempre tiene espacio real disponible,
   sin importar la resolución de pantalla. */
#contenido {
    transition: margin-left .35s ease;
    min-height: calc(100vh - 44px);
}

#contenido.menu_abierto {
    margin-left: 280px;
}

#cuerpo {

    transition: .35s;

}

#cuerpo.menu_abierto {

    transform: translateX(280px);

}



/****************************************************
************* CONTENEDOR DE BÚSQUEDA *****************
*****************************************************/

.contenedor_busqueda_inicial {

    width: calc(100% - 40px);
    margin: 5px auto;
    padding: 1px 15px;

    background: linear-gradient(to bottom,
            #08172d,
            #061224);

    border: 1px solid rgba(70, 150, 255, .15);
    border-radius: 10px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 5px 15px rgba(0, 0, 0, .25);
}

/* Tabla */

.contenedor_busqueda_inicial table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px 0;
}

/* Texto */

.contenedor_busqueda_inicial td {

    color: #E4EDF8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* Select */

.contenedor_busqueda_inicial select {

    width: 100%;
    max-width: 220px;
    height: 34px;

    padding: 0 35px 0 12px;

    border: 1px solid #1C4377;
    border-radius: 6px;

    background: #071428;
    color: #FFFFFF;

    font-size: 12px;

    outline: none;

    transition: .25s;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        url("../img/home/flecha_select.png");

    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

/* Hover */

.contenedor_busqueda_inicial select:hover {

    border-color: #3B8CFF;
}

/* Focus */

.contenedor_busqueda_inicial select:focus {

    border-color: #3B8CFF;

    box-shadow: 0 0 10px rgba(59, 140, 255, .25);
}

/* Opciones */

.contenedor_busqueda_inicial option {

    background: #071428;
    color: #FFFFFF;
}

/* NOTA: .tabla_dashboard y #div_mapa_calor se eliminaron de este archivo.
   Estaban duplicados en 3 archivos distintos (init.css, tablas.css,
   dashboard.css) con valores en conflicto (height: 80% aquí nunca se
   sobreescribía). Ahora viven en UN solo lugar: tablas.css. */

/****************************************************
************* LOADING *****************
*****************************************************/
#loading {
    left: 0;
    right: 0;
    width: 100%;
    position: absolute;
    background-color: #011436;
    -moz-opacity: 0.6;
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: 9999;
    background-size: 200px 200px;
    background-position: center;
    background-repeat: no-repeat;
}

#loading_index {
    top: 0%;
    height: 100%;
    background-image: url('../img/loading.gif');
}

#loading_index {
    left: 0;
    right: 0;
    width: 100%;
    position: absolute;
    background-color: #011436;
    -moz-opacity: 0.6;
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: 9999;
    background-size: 200px 200px;
    background-position: center;
    background-repeat: no-repeat;
}

#loading {
    top: 0%;
    height: 100%;
    background-image: url('../img/loading.gif');
}

/****************************************************
************* CERRAR *****************
*****************************************************/

.cerrar {
    position: absolute;
    top: 1px;
    right: 1px;

    width: 38px;
    height: 38px;

    background: transparent url("../img/cerrar_ventana.png") center center / 38px 38px no-repeat;

    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition: filter .2s ease, transform .2s ease;
}

.cerrar:hover {
    filter: brightness(130%) saturate(150%);
    transform: scale(1.05);
}

.overlay_2fa {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(1, 20, 54, 0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caja_2fa {
    background: #061528;
    border: 1px solid rgba(70, 150, 255, .25);
    border-radius: 10px;
    padding: 25px 30px;
    width: 280px;
    text-align: center;
    color: #FFFFFF;
    box-shadow: 0 5px 25px rgba(0, 0, 0, .5);
}

.titulo_2fa {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.texto_2fa {
    font-size: 12px;
    color: #B7C5D9;
    margin-bottom: 15px;
}

.input_codigo_2fa {
    width: 100px;
    text-align: center;
    font-size: 22px;
    letter-spacing: 8px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #1C4377;
    background: #071428;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.contador_2fa {
    font-size: 12px;
    color: #55A8FF;
    margin-bottom: 15px;
}

.reenviar_2fa {
    margin-top: 12px;
    font-size: 12px;
    color: #3B8CFF;
    cursor: pointer;
    text-decoration: underline;
}