@font-face {
    font-family: 'Roboto';
    src: url('../../backend/src/certificados/static/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
}


body {
    font-family: 'Roboto', sans-serif;
}


title{
    color: #022861; /*color del titulo*/
    text-align: center;
}

h1{
    color: #022861;
    text-align: center;
    margin-top: 40px; /* Ajusta el margen superior para centrar el título */
}

h3 {
    color: white;
    text-align: center;
    margin-top: 20px; /* Ajusta el margen superior para centrar el subtítulo */
}

.navbar {
    background-color: #022861; /* Azul oscuro */
    color: white;
    width: 100%; /* Ocupar todo el ancho */
    position: fixed; /* Fijar en la parte superior */
    top: 0;
    left: 0;
    z-index: 1000; /* Asegura que esté por encima del resto del contenido */
    display: flex;
    justify-content: center; /* Centrar los elementos del menú */
    padding: 10px 0; /* Reduce el espacio alrededor de la barra */
}

.navbar-item {
    color: #002366; /* Azul oscuro */
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
}

.navbar-item:hover {
    color: white; /* Cambia a blanco al pasar el mouse */
    background-color: #002366; /* Fondo azul oscuro */
}

button {
    background-color: #ffffff; /* Fondo blanco para que contraste */
    border-radius: 5px;
    margin: 0 10px; /* Espacio entre los botones */
    transition: background-color 0.3s ease, color 0.3s ease; /* Efecto de transición suave */
    align-items: center;
}

button:hover{
    background-color: #cccccc; /* Fondo gris claro al hacer hover */
    color: #003366; /* Texto azul oscuro para contrastar */
}

/* Estilo para los elementos del menú */
.navbar-item {
    color:#0741ad;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    background-color: #ffffff; /* Fondo blanco para que contraste */
    border-radius: 5px;
    margin: 0 10px; /* Espacio entre los botones */
    transition: background-color 0.3s ease, color 0.3s ease; /* Efecto de transición suave */
}

/* Cambio de color al pasar el mouse sobre los botones */
.navbar-item:hover {
    background-color: #cccccc; /* Fondo gris claro al hacer hover */
    color: #003366; /* Texto azul oscuro para contrastar */
}

/* Ajuste para dispositivos móviles (si es necesario) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        text-align: center;
    }

    .navbar-item {
        margin-bottom: 10px;
    }
}

/* Contenedor principal */
.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente */
    margin-top: 80px; /* Asegura que el contenido no se oculte debajo de la barra de navegación */
}

/* Secciones */
.section {
    width: 100%;
    max-width: 600px; /* Ajusta el ancho máximo de la sección */
    margin: 0 auto;
    text-align: center; /* Centra el texto dentro de la sección */
}

/* Estilo del título */
.title {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Estilo del campo de entrada */
.input {
    font-size: 1.2rem; /* Tamaño de fuente más grande */
    padding: 10px;
    margin-right: 10px; /* Espacio entre el campo y el botón */
    width: 70%; /* Ajusta el ancho del campo de entrada */
    max-width: 300px; /* Ajusta el ancho máximo del campo de entrada */
}

/* Contenedor del campo de entrada y botón */
.input-container {
    display: flex;
    justify-content: center; /* Centra el contenido del contenedor */
    gap: 10px; /* Espacio entre el campo de entrada y el botón */
    margin-bottom: 20px; /* Espacio debajo del contenedor */
}

/* Estilo del botón */
.button {
    font-size: 1.2rem; /* Tamaño de fuente más grande */
    padding: 10px 20px;
    cursor: pointer;
}

/* Estilo del botón de archivo */
.file-input {
    font-size: 1.2rem; /* Tamaño de fuente del botón */
    padding: 10px 20px;
    cursor: pointer;
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    display: inline-block;
    text-align: center;
}