@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Permanent+Marker&display=swap');



.titulo-prueba {
    font-weight: bold;
    font-size: 40px;
    color: #040d21;
}

.CustomLogoKaloni{
    width: 100%;
    max-width: 30px;
}
.CustomLogoKaloni-full{
    opacity: 1;
    width: 100%;
    max-width: 150px !important;

    /* filter: invert(1); */
}


.preloader{
    /* background-color: #001f3f !important; */
    background-color: #001f3f !important;
}


.CustomColorKln{
    /* background: #040d21; este e sel color por defecto ¡NO BORRAR!*/ 
    background: #001f3f;

}

svg[fill="currentColor"][viewBox="0 0 20 20"] {
    width: 20px !important;
}

.HeaderFiltrosCust{
    padding: 4px 10px;
    background-color: #394254;
}

.buttonFil{
    padding: 1px 2px;
}

.InpuCust{
    font-size: 11px;
    padding: 0px 5px;
    height: 25px;
    max-width: 90%;
    margin-top: 10px;
    min-width: 50px;
}

.labelTitle{
    padding: 0;
    margin: 0;
    font-size: 12px;
}

.labelSubTitle{
    padding: 0;
    margin: 0;
    font-size: 10px;
}

.p-cero{
    padding: 12px;
}

.GrupoFecha{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    max-width: 90%;
}

.boxButons{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.custButonSrch{
    height: 40px;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px !important;
    padding: 0px !important;
}

.boxPaginacion{
    margin-top: 20px;
}

.flex.items-center.justify-between div{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.flex.items-center.justify-between div a{
    background-color: #d8d8d8 !important;
    width: 75px !important;
    display: flex;
    font-size: 12px !important;
    padding: 0px !important;
    margin: 8px 2px !important;
    height: 25px !important;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 1px solid #c9c9c9 !important;
    border-radius: 5px;
}


.flex.items-center.justify-between div span.relative{
    background-color: #d8d8d8 !important;
    width: 75px !important;
    display: flex;
    font-size: 12px !important;
    padding: 0px !important;
    margin: 8px 2px !important;
    height: 25px !important;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 1px solid #c9c9c9 !important;
    border-radius: 5px;
}

p.text-sm.text-gray-700.leading-5{
    width: 190px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 25px;
    align-content: center;
}


.relative.z-0.inline-flex.shadow-sm.rounded-md{
    display: none;
}


.MHFiltrosCita{
    max-height: 600px;
}
 

.trTableCust{
    background-color: #f4f8ff;
    font-size: 12px;
    font-weight: 100 !important;
    color: #000000;
    text-align: center;
    max-height: 17px !important;
    padding: 0px;
    margin: 0px;
}

.thTitleCust{
    padding: 5px 5px !important;  
    align-items: center; 
        background: #394254;
    color: white;
}

.tdFilasCust{
    margin: 0px;
    padding: 5px 5px !important;
    text-align: center;
    font-size: 13px;
}
         .f500{
            font-weight: 500;
        }


.CustBtndetalles{
    background-color: #b8bdc6;
    width: 28px;
    height: 28px;
    margin: 4px 0px;
    padding: 0;
    font-size: 10px;
    color: #040d21;
    border: 1px solid transparent;
}


.nav.nav-treeview .nav-item{
    padding: 0px 5px !important;
    margin: 10px 0px;
}

.nav.nav-treeview .nav-item .nav-link{
    padding: 5px 15px !important;
    font-size: 15px !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, 
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #b0b8ca;
    color: #000000;
    padding: 2px 15px !important;
}

.nav-link.active{
    padding: .5rem 5px;
}

.nav-item.has-treeview .nav-link{
    padding: .5rem 5px;
}



/**Tabla citas**/

.CustTitleTable{
    margin: 0px;
    padding: 0px;
    color: #000000 !important;
    background-color: #b8bdc6;
}

.custTitleTableButton{
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}

.custBodyTable{
    margin: 0px;
    padding: 5px 15px;
}

.titleElementoDetalle{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
}

.contenedorData{
    border-bottom: 1px solid #b8bdc6;
    max-width: 95%;
    margin-top: 15px;
}

.valorElementoDetalle{
    font-size: 12px;
}

.contenedorDataNota{
    padding: 10px 15px; 
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border-radius: 15px;
    max-width: 90%;
}

.ElementosLat .titleElementoDetalle{
    width: 50%;
}

.ElementosLat .valorElementoDetalle{
    width: 50%; 
    font-size: 12px;
    padding-left: 10px;
}

.ElementosLat{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 5px 0px;
    border-bottom: 1px solid grey;
    padding: 5px 0px;
}


.BoxRowFotos{
    border-top: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
    padding: 10px 10px;
}

.boxCardFotos{
    border: 1px solid grey;
    margin: 10px;
    border-radius: 15px;
}


.TituloCardDS {
    font-size: 16px;
    font-weight: bold;
    color: #555;
}

.DataPrincipalDS {
    font-size: 30px;
    font-weight: 600;
    color: #0436a5;
    margin-top: 0.5rem;
}

.OverScroll{
    overflow: scroll;
}


.titleSeccionDash{
    padding-left: 10px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #040d21;
}
    .TitleCard{
        font-size: 14px;
        font-weight: 600;
        color: #071840;
        margin-left: 10px;
    }

        .DataCard{
        font-size: 22px;
        font-weight: 700;
        margin-top: 5px;
        color: #007bff;
    }


/**DISEÑO PARA MOBILES */
@media only screen and (max-width: 540px) {

    .titleSeccionDash{
        padding-left: 3px;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 0px;
        color: #040d21;
    }
    .DataCard { font-size: 17px;}
    .TitleCard{ font-size: 11px;}

    .card-body.text-center{
        padding: 1px 5px !important;
    }
 }


/**************************************    ESTILOS BUEN FIN   *************************************/

.VistaBF .card-buenfin {
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 40px;
}

.VistaBF .card-buenfin .card-header {
    background: linear-gradient(90deg, #c00 0%, #f6e1e1 100%);
    padding: 10px 14px;
}

.VistaBF .card-buenfin .logo-buenfin {
  height: 50px;
  object-fit: contain;
}

.table-buenfin thead {
  background-color: #f5f5f5;
  color: #000;
  font-weight: 600;
}
 

/* Distribución de anchos */


.table-buenfin .col-w10 {
  width: 10%;
}
.table-buenfin .col-w15 {
  width: 15%;
}
.table-buenfin .col-w30 {
  width: 30%;
}

.table-buenfin .col-sucursal {
  width: 7%;
}


.table-buenfin .col-sucursal {
  width: 7%;
}
 
.table-buenfin .col-meta {
  width: 15%;
}
 
.table-buenfin .col-leads{
  width: 15%;
}

.table-buenfin .col-citas,
.table-buenfin .col-venta,
.table-buenfin .col-totalventa {
  width: 22%;
}

.table-buenfin .col-metas{
  width: 40%;
}

/* Bordes y tipografía */
.table-buenfin {
  font-size: 0.95rem;
  border-color: #e0e0e0;
}

.table-buenfin th, 
.table-buenfin td {
  text-align: center;
  vertical-align: middle;
  padding: 0.65rem;
}

.logobf {
    max-height: 85px;
}

.FlexHead{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

.textTableBF{
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.headerTableBF{
        color: white;
    background-color: #1d1d1b;
    border: 0px solid transparent;
}
.trTableBF{
    background-color: white;
}
.tdTableBF{
    padding: 5px 0px;
}






.totalLBF {
    font-weight: 700;
    font-size: 17px;
}

.desgloceLBF .detalleBF {
    font-size: 12px;
    line-height: 10px;
    margin-top: 4px;
    font-weight: 700;
}

.progress {
  border-radius: 6px;
  overflow: hidden;
}

.progress-bar {
  font-size: 0.85rem;
  transition: width 0.4s ease;
}



/**************************************    ESTILOS BUEN FIN   *************************************/






    .BoxCardInfoDash{
        padding-left: 15px;
    }



    .dashboard-card {
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .dashboard-icon {
      width: 48px;
      height: 48px;
      background-color: #1976d2;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      font-size: 1.5rem;
    }

    .dashboard-footer a {
      font-size: 0.875rem;
      color: #1976d2;
      text-decoration: none;
    }

    .dashboard-footer a:hover {
      text-decoration: underline;
    }

.CustomProgressBar{
    height: 30px;
    position: relative;
    font-size: 15px;
    margin-top: 15px;
}

.ProgressProgressBar{
    background-color: red;
}

.HeadCardTitle{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.repoEjecutvosMainCard{
    padding: 0;
}
.repoEjecutvosMainResumeBox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: 30%;
}
.repoEjecutvosMainResume{
    font-size: 14px;
    color: #040d21;
    font-weight: 600;
}
.colorNomMedico{
    color: #040d21 !important;
    font-weight: 700;
    margin-right: 5px;
}
.w-calendar div{
    min-width: 100px;
    max-width: 300px;
    width: 100%;
}
.card-calendar-month{
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out; /* Transición suave para la sombra */
}
.card-calendar-month:hover{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra al pasar el ratón */
}
 .container-accesos_rapidos{
        margin-top: .5rem;
        width: 85%;
    }
    .accesos_rapidos {
        background-color: #e9ecef !important; /* Un gris claro, similar a badge-light */
        color: #495057 !important; /* Texto gris oscuro */
        border: 1px solid #ced4da !important; /* Borde sutil */

        /* Otros estilos para mejorar el aspecto */
        cursor: pointer;
        display: inline-flex; /* Para centrar el contenido y permitir padding flexible */
        align-items: center;
        justify-content: center;
        padding: 2px 8px; /* Ajusta el padding para un buen tamaño de clic/toque */
        font-size: 0.70rem; /* Tamaño de fuente ligeramente ajustado */
        font-weight: 500; /* Un poco más de peso */
        transition: all 0.2s ease-out; /* Transición suave para todos los cambios */
        user-select: none; /* Evita que el texto se seleccione */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Sombra inicial sutil */
        max-width: 50px; /* Ancho mínimo para mantener uniformidad */
        text-align: center;
    }

    /* Efecto al pasar el ratón (hover) */
    .accesos_rapidos:hover {
        background-color: #dee2e6 !important; /* Un gris un poco más oscuro al pasar el ratón */
        color: #212529 !important; /* Texto un poco más oscuro */
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); /* Sombra inset para hundir */
        transform: translateY(1px); /* Ligero movimiento hacia abajo */
    }

    .accesos_rapidos:active {
        background-color: #c9d0d6 !important; /* Gris más oscuro al hacer clic */
        color: #212529 !important;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25); /* Sombra inset más pronunciada */
        transform: translateY(2px); /* Se hunde un poco más */
    }

    /* Estado "activo" o "seleccionado" (simula que uno está elegido) */
    /* Añade esta clase a tu elemento (ej. <span class="accesos_rapidos is-active">) con JavaScript */
    .accesos_rapidos.is-active {
        background-color: #007bff !important; /* Un azul primario (color de acento) */
        color: white !important; /* Texto blanco */
        border-color: #007bff !important; /* Borde del mismo color */
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Mantiene la sombra de hundido */
        transform: translateY(0); /* Si estaba hundido por hover, lo devuelve a su posición "activa" */
    }

    /* Puedes añadir un hover para el estado activo si quieres */
    .accesos_rapidos.is-active:hover {
        background-color: #0056b3 !important; /* Un azul más oscuro */
        border-color: #0056b3 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        transform: translateY(1px);
    }

.CustBadget{
    background-color: #e48333 !important;
    font-size: 11px;
    font-weight: 400;
    margin: 5px 5px;
    padding: 4px 4px;
    border-radius: 25px;
}

.CustButtonBadget{
    background-color: transparent;
    border: none;
    font-size: 12px;
    color: #ffffff;
    padding: 0px !important;
    margin: 0px 8px !important;
    font-weight: 900;
}


.tabsReportes{
    padding: 5px 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}




/* Colores de Navidad: Rojo (#C00), Verde (#0C0), Amarillo (#FFD700), Azul (#00BFFF) */

    /* ----------------------------------- */
    /* 1. CONTENEDOR PRINCIPAL (Overlay Transparente) */
    /* ----------------------------------- */
    #navidad-animation { /* ID Renombrado */
        position: fixed;
        top: 0;
        right: 0; 
        width: 100%;
        height: 25%; /* Altura definida */
        overflow: hidden; 
        z-index: 999999; 
        pointer-events: none; 
        opacity: 1; 
        transition: opacity 1s ease-out; 
    }
    
    /* ----------------------------------- */
    /* 2. CONTENEDOR DE COPOS */
    /* ----------------------------------- */
    .snowflakes-container { /* Clase Renombrada */
        position: absolute; 
        width: 100%;
        height: 100%; 
        top: 0;
        left: 0;
        
        display: flex;
        flex-wrap: nowrap; 
        justify-content: space-between; 
        align-items: flex-start; 
    }

    /* ----------------------------------- */
    /* 3. EFECTO DE COPOS DE NIEVE (Tus GIF individuales) */
    /* ----------------------------------- */
    .snowflake-fall-effect { /* Clase Renombrada */
        width: 10%; 
        height: 70%; 
        object-fit: cover;
        
        margin: 0; 
        padding: 0;
        
        z-index: 10001; 
        opacity: 0; 
        pointer-events: none; 
    }
    
    /* ----------------------------------- */
    /* 4. MENSAJE CENTRAL y ESTILOS DE NAVIDAD */
    /* ----------------------------------- */
#navidad-message { /* ID Renombrado */
        position: absolute; 
        top: 30%; 
        left: 50%; 
        transform: translate(-50%, 0); 
        z-index: 10008; 
        text-align: center;
        opacity: 0;
        width: 90%; 
    }
    
    /* Estilos generales del H1 */
    .navidad-text-animation { /* Clase Renombrada */
        line-height: 1.2; 
        text-align: center;
    }
    
    /* Tipografía */
    #navidad-message h1.navidad-text-animation .full-message-font-override {
        font-family: 'Permanent Marker', cursive !important; /* Mantenemos la fuente */
        font-size: 3rem !important; 
        display: inline-block; 
    }

    /* ----------------------------------- */
    /* 5. EFECTO LUCES NAVIDEÑAS Y COLORES */
    /* ----------------------------------- */
    
    /* El SPAN envolvente que contiene cada palabra */
    .navidad-text-animation span {
        /* Se mantiene el brillo base, pero se ajusta el color del resplandor */
        text-shadow: 
            0 0 8px rgba(255, 255, 255, 0.7), /* Brillo blanco central sutil */
            0 0 15px rgba(255, 255, 0, 0.9);  /* Resplandor Amarillo/Dorado base */
        transition: all 0.5s; 
        /* APLICAMOS LA ANIMACIÓN DE LUCES A CADA PALABRA/SÍMBOLO */
        animation: flicker 1.5s infinite alternate; 
    }
    
    /* Colores por palabra, para el efecto de luz de varios colores */
    .word-color-1 { /* Signos de Exclamación */
        color: #FFD700; /* Dorado */
        animation-delay: 0s; 
    }

    .word-color-2 { /* Feliz */
        color: #C00; /* Rojo Navidad */
        animation-delay: 0.1s; /* Ligero desfase en el parpadeo */
    }

    .word-color-3 { /* Navidad */
        color: #0C0; /* Verde Navidad */
        animation-delay: 0.2s; /* Ligero desfase en el parpadeo */
    }

    /* Keyframe para el efecto de parpadeo (Luz Navideña) */
    @keyframes flicker {
        0%, 100% {
            opacity: 1;
            /* El brillo cambia ligeramente de color y se intensifica */
            text-shadow: 
                0 0 5px #fff,
                0 0 10px #FFD700, 
                0 0 15px currentColor;
        }
        50% {
            opacity: 0.8;
            /* Reduce el brillo/color a la mitad */
            text-shadow: 
                0 0 2px #fff, 
                0 0 5px rgba(255, 255, 0, 0.5), 
                0 0 8px currentColor;
        }
    }

    /* ----------------------------------- */
    /* 6. KEYFRAMES Y ASIGNACIÓN DE ANIMACIONES */
    /* ----------------------------------- */

    /* Animación de la Caída y Desvanecimiento del GIF de Copos */
    .snowflake-fall-effect.animate-snow { /* Clase Renombrada */
        animation: snowflake-fade-in-out 2.5s ease-out forwards;
    }

    @keyframes snowflake-fade-in-out {
        0%  { opacity: 0; transform: translateY(-10px); }
        15% { opacity: 1; transform: translateY(0); }  
        85% { opacity: 1; transform: translateY(0); }  
        100% { opacity: 0; transform: translateY(10px); } 
    }

    /* Animación del Texto */
    #navidad-message.animate-message { /* Clase Renombrada */
        /* Usamos la animación del mensaje anterior */
        animation: message-fade-in-out 3s ease-out forwards; 
    }


    /* (Mantenemos el keyframe original del mensaje ya que se veía bien) */
    @keyframes message-fade-in-out {
        0%  { opacity: 0; transform: translate(-50%, 0) scale(0.95); }
        15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 
        85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 
        100% { opacity: 0; transform: translate(-50%, 0) scale(0.95); }
    }