.callout {
            padding: 3px;
            margin: 2px 0;
            border: 1px solid #e3e3e3;
            border-left-width: 7px; /* Grosor del borde izquierdo */
            border-radius: 3px;
            background-color: #f8f9fa;
        }
        .callout-primary {
            border-left-color: #007bff; /* Color azul para el borde izquierdo */
            background-color: #cce5ff; /* Fondo azul claro */
            color: #004085; /* Texto azul oscuro */
        }
        .callout-secondary {
            border-left-color: #6c757d; /* Color gris para el borde izquierdo */
            background-color: #e2e3e5; /* Fondo gris claro */
            color: #383d41; /* Texto gris oscuro */
        }
        .callout-success {
            border-left-color: #28a745; /* Color verde para el borde izquierdo */
            background-color: #d4edda; /* Fondo verde claro */
            color: #155724; /* Texto verde oscuro */
        }
        .callout-info {
            border-left-color: #17a2b8; /* Color cian para el borde izquierdo */
            background-color: #d1ecf1; /* Fondo cian claro */
            color: #0c5460; /* Texto cian oscuro */
        }
        .callout-warning {
            border-left-color: #ffc107; /* Color amarillo para el borde izquierdo */
            background-color: #fff3cd; /* Fondo amarillo claro */
            color: #856404; /* Texto amarillo oscuro */
        }
        .callout-danger {
            border-left-color: #dc3545; /* Color rojo para el borde izquierdo */
            background-color: #f8d7da; /* Fondo rojo claro */
            color: #721c24; /* Texto rojo oscuro */
        }
        .nav-link {
            color: black !important; /* Color del texto negro */
        }
        .card-header {
            background-color: transparent !important; /* Fondo transparente */
        }
        .card-footer {
            background-color: transparent !important; /* Fondo transparente */
        }
        .btn-custom-success {
            background-color: #06bf37; /* Color de fondo personalizado */
            color: white; /* Texto blanco */
            border-color: #06bf37; /* Borde del botón */
        }
        .btn-custom-success:hover {
            background-color: rgba(6, 191, 55, 0.5); /* Color opaco similar al estado deshabilitado */
            color: white; /* Texto blanco */
            border-color: rgba(6, 191, 55, 0.5); /* Borde opaco */
        }
        .btn-custom-success:disabled {
            background-color: rgba(6, 191, 55, 0.5); /* Color opaco */
            border-color: rgba(6, 191, 55, 0.5); /* Borde opaco */
            color: white; /* Texto blanco */
            opacity: 0.65; /* Opcional: Ajusta la opacidad del texto */
        }
        .btn-custom-danger {
            background-color: #ed4051; /* Color de fondo personalizado */
            color: white; /* Texto blanco */
            border-color: #ed4051; /* Borde del botón */
        }
        .btn-custom-danger:hover {
            background-color: rgba(237, 64, 81, 0.5); /* Color opaco similar al estado deshabilitado */
            color: white; /* Texto blanco */
            border-color: rgba(237, 64, 81, 0.5); /* Borde opaco */
        }
        .btn-custom-danger:disabled {
            background-color: rgba(237, 64, 81, 0.5); /* Color opaco */
            border-color: rgba(237, 64, 81, 0.5); /* Borde opaco */
            color: white; /* Texto blanco */
            opacity: 0.65; /* Opcional: Ajusta la opacidad del texto */
        }
        .nav-tabs .nav-link.active {
            color: white !important; /* Color del texto en success */
            background-color: #06bf37 !important; /* Fondo success */
            border-color: #06bf37 !important; /* Borde en color success */
        }
        .nav-tabs .nav-link {
            border: 1px solid transparent; /* Bordes por defecto para los nav-link */
        }