/* style.css */

/* Definición de la paleta de colores */
/**********************************************************************************************************************/
:root {
    --color-primary: #5B6B95;     /* Azul lavanda apagado, profesional y relajante */
    --color-secondary: #D8A47F;   /* Terracota pastel, cálida sin ser agresiva */
    --color-light: #E6E8F2;       /* Gris azulado claro, tipo neblina */
    --color-white: #FFFFFF;       /* Blanco puro */
    --color-dark: #383A4C;        /* Azul grisáceo oscuro, sin saturar */
    --color-cab: #C3CCE6;         /* Lavanda suave para cabeceras */
    --color-tex: #2C2F3A;         /* Gris oscuro legible, sin ser puro negro */
    --color-btn: #7687B5;         /* Azul lavanda medio, para botones sin fatigar */
    --color-nuevo: #F2F4FA;       /* Gris frío, muy claro, ideal como fondo */
    --color-fondo: #F8FAFD;       /* Blanco apenas azulado, casi imperceptible */

    /* Escala acordeón azul-violeta grisáceo */
    --color-acordeon-0: #3B3D50;
    --color-acordeon-1: #4C4F65;
    --color-acordeon-2: #5D607B;
    --color-acordeon-3: #6F7291;
    --color-acordeon-4: #8084A7;
    --color-acordeon-5: #9297BC;
    --color-acordeon-6: #A5ABD1;
    --color-acordeon-7: #B9BFE4;
    --color-acordeon-8: #CCD4F0;
    --color-acordeon-9: #E1E6F8;
    --color-acordeon-10: #F0F2FB;
    --color-acordeon-11: #FAFAFD;

    --color-m: #EFF2F9; /* Fondo módulos, casi blanco con tinte azul */
}

/*******************************************************************************************************************/


/* Tipografías */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Amiri, Georgia, "Times New Roman", serif;
    color: var(--color-dark); /* Cambiando el color de los encabezados */
}

.display-4 {
    font-size: 2.5rem;
    color: var(--color-primary); /* Color primario para resaltar títulos */
}

@media (min-width: 768px) {
    .display-4 {
        font-size: 3rem;
    }
}

/* Flex y altura */
.flex-auto {
    flex: 0 0 auto;
}

.h-250 {
    height: 250px;
}

@media (min-width: 768px) {
    .h-md-250 {
        height: 250px;
    }
}

/* Blog posts */
.blog-post {
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog-post-title {
    font-size: 2.5rem;
    color: var(--color-dark); /* Color oscuro para los títulos de posts */
}

.blog-post-meta {
    margin-bottom: 1.25rem;
    color: var(--color-light); /* Usar gris claro para los metadatos */
}

/* Estilos generales */
body {
    background-color: var(--color-fondo);
    color: var(--color-dark);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-secondary);
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: #D5F0FD !important; /* Cambia este color al que prefieras */
}




/* Botones */
.btn-outline-dark {
    color: var(--color-dark);
    border-color: var(--color-dark);
}

.btn-outline-dark:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}


.btn-warning {
    background-color: var(--color-secondary);
    border-color: var(--color-dark);
}

.btn-rest {
    background-color: var(--color-dark);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
}

.btn-rest:hover {
    background-color: var(--color-secondary);
    border: 2px solid var(--color-dark);
    color: var(--color-white);
}


.btn-rect {
    background-color: var(--color-dark); /* Fondo oscuro */
    color: var(--color-white); /* Texto blanco */
    border: 1px solid var(--color-secondary); /* Borde anaranjado */
    padding: 10px 18px; /* Espaciado interno */
    margin-bottom: 15px; /* Espaciado entre botones */
    width: 100%; /* Para que ocupen todo el ancho disponible */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    text-align: center;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    max-width: 250px; /* Ajusta el ancho máximo */
    margin: 0 auto; /* Centra la columna si es necesario */

}

.btn-rect:hover {
    background-color: var(--color-secondary); /* Cambio de fondo al pasar el cursor */
    color: var(--color-dark); /* Cambia el color del texto */
    border-color: var(--color-dark); /* Borde más oscuro al pasar el cursor */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para darle un efecto flotante */
    font-size: 17px;
}


/* Aplicamos botones rectangulares en toda la aplicación */
.btn-rect1 {
    border-radius: 4px;
    padding: 10px 20px;
    background-color: var(--color-dark);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
    font-size: 18px;
}

.btn-rect1:hover {
    background-color: var(--color-secondary);
    color: var(--color-dark);
    border-color: var(--color-dark);
}


.fixed-save-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
}





/* Encabezado */
header {
    /*background: linear-gradient(120deg, var(--color-acordeon-1), var(--color-cab));*/
    background: linear-gradient(120deg, var(--color-acordeon-0), var(--color-acordeon-8));
    font-size: 22px;

}

header a {
    color: var(--color-white);
}

header a:hover {
    color: var(--color-secondary);
}

/* Footer (si tienes uno) */
footer5 {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: 20px;
    text-align: center;
    z-index: 100; /* Asegúrate de que sea lo suficientemente alto */
}

.footer6 {
    padding-bottom: 50px; /* Espacio suficiente para la cinta de correos */
    background-color: var(--color-light);
    color: var(--color-tex);
    text-align: center;
    z-index: 1; /* Asegúrate de que sea lo suficientemente alto */
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    padding-bottom: 50px; /* Espacio reservado para la cinta de correos */
    background-color: var(--color-light);
    color: var(--color-tex);
    text-align: center;
    z-index: 1; /* Mantener el z-index bajo para evitar solapamiento */
}


.scroll-offset {
  /*scroll-margin-top: 80px; /* Ajusta según la altura del navbar */
  scroll-margin-top: 100px;
  padding-top: 60px;       /* Espacio visual adicional, opcional */
  padding-bottom: 60px;
}



.card-header {
    /*background-color: var(--color-cab); /* Naranja Suave */
    /*background: linear-gradient(120deg, var(--color-dark), var(--color-cab));*/
    /*background: linear-gradient(90deg, #ff9800 0%, #ffb74d 100%);*/
    /*background: linear-gradient(135deg, var(--color-secondary), var(--color-white));*/
    /*background: linear-gradient(90deg, #FF9800 0%, #FFA726 50%, #FFCC80 100%);*/
    background: linear-gradient(120deg, var(--color-acordeon-0), var(--color-acordeon-8));
    /*background: radial-gradient(circle, #FF9800 0%, #FFB74D 70%, #FFFFFF 100%);*/
    color: var(--color-dark);
    font-weight: bold;
    border: 2px solid var(--color-dark); /* Aquí defines el color del borde */

}

.card-header2 {
    /*background-color: var(--color-cab); /* Naranja Suave */
    background: linear-gradient(135deg, var(--color-secondary), var(--color-white));
    color: var(--color-dark);
    font-weight: bold;
    border: 2px solid var(--color-dark); /* Aquí defines el color del borde */
}

.section {
    margin-bottom: 30px;
}

.card {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    width: 100%;
    max-width: 100%;
    margin: auto; /* Para centrar en caso de alguna diferencia */

}

.card-body {
    padding: 30px;
    border: 2px solid var(--color-primary);
}

.card p {
    /*text-align: left; /* Alineación del texto */
    margin-bottom: 10px;
}



.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
}
.notification-icon {
    display: inline-block;
    font-size: 24px;
    color: transparent; /* Hacemos el color base transparente */
    text-shadow: 0 0 0 #F0F4F8; /* Simulamos el color con sombra de texto */
}
.notification-icon:hover {
    text-shadow: 0 0 0 #ff9800; /* Cambia el color en hover */
}

.font-amiri {
    font-family: 'Amiri', Georgia, "Times New Roman", serif;
    font-size: 45px;
}

.acceso-rapido a, .filtros a {
    display: block;
    padding: 12px 20px;
    margin-bottom: 15px;
    color: var(--color-white);
    /*background: linear-gradient(120deg, var(--color-dark), var(--color-cab));*/
    background-color: var(--color-dark);
    text-align: center;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--color-secondary); /* Aquí defines el color del borde */

}

.acceso-rapido a:hover, .filtros a:hover {
    background-color: var(--color-secondary);
    border: 2px solid var(--color-dark);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.accesos {
    background-color: var(--color-nuevo);
    border:none;
    }

.table td {
    vertical-align: middle;
}

.table2 {
    width: 250px; /* Ajusta según sea necesario */
}

.acciones {
    width: 250px; /* Ajusta según sea necesario */
}

.correo-cinta5 {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 10px;
    font-size: 14px;
    z-index: 1580;
    border-top: 1px solid var(--color-secondary);
}
.correo-cinta {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--color-acordeon-1);
    color: var(--color-white);
    padding: 10px;
    font-size: 14px;
    z-index: 1050; /* Para estar por encima del pie de página */
    border-top: 1px solid var(--color-secondary);
}

/* Default: con sidebar expandido (250px de ancho, por ejemplo) */
.correo-cinta {
    position: fixed;
    bottom: 0;
    left: 250px; /* O el ancho exacto de tu sidebar */
    right: 0;
    background-color: var(--color-acordeon-1);
    color: var(--color-white);
    padding: 5px;
    font-size: 12px;
    z-index: 1050;
    border-top: 1px solid var(--color-secondary);
    transition: left 0.3s ease;
}


.correo-cinta span {
    margin-right: 20px;
    z-index: 1050; /* Asegúrate de que sea lo suficientemente alto */
}

.correo-cinta marquee {
    white-space: nowrap;
     z-index: 1050;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
}

.card-body .list-unstyled {
    margin-bottom: 20px;
}


.card-header2 {
    text-align: center;
    font-weight: bold;
}

h4.mb-3 {
    font-weight: bold;
}

.main-content {
    margin-bottom: 60px; /* Espacio suficiente para la cinta de correos */
}
/* acordeones */
/* Estilos para los acordeones */
/* Colores personalizados para los acordeones */
.accordion-item-1  .accordion-button{
    width:100%;
    background-color: var(--color-acordeon-1);
    color: var(--color-white);
    border: 1px solid var(--color-secondary); /* Borde anaranjado */
    border-radius: 10px; /* Bordes redondeados */
    max-width: 365px; /* Controla el tamaño máximo del botón */
    /*padding: 12px 20px; /* Añade suficiente espacio interno */
    /*margin-bottom: 15px; /* Espaciado uniforme */
    text-align: center; /* Centra el texto */
    font-size: 22px; /* Asegura que el tamaño de fuente sea uniforme */
    /*color: var(--color-white); /* Texto blanco */

}

.accordion-item-0  .accordion-button{
    background-color: var(--color-acordeon-1);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
    font-size: 22px;
}

.accordion-item-2  .accordion-button{
    background-color: var(--color-acordeon-2);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
    font-size: 22px;
}

.accordion-item-3 .accordion-button{
    background-color: var(--color-acordeon-3);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
    font-size: 22px;
}

.accordion-item-4 .accordion-button{
    background-color: var(--color-acordeon-4);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
    font-size: 22px;
}



.accordion-item {
/*width:100%;*/
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 18px !important;
}

.font {font-size:22px;}

.accordion-body {
    background-color: var(--color-fondo);/*var(--color-acordeon-9);/*(--color-nuevo);*/
    color: var(--color-tex);
}


/*Cards de alertas*/
.alert-dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alert-card {
    display: flex;
    align-items: center;
    background: #F7EFF7;
    border: 1px solid #D0D3D9;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
}

.alert-card:hover {
    background: var(--color-acordeon-9);
    transform: translateY(-2px);
}

.alert-icon {
    font-size: 22px;
    color: #E74C3C;
    margin-right: 15px;
}

.alert-content p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.alert-time {
    font-size: 12px;
    color: var(--color-acordeon-0);
    margin-top: 5px;
    display: block;
}


/*Fin Cards de alertas*/
/*Carrusel*/
.carousel-control-prev,
.carousel-control-next {
    opacity: 1 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2); /* Fondo semi-transparente */
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.5); /* Más visible al pasar el cursor */
}

/*Fin Carrusel*/




/*TAB*/
/* Estilo base de los tabs */
.navtab-link {
    flex: 1;
    background-color: var(--color-acordeon-0);
    color: var(--color-white);
    border: 3px solid var(--color-secondary);
    border-radius: 10px;
    padding: 15px 25px; /* Aumentar el tamaño de los botones */
    margin: 0 10px; /* Más espacio entre los botones */
    font-weight: bold;
    font-size: 1.5rem; /* Tamaño de texto ligeramente mayor */
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Tab activo */
.navtab-link.active {
    background-color: var(--color-acordeon-5);
    color:var(--color-acordeon-0);
    border: 3px solid var(--color-acordeon-0);
}

/* Hover */
.navtab-link:hover {
    background-color: var(--color-acordeon-3);
    color: #FFFFFF;
}




/* Clases para los colores personalizados de los estados con prefijo 'badge-' */

.badge-primary {
    background-color: #2980B9; /* Azul Acero */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-secondary {
    background-color: #ff9800; /* Naranja Suave */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-light {
    background-color: #BDC3C7; /* Gris Claro */
    color: #2D3748; /* Gris oscuro */
    font-size: 20px;
}

.badge-dark {
    background-color: #2C3E50; /* Azul Oscuro para detalles */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-cab {
    background-color: #A6C1D3; /* Azul suave */
    color: #2D3748; /* Gris oscuro */
    font-size: 20px;
}

.badge-nuevo {
    background-color: #dee4ea; /* Color de fondo claro */
    color: #2D3748; /* Gris oscuro */
    font-size: 20px;
}

.badge-acordeon-1 {
    background-color: #2C3E50; /* Color oscuro inicial */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-acordeon-2 {
    background-color: #3B556E; /* Un poco más claro */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-acordeon-3 {
    background-color: #4B6C8B; /* Todavía más claro */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-acordeon-4 {
    background-color: #5A83A9; /* El más claro */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}

.badge-btn {
    background-color: #84b6f4; /* Azul intenso */
    color: #FFFFFF; /* Blanco */
    font-size: 20px;
}
/*PRUEBA TABLERO*/
/* CSS para los indicadores */
/* Ajustamos el tamaño de las cajas KPI */
.kpi-box {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1 1 180px; /* Aseguramos que cada KPI ocupe un espacio flexible mínimo */
    max-width: 200px; /* Limitar el tamaño máximo de cada caja */
    transition: transform 0.3s ease-in-out;
}
/* Estilo para los títulos */
.kpi-box h5 {
    font-size: 1rem; /* Reducir tamaño del título */
    color: var(--color-tex); /* Texto gris oscuro */
    margin-bottom: 5px;
}

/* Estilo para los valores principales */
.kpi-box h2 {
    font-size: 1.8rem; /* Reducimos el tamaño del valor principal */
    color: var(--color-dark); /* Texto principal */
    margin-bottom: 5px;
}

/* Estilo para el texto de cambio (subtítulo) */
.kpi-box p {
    font-size: 0.9rem; /* Reducimos tamaño del subtítulo */
    margin-top: 3px;
    color: var(--color-light); /* Texto gris claro */
}

/* Contenedor principal para los indicadores */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centramos los elementos */
    gap: 10px;
    max-width: 100%;
    padding: 10px 0;
}

/* Cambios en la sección del título */
/* Ajuste del título */
.section-title {
    font-size: 1.75rem; /* Ajusta según sea necesario */
    font-weight: bold;
    color: var(--color-dark); /* Para que coincida con el estilo general */
    margin-bottom: 20px;
    text-align: left; /* O centrado si prefieres */
}


/* Breakpoint para pantallas medianas */
@media (max-width: 1200px) {
    .kpi-box {
        flex: 1 1 45%;  /* Cada caja ocupará el 45% del ancho */
    }
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .kpi-box {
        flex: 1 1 100%; /* En pantallas pequeñas, las cajas ocupan todo el ancho */
        max-width: 100%;
    }

    .kpi-row {
        justify-content: space-around; /* Para mantener espacio uniforme */
    }
}
/* PRUEBA NOTICIAS

/* Card Noticias */
/* Ajuste para que las noticias estén en una sola fila */
.news-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap; /* Asegura que las tarjetas no se envuelvan a la siguiente línea */
    overflow-x: auto; /* Permite el scroll horizontal si es necesario */
    padding: 10px;
}

.news-card-container {
    flex: 0 0 18%; /* Controlamos el ancho de cada tarjeta, 18% para tener 5 en una fila */
    margin-right: 10px;
}

.news-card {
    height: 100%;
    background-color: var(--color-fondo);
    border: 1px solid var(--color-light);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.news-card .card-title {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-dark);
}

.news-card .card-subtitle {
    font-size: 0.9rem;
    color: var(--color-tex);
}

.news-card .card-footer a {
    color: var(--color-white);
    background-color: var(--color-btn);
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none;
}

.news-card .card-footer a:hover {
    background-color: darken(var(--color-btn), 10%);
}
/*Kanbam*/
/* Estilos para el contenedor del Kanban */
.kanban-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    gap: 20px; /* Espacio entre las secciones (Oportunidades, Proyectos, Campañas) */
    justify-content: space-between;
    margin-bottom: 20px;
}


.kanban-donut {
    margin-bottom: 30px;
    text-align: center;
}

.kanban-boards {
    display: flex;
    justify-content: space-between;
}

.kanban-column {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    width: 23%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo general para los encabezados del Kanban */
.kanban-header {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px 5px 0 0;
    color: white; /* Color de texto blanco por defecto */
    border-bottom: 1px solid #dee4ea;
}

/* Colores específicos para Oportunidades */
.kanban-header.oportunidad {
    background-color: #2C3E50; /* Color oscuro para Oportunidades */
}

/* Colores específicos para Proyectos */
.kanban-header.proyecto {
    background-color: #3B556E; /* Color medio para Proyectos */
}

/* Colores específicos para Campañas */
.kanban-header.campaña {
    background-color: #4B6C8B; /* Color claro para Campañas */
}
/* Estilo general para el contenedor de elementos */
.kanban-items {
    padding: 15px;
    min-height: 200px; /* Altura mínima para las tarjetas */
}
/* Estilo general para las tarjetas */
.kanban-card {
    background-color: white;
    border: 1px solid #dee4ea; /* Fondo blanco con borde gris claro */
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

/* Hover para las tarjetas */
.kanban-card:hover {
    transform: scale(1.02);
    background-color: #e0e6ed; /* Color de fondo al hacer hover */
}

/* Fondo de las tarjetas con el color pastel correspondiente */
.kanban-card.oportunidad {
    background-color: #D3E0E9; /* Fondo pastel suave para Oportunidades */

}

.kanban-card.proyecto {
    background-color: #E0EBF2; /* Fondo pastel suave para Proyectos */
}

.kanban-card.campaña {
    background-color: #EDF4FA; /* Fondo pastel suave para Campañas */
}

/* Estilo para el título de las tarjetas */
.kanban-card h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2D3748; /* Color del texto */
}

/* Estilo para el texto dentro de las tarjetas */
.kanban-card p {
    margin: 0;
    font-size: 0.875rem;
    color: #4B6C8B;
}


/*prueba combinados*/
.kanban-section {
    margin-bottom: 40px;
}



.kanban-boards {
    display: flex;
    justify-content: space-between;
}

.kanban-column {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    width: 30%; /* Ajusta según sea necesario */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/*filas y columnas kanban*/
.kanban-section {
    margin-bottom: 40px;
}



.kanban-boards {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.kanban-column {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    width: 19%; /* Ajusta según sea necesario, debe sumar 100% con todas las columnas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}





##########
/* Contenedor de las filas */


/* Fila de cada conjunto de fases */
.kanban-row {
    display: flex;
    justify-content: space-between; /* Espacio uniforme entre las columnas */
    width: 100%; /* Asegura que ocupe todo el ancho */
}

/* Cada columna de fase */
.kanban-column {
    flex: 1; /* Cada columna ocupa un espacio proporcional */
    margin: 10px;
    background-color: #f7f9fc; /* Color de fondo de la columna */
    border: 1px solid #dee4ea; /* Borde de la columna */
    border-radius: 5px;
}




/* Cada tarjeta */

/* Probando formato kanban*/
/* Estilo general para las columnas del Kanban */
.kanban-column {
    margin: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}





.oportunidad {
    border-left: 5px solid #ff9800;/* #007bff;*/
    background-color: rgba(0, 123, 255, 0.1); /* Azul pastel suave */



}



.proyecto {
    border-left: 5px solid #fd7e14;
    background-color: rgba(253, 126, 20, 0.1); /* Naranja pastel suave */
}


.campaña {
    border-left: 5px solid #17a2b8;
    background-color: rgba(23, 162, 184, 0.1); /* Azul claro pastel suave */
}

/* Estilo para las tarjetas */

.oportunidad {
    border-left: 5px solid #ff9800;
    background-color: rgba(0, 123, 255, 0.1); /* Azul pastel suave */
}



.proyecto {
    border-left: 5px solid #ff9800;/*#3B556E;*/
    background-color: rgba(253, 126, 20, 0.1); /* Naranja pastel suave */
}



.campaña {
    border-left: 5px solid #ff9800;/*#4B6C8B;*/
    background-color: rgba(23, 162, 184, 0.1); /* Azul claro pastel suave */
}

/*label para no modificar*/
.form_label_NU {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057; /* Color del texto */
    background-color: #b5bac9; /* Color de fondo similar a un campo desactivado */
    border: 1px solid #ced4da; /* Borde estándar */
    border-radius: 0.25rem;
    appearance: none;
    font-weight: bold;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.form_label_NU:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form_label_NU[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}


/* Ajustes para los indicadores */

/* Estilos generales para los indicadores */

/* Fondo y bordes para indicadores positivos */
.indicador.positive {
    background-color: A6C1D3; /* Azul suave más destacado */
    border: 2px solid #2980B9; /* Borde azul acero */
    color: #2C3E50; /* Texto en azul oscuro */
}

/* Fondo y bordes para indicadores negativos */
.indicador.negative {
    background-color: #fdecea; /* Rojo suave */
    border: 2px solid #E63946; /* Borde rojo */
    color: #E63946; /* Texto en rojo */
}

/* Estilo general de los indicadores */
.indicador {
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Padding más generoso */
    text-align: center; /* Texto centrado */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: all 0.3s ease; /* Transición suave */
    margin: 0 10px; /* Márgenes laterales para separar los indicadores */
}

/* Títulos de los indicadores */
.indicador h5 {
    font-size: 1.2rem; /* Tamaño moderado */
    color: #2C3E50; /* Azul oscuro */
    margin-bottom: 10px; /* Separación inferior */
    font-weight: bold; /* Texto en negrita */
}

/* Números principales de los indicadores */
.indicador h2 {
    font-size: 2rem; /* Tamaño grande */
    color: #2C3E50; /* Azul oscuro para mayor contraste */
    margin: 0; /* Sin margen */
}

/* Texto secundario en los indicadores */
.indicador small {
    font-size: 1rem; /* Tamaño más grande para mejorar la legibilidad */
    color: #2D3748; /* Gris oscuro */
}

/* Cambio positivo */
.indicador p.change-positive {
    color: #2C3E50; /* Azul oscuro para cambios positivos */
    font-size: 1.2rem; /* Texto más grande */
    font-weight: bold; /* Negrita */
}

/* Cambio negativo */
.indicador p.change-negative {
    color: #E63946; /* Rojo */
    font-size: 1.2rem; /* Texto más grande */
    font-weight: bold; /* Negrita */
}

/* Efecto hover para los indicadores */
.indicador:hover {
    transform: scale(1.05); /* Efecto de agrandamiento más pronunciado */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más intensa */
}

/* Ajustes del contenedor de indicadores */
.indicadores-grid {
    display: flex; /* Usamos flex para mayor control */
    flex-wrap: nowrap; /* No permitir que se envíen a una segunda fila */
    justify-content: space-between; /* Distribuir uniformemente los indicadores */
    gap: 10px; /* Espacio entre los indicadores */
}

/*.col-md-3, .col-md-9,.col-md-2, .col-md-4 {
    border: 3px solid red;
}*/

/*Cuerpo de checkbox*/
/* Estilo de las tareas */
.form-check-label {
    background-color: var(--color-cab);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
    color: var(--color-tex);
    transition: background-color 0.3s ease;
}

/* Alternar el fondo de las tareas */
/* Alternar el fondo de las tareas */
.form-check:nth-child(odd) .form-check-label {
    background-color: var(--color-cab); /* Color alternado */
}

.form-check:nth-child(even) .form-check-label {
    background-color: var(--color-fondo); /* Otro color alternado */
}

/* Hover para todas las tareas */
.form-check-label:hover {
    background-color: var(--color-acordeon-2); /* Mismo color de fondo en hover */
    cursor: pointer;
    color: white; /* Color del texto en hover */
    border: 1px solid var(--color-secondary); /* Borde para el hover */
}

/* Asegurarse de que el hover tenga prioridad */
.form-check:nth-child(odd) .form-check-label:hover,
.form-check:nth-child(even) .form-check-label:hover {
    background-color: var(--color-acordeon-2); /* Uniforme para todas las tareas en hover */
}




/* Personalización del checkbox */
.form-check-input {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background-color: var(--color-light);
    border: 2px solid var(--color-primary);
    transition: background-color 0.3s ease;
}

/* Checkbox seleccionado */
.form-check-input:checked {
    background-color: var(--color-acordeon-3);
    border-color: var(--color-secondary);
}

/* Sombra ligera para cada tarea */
.form-check-label {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Cambiar el estilo de la tarea seleccionada */
.form-check-input:checked + .form-check-label {
    background-color: var(--color-btn);
    color: var(--color-white);
    font-weight: bold;
}

/*Acordeon de Tareas*/
/* Alternar colores de las filas de tareas */
tbody tr:nth-child(odd) {
    background-color: var(--color-fondo); /* Color claro */
}

tbody tr:nth-child(even) {
    background-color: var(--color-cab); /* Color ligeramente más oscuro */
}

/* Estilo para los botones de mostrar/ocultar detalles */
.btn[data-bs-toggle="collapse"] {
    background-color: var(--color-acordeon-1);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
    padding: 5px 10px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.btn2[data-bs-toggle="collapse"] {
    background-color: var(--color-acordeon-2);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
    padding: 5px 10px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}
.btn3[data-bs-toggle="collapse"] {
    background-color: var(--color-acordeon-3);
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
    padding: 5px 10px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.btn[data-bs-toggle="collapse"]:hover,.btn2[data-bs-toggle="collapse"]:hover,.btn3[data-bs-toggle="collapse"]:hover {
    background-color: var(--color-secondary); /* Color más oscuro al hacer hover */
    color: var(--color-white); /* Naranja suave */
    border: 2px solid var(--color-acordeon-1);
}

/* Estilo para los detalles colapsables */
.collapse .card-body {
    background-color: var(--color-m);/*var(--color-light);*/
    border: 2px solid var(--color-acordeon-1); /* Borde alrededor del área colapsada
    padding: 15px;
    border-radius: 5px;
}

/* Icono dentro del botón para mostrar/ocultar detalles */
.btn[data-bs-toggle="collapse"]::after {
    content: '▼'; /* Flecha hacia abajo */
    margin-left: 10px;
    font-size: 12px;
}

.btn.collapsed[data-bs-toggle="collapse"]::after {
    content: '▲'; /* Cambiar a flecha hacia arriba cuando está colapsado */
}

/* Estilos para las entradas dentro de los detalles colapsables */
.collapse .form-control, .form-select {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-acordeon-1);
    border-radius: 4px;
    padding: 5px;
}

/* Estilos para los campos de texto y etiquetas */
.collapse label {
    color: var(--color-dark);
    /*color: var(--color-primary);*/
    font-weight: bold;
    margin-bottom: 5px;
}

/* Botones dentro de los detalles */
.collapse .btn-primary {
    background-color: var(--color-btn);
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    margin-right: 5px;
}

.collapse .btn-danger {
    background-color: var(--color-secondary);
    border: none;
    padding: 5px 10px;
    font-size: 12px;
}

.collapse .btn-primary:hover, .collapse .btn-danger:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* Espacio entre filas de detalle */
.collapse .row {
    margin-bottom: 10px;
}
.conversion-chart {
    padding: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: center;  /* Centrar el gráfico */
    width: 100%;
}

.other-chart {
    padding: 10px;
    margin-top: 20px;
    height: 600px;  /* Fijar una altura para el segundo gráfico */
}

.funnel-container {
    width: 100%;
    height: auto;
    max-width: 700px;  /* Limitar el ancho del gráfico */
}
/*Preubas para nuevos indicadores*/
/* Estilos para los indicadores con fondo azul oscuro y borde naranja */
/* Estilo de los indicadores con fondo azul oscuro y borde naranja */
.kpi-box-dark {
    background-color: var(--color-dark); /* Fondo azul oscuro */
    border: 1px solid var(--color-secondary); /* Borde naranja */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más notable */
    text-align: center;
    flex: 1;
    min-width: 180px;
    max-width: 200px;
    transition: transform 0.3s ease-in-out;
    color: var(--color-white); /* Color del texto en blanco */
}

/* Estilo para los títulos */
.kpi-box-dark h5 {
    font-size: 1rem;
    color: var(--color-light); /* Texto en gris claro */
    margin-bottom: 5px;
}

/* Estilo para los valores principales */
.kpi-box-dark h2 {
    font-size: 2.5rem;
    color: var(--color-white); /* Texto principal en blanco */
    margin-bottom: 5px;
}

/* Estilo para el texto de cambio (subtítulo) */
.kpi-box-dark p {
    font-size: 1rem;
    margin-top: 3px;
    color: var(--color-secondary); /* Texto en naranja */
}

/* Efecto de hover */
.kpi-box-dark:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Positivo y Negativo */
/* Cambiamos el color del verde a uno más claro */
.positive-dark {
    color: #00e676; /* Verde más claro */
}

.negative-dark {
    color: #ff1744; /* Rojo */
}

.indicador-dark{
    background-color: var(--color-dark) !important;
   }


/* Hacer que el texto del "30d trend" coincida con el color de la tendencia */
.change-dark-positive .trend-text {
    color: #00e676; /* Verde más claro para 30d trend */
}

.change-dark-negative .trend-text {
    color: #ff1744; /* Rojo para 30d trend */
}


/* Adaptación del layout */
.kpi-row.indicadores-grid-dark {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
    max-width: 100%;
    margin: 0 auto;
}


/**/
    .progress-bar-container {
        background-color: #ddd;
        border-radius: 5px;
        height: 8px;
        width: 100%;
        margin-top: 10px;
    }
    .progress-bar {
        height: 8px;
        border-radius: 5px;
    }

        .positive-bar {
        background-color: #00e676;
    }
    .negative-bar {
        background-color: red;
    }
.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}


.btn-contrast-purple {
    width: 100%;
    max-width: 275px;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    color: var(--color-white);
    background-color: #8E44AD; /* Púrpura suave */
    border: 2px solid var(--color-dark); /* Borde azul oscuro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-contrast-purple:hover {
    background-color: var(--color-dark); /* Fondo azul oscuro */
    color: var(--color-white); /* Letra blanca */
    border: 2px solid #8E44AD; /* Borde púrpura */
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


.btn-custom {
background-color: var(--color-dark); /* Azul oscuro */
    width: 100%;
    max-width: 200px; /* Ajusta el ancho máximo */
    margin: 10px; /* Espacio entre los botones */
    padding: 10px 20px;
    color: var(--color-white);
    border: 1px solid var(--color-secondary); /* Borde naranja */
    transition: all 0.3s ease;
    border-radius: 10px;
    font-size: 18px;
}

.btn-custom:hover {
    background-color: var(--color-secondary); /* Fondo naranja */
    color: var(--color-white);
    border-color: var(--color-dark); /* Borde azul oscuro */
}


/*indicadores*/
/* Estilo principal de las cajas KPI */
/* Contenedor de las KPI (con margen para separar) */
/* Estilos del KPI completamente independientes */
.isolated-kpi-box {
    background-color: #2C3E50;  /* Azul oscuro */
    color: white;  /* Texto blanco */
    border: 2px solid #FF9800;  /* Borde naranja */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px;
    transition: transform 0.3s ease;  /* Efecto hover */
}

/* Agrandar al pasar el cursor */
.isolated-kpi-box:hover {
    transform: scale(1.05);
}

/* Estilo del encabezado */
.isolated-kpi-box h5 {
    font-size: 1.2rem;
    color: #BDC3C7;  /* Gris claro */
    margin-bottom: 10px;
}

/* Valor principal */
.isolated-kpi-box h2 {
    font-size: 2rem;
    margin: 10px 0;
}

/* Flecha y texto */
.isolated-kpi-box p {
    margin: 10px 0;
}

.isolated-kpi-box i {
    color: limegreen;  /* Flecha hacia arriba verde */
    margin-right: 5px;
}

/* Barra de progreso */
/* Contenedor de las KPI (con margen para separar) */
.isolated-kpi-row {
    display: flex;
    gap: 10px;
    justify-content: space-evenly;
    max-width: 100%;
    margin: 20px 0;
}

/* Estilos del KPI completamente independientes */
.isolated-kpi-box {
    background-color: #2C3E50;  /* Azul oscuro */
    color: white;  /* Texto blanco */
    border: 2px solid #FF9800;  /* Borde naranja */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px;
    transition: transform 0.3s ease;  /* Efecto hover */
}

/* Agrandar al pasar el cursor */
.isolated-kpi-box:hover {
    transform: scale(1.05);
}

/* Estilo del encabezado */
.isolated-kpi-box h5 {
    font-size: 1.2rem;
    color: #BDC3C7;  /* Gris claro */
    margin-bottom: 10px;
}

/* Valor principal */
.isolated-kpi-box h2 {
    font-size: 2rem;
    margin: 10px 0;
}

/* Flecha y texto */
.isolated-kpi-box p {
    margin: 10px 0;
}

.isolated-kpi-box i {
    color: limegreen;  /* Flecha hacia arriba verde */
    margin-right: 5px;
}

.isolated-kpi-box .fa-arrow-down {
    color: red;  /* Flecha hacia abajo roja */
}

/* Barra de progreso */
.isolated-progress-bar {
    background-color: #BDC3C7;  /* Gris claro */
    height: 6px;
    border-radius: 3px;
    margin-top: 10px;
}

.isolated-progress-fill {
    background-color: limegreen;  /* Progreso verde */
    height: 100%;
    border-radius: 3px;
}
/*prueba simple*/
#isolated-kpi-container {
    display: flex;
    justify-content: center;  /* Centrar el indicador horizontalmente */
    margin: 20px;
}

#isolated-kpi-box {
    background-color: #2C3E50;  /* Fondo azul oscuro */
    color: white;  /* Texto blanco */
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    width: 200px;
    border: 2px solid #FF9800;  /* Borde naranja */
}

#isolated-kpi-box h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #BDC3C7;  /* Texto gris claro */
}

#isolated-kpi-box h2 {
    font-size: 2rem;
    margin: 0;
    color: white;  /* Número en blanco */
}

/*indicadores kanban*/
/* Fila específica para los indicadores estilo Kanban */
.kanban-indicadores-row {
    display: flex !important;
    gap: 20px !important;
    justify-content: space-around !important;
    margin: 20px auto !important;
    padding: 20px !important;
}

/* Estilo específico de cada card de los indicadores */
.kanban-indicadores-card {
    background-color: #2C3E50 !important;  /* Fondo azul oscuro */
    color: white !important;  /* Texto blanco */
    padding: 20px !important;
    text-align: center !important;
    border-radius: 10px !important;
    width: 200px !important;
    border: 2px solid #FF9800 !important;  /* Borde naranja */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

/* Efecto hover para agrandar ligeramente */
.kanban-indicadores-card:hover {
    transform: scale(1.05) !important;
}

/* Estilo del título en cada card */
.kanban-indicadores-card h5 {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
    color: #BDC3C7 !important;  /* Texto gris claro */
}

/* Estilo del número principal en cada card */
.kanban-indicadores-card h2 {
    font-size: 2rem !important;
    margin: 0 !important;
    color: white !important;
}

.positive {
    background-color: #d4edda;
    color: #155724;
}

.negative {
    background-color: #f8d7da;
    color: #721c24;
}

.change-positive {
    color: #28a745;
}

.change-negative {
    color: #dc3545;
}

/*#################################################################*/
/* Estilo de los indicadores con fondo azul oscuro y borde naranja */
.kpi-box-dark {
    background-color: var(--color-dark); /* Fondo azul oscuro */
    border: 1px solid var(--color-secondary); /* Borde naranja */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más notable */
    text-align: center;
    flex: 1;
    min-width: 180px;
    max-width: 200px;
    transition: transform 0.3s ease-in-out;
    color: var(--color-white); /* Color del texto en blanco */
}

/* Estilo para los títulos */
.kpi-box-dark h5 {
    font-size: 1rem;
    color: var(--color-light); /* Texto en gris claro */
    margin-bottom: 5px;
}

/* Estilo para los valores principales */
.kpi-box-dark h2 {
    font-size: 2.5rem;
    color: var(--color-white); /* Texto principal en blanco */
    margin-bottom: 5px;
}

/* Estilo para el texto de cambio (subtítulo) */
.kpi-box-dark p {
    font-size: 1rem;
    margin-top: 3px;
    color: var(--color-secondary); /* Texto en naranja */
}

/* Efecto de hover */
.kpi-box-dark:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Positivo y Negativo */
.positive-dark {
    color: var(--color-success); /* Verde para resultados positivos */
}

.negative-dark {
    color: var(--color-danger); /* Rojo para resultados negativos */
}

/* Adaptación del layout */
.kpi-row.indicadores-grid-dark {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
    max-width: 100%;
    margin: 0 auto;
}
/* Cambiamos el color del verde a uno más claro */
.positive-dark {
    color: #00e676; /* Verde más claro */
}

.negative-dark {
    color: #ff1744; /* Rojo */
}

/* Hacer que el texto del "30d trend" coincida con el color de la tendencia */
.change-dark-positive .trend-text {
    color: #00e676; /* Verde más claro para 30d trend */
}

.change-dark-negative .trend-text {
    color: #ff1744; /* Rojo para 30d trend */
}

    .progress-bar-container {
        background-color: #ddd;
        border-radius: 5px;
        height: 8px;
        width: 100%;
        margin-top: 10px;

.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}
/* Estilo para el estado activo */
/*.accordion-item .accordion-button:not(.collapsed) {
    background-color: var(--color-dark) !important;
    color: var(--color-white) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    /*box-shadow: none
}*/

#faq .accordion-button:not(.collapsed) {
  background-color: var(--color-dark) !important;
  color: #212529 !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) !important;
}

.accordion {
    background: none; /* Asegura que no haya fondo en el contenedor del acordeón */
    padding: 0; /* Eliminar padding */
    font-size: 22px !important;
}

/* Clase personalizada para el botón en el acordeón */
.btn-custom-acordeon {
    background-color: var(--color-dark); /* Azul oscuro */
    color: var(--color-white); /* Texto blanco */
    border: 1px solid var(--color-secondary); /* Borde naranja */
    padding: 10px 20px; /* Ajustar el relleno (padding) según el tamaño que quieras */
    font-size: 22px !important;; /* Tamaño de letra */
    border-radius: 10px; /* Bordes redondeados */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animación suave para hover */
}

/* Hover: invertir los colores para el efecto */
.btn-custom-acordeon:hover {
    background-color: var(--color-secondary); /* Fondo naranja */
    color: var(--color-dark); /* Texto azul oscuro */
}

/* Asegura que el botón ocupe el ancho especificado */
.w-50 {
    width: 50%; /* Cambia el valor para ajustar el ancho del botón */
}

/* Elimina el margen y padding del contenedor que causa el espacio blanco */
.no-padding-margin {
    padding: 0;
    margin: 0;
}

/* Asegura que el botón ocupe todo el ancho posible */
.full-width {
    width: 100%;
}
.larger-text {
    color: var(--color-white) !important;
    font-size: 22px !important; /* Forzar tamaño de fuente grande */
}

.btn-rect-inv {
    background-color: var(--color-secondary); /* Fondo oscuro */
    color: var(--color-white); /* Texto blanco */
    border: 2px solid var(--color-dark); /* Borde anaranjado */
    padding: 12px 20px; /* Espaciado interno */
    margin-bottom: 15px; /* Espaciado entre botones */
    width: 100%; /* Para que ocupen todo el ancho disponible */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    text-align: center;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
    max-width: 350px; /* Ajusta el ancho máximo */
    margin: 0 auto; /* Centra la columna si es necesario */

}

.btn-rect-inv:hover {
    background-color: var(--color-dark); /* Cambio de fondo al pasar el cursor */
    color: var(--color-dark); /* Cambia el color del texto */
    border-color: var(--color-secondary); /* Borde más oscuro al pasar el cursor */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para darle un efecto flotante */
    font-size: 22px;
}

.multiple-select {
    width: 100%;
    height: auto;
    min-height: 150px; /* Ajusta el tamaño mínimo del select */
}

.accordion {
    margin-bottom: 30px; /* Ajusta esto si quieres más espacio debajo del acordeón */
}

.accordion-item {
    min-height: 100px; /* Para asegurarte de que tenga un tamaño mínimo visible */
}

/*Nuevos Indicadores*/
/* Ajustes básicos para las nuevas tarjetas */
.ind-summary-card {
    background-color: #1B2835 !important; /* Fondo oscuro */
    color: #ffffff !important;           /* Texto blanco */
    border-radius: 12px !important;      /* Bordes redondeados */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important; /* Sombra */
    margin: 20px auto !important;        /* Centrado automático */
    padding: 20px !important;
    max-width: 600px !important;         /* Ancho máximo */
}

/* Estilo para el contenido */
.ind-summary-content {
    display: flex !important;
    justify-content: space-between !important;
    gap: 15px !important; /* Espaciado */
}

/* KPI individual dentro de la tarjeta */
.ind-summary-kpi {
    text-align: center !important;
    margin: 10px !important;
}

.ind-indicator-title {
    font-size: 14px !important;
    color: #cdd4e7 !important;
}

.ind-indicator-value {
    font-size: 24px !important;
    font-weight: bold !important;
}

.ind-indicator-change {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

.ind-positive {
    color: #2ecc71 !important; /* Verde para positivo */
}

.ind-negative {
    color: #e74c3c !important; /* Rojo para negativo */
}
/*************************************Unificado************************************************************************/
/**************Unificado***********************************************************************************************/
.container-fluid {
padding: 20px;
}
{
padding: 20px;
}
{
padding: 20px;
}

.row {
margin-bottom: 15px;
}
{
margin-bottom: 15px;
}
{
margin-bottom: 15px;
}

.col-md-2, .col-md-4, .col-md-6, .col-md-2, .col-md-10, .col-md-3, .col-md-6, .col-md-9, .col-12 {
padding: 15px;
}

.accesos {
background-color: var(--color-nuevo);
border: none;
}
{
background-color: var(--color-light);
border-radius: 10px;
}

.accesos a {
display: block;
padding: 12px 20px;
margin-bottom: 15px;
color: var(--color-white);
background-color: var(--color-dark);
text-align: center;
border-radius: 30px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid var(--color-secondary);
}

.accesos a:hover {
background-color: var(--color-secondary);
border: 2px solid var(--color-dark);
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.card-header {
background: linear-gradient(90deg, #FF9800 0%, #FFA726 50%, #FFCC80 100%);
color: var(--color-dark);
font-weight: bold;
text-align: center;
border: 2px solid var(--color-dark);
}

.card-body {
padding: 20px;
}

.btn {
font-size: 16px;
padding: 8px 15px;
border-radius: 8px;
transition: all 0.3s ease;
}
{
padding: 10px 20px;
font-size: 16px;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.3s ease;
}
{
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.btn-rest {
background-color: var(--color-dark);
border: 1px solid var(--color-secondary);
color: var(--color-white);
}

.btn-rest:hover {
background-color: var(--color-secondary);
border-color: var(--color-dark);
}

.btn-sm {
font-size: 14px;
padding: 5px 10px;
}

.btn-danger {
background-color: #dc3545;
border: 2px solid #dc3545;
color: var(--color-white);
}
{
background-color: #dc3545;
border-color: #bd2130;
color: var(--color-white);
}

.btn-danger:hover {
background-color: #c82333;
border-color: #bd2130;
}

.table {
width: 100%;
margin-bottom: 1rem;
color: var(--color-tex);
border: 1px solid var(--color-light);
}

.form-control {
border: 1px solid var(--color-light);
border-radius: 5px;
padding: 10px;
font-size: 14px;
}

.text-end {
text-align: right;
}
{
text-align: right;
}

.mb-3 {
margin-bottom: 20px;
}
{
margin-bottom: 20px;
}

.text-center {
text-align: center;
}

.list-group-item {
border: none;
background-color: var(--color-light);
padding: 12px 20px;
margin-bottom: 10px;
border-radius: 10px;
}
{
border: none;
padding: 12px;
margin-bottom: 5px;
border-radius: 8px;
background-color: var(--color-light);
}

.list-group-item:hover {
background-color: var(--color-secondary);
cursor: pointer;
}
{
background-color: var(--color-secondary);
color: var(--color-white);
}






.btn-custom-acordeon {
background-color: var(--color-secondary);
color: var(--color-white);
border: 2px solid var(--color-dark);
transition: all 0.3s ease;
}

.accordion-button:hover, .btn-custom-acordeon:hover {
background-color: var(--color-dark);
}

.form-control, .form-select {
border: 1px solid var(--color-light);
border-radius: 5px;
padding: 10px;
font-size: 14px;
}
{
border: 1px solid var(--color-light);
border-radius: 5px;
padding: 10px;
font-size: 14px;
}

.form-select {
width: 100%;
}

.accordion {
margin-top: 20px;
}
{
margin-top: 20px;
}

.accordion-item {
background-color: var(--color-fondo);
border: 1px solid var(--color-light);
margin-bottom: 15px;
}
{
background-color: var(--color-fondo);
border: 1px solid var(--color-light);
}

.accordion-header h3 {
margin: 0;
font-size: 1.2rem;
}

.accordion-body {
padding: 15px;
background-color: var(--color-white);
}
{
padding: 15px;
background-color: var(--color-white);
}

.table-bordered th, .table-bordered td {
border: 1px solid var(--color-light);
}

.table th, .table td {
padding: 12px;
}

.badge {
font-size: 1rem;
padding: 5px 10px;
border-radius: 10px;
}

.kanban-header.proyecto, .badge-danger, .negative, .change-negative, .kanban-header.oportunidad, .positive, .change-positive, .badge-success, .kanban-header.campaña {

.accesos a, .accesos button {

background-color: var(--color-secondary);
display: block;
padding: 10px;
text-align: center;
border-radius: 5px;
color: var(--color-dark);
margin-bottom: 10px;
transition: background-color 0.3s ease-in-out;
}

.accesos a:hover, .accesos button:hover {
background-color: var(--color-secondary);
color: var(--color-white);
}

.form-label {
font-weight: bold;
}

.accordion-header {
padding: 0;
}

.accordion-button {
background-color: var(--color-secondary);
color: var(--color-white);
font-weight: bold;
}

.img-thumbnail {
border: 1px solid var(--color-light);
border-radius: 5px;
max-width: 100%;
height: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kanban-container {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
gap: 20px; /* Espacio entre las secciones */
justify-content: space-between;
margin-bottom: 20px;
}

.kanban-boards {
display: flex;
justify-content: space-between;
width: 100%;
}

.kanban-column {
background-color: #fff;
border-radius: 5px;
padding: 10px;
width: 30%; /* Ajusta según sea necesario */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kanban-header {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px 5px 0 0;
color: white;
}

.kanban-items {
padding: 15px;
min-height: 200px;
}

.kanban-card {
background-color: white;
border: 1px solid #dee4ea;
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}

.kanban-card:hover {
transform: scale(1.02);
background-color: #e0e6ed;
}

.ind-summary-card {
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
background-color: #ffffff;
}

.ind-summary-header h3 {
color: #2C3E50;
text-align: center;
}

.ind-summary-kpi {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}

.ind-summary-kpi .ind-indicator-title {
font-size: 1rem;
font-weight: bold;
}

.ind-summary-kpi .ind-indicator-value {
font-size: 1.5rem;
}

.ind-summary-kpi .ind-indicator-change {
font-size: 1.2rem;
}

.kpi-box {
background-color: var(--color-white);
border-radius: 8px;
padding: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
flex: 1 1 180px;
max-width: 200px;
transition: transform 0.3s ease-in-out;
}

.kpi-box:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary, .btn2, .btn3 {
background-color: var(--color-primary);
border: 1px solid var(--color-secondary);
color: var(--color-white);
border-radius: 8px;
transition: all 0.3s ease-in-out;
}

.btn-primary:hover, .btn2:hover, .btn3:hover {
background-color: var(--color-secondary);
color: var(--color-dark);
border: 2px solid var(--color-dark);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* === Estilos para la vista analítica === */
.analitica-container {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.analitica-section {
    margin-bottom: 20px;
}

.news-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.news-card-container {
    width: 300px;
}

.news-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news-time {
    font-weight: bold;
    color: #555;
}

.news-category {
    font-style: italic;
}

.wordcloud-container {
    text-align: center;
}


/* === Corrección Incremental para Clases Conflictivas === */

/* Solución para .btn que causa colisiones de padding */
.btn {
    padding: 10px 20px; /* Ajuste de padding unificado */
    font-size: 16px;
    border-radius: 8px;
}

/* Solución para .card-header con errores de color */
.card-header {
    /*background: linear-gradient(90deg, #1B2835 0%, #7AB3E3 50%, #E8F7FE 100%);*/
    background: linear-gradient(120deg, var(--color-acordeon-0), var(--color-acordeon-8));
    color: var(--color-dark);
    font-weight: bold;
    text-align: center;
}

/* Ajustes para el contenedor Kanban */
.kanban-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    justify-content: space-between;
}

/* Corregir desbordamiento de tablas */
.table {
    width: 100%;
    border: 1px solid var(--color-light);
}

/* Alternar color en filas impares */
.table tbody tr:nth-of-type(odd) {
    background-color: #D5F0FD; /* Usa la variable de color que prefieras */
}

/* Asegurar que .accordion-item tenga coherencia visual */
.accordion-item {
    background-color: var(--color-fondo);*/
    border: 1px solid var(--color-light);
}

/* Reparar clases de botones */
.btn-primary {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-dark);
}


/* Estilo personalizado para los indicadores de mercado */
/* Ajuste del contenedor principal */
/* Contenedor principal con Flexbox para alinear horizontalmente */
body .container-fluid .market-indicator-container {
    background-color: #1C2833 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 700px !important;
    margin: 20px auto !important;
}


/* Estilo de los indicadores individuales */
.market-indicator {
    text-align: center !important; /* Centrar el texto */
    margin: 0 10px !important; /* Espacio entre indicadores */
    color: #ffffff !important; /* Texto en blanco */
    min-width: 150px !important; /* Ancho mínimo para cada indicador */
}

/* Estilo para el Título de cada indicador */
.market-indicator h4 {
    font-size: 1.1rem !important; /* Ajuste del tamaño de fuente */
    font-weight: bold !important;
    margin-bottom: 8px !important; /* Espacio debajo del título */
}

/* Estilo para el valor principal */
.market-indicator p {
    font-size: 1.3rem !important; /* Ajuste del tamaño de los valores */
    margin: 0 !important; /* Sin margen */
}

/* Color según tipo de valor (positivo o negativo) */
.market-indicator .positive {
    color: #2ecc71 !important; /* Verde para valores positivos */
}

.market-indicator .negative {
    color: #e74c3c !important; /* Rojo para valores negativos */
}

/* Enlace de navegación */
.market-link {
    text-align: center !important;
    margin-top: 15px !important;
    color: #85C1E9 !important; /* Azul claro */
    text-decoration: none !important; /* Sin subrayado */
}

.market-link:hover {
    color: #AED6F1 !important; /* Azul más claro al pasar el ratón */
}
/************************************************************************************************/
/* Botones del Selector de Gráficos */
.btn-outline-secondary {
        border: 2px solid var(--color-primary);
        background-color: transparent;
        color: var(--color-dark);
        font-weight: bold;
        border-radius: 10px;
        margin: 0 10px;
        padding: 10px 20px;
    }

.btn-outline-secondary:hover {
        background-color: var(--color-hover);
        border-color: var(--color-secondary);
        color: var(--color-dark);
        transition: all 0.3s ease-in-out;
    }

/* Títulos de Secciones */
.section-title {
        color: var(--color-secondary);
        text-align: center;
        font-size: 1.8rem;
        margin-bottom: 15px;
        font-weight: bold;
    }

/* Títulos de Gráficos Individuales */
.grafico-container h4 {
        color: var(color: var(--color-acordeon-0););
        font-size: 1.4rem;
        border-bottom: 1px solid var(--color-secondary);
        padding-bottom: 5px;
        margin-bottom: 20px;
        text-align: center;
        font-weight: bold;
    }

    /* Contenedor de Gráficos */
.grafico-container {
        background-color: #e0e6ed;
        color: var(--color-acordeon-0);
        border: 1px solid var(--color-dark);
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
/********************************************************************************************************************/
/*Analitica*/
.analitica-background {
            /* Definir el fondo con la nube de palabras */
            background-image: url("data:image/png;base64,{{ wordcloud_img }}");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute; /* Ocupa toda la página */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Fondo detrás del contenido */
            opacity: 0.2; /* Baja opacidad */
            filter: blur(5px); /* Desenfoque */
        }

        /* Estilo para el contenedor principal */
.analitica-content {
            position: relative; /* Asegura que el contenido esté encima */
            background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco semi-transparente */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            margin: 40px;
            z-index: 1; /* Contenido por encima del fondo */
        }

        /* Ajuste del texto solo para la sección de analítica */
.analitica-content h4 {
            font-size: 1.6rem;
        }

.analitica-content p {
            font-size: 1.4rem;
        }

.semaforo {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
}
.semaforo.green { background-color: #4CAF50; }
.semaforo.yellow { background-color: #FFD700; }
.semaforo.red { background-color: #FF5A5A; }
.semaforo.gray { background-color: #FF5A5A; }
/*.semaforo.gray { background-color: #BDBDBD; }*/

.oportunidad_grafo {
    color: var(--color-dark) !important;
    /*background-color: rgba(0, 123, 255, 0.1); /* Azul pastel suave */



}
.text-lg {
  font-size: 2.25rem !important; /* ≈ 20px */
}

.text-md {
  font-size: 1.1rem !important; /* ≈ 17.6px */
}

.text-sm {
  font-size: 0.95rem !important; /* ≈ 15.2px */
}