/* Estilo de la tabla */


th {
    background-color: #eee;
   font-size: 8px;
   font-family: 'Helvetica', sans-serif; /* Usamos Helvetica en las tablas */
}



.mensaje {
    color: blue;
    font-weight: bold;
}

/* Estilo del body */
/* Estilo del body con fondo matizado diagonalmente de azul */


body {
    font-family: 'Helvetica', sans-serif;
    padding: 20px;
    margin: 0px;
    height: 100vh;
    background: url('Iconos/rf_fondo.png') no-repeat center center fixed;
/*   background: linear-gradient(135deg, #34fffc, #70e0e9, #007bff); /* Gradiente suave de turquesa a azul */
/*    background: linear-gradient(135deg, #34fffc 0%, #00c9ff 50%, #007bff 100%); /* Gradiente más suave con stops definidos */
/*background: linear-gradient(135deg, #34fffc 0%, #3effb9 40%, #00c9ff 70%, #007bff 100%);*/ 
/* background: linear-gradient(135deg, #1d4f4d 0%, #3caea3 40%, #58d3b5 75%, #a0f0d0 100%); */




    background-size: cover;
     border-radius: 10px;

}


.fondo-leyenda {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #0849a3; /* Fondo semitransparente */
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-style: italic;
    z-index: 10; /* Para que esté por encima de todo */
}


/* Estio del form ****************** */


form {
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.95); /* Ligera transparencia */
    padding: 20px;
    border-radius: 10px;
    font-family: 'Helvetica', sans-serif;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra suave */
    margin: 20px auto;

}






h1, h2 {
    font-family: 'Helvetica', sans-serif; /* Helvetica también en los encabezados */
}

h2 {
    text-align: center;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: 'Helvetica', sans-serif; /* Helvetica en los inputs */
}

input[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Helvetica', sans-serif; /* Helvetica en el botón */
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

p {
    text-align: center;
    font-family: 'Helvetica', sans-serif;
}

footer {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    color: #888;
    font-family: 'Helvetica', sans-serif;
}

.titulo-menu {
    text-align: center;
    margin-bottom: 6px;
    background-color: transparent;
    font-family: 'Helvetica', sans-serif;
    color: #00185d;

}

.icono-menu {
    width: 40px; /* Tamaño más pequeño para el ícono */
    height: auto;
    margin-bottom: 6px;
    max-width: 100%; /* Asegura que no exceda el tamaño de la pantalla */
    background-color: transparent;
}

.icono-menu-ver {
    width: 50px; /* Tamaño más pequeño para el ícono */
    height: auto;
    margin-bottom: 0px;
    max-width: 100%;
    background-color: transparent;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 18px;
}

/* Media query para pantallas pequeñas como teléfonos */
@media (max-width: 600px) {
    h1 {
        font-size: 20px; /* Reduce el tamaño del título en pantallas pequeñas */
    }

    h2 {
        font-size: 16px; /* Reduce el tamaño del subtítulo */
    }

    .icono-menu {
        width: 35px; /* Ajusta aún más el tamaño en pantallas pequeñas */
    }
    
    .botones button {
        font-size: 14px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icono-boton {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }

    .texto-boton {
        font-size: 14px;
    }
}
    

.botones {
    text-align: center;
    margin-top: 20px;
}


.botones .button:hover {
            background-color: #039e1a;
        }

.botones button {
    display: block;
    width: 90%;
    max-width: 300px;
    margin: 10px auto;
    padding: 15px;
    font-size: 16px;
    font-family: 'Helvetica', sans-serif;
    background-color: #0c4896;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}


.botones .cerrar-sesion {
    background-color: #ff8800 !important; /* Fuerza el color naranjo */
    color: white;
    font-family: 'Helvetica', sans-serif;
}

.botones .cerrar-sesion:hover {
    background-color: #cc6e00 !important; /* Naranjo más oscuro al pasar el mouse */
}


.botones .cancelar {
    background-color: #ff8800 !important; /* Fuerza el color naranjo */
    color: white;
    font-family: 'Helvetica', sans-serif;
}

.botones .cancelar:hover {
    background-color: #cc6e00 !important; /* Naranjo más oscuro al pasar el mouse */
}


.botones .grabar {
    background-color: #04bf65 !important; /* Fuerza el color naranjo */
    color: white;
    font-family: 'Helvetica', sans-serif;
}

.botones .grabar:hover {
    background-color: #036335 !important; /* Naranjo más oscuro al pasar el mouse */
}

table thead th {
    background-color: #003366; /* Azul oscuro */
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
}

/* Bloque para icono de buscar */
.input-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 300px;
}

#clave {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-family: 'Helvetica', sans-serif;
}




/* Estilo para el botón de escanear */
.scan-button {
    background-color: transparent; /* Fondo transparente para el botón */
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 10px; /* Espacio entre el campo de texto y el botón */
}

.scan-button:hover {
    background-color: #f0f0f0; /* Cambio de fondo al pasar el mouse */
}

/* Estilo para la imagen del icono de la cámara */
.scan-icon {
    width: 30px; /* Ajusta el tamaño del icono según tus necesidades */
    height: auto;
}

/* Estilo para el mensaje de error */
.mensaje-error {
    color: red;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}

/* Estilo para los resultados */
.resultado {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Helvetica', sans-serif;
    max-width: 400px; /* Asegura que el ancho sea el mismo que el formulario */
    margin: 20px auto; /* Centra el bloque de resultados */
    text-align: left; /* Alinea el texto dentro del contenedor a la izquierda */
}


.vigente-true {
/*    background-color: #b0ff9c; /* Verde claro */
    background-color: #cffccf; /* Verde claro */

}

.vigente-false {
/*    background-color: #ff785c; /* Rojo suave */
    background-color: #fa9e9e; /* Rojo suave */

    
}

/* Alineación a la izquierda para los párrafos dentro de los resultados */
.resultado p {
    text-align: left;
}

/* Alineación a la izquierda para los títulos dentro de los resultados */
.resultado h3 {
    text-align: left;
}


#textoArchivo {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #555;
}


/* Alineación izquierda para celdas específicas */
.celda-izquierda {
    text-align: left;
    padding-left: 20px; /* Ajustable según cuánto margen quieras */
}

.celda-centro {
    text-align: center;
}

.centrar-select {
    display: block;
    margin: 0 auto; /* Centra horizontalmente dentro de su celda */
    text-align: center; /* Centra el texto dentro del select */
}

input[type="date"],
textarea {
    font-family: 'Helvetica', sans-serif;
}


textarea#modificacion {
    font-family: 'Helvetica', sans-serif;
    font-size: 14px; /* mismo tamaño que el input */
    color: #333; /* tono oscuro para buena lectura */
    line-height: 1.4;
}

.anexo-inactivo {
    background-color: #e0e0e0; /* gris oscuro */
    color: white;
    font-style: italic;
}

/* Estilo del bloque de subida de archivos */
.bloque-subida {
    border: 1px solid #ccc; /* Gris claro igual que los inputs por defecto */
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
    background-color: #fafafa; /* opcional para mejor visibilidad */
}

.bloque-subida label {
    display: block;
    margin-top: 10px;
}

/* Tamaño iconos en botones  */
.icono-boton {
    width: 40px;
    height: 40px;
    vertical-align: middle; 
    margin-right: 15px;
}