:root{
    --ct-sidebar:#07345c;
    --ct-active:#1683ed;
    --ct-sidebar-w:280px;
    --ct-line:rgba(255,255,255,.12);
}


/* ==================================================
   SIDEBAR GLOBAL
   ================================================== */

.cent-unified-sidebar{

    width:var(--ct-sidebar-w)!important;
    min-width:var(--ct-sidebar-w)!important;
    max-width:var(--ct-sidebar-w)!important;

    flex:0 0 var(--ct-sidebar-w)!important;

    display:flex!important;
    flex-direction:column!important;

    box-sizing:border-box!important;

    background:var(--ct-sidebar)!important;
    color:#fff!important;
}


/* Marca */

.cent-v2-brand{

    min-height:94px;

    display:flex;
    align-items:center;

    gap:6px;

    padding:16px 18px;

    box-sizing:border-box;

    border-bottom:1px solid var(--ct-line);
}


.cent-v2-brand img{

    width:52px;
    height:52px;

    flex:0 0 52px;

    object-fit:contain;
}


.cent-v2-brand-copy{

    display:flex;
    flex-direction:column;
}


.cent-v2-brand-title{

    color:#fff;

    font-family:"Segoe UI",Arial,sans-serif;

    font-size:20px;

    line-height:1;

    font-weight:900;

    letter-spacing:.35px;
}


.cent-v2-brand-sub{

    margin-top:6px;

    color:#d4e8f7;

    font-size:8px;

    line-height:1;

    font-weight:800;

    letter-spacing:2.1px;
}


/* Navegación */

.cent-v2-nav{

    flex:1;

    padding:18px 12px;
}


.cent-v2-link{

    min-height:48px;

    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:7px;

    padding:0 14px;

    border-radius:9px;

    color:#fff!important;

    font-family:"Segoe UI",Arial,sans-serif;

    font-size:15px;

    font-weight:600;

    text-decoration:none!important;
}


.cent-v2-link:hover{

    background:rgba(255,255,255,.08);
}


.cent-v2-link.active{

    background:var(--ct-active);

    font-weight:800;
}


.cent-v2-icon{

    width:20px;

    flex:0 0 20px;

    text-align:center;

    font-size:17px;
}


/* Footer limpio */

.cent-v2-footer{

    margin:0 16px 16px;

    padding:15px 8px 0;

    border-top:1px solid var(--ct-line);
}


.cent-v2-user{

    color:#fff;

    font-size:15px;
}


.cent-v2-role{

    margin-top:4px;

    color:#9dc8e9;

    font-size:9px;

    letter-spacing:1.3px;
}


.cent-v2-logout{

    display:block;

    margin-top:15px;

    color:#fff!important;

    font-size:14px;

    text-decoration:none!important;
}


/* ==================================================
   MUY IMPORTANTE:
   NO tocamos margin-left ni width del contenido.
   Se mantiene el layout nativo de cada página.
   ================================================== */


/* ==================================================
   MAPA OPERACIONAL
   ================================================== */

body.cent-operational-v2 #centSidebar{

    width:var(--ct-sidebar-w)!important;
    min-width:var(--ct-sidebar-w)!important;
    max-width:var(--ct-sidebar-w)!important;

    flex-basis:var(--ct-sidebar-w)!important;

    background:var(--ct-sidebar)!important;
}


/* corregir Super Administrador */

.cent-map-role-v2{

    color:#082f59!important;

    font-weight:800!important;
}


/* loader del mapa */

.cent-map-loading-v2{

    position:absolute;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#eef4f8;

    color:#57738c;

    font-size:12px;

    pointer-events:none;
}


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

@media(max-width:1100px){

    :root{
        --ct-sidebar-w:260px;
    }

}


@media(max-width:768px){

    .cent-unified-sidebar,
    body.cent-operational-v2 #centSidebar{

        width:100%!important;
        min-width:100%!important;
        max-width:100%!important;

        flex-basis:auto!important;
    }

}




/* >>> CENTINELA_PASTEL_ICONS_V2 >>> */

/* ================================================
   ICONOS PASTEL DEL SIDEBAR ACTIVO
   ================================================ */

.cent-v2-link{
    gap:12px !important;
}


/* caja azul pastel */

.cent-v2-icon{
    width:34px !important;
    height:34px !important;

    min-width:34px !important;

    flex:0 0 34px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    position:relative !important;

    overflow:hidden !important;

    border-radius:10px !important;

    background:#dcedff !important;

    color:transparent !important;

    font-size:0 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.65),
        0 4px 10px
        rgba(0,32,66,.12) !important;
}


/* icono vectorial */

.cent-v2-icon::before{
    content:"" !important;

    width:19px !important;
    height:19px !important;

    display:block !important;

    background:#78aef5;

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;
}


/* ================================================
   1. CENTRO DE CONTROL
   ================================================ */

.cent-v2-link:nth-child(1)
.cent-v2-icon{

    background:#dcecff !important;
}


.cent-v2-link:nth-child(1)
.cent-v2-icon::before{

    background:#7d73e8;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}


/* ================================================
   2. MAPA OPERACIONAL
   ================================================ */

.cent-v2-link:nth-child(2)
.cent-v2-icon{

    background:#d9eeff !important;
}


.cent-v2-link:nth-child(2)
.cent-v2-icon::before{

    background:#62a6ef;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5l6-3 6 3 6-3v17l-6 3-6-3-6 3V5zm6-1v15m6-14v15' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5l6-3 6 3 6-3v17l-6 3-6-3-6 3V5zm6-1v15m6-14v15' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ================================================
   3. USUARIOS
   ================================================ */

.cent-v2-link:nth-child(3)
.cent-v2-icon{

    background:#e8e0ff !important;
}


.cent-v2-link:nth-child(3)
.cent-v2-icon::before{

    background:#a77ce8;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='black'/%3E%3Ccircle cx='17' cy='9' r='2.5' fill='black'/%3E%3Cpath d='M3 21c0-4.5 2.5-7 6-7s6 2.5 6 7H3zm11-5c1-.8 2-.9 3-.9 2.7 0 4 1.8 4 5.9h-5' fill='black'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='black'/%3E%3Ccircle cx='17' cy='9' r='2.5' fill='black'/%3E%3Cpath d='M3 21c0-4.5 2.5-7 6-7s6 2.5 6 7H3zm11-5c1-.8 2-.9 3-.9 2.7 0 4 1.8 4 5.9h-5' fill='black'/%3E%3C/svg%3E");
}


/* ================================================
   4. GEOCERCAS
   ================================================ */

.cent-v2-link:nth-child(4)
.cent-v2-icon{

    background:#ffe0ec !important;
}


.cent-v2-link:nth-child(4)
.cent-v2-icon::before{

    background:#ed7ba5;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22S5 15.8 5 9a7 7 0 1114 0c0 6.8-7 13-7 13zm0-16a3 3 0 100 6 3 3 0 000-6z' fill='black'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22S5 15.8 5 9a7 7 0 1114 0c0 6.8-7 13-7 13zm0-16a3 3 0 100 6 3 3 0 000-6z' fill='black'/%3E%3C/svg%3E");
}


/* ================================================
   5. ALERTAS
   ================================================ */

.cent-v2-link:nth-child(5)
.cent-v2-icon{

    background:#fff0cf !important;
}


.cent-v2-link:nth-child(5)
.cent-v2-icon::before{

    background:#eaae4e;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm-1 6h2v7h-2V8zm0 9h2v2h-2v-2z' fill='black'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm-1 6h2v7h-2V8zm0 9h2v2h-2v-2z' fill='black'/%3E%3C/svg%3E");
}


/* ================================================
   6. SEGURIDAD
   ================================================ */

.cent-v2-link:nth-child(6)
.cent-v2-icon{

    background:#d9f5eb !important;
}


.cent-v2-link:nth-child(6)
.cent-v2-icon::before{

    background:#60c8a2;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 4v6c0 5.5-3.8 9-9 11-5.2-2-9-5.5-9-11V6l9-4zm-1 13l6-6-1.5-1.5L11 12l-2.5-2.5L7 11l4 4z' fill='black'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 4v6c0 5.5-3.8 9-9 11-5.2-2-9-5.5-9-11V6l9-4zm-1 13l6-6-1.5-1.5L11 12l-2.5-2.5L7 11l4 4z' fill='black'/%3E%3C/svg%3E");
}


/* ================================================
   BOTÓN ACTIVO
   ================================================ */

.cent-v2-link.active
.cent-v2-icon{

    background:#e1f1ff !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.80),
        0 5px 12px
        rgba(0,40,90,.18) !important;
}


/* móvil */

@media(max-width:768px){

    .cent-v2-icon{

        width:32px !important;
        height:32px !important;

        min-width:32px !important;

        flex-basis:32px !important;
    }


    .cent-v2-icon::before{

        width:18px !important;
        height:18px !important;
    }

}

/* <<< CENTINELA_PASTEL_ICONS_V2 <<< */


/* >>> CENTINELA_NO_OLD_RENDER_FLASH_V1 >>> */

/*
   Mientras JavaScript prepara el sidebar,
   el contenido VIEJO no se muestra.
*/

html.cent-ui-preparing
#centSidebar > *,

html.cent-ui-preparing
.sidebar > *,

html.cent-ui-preparing
.main-sidebar > *,

html.cent-ui-preparing
.app-sidebar > *,

html.cent-ui-preparing
.left-sidebar > *{

    visibility:hidden !important;
}


/*
   Conservamos el fondo azul para que no
   aparezca un bloque blanco.
*/

html.cent-ui-preparing
#centSidebar,

html.cent-ui-preparing
.sidebar,

html.cent-ui-preparing
.main-sidebar,

html.cent-ui-preparing
.app-sidebar,

html.cent-ui-preparing
.left-sidebar{

    background:#07345c !important;
}


/*
   Cuando el nuevo render termina:
*/

html.cent-ui-ready
#centSidebar > *,

html.cent-ui-ready
.sidebar > *,

html.cent-ui-ready
.main-sidebar > *,

html.cent-ui-ready
.app-sidebar > *,

html.cent-ui-ready
.left-sidebar > *{

    visibility:visible !important;
}


/*
   Evita animaciones durante el primer render.
*/

html.cent-ui-preparing *,
html.cent-ui-preparing *::before,
html.cent-ui-preparing *::after{

    transition:none !important;
    animation:none !important;
}

/* <<< CENTINELA_NO_OLD_RENDER_FLASH_V1 <<< */