:root {
    --light-gray: #f8f9fa; /* Gris claro */
    --green-primary: #28a745; /* Verde */
    --blue-primary: #007bff; /* Azul */
    --dark-green: #218838; /* Verde más oscuro para hover/active */
    --dark-blue: #0056b3; /* Azul más oscuro para hover/active */
}

body {
    background-color: var(--light-gray);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.navbar {
    background-color: var(--blue-primary) !important;
}

.navbar-brand, .nav-link {
    color: white !important;
}

.navbar-brand:hover, .nav-link:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Botones */
.btn-primary {
    background-color: var(--blue-primary);
    border-color: var(--dark-blue);
}
.btn-primary:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

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

/* Cards y elementos con fondo */
.card, .table {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.table thead {
    background-color: var(--blue-primary);
    color: white;
}

/* Responsividad mejorada para tablas en pantallas pequeñas */
.table-responsive {
    overflow-x: auto;
}

/* Formulario */
.form-control:focus {
    border-color: var(--blue-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Ajustes para la tipografía de títulos */
h1, h2, h3, h4, h5, h6 {
    color: #343a40; /* Un gris oscuro para los títulos */
}

/* Estilos para badges (ej. activo/inactivo) */
.badge-active {
    background-color: var(--green-primary);
    color: white;
}

.badge-inactive {
    background-color: #dc3545; /* Rojo de Bootstrap para inactivo/peligro */
    color: white;
}