body {
    background: linear-gradient(to right, #d9a7c725, #ffb8331f)
}

.fixed-width-150 {
    width: 150px; /* Ancho fijo para th y td */
}
.fixed-width-250 {
    width: 250px; /* Ancho fijo para th y td */
}
.fixed-width-350 {
    width: 350px; /* Ancho fijo para th y td */
}

.fixed-width-450 {
    width: 450px; /* Ancho fijo para th y td */
}
th, td {
    vertical-align: middle; /* Alineación vertical centrada */
  /* Alineación horizontal centrada */
}


    .btn-karasena{
        background-color: #7A4A7F;
        border-color: #7A4A7F;
        color: white; /* Texto inicial blanco */
    }
    
    .btn-karasena:hover {
        background-color: #693b6e; /* Fondo más oscuro en hover */
        border-color: #693b6e;
        color: white; /* Mantén el texto blanco en hover */
    }
    


     /* Danger outline*/
    .btn-karasena-outline {
        background-color:  white;
        border-color:  white;
        color: #693b6e; /* Texto inicial blanco */
    }
    
    .btn-karasena-outline:hover {
        background-color:  white; /* Fondo más oscuro en hover */
        border-color:  white;
        color: #99579d; 
    }



    /* Danger outline*/
    .btn-karasena-danger-outline {
        background-color:  white;
        border-color:  white;
        color: #de445c;/* Texto inicial blanco */
    }
    
    .btn-karasena-danger-outline:hover {
        background-color:  white; /* Fondo más oscuro en hover */
        border-color:  white;
        color:  #f68796; /* Mantén el texto blanco en hover */
    }
    


    /* Danger */
    .btn-karasena-danger{
        background-color:  #ff6336;
        border-color:  #ff6336;
        color: white; /* Texto inicial blanco */
    }
    
    .btn-karasena-danger:hover {
        background-color:  #fc7c59; /* Fondo más oscuro en hover */
        border-color:  #fc7c59; 
        color:   white; /* Mantén el texto blanco en hover */
    }
    
    

      /* Danger */
      .btn-karasena-info{
        background-color:  #7944DE;
        border-color:  #7944DE;
        color: white; /* Texto inicial blanco */
    }
    
    .btn-karasena-info:hover {
        background-color:  #ab8aea; /* Fondo más oscuro en hover */
        border-color:  #ab8aea; 
        color:   white; /* Mantén el texto blanco en hover */
    }


    .btn-karasena-secundary{
        background-color:  #44DEC6;
        border-color:  #44DEC6;
        color: white; /* Texto inicial blanco */
    }
    
    .btn-karasena-secundary:hover {
        background-color:  #83e9d9; /* Fondo más oscuro en hover */
        border-color:  #83e9d9; 
        color:   white; /* Mantén el texto blanco en hover */
    }


    .btn-karasena-warning{
        background-color:  #FFB833;
        border-color:  #FFB833;
        color: #693b6e; /* Texto inicial blanco */
    }
    
    .btn-karasena-warning:hover {
        background-color:  #ffcd70; /* Fondo más oscuro en hover */
        border-color:  #ffcd70; 
        color:   #693b6e; /* Mantén el texto blanco en hover */
    }

    
    .btn-karasena-light {
        background-color: #99579d; /* Fondo más oscuro en hover */
        border-color: #99579d;
        color: white; /* Mantén el texto blanco en hover */
    }
    
    /* Si prefieres cambiar el color del texto al hacer hover */
    .btn-karasena-light:hover {
        background-color: #99579d;
        border-color: #99579d;
        color: #F0E6F6; /* Texto ligeramente más claro en hover */
    }


    .text-karasena {
        color: #6A2C6F; /* Color de texto personalizado */
    }
    
    .text-karasena:hover {
        color: #693b6e; /* Un tono más oscuro en hover */
    }
    

    .sidebar-nav .nav-link {
        color: #6A2C6F; /* Aplica el color a los enlaces */
    }
    
    .sidebar-nav .nav-link i {
        color: #6A2C6F; /* Aplica el color a los íconos dentro de los enlaces */
    }
    
    .sidebar-nav .nav-link:hover {
        color: #cb85cd; /* Aplica el color al enlace cuando se pasa el ratón por encima (hover) */
    }
    
    .sidebar-nav .nav-link:hover i {
        color: #cb85cd;  /* Aplica el color al ícono cuando se pasa el ratón por encima (hover) */
    }
    
    .sidebar-nav .nav-link.active {
        color: #cb85cd;  /* Aplica el color al enlace cuando está seleccionado (activo) */
    }
    
    .sidebar-nav .nav-link.active i {
        color: #cb85cd;  /* Aplica el color al ícono cuando el enlace está seleccionado (activo) */
    }
    
   
    /* Aplica el color personalizado a las pestañas */
.nav-tabs .nav-link {
    color: #6A2C6F; /* Color de texto inicial */
    border-color: #6A2C6F; /* Borde inicial */
}

.nav-tabs .nav-link:hover {
    color: #6A2C6F;  /* Color de texto en hover */
    border-color: #6A2C6F; /* Borde en hover */
}

.nav-tabs .nav-link.active {
    color: #6A2C6F; ;/* Color de texto cuando está activo */
    border-color: #6A2C6F;  /* Borde cuando está activo */
}

.nav-tabs .nav-link.active {
    color: #6A2C6F; ;/* Color de texto cuando está activo */
    border-color: #6A2C6F;  /* Borde cuando está activo */
}



.nav-content {
    color: #6A2C6F; /* Color inicial del texto */

}
/* Estilo base para los enlaces dentro de nav-content */
.nav-content a {
    color: #6A2C6F; /* Color inicial del texto */

}

.nav-content span {
    color: #99579d; /* Color inicial del texto */

}


.nav-content span:hover {
    color: #6A2C6F; /* Color inicial del texto */

}
.nav-content a:hover {
    color: #F0E6F6; /* Color del texto en hover */

}

.nav-content a.active {
    color: #FFFFFF; /* Color del texto cuando está activo */

}

.nav-content i {
    color: #6A2C6F; /* Color de los iconos */
}

.nav-content a:hover i, .nav-content a.active i {
    color: #6A2C6F;/* Color de los iconos en hover o cuando el enlace está activo */
}


/* Estilo para el título principal */
.pagetitle h1 {
    color: #6A2C6F; /* Color del texto del título */
    font-weight: bold; /* Hace que el texto sea más grueso */
    font-size: 24px; /* Tamaño de fuente del título */
    margin-bottom: 10px; /* Espacio debajo del título */
}

/* Estilo para los elementos de la lista del breadcrumb */
.pagetitle nav .breadcrumb-item {
    color: #00ac25; /* Color del texto de los ítems del breadcrumb */
    font-size: 14px; /* Tamaño de fuente de los ítems */
}

/* Estilo para los enlaces dentro del breadcrumb */
.pagetitle nav .breadcrumb-item a {
    color: #cb85cd; /* Color de los enlaces */
    text-decoration: none; /* Quita el subrayado de los enlaces */
}

.pagetitle nav .breadcrumb-item a:hover {
    color: #6A2C6F; /* Color de los enlaces al hacer hover */
    text-decoration: bold; /* Añade subrayado en hover */
}

/* Estilo para el ítem activo del breadcrumb */
.pagetitle nav .breadcrumb-item.active {
    color: #6A2C6F; /* Color del ítem activo (no es un enlace) */
}


/* Cambiar el color del fondo del interruptor cuando está activo (ON) */
.form-switch .form-check-input:checked {
    background-color: #99579d; /* Color personalizado cuando el interruptor está activo */
    border-color: #99579d; /* Color del borde cuando el interruptor está activo */
}

/* Cambiar el color del círculo del interruptor (toggle) */
.form-switch .form-check-input:checked::before {
    background-color: #99579d; /* Color del círculo cuando el interruptor está activo */
}

/* Cambiar el color del fondo del interruptor cuando está desactivado (OFF) */
.form-switch .form-check-input {
    background-color: #dbdadb; /* Color personalizado cuando el interruptor está desactivado */
    border-color: #dbdadb;/* Color del borde cuando el interruptor está desactivado */
}

/* Cambiar el color del círculo del interruptor (toggle) cuando está desactivado */
.form-switch .form-check-input::before {
    background-color: #ffffff; /* Color del círculo cuando el interruptor está desactivado */
}

.form-switch .form-check-input:focus {
    border-color: #ffb4ff; /* Cambia el color del borde cuando está enfocado */
}


.custom-danger {
    color: #ff6336 !important;

}

.custom-warning {
    color: #ffcc00 !important;

}

.custom-success {
    color: #28a745 !important;

}

.custom-secondary {
    color: #6c757d !important;

}


.text-custom-karasena {
    color: #6A2C6F !important;

}


.text-custom-danger {
    color: #ff6336 !important;

}

.text-custom-warning {
    color: #ffcc00 !important;

}

.text-custom-success {
    color: #28a745 !important;

}

.text-custom-secondary {
    color: #2e5a80b2 !important;

}

.text-custom-info {
    color: #5bc0de !important;

}


.badge-custom-info2 {
    color: #fff !important;
    background-color: #6a2c6f9d !important; /* Ajusta el fondo si es necesario */
    border-color: #6a2c6f9d !important;
}

.badge-custom-danger {
    color: #6A2C6F !important;
    background-color: #fd8361 !important; /* Ajusta el fondo si es necesario */
    border-color: #fd8361 !important;
}

.badge-custom-warning {
    color: #6A2C6F;
    background-color: #FFB833 !important; /* Ajusta el fondo si es necesario */
    border-color: #FFB833 !important;
}

.badge-custom-success {
    color: #6A2C6F !important;
    background-color: #28a745 !important; /* Ajusta el fondo si es necesario */
    border-color: #28a745 !important;
}

.badge-custom-secondary {
    color: #FFFFFF !important;
    background-color: #2e5a80b2 !important; /* Ajusta el fondo si es necesario */
    border-color: #2e5a80b2 !important;
}

.badge-custom-info {
    color: #6A2C6F !important;
    background-color: #5bc0de !important; /* Ajusta el fondo si es necesario */
    border-color: #5bc0de !important;
}

.badge-custom-critical {
    color: #FFFFFF !important;           /* Color del texto en negro */
    background-color: #544555 !important;

    border-color: #544555 !important;     
}

.badge-custom-os {
    color: #6A2C6F !important;           /* Color del texto en negro */
    background-color: #14c49e !important;

    border-color: #14c49e !important;     
}

/* Estilo por defecto */
.form-control {
     /* Color base */
    background-color: #f9f0fa; /* Fondo tenue */
}

/* Estilo cuando el input está en focus */
.form-control:focus {
    border-color: #8d438c7a; /* Color más tenue para el foco */
    box-shadow: 0 0 5px rgba(141, 67, 140, 0.5); /* Sombra con el color base más tenue */
    outline: none; /* Eliminar el borde por defecto */
}

/* Ajustes para hover (opcional) */
.form-control:hover {
    background-color: #f1e4f3; /* Fondo más tenue cuando pasas el ratón */
}


a {
    color: #6a2c6f; /* Color base de los enlaces */
}

a:hover {
    color: #ffa600; /* Ajusta el color más tenue de karasena para hover */
}

a.active {
    color: #FFFFFF; /* Color blanco cuando el enlace está activo */
}


.simple-text-karasena {
    color: #6A2C6F; /* Color de texto personalizado */
}


/* progress barr*/
/* Clase personalizada para el nuevo color de la barra de progreso */
.progress-bar.bg-custom-karasena {
    background-color: #6A2C6F; /* Elige el color que prefieras */
}



.bg-custom-critical {
    background-color: rgba(84, 69, 85, 0.7); /* Color #544555 con transparencia */
    color: #FFFFFF; /* Texto blanco */
}

.bg-custom-danger {
    background-color: rgba(253, 131, 97, 0.7); /* Color #fd8361 con transparencia */
    color: #6A2C6F;
}

.bg-custom-warning {
    background-color: rgba(255, 184, 51, 0.7); /* Color #FFB833 con transparencia */
    color: #6A2C6F;
}

.bg-custom-success {
    background-color: rgba(40, 167, 70, 0.7); /* Color #28a745 con transparencia */
    color: #6A2C6F;
}

.bg-custom-secondary {
    background-color: rgba(46, 90, 128, 0.7); /* Color #2e5a80 con transparencia */
    color: #FFFFFF;
}

.bg-custom-info {
    background-color: rgba(91, 192, 222, 0.7); /* Color #5bc0de con transparencia */
    color: #6A2C6F;
}

.bg-custom-os {
    background-color: rgba(20, 196, 158, 0.2); /* Color #14c49e con transparencia */
    color: #6A2C6F;
}


.card-small {
    padding: 0.1rem; /* Reduce el padding general de la tarjeta */
}

.card-small .card-body {
    padding: 0.1rem; /* Reduce el padding interno del cuerpo de la tarjeta */
}

.card-small i {
    font-size: 1.1rem; /* Ajusta el tamaño de los íconos si es necesario */
}

/* ESTILOS DE LAS NAVEGACIONES*/


        .split {
            display: flex;
            flex-direction: row;
            height: 80vh;
            overflow: hidden;
        }
    
        .panel-container {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
    
        .pane {
            overflow-y: auto;
            flex: 1;
            padding: 10px;
        }
        .panel-container h4 {
            margin-left: 10px; /* Ajusta este valor según el resultado que desees */
        }
        
        .divider {
            background: #ccc;
            width: 2px;
            cursor: ew-resize;
        }
    
        .list-group-item.active-control {
            background-color: #aa2f6f2c;
            color: #6a2c6f;
            font-weight: bold;
        }
    
        /* Secciones en negrita */
        .controlgroup {
            font-weight: bold;
        }
    
        /* Subsecciones en negrita */
        .subcontrolgroup {
            font-weight: bold;
            padding-left: 20px; /* Añadimos un poco de sangría para diferenciarla de la sección */
        }
    
        /* Controles con sangría */
        .control {
            padding-left: 40px; /* Mayor sangría para distinguir los controles */
        }
        .evidences-box {
            background-color: #f9f9f9; /* Color de fondo suave y armonioso */
            border: 1px solid #ddd;   /* Borde ligero para separación */
            border-radius: 8px;       /* Esquinas redondeadas */
            padding: 15px;            /* Espaciado interno */
            font-size: 14px;          /* Tamaño de fuente ajustado */
            color: #333;              /* Texto en un gris oscuro para buena legibilidad */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera para profundidad */
        }

        .title-box {
            background-color: #f8f9fa; /* Fondo claro */
            border: 1px solid #ddd;    /* Borde sutil */
            border-radius: 8px;        /* Bordes redondeados */
            padding: 15px;             /* Espaciado interno */
            margin-bottom: 20px;       /* Espaciado inferior */
            margin: auto;              /* Centrado horizontal */
            width: calc(100% - 20px);  /* Ocupa el 100% menos 20px */
            max-width: 1200px;         /* Ancho máximo opcional */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0); /* Sombra ligera */
        /* Centra el texto dentro del cuadro */
        }
        
    
        .title-text {
            margin: 0;                 /* Elimina márgenes del título */
            color: #6a2c6f;            /* Color del texto acorde con tu tema */
            font-weight: bold;         /* Título en negrita */
            font-size: 1.5rem;         /* Tamaño de fuente */
            text-align: center;        /* Centrar texto */
        }
        

        .title-text-evidencias {
            margin: 0;                 /* Elimina márgenes del título */
            color: #6a2c6f;            /* Color del texto acorde con tu tema */
            font-weight: bold;         /* Título en negrita */
            font-size: 1.1rem;         /* Tamaño de fuente */
           /* Centrar texto */
        }


.th-control    { width: 250px; }
.th-control2    { width: 350px; }
.th-measure    { width: 450px; }
.th-status     { width: 120px; }
.th-duedate    { width: 160px; }
.th-completed  { width: 160px; }
.th-accion  { width: 50px; }
.th-accion-2  { width: 150px; }
.th-accion-3  { width: 200px; }
.th-progress  { width: 150px; }
.th-select  { width: 20px; }
.th-amenazas    { width: 450px; }
.th-activo    { width: 350px; }
.th-indicador    { width: 100px; }
.th-propietario    { width: 150px; }



*{box-sizing:border-box;margin:0}
.split{
  display:flex;
  width:100%;
  /*height:70vh;           /* tu alto */
  min-width:600px;
}
.panel-container{
    flex: 1 1 0;        /* anchura gobernada SOLO por width en píxeles */
  min-width:120px;
  overflow:auto;

}
.divider{
  flex:0 0 8px;          /* el gutter también es un flex-item */
  cursor:col-resize;
  background:#eee;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
}
.divider:hover{background:#ccc}


.ps-2 pre {
    background: #23272e;       /* Fondo negro-azulado, puedes usar #000 para negro puro */
    color: #f8f8f2;            /* Blanco hueso (puedes usar #fff para blanco puro) */
    border-radius: 6px;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
    font-size: 1em;
    margin-bottom: 1em;
    box-sizing: border-box;
  }
  
  .ps-2 code {
    color: inherit;
    background: none;
    font-family: 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'monospace';
    font-size: inherit;
  }
  
  



.custom-border {
    border: 1px solid #d3d3d3;  /* Gris claro muy fino */
    padding: 10px;  /* Añadir padding adicional */
    border-radius: 8px;  /* Esquinas redondeadas */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Sombra suave */
    transition: box-shadow 0.3s ease;  /* Animación suave para la sombra */
}

/* Efecto cuando el campo está enfocado */
.custom-border:focus-within {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  /* Aumentar la sombra cuando se enfoca el campo */
}

.bg-soft-gray {
    background:#bd92c211;
    border: 1px solid #d3d3d3;  /* Puedes ajustar a un gris más claro o más oscuro si lo prefieres */
}


    /* Cambiar color del puntero del slider (thumb) */
    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 10px;
        background: #ddd; /* Color del track */
        border-radius: 5px;
        outline: none;
    }
    
    /* Puntero (thumb) en Webkit (Chrome, Safari) */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #693b6e; /* Nuevo color del puntero (gris) */
        border-radius: 50%;
        cursor: pointer;
    }
    
    /* Puntero (thumb) en Firefox */
    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #693b6e; /* Nuevo color del puntero (gris) */
        border-radius: 50%;
        cursor: pointer;
    }
    
    /* Track en Firefox */
    input[type="range"]::-moz-range-track {
        background: #693b6e2d; /* Color del track */
        border-radius: 5px;
        height: 10px;
    }


    .select2-container--bootstrap4 .select2-selection--single {
        height: calc(2.5rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        border-radius: .375rem;
        border: 1px solid #ced4da;
    }