/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Verdana', sans-serif; /* Fuente clásica de Windows */
    background-color: #A0C4FF; /* Color de fondo azul claro */
    color: #000; /* Color de texto negro */
}

/* Navbar */
.navbar {
    background-color: #C0C0C0; /* Gris claro para la barra de navegación */
    border: 2px solid #808080; /* Borde gris */
    box-shadow: 2px 2px 5px #000; /* Sombra sutil */
}

.navbar-brand, .nav-link {
    color: #000; /* Texto negro en la navbar */
}

.navbar-nav .nav-link {
    margin: 0 10px; /* Espaciado entre enlaces */
    transition: color 0.3s; /* Transición suave al pasar el ratón */
}

.navbar-nav .nav-link:hover {
    color: #FF8C00; /* Color al pasar el ratón (naranja) */
}

/* Contenedor principal */
.container {
    margin-top: 20px;
    background-color: #FFFFFF; /* Fondo blanco para el contenido */
    border: 2px solid #808080; /* Borde gris */
    border-radius: 0; /* Sin esquinas redondeadas para un aspecto más retro */
    padding: 20px; /* Espaciado interior */
}

/* Títulos */
h2, h3 {
    color: #000080; /* Azul oscuro para títulos */
}

/* Botones */
.btn {
    background-color: #E6E6E6; /* Fondo gris claro */
    color: #000; /* Texto negro */
    border: 1px solid #808080; /* Borde gris */
    border-radius: 0; /* Sin esquinas redondeadas */
}

.btn:hover {
    background-color: #D9D9D9; /* Fondo gris más oscuro al pasar el ratón */
}

/* Tablas */
.table {
    background-color: #FFFFFF; /* Fondo blanco */
    border: 1px solid #808080; /* Borde gris */
}

.table th {
    background-color: #C0C0C0; /* Cabecera de tabla gris claro */
    color: #000;
    border: 1px solid #808080; /* Borde gris */
}

.table td {
    vertical-align: middle;
    border: 1px solid #808080; /* Borde gris */
}

/* Tarjetas (Cards) */
.card {
    border: 1px solid #808080; /* Borde gris */
    border-radius: 0; /* Sin esquinas redondeadas */
    background-color: #E6E6E6; /* Fondo gris claro */
}

.card-header {
    background-color: #C0C0C0; /* Color de cabecera de tarjetas */
    color: #000;
    font-weight: bold;
}

/* Formulario */
.form-group {
    max-width: 50%; /* Maxima ancho del formulario (50% del contenedor) */
    margin-bottom: 15px; /* Espaciado inferior */
}

.form-control {
    border-radius: 0; /* Sin esquinas redondeadas */
    border: 1px solid #808080; /* Borde gris */
}

.form-control:focus {
    border-color: #000080; /* Color del borde al enfocar el input (azul) */
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Sombra azul al enfocar */
}

/* Pie de página */
.footer {
    background-color: #C0C0C0; /* Fondo gris claro para el pie de página */
    color: #000; /* Texto negro */
    padding: 10px 0;
    text-align: center;
    border-top: 2px solid #808080; /* Borde superior gris */
}
.progress {
    height: 30px; /* Aumentar la altura de la barra de progreso */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f0f0f0; /* Color de fondo de la barra */
}

.progress-bar {
    font-weight: bold; /* Texto en negrita */
    text-align: center; /* Centrar texto */
    color: white; /* Color del texto de la barra */
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important; /* Color rojo */
}

.progress-bar.bg-warning {
    background-color: #ffc107 !important; /* Color amarillo */
}

.progress-bar.bg-success {
    background-color: #28a745 !important; /* Color verde */
}

.progress-text {
    display: inline-block; /* Asegurarse de que el texto esté en línea */
    padding-left: 5px; /* Espacio a la izquierda */
    padding-right: 5px; /* Espacio a la derecha */
}