@charset "utf-8";
        @import url("reset.css");
        @import url("xxxl-grid.css");
        @import url("fonts.css");
        
        
        
        
        
/*------------------------------------------------------------------
VARIABLES
-------------------------------------------------------------------*/
        
         :root {
            --primero:    #011a5c;
            --primero2:   #062B8F;
            --primero3:   #022176;
            --primero4:   #00113D;
            --primero5:   #000615;
            --segundo:    #7d85ac;
            --tercero:    #516492;
            --cuarto:     #fe1b15;
            --cuarto2:    #A30400;
            --cuarto3:    #CF0500;
            --cuarto4:    #FF4944;
            --cuarto5:    #FF726E;
            --quinto:     #ff9478;
            --sexto:      #FE645B;
            --azul:       #2563EB;
            --bg01:       #F9FAFB;
            --bg02:       #F8FAFC;
            --bg03:       #aeaeb6;
            --bg04:       #f0f0f0;
            --bg05:       #F8F9FA;
            --bg06:       #F5F5F7;
            --borde01:    #dde5ed;
            --negro:      #0a0a0d;
            --claro:      #D9D9D9;
            --fondo:      #C6DAD8;
            --rojo:       rgb(239 68 68);
            --bg-rojo:    rgb(254 226 226);
            --tx-rojo:    rgb(153 27 27);
            --amarillo:   rgb(245 158 11);
            --bg-amarillo:rgb(254 249 195);
            --tx-amarillo:rgb(133 77 14);
            --verde:      rgb(16 185 129);
            --bg-verde:   rgb(220 252 231);
            --tx-verde:   rgb(22 101 52);
            --fontUnoTitulos: Verdana, Geneva, Tahoma, sans-serif;
            --fontUnoTextos:  'SFNS Display', Arial, sans-serif;
            --fontDosTitulos: Garamond, serif;
            --fontDosTextos:  Helvetica, Arial, sans-serif;        
            --sidebar-width: 280px;
            --sidebar-width-collapsed: 80px;
            --grafico01: #9AD8D8;
            --grafico02: #B6A6E9;
            --grafico03: #FFE072;
            --grafico04: #92C5F9;
            --grafico05: #CA6C0F;
            --grafico06: #C7C7C7;
            --grafico07: #37A3A3;
            --grafico08: #5E40BE;
            --grafico09: #DCA614;
            --grafico10: #0066CC;
        }





/* ----------------------------------------------------------------
Bootstrap Adjustments
-----------------------------------------------------------------*/
        
        @media (min-width: 1440px) {
            .container {
                /*width: auto;*/
                max-width: 1400px;
            }
        }

        .form-group label span, 
        .form-label span {
            color: var(--rojo);
        }


/* ----------------------------------------------------------------
Basic
-----------------------------------------------------------------*/
        
        body{        
            overflow-x: hidden;
        }

        body,
        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-smoothing: antialiased;
        }
        
        iframe {
            width: 100%;
            border: 0 !important;
            overflow: hidden !important;
        }
        
        html,
        body {
            background-color:none;
            height: 100%;
            color: #000;
            font-size: 16px;
            line-height: 24px;
            font-family: var(--fontUnoTextos);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-smoothing: antialiased;
        }
        
        a {
            cursor: pointer;
            text-decoration: none;
        }

        .enlace{
            cursor: pointer;
            text-decoration: underline !important;
        }
        .link{
            color: var(--bs-link-color);
            cursor: pointer;
            text-decoration: none;
        }
        .link:hover{
            text-decoration: underline;
        }




/* ----------------------------------------------------------------
Backgrounds
-----------------------------------------------------------------*/
        .bg-01{
            background-color: var(--bg01) !important;
        }
        .bg-02{
            background-color: var(--bg02) !important;
        }
        .bg-03{
            background-color: var(--bg03) !important;
        }
        .bg-04{
            background-color: var(--bg04) !important;
        }
        .bg-05{
            background-color: var(--bg05) !important;
        }
        .bg-06{
            background-color: var(--bg06) !important;
        }
        .bg-primero{
            background-color: var(--primero) !important;
        }
        .bg-primero2{
            background-color: var(--primero2) !important;
        }
        .bg-primero3{
            background-color: var(--primero3) !important;
        }
        .bg-primero4{
            background-color: var(--primero4) !important;
        }
        .bg-primero5{
            background-color: var(--primero5) !important;
        }
        .bg-segundo{
            background-color: var(--segundo) !important;
        }
        .bg-tercero{
            background-color: var(--tercero) !important;
        }
        .bg-cuarto{
            background-color: var(--cuarto) !important;
        }
        .bg-quinto{
            background-color: var(--quinto) !important;
        }
        .bg-sexto{
            background-color: var(--sexto) !important;
        }
        .bg-azul{
            background-color: var(--azul) !important;
        }
        .bg-claro{
            background-color: var(--claro) !important;
        }
        .bg-rojo{
            background-color: var(--rojo) !important;
        }
        .bg-amarillo{
            background-color: var(--amarillo) !important;
        }
        .bg-verde{
            background-color: var(--verde) !important
        }
        .fondo-rojo{
            background-color: var(--bg-rojo) !important;
        }
        .fondo-amarillo{
            background-color: var(--bg-amarillo) !important;
        }
        .fondo-verde{
            background-color: var(--bg-verde) !important
        }





/* ----------------------------------------------------------------
TEXTOS
-----------------------------------------------------------------*/
        .text-primero{
            color: var(--primero) !important;
        }
        .text-segundo{
            color: var(--segundo) !important;
        }
        .text-tercero{
            color: var(--tercero) !important;
        }
        .text-cuarto{
            color: var(--cuarto) !important;
        }
        .text-quinto{
            color: var(--quinto) !important;
        }
        .text-sexto{
            color: var(--sexto) !important;
        }
        .text-claro{
            color: var(--claro) !important;
        }
        .text-verde{
            color: var(--tx-verde) !important;
        }
        .text-amarillo{
            color: var(--tx-amarillo) !important;
        }
        .text-rojo{
            color: var(--tx-rojo) !important;
        }
        .texto-verde{
            color: var(--verde) !important;
        }
        .texto-amarillo{
            color: var(--amarillo) !important;
        }
        .texto-rojo{
            color: var(--rojo) !important;
        }
        .titulo-seccion{
            color: hsl(222.9, 84%, 4.9%);
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 2rem;
        }
        .subtitulo-seccion{
            color: hsl(222.9, 84%, 4.9%);
            letter-spacing: -.025em;
            line-height: 1;
            font-weight: 600;
            font-size: 1.5rem;
            margin: 0;
        }
        .instrucciones-seccion{
            color: hsl(214.7, 15.4%, 48.2%);
            font-size: .875rem;
            line-height: 1.25rem;
            margin: .375rem 0;
        }
        .titulo-dashboard{
            color: hsl(222.9, 84%, 4.9%);
            letter-spacing: -.025em;
            font-weight: 500;
            font-size: 1.125rem;
            line-height: 1.75rem;
        }






/* ----------------------------------------------------------------
BOTONES
-----------------------------------------------------------------*/
.btn-primary{
    --bs-btn-bg: var(--primero);
    --bs-btn-border-color: var(--primero);
    --bs-btn-hover-bg: var(--primero2);
    --bs-btn-hover-border-color: var(--primero2);
}
.btn-danger{
    --bs-btn-bg: var(--cuarto);
    --bs-btn-border-color: var(--cuarto);
    --bs-btn-hover-bg: var(--cuarto2);
    --bs-btn-hover-border-color: var(--cuarto2);
}

.btnIcon{
    margin: 0 5px;
}
.btn-crm{
    background-color: #ffffff;
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    border-radius: calc(var(.5rem) - 2px);
    color: rgb(2, 8, 23);
    cursor: pointer;
    display: block;
    transition-property: color, background-color, border-color, text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    font-weight: 500;
    font-size: .875rem;
    height: 2.25rem;
    line-height: 1.25rem;
    margin-bottom: .5rem;
    gap: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    white-space: nowrap;
    width: 100%;
}
.btn-crm .iconify{
    color: rgb(2, 8, 23);
    font-size: 1rem !important;
}
.btn-crm:hover{
    background-color: hsl(210, 40%, 96.1%);
    color: hsl(222.2, 47.4%, 11.2%);
}
.btn-crm:hover .iconify{
    color: hsl(222.2, 47.4%, 11.2%);
}

.btn-filtro{
    align-items: center;
    background: none;
    border: 1px dashed #e8e8e8;
    border-radius: 100px;
    display: inline;
    margin: 0 .1rem;
    padding: 4px 12px;
    transition: all .2s linear;
}
.btn-filtro p{
    color: #191919;
    color: rgba(25, 25, 25, .6);
    display: inline;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}
.btn-filtro .iconify{
    color: #959595;
    font-size: 8px;
    margin-left: 4px;
}
.btn-filtro:hover{
    border: 1px solid #e8e8e8;
    background: #f0f0f0;
    cursor: pointer;
    fill: dimgray;
    transition: background .2s linear;
    transition: fill .2s linear;
}
.btn-filtro:hover p{
    color: rgba(25, 25, 25, 1);
}

.btn-opcTabla{
    background-color: transparent;
    border: none;
    border-radius: calc(.5rem - 2px);
    display: inline-block;
    cursor: pointer;
    font-weight: 500;
    font-size: .875rem;
    height: 2rem;
    line-height: 1.25rem;
    text-align: center;
    text-decoration: none;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    width: 2rem;
}

.btn-opcTabla .iconify{
    color: hsl(222.2, 47.4%, 11.2%);
}

.btn-opcTabla:hover{
    background-color: hsl(210, 40%, 96.1%);
}

@media (min-width: 768px) {
    .btn-crm{
        display: inline-flex;   
        margin-left: .5rem;
        width: auto;
    }
    .btn-crm .iconify{
        margin-top: .2rem;
    }
    .box-cta {
        display: flex;
        flex-direction: row-reverse;
    } 
}



/* ----------------------------------------------------------------
sidebar
-----------------------------------------------------------------*/
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(135deg, #1a1c2e 0%, #16181f 100%);
    background: linear-gradient(135deg, var(--primero4) 0%, var(--primero2) 100%);
    transition: all 0.3s ease;
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

.sidebar-link {
    color: #a0a3bd;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 4px 16px;
    padding: 1rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-link .iconify{
    color: #FFFFFF !important;
    font-size: 18px;
    margin-right: 1rem;
}

.sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.sidebar-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.logo-text {
    background: linear-gradient(45deg, #6b8cff, #8b9fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}

.notification-badge {
    background: #ff6b6b;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
}

.profile-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-img{
    height: auto;
    width: 100%;
    max-width: 60px;
    border-radius: 50% !important;
}

.main-content {
    margin-left: var(--sidebar-width);
    background-color: var(--bg06);
    min-height: 100vh;
    padding: 2rem;
    width: 100%;
    transition: all 0.3s ease;
}

.collapsed~.main-content {
    margin-left: var(--sidebar-width-collapsed);
}

.toggle-btn {
    position: absolute;
    right: -15px;
    top: 20px;
    background: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 100;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.toggle-btn .iconify{
    display: inline-block;
    margin: 0;
}
.collapsed .toggle-btn .iconify{
    transform: rotate(180deg);
}

.collapsed .hide-on-collapse,
.collapsed .logo-text,
.collapsed .profile-info {
    /*
    opacity: 0;
    visibility: hidden;
    */
    display: none;
}

.collapsed .sidebar-link {
    text-align: center;
    padding: 1rem !important;
    margin: 4px 8px;
}

.collapsed .sidebar-link i,
.collapsed .sidebar-link .iconify  {
    margin: 0 !important;
}

.profile-info {
    transition: opacity 0.2s ease;
}






/* ----------------------------------------------------------------
COMUNES
-----------------------------------------------------------------*/
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mt-12 {
    margin-top: 3rem;
}
.mb-16 {
    margin-bottom: 4rem;
}
.p-8 {
  padding: 2rem;
}
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}







/* ----------------------------------------------------------------
CONTENIDO
-----------------------------------------------------------------*/
.box-seccion{
    background-color: #FFF;
    border-width: 1px solid hsl(214.3, 31.8%, 91.4%);
    border-radius: .5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}
.box-head{
    margin-bottom: .75rem;
}
.box-filtros{
    margin-bottom: .75rem;
}
.box-tabla{
    border: 1px solid rgb(222, 226, 230);
    border-radius: .5rem;
}
.box-tabla .table{
    margin-bottom: 0;
}
.box-tabla .table tbody tr:last-child {
    border-bottom-color: #FFF;
}
.table-crm > thead > tr > th{
    color: hsl(215.4, 16.3%, 46.9%);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
}

.table-crm > tbody > tr:hover > * {
    background-color: #f8fafc;
}
.table-crm > tbody > tr > td{
    color: hsl(221.1, 24.7%, 15.1%);
    font-size: .875rem;
    line-height: 1.25rem;
}


.container-responsive{
    overflow-x: auto;
}

.box-indicador{
    background-color: #FFF;
    border: solid 1px hsl(214.3, 31.8%, 91.4%);
    border-radius: .5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    padding: 1.5rem;
    margin-bottom: .5rem;
}
.box-indicador:hover{
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.titulo-indicador{
    color: hsl(215.4, 16.3%, 46.9%);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
}
.valor-indicador{
    color: #000;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: .5rem;
}

.box-indicador .iconify{
    background-color: hsl(217.9, 90.5%, 95.9%);
    border-radius: 9999px;
    color: hsl(217.1, 91.2%, 60%);
    padding: .5rem;
    font-size: 40px;
    margin-top: 50%;
}
.comparacion-indicador{
    color: hsl(215.4, 16.3%, 46.9%);
    margin-top: .25rem;
    font-size: .75rem;
    line-height: 1rem;
}

.box-tarea{
    align-items: center;
    background-color: hsl(210 40% 96.1% / .5);
    border-radius: calc(.5rem - 2px);
    display: flex;
    padding: .75rem;
    margin: 1rem 0;
}
.box-tarea:hover{
    background-color: hsl(210 40% 96.1% / 1);
}
.dot-tarea{
    background-color: rgb(239 68 68);
    background-color: var(--sexto);
    border-radius: 9999px;
    height: .75rem;
    margin-right: .75rem;
    width: .75rem;
}
.info-tarea{
    flex: 1 1 0%;
}
.info-tarea h4{
    color: hsl(222.9, 84%, 4.9%);
    color: rgb(2, 8, 23);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
.info-tarea p{
    color: hsl(215.4, 16.3%, 46.9%);
    color: hsl(215.3, 14%, 52.5%);
    font-size: .875rem;
    line-height: 1.25rem;
}
.prioridad-tarea{
    border-radius: 9999px;
    font-size: .75rem;
    line-height: 1rem;
    padding: .25rem .5rem;
}

.box-actividad{
    align-items: flex-start;
    border-radius: calc(.5rem - 2px);
    display: flex;
    margin: .5rem 0;
    padding: .5rem .1rem;
}
.box-actividad:hover{
    background-color: hsl(210 40% 96.1% / .5);
}
.usuario-actividad{
    align-items: center;
    background-color: #E8EFFD;
    border-radius: 9999px;
    color: rgb(37 99 235);
    display: flex;
    height: 2rem;
    justify-content: center;
    margin-right: .75rem;
    width: 2rem;
}
.usuario-actividad img{
    border-radius: 9999px;
    width: 100%;
}
.info-actividad{
    flex: 1 1 0%;
}
.info-actividad p:first-child{
    color: hsl(222.9, 84%, 4.9%);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
}
.info-actividad p:last-child{
    color: hsl(215.3, 14%, 52.5%);
    color: rgb(117, 131, 151);
    font-size: .75rem;
    line-height: 1rem;
}
.tiempo-actividad{
    color: hsl(215.3, 14%, 52.5%);
    font-size: .75rem;
    line-height: 1rem;
}

@media (min-width: 768px) {
    .container-responsive{
        overflow-x: visible;
    }
}


/* ----------------------------------------------------------------
FOOTER
-----------------------------------------------------------------*/





/* ----------------------------------------------------------------
	Responsive
-----------------------------------------------------------------*/


/*
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}
*/





/* ----------------------------------------------------------------
DEBUG
-----------------------------------------------------------------*/
/*
* {
background-color: rgba(255, 0, 0, .2);
}

* * {
background-color: rgba(0, 255, 0, .2);
}

* * * {
background-color: rgba(0, 0, 255, .2);
}

* * * * {
background-color: rgba(255, 0, 255, .2);
}

* * * * * {
background-color: rgba(0, 255, 255, .2);
}

* * * * * * {
background-color: rgba(255, 255, 0, .2);
}

* * * * * * * {
background-color: rgba(255, 0, 0, .2);
}

* * * * * * * * {
background-color: rgba(0, 255, 0, .2);
}

* * * * * * * * * {
background-color: rgba(0, 0, 255, .2);
}
*/