/*######################################################################
#
#   MONITOR COMPARTAMOS
#   Archivo : fen.css
#   Módulo  : FEN
#   Versión : 2.0
#
######################################################################*/


/*=========================================================
=            POPUP LEAFLET
=========================================================*/

.leaflet-popup-content{
    margin:0;
}

.leaflet-popup-content-wrapper{
    padding:0;
    border-radius:12px;
    overflow:hidden;
}

.leaflet-popup-tip{
    box-shadow:none;
}


/*=========================================================
=            CONTENEDOR
=========================================================*/

.popup-fen-v2{

    width:980px;

    max-width:980px;

    font-family:Arial,Helvetica,sans-serif;

    background:#ffffff;

}


/*=========================================================
=            HEADER
=========================================================*/

.fen-header{

    background:linear-gradient(135deg,#0f4c81,#1f7cc5);

    color:#fff;

    padding:12px 18px 10px;

}

.fen-titulo{

    font-size:17px;

    font-weight:bold;

    margin-bottom:4px;

    letter-spacing:.3px;

    line-height:20px;

}

.fen-riesgo{

    display:inline-block;

    padding:4px 12px;

    border-radius:20px;

    background:rgba(255,255,255,.18);

    font-size:12px;

    font-weight:bold;

}



/*=========================================================
=            INFORMACIÓN GENERAL
=========================================================*/

.fen-info{

    display:grid;

    grid-template-columns:2fr 1.4fr 1.2fr 1fr;

    gap:10px;

    padding:14px 18px;

    border-bottom:1px solid #e6edf5;

}

.fen-item{

    background:#f7f9fc;

    border:1px solid #d9e4ef;

    border-radius:8px;

    padding:10px 12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:58px;

}

.fen-item span{

    font-size:11px;

    color:#6d7f90;

    text-transform:uppercase;

    margin-bottom:4px;

    font-weight:bold;

    letter-spacing:.5px;

}

.fen-item b{

    color:#0f4c81;

    font-size:15px;

}









/*=========================================================
=            DISTRIBUCIÓN
=========================================================*/

.fen-resumen{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:8px;

    padding:12px 18px;

    border-bottom:1px solid #e6edf5;

}

.fen-resumen div{

    background:#f7f9fc;

    border:1px solid #d9e4ef;

    border-radius:8px;

    padding:8px 6px;

    text-align:center;

    font-size:12px;

}

.fen-resumen b{

    display:block;

    margin-top:6px;

    font-size:18px;

}


/*=========================================================
=            TABLA
=========================================================*/

.fen-tabla{

    margin:0 18px 18px;

    border:1px solid #dfe6ee;

    border-radius:8px;

    overflow-x:auto;

    overflow-y:hidden;

}

.fen-tabla table{

    min-width:1250px;

    border-collapse:collapse;

}

.fen-tabla thead{

    background:#0f4c81;

    color:#fff;

}

.fen-tabla th{

    padding:11px;

    font-size:13px;

    text-align:left;

}

.fen-tabla tbody{

    display:block;

    max-height:270px;

    overflow-y:auto;

}

.fen-tabla thead,
.fen-tabla tbody tr{

    display:table;

    width:100%;

    table-layout:fixed;

}

.fen-tabla td{

    width:90px;

    padding:10px;

    border-bottom:1px solid #efefef;

    font-size:13px;

}

.fen-tabla tbody tr:hover{

    background:#f5f9fd;

}


/*=========================================================
=            BADGES
=========================================================*/

.fen-badge{

    display:inline-block;

    min-width:80px;

    padding:5px 10px;

    border-radius:20px;

    color:#fff;

    font-size:12px;

    font-weight:bold;

    text-align:center;

}


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

.fen-tabla tbody::-webkit-scrollbar{

    width:8px;

}

.fen-tabla tbody::-webkit-scrollbar-track{

    background:#ececec;

}

.fen-tabla tbody::-webkit-scrollbar-thumb{

    background:#9aa8b5;

    border-radius:20px;

}

.fen-tabla tbody::-webkit-scrollbar-thumb:hover{

    background:#6d7f90;

}


/*=========================================================
=            RESPONSIVE
=========================================================*/

@media (max-width:720px){

    .popup-fen-v2{

        width:95vw;

    }

    .fen-cards{

        flex-direction:column;

    }

    .fen-resumen{

        grid-template-columns:repeat(2,1fr);

    }

}

/*=========================================================
=            ETIQUETAS DE DEPARTAMENTOS FEN
=========================================================*/

.fen-label{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    color:#ffffff !important;
	opacity:1 !important;

    font-size:15px;

    font-weight:bold;

    text-align:center;

    text-transform:uppercase;

    white-space:nowrap;

    text-shadow:
        1px 1px 4px #000,
        -1px -1px 4px #000,
        0 0 6px #000;

    pointer-events:none;

}



/*=========================================================
=            ANCHO DE COLUMNAS
=========================================================*/

.fen-tabla th,
.fen-tabla td{

    border-right:1px solid #e6edf5;

}

.fen-tabla th:last-child,
.fen-tabla td:last-child{

    border-right:none;

}

.fen-tabla th:nth-child(1),
.fen-tabla td:nth-child(1){

    width:170px;

}

.fen-tabla th:nth-child(2),
.fen-tabla td:nth-child(2){

    width:110px;

    text-align:center;

}

.fen-tabla th:nth-child(3),
.fen-tabla td:nth-child(3){

    width:300px;

}

.fen-tabla th:nth-child(4),
.fen-tabla td:nth-child(4){

    width:90px;

}

.fen-tabla th:nth-child(5),
.fen-tabla td:nth-child(5){

    width:120px;

}

.fen-tabla th:nth-child(6),
.fen-tabla td:nth-child(6){

    width:100px;

}

.fen-tabla th:nth-child(7),
.fen-tabla td:nth-child(7){

    width:100px;

}



.fen-tabla td:nth-child(2){

    text-align:center;

}



.fen-tabla::-webkit-scrollbar{

    height:10px;

}

.fen-tabla::-webkit-scrollbar-track{

    background:#ececec;

}

.fen-tabla::-webkit-scrollbar-thumb{

    background:#8da2b5;

    border-radius:20px;

}

.fen-tabla::-webkit-scrollbar-thumb:hover{

    background:#607588;

}

.fen-label{

    background:transparent;
    border:none;

}

.fen-label div{

    font-size:15px;
    font-weight:700;
    color:#222;

    text-shadow:
        0 0 6px #fff,
        0 0 10px #fff,
        0 0 14px #fff;

    white-space:nowrap;

    transform:translate(-50%,-50%);

    pointer-events:none;

}