html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Cambiar el color de fondo y texto de la barra de navegación */
.navbar {
    background-color: #b71c1c; /* Color rojo oscuro */
}

    .navbar a {
        color: #ffffff; /* Cambiar color de los enlaces a blanco */
    }

        .navbar a:hover {
            color: #ffeb3b; /* Color amarillo al pasar el ratón */
        }

/* Botones primarios */
.btn-primary {
    background-color: #d32f2f; /* Color rojo */
    border-color: #b71c1c; /* Color de borde */
}

    .btn-primary:hover {
        background-color: #c62828; /* Rojo más oscuro al pasar el ratón */
    }

/* Cambiar color de los encabezados */
h1, h2, h3, h4, h5, h6 {
    color: #d32f2f; /* Cambiar color de encabezados a rojo */
}

/* Estilos de alertas */
.alert-primary {
    background-color: #f44336; /* Color de fondo de las alertas */
    color: white; /* Color del texto en las alertas */
}

/* Cambiar color de enlaces */
a {
    color: #d32f2f; /* Color rojo para enlaces */
}

    a:hover {
        color: #c62828; /* Color rojo más oscuro al pasar el ratón */
    }

/* Otros estilos personalizados */
body {
    background-color: #e6e6fa; /* Fondo claro para el cuerpo */
}

/* Barra de navegación con fondo rojo y texto blanco */
.navbar {
    background-color: #d32f2f; /* Fondo rojo */
}

    .navbar a {
        color: #ffffff; /* Texto blanco */
    }

        .navbar a:hover {
            color: #ffeb3b; /* Amarillo al pasar el ratón */
        }

    /* Cambiar el color del texto de los elementos activos del menú */
    .navbar .navbar-nav .nav-link.active {
        color: #ffffff; /* Mantener texto blanco en el elemento activo */
        background-color: #b71c1c; /* Fondo rojo oscuro para resaltar */
    }

/* Cambiar el color de fondo de la barra de navegación a rojo */
.navbar {
    background-color: #b71c1c; /* Rojo oscuro */
}

    /* Cambiar el color del texto de los elementos del menú a blanco */
    .navbar .navbar-nav .nav-link {
        color: #ffffff; /* Texto en blanco */
    }

        /* Cambiar el color del texto cuando el usuario pasa el ratón por encima */
        .navbar .navbar-nav .nav-link:hover {
            color: #ffeb3b; /* Amarillo al pasar el ratón */
        }

    /* Cambiar el color del texto para el elemento activo del menú */
    .navbar .navbar-nav .active .nav-link {
        color: #ffeb3b; /* Amarillo para el enlace activo */
    }

/* Asegurarse de que el botón "hamburguesa" sea blanco */
.navbar-toggler {
    border-color: #ffffff;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar {
    background-color: #d32f2f !important; /* Forzar color de fondo */
}

.navbar .nav-link {
    color: #ffffff !important; /* Forzar color del texto */
}

.navbar-{
    color: #ffffff !important; /* Forzar color del texto */
}
/* Estilo para el título de la aplicación en la barra de navegación */
.navbar-brand {
    color: #ffeb3b !important; /* Color amarillo */
    font-weight: bold; /* Negrita */
}
/* Estilo para el botón toggle de la barra de navegación */
.navbar-toggler {
    background-color: #ffeb3b; /* Fondo amarillo */
    border: 1px solid #d32f2f; /* Borde rojo */
}

    /* Estilo para las rayas del botón toggle */
    .navbar-toggler:focus {
        outline: none; /* Eliminar el contorno por defecto */
    }

.navbar-toggler-icon {
    background-image: linear-gradient(transparent 33%, #d32f2f 33%, #d32f2f 66%, transparent 66%, transparent); /* Rayas rojas */
}