@font-face {
	font-family: 'PDiversaRegular';
	src: url('../fuentes/DiversaRegular.ttf');
}
@font-face {
	font-family: 'HeinekenSerif18-Bold';
	src: url('../fuentes/HeinekenSerif18-Bold.otf');
}
@font-face {
	font-family: 'HeinekenSerif18-ExtraBold';
	src: url('../fuentes/HeinekenSerif18-ExtraBold.otf');
}
@font-face {
	font-family: 'HeinekenSerif18-Medium';
	src: url('../fuentes/HeinekenSerif18-Medium.otf');
}
@font-face {
	font-family: 'HeinekenSerif18-Regular';
	src: url('../fuentes/HeinekenSerif18-Regular.otf');
}
@font-face {
	font-family: 'hesanreg';
	src: url('../fuentes/hesanreg.ttf');
}
@font-face {
	font-family: 'Gobold-Light';
	src: url('../fuentes/Gobold-Light.otf');
}
@font-face {
	font-family: 'Gobold-Bold';
	src: url('../fuentes/Gobold-Bold.otf');
}
@font-face {
	font-family: 'Gobold_Thin';
	src: url('../fuentes/Gobold_Thin.ttf');
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body {
	font-family: 'HeinekenSerif18-Regular';
	background-size: cover; background-position: center;background-image: url('../images/fondo_h.jpg');
	min-height: 100vh;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	margin: 0;
	overflow: auto;	
	color: #ffffff;
}
.wrapper {
    flex: 1;
}
.header {
    padding: 10px 0;
    width: 100%;
    margin: 0Px;
}
.footer {
    padding: 10px 0;
    width: 100%;
    margin: 0Px;
}
.btn-validar {
	font-family: 'hesanreg';
	border-radius: 0Px;
	color: #002a0e;
	background: #fff;
}
.btn-validar:hover {
	border-radius: 0Px;
	color: #fff;
	background: #002a0e;
	border-color: #fff;
}
.btn-validar-cruz {
	font-family: 'hesanreg';
	border-radius: 0Px;
	color: #fff;
	background: #d92224;
}
.btn-validar-cruz:hover {
	border-radius: 0Px;
	color: #fff;
	background: #002a0e;
	border-color: #d92224;
}       
input[type='text'], input[type='email'], input[type='date'], input[type='number'], input[type='password']{
    font-family: 'hesanreg';
	border-radius: 0Px !important;
	color: #FFF !important;
	background: transparent !important;
}
#selectJefatura {
    font-family: 'hesanreg' !important;
    border-radius: 0px !important;
    background-color: transparent !important;
    color: white !important;
    
    /* Cambiamos la flecha por una versión blanca */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    
    /* --- NUEVO: Control de la flecha --- */
    background-repeat: no-repeat !important; /* Evita que se multiplique */
    background-position: right 0.75rem center !important; /* La empuja a la derecha y la centra verticalmente */
    background-size: 16px 12px !important; /* Tamaño estándar de la flecha */
    padding-right: 2.25rem !important; /* Deja un margen para que el texto largo no pise la flecha */
    
    appearance: none !important; /* Oculta la flecha fea por defecto del navegador */
    -webkit-appearance: none !important; /* Para Safari y Chrome antiguos */
    /* ----------------------------------- */
    
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Cambiar el color de las opciones (si no, al abrirlo se verían blancas sobre fondo blanco) */
#selectJefatura option {
    font-family: 'hesanreg' !important;
    background-color: #333 !important;
    color: white !important;
}
select {
    font-family: 'hesanreg' !important;
    border-radius: 0px !important;
    background-color: transparent !important;
    color: white !important;
    
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  
    background-repeat: no-repeat !important; /* Evita que se multiplique */
    background-position: right 0.75rem center !important; /* La empuja a la derecha y la centra verticalmente */
    background-size: 16px 12px !important; /* Tamaño estándar de la flecha */
    padding-right: 2.25rem !important; /* Deja un margen para que el texto largo no pise la flecha */
    
    appearance: none !important; /* Oculta la flecha fea por defecto del navegador */
    -webkit-appearance: none !important; /* Para Safari y Chrome antiguos */
    /* ----------------------------------- */
    
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Cambiar el color de las opciones */
select option {
    font-family: 'hesanreg' !important;
    background-color: #333 !important;
    color: white !important;
}
/* Apuntamos a la clase de tu input y a su placeholder */
.input-email::placeholder {
	font-size: 0.8rem;
    color: white !important;
    text-align: left !important;
    opacity: 1; /* ¡Muy importante para Firefox! */
}
.formador::placeholder {
	font-size: 0.8rem;
    color: white !important;
    text-align: left !important;
    opacity: 1; /* ¡Muy importante para Firefox! */
}
/* 1. Forzar el borde en los 4 lados para TODOS los campos de formulario */
.form-control, 
input[type='text'], 
input[type='email'], 
input[type='date'], 
input[type='password'], 
input[type='tel'],
select {
	font-family: 'hesanreg' !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Borde uniforme */
    border-radius: 0px !important;
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important; /* Fundamental: evita que sombras nativas tapen el borde */
    outline: none !important;
}

/* 2. Efecto al hacer clic dentro del campo (Focus) */
.form-control:focus, 
select:focus {
    border: 1px solid #ffffff !important; /* El borde se vuelve blanco sólido al escribir */
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 3. Corrección específica si usas input-group (ej: el ojito de la contraseña) */
.input-group .form-control {
    border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Arreglo para el botón del ojito de la contraseña para que encaje con el nuevo borde */
.input-group .btn-white {
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-left: none !important; /* Quitamos el izquierdo del botón para fusionarlo con el input */
}
/* Si quieres asegurarte de que funcione en navegadores más antiguos, puedes añadir estos prefijos: */
.input-emailinput::-webkit-input-placeholder { color: white !important; }
.input-emailinput:-ms-input-placeholder { color: white !important; }
.formador::-webkit-input-placeholder { color: white !important; }
.formador:-ms-input-placeholder { color: white !important; }
/* Contenedor principal del modal (fondo y texto blanco) */
.modal-imagen-fondo .modal-content {
    background: url('../images/fondo_h.jpg') no-repeat center center !important;
    background-size: cover !important;
    border: none !important;    
    color: #ffffff !important; /* Texto general en blanco */
    border: none !important; /* Quitamos el borde por defecto del modal */
}

/* Forzar que las etiquetas del formulario sean blancas */
.modal-imagen-fondo .form-label {
    color: #ffffff !important;
}

/* Quitar las líneas de separación del header y el footer */
.modal-imagen-fondo .modal-header,
.modal-imagen-fondo .modal-footer {
    border: none !important !important;
}

/* Volver la "X" de cerrar de color blanco (Filtro para el SVG de Bootstrap 5) */
.modal-imagen-fondo .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;
}
.modal-imagen-fondo .btn-close:hover {
    opacity: 1 !important;
}

/* Estilo personalizado para los botones del footer */
.modal-imagen-fondo .modal-footer .btn {
    border-radius: 0px !important;
    color: #002d0e !important;
    background: #ffffff !important;
    border: none !important;
    font-weight: bold;
}

/* Pequeño efecto al pasar el ratón por los botones */
.modal-imagen-fondo .modal-footer .btn:hover {
    background: #e2e2e2 !important;
}
/* Quita la línea de abajo de la cabecera */
.modal-imagen-fondo .modal-header {
    border-bottom: none !important;
}

/* Quita la línea de arriba del pie de página */
.modal-imagen-fondo .modal-footer {
    border-top: none !important;
}
.modal-content {
    background: url('../images/fondo_h.jpg') no-repeat center center !important;
    background-size: cover !important;
    border: none !important;    
    color: #ffffff !important; /* Texto general en blanco */
    border: none !important; /* Quitamos el borde por defecto del modal */
}

/* Forzar que las etiquetas del formulario sean blancas */
.form-label {
    color: #ffffff !important;
}

/* Quitar las líneas de separación del header y el footer */
.modal-header,
.modal-footer {
    border: none !important !important;
}

/* Volver la "X" de cerrar de color blanco (Filtro para el SVG de Bootstrap 5) */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;
}
.btn-close:hover {
    opacity: 1 !important;
}

/* Estilo personalizado para los botones del footer */
.modal-footer .btn {
    border-radius: 0px !important;
    color: #002d0e !important;
    background: #ffffff !important;
    border: none !important;
    font-weight: bold;
}

/* Pequeño efecto al pasar el ratón por los botones */
.modal-footer .btn:hover {
    background: #e2e2e2 !important;
}
/* Quita la línea de abajo de la cabecera */
.modal-header {
    border-bottom: none !important;
}

/* Quita la línea de arriba del pie de página */
.modal-footer {
    border-top: none !important;
}
/* 1. Aplicar a todos los checkboxes por defecto */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none; /* Para Safari */
    
    /* Doble de tamaño */
    width: 30px;
    height: 30px;
    
    /* Borde blanco y fondo transparente al inicio */
    border: 2px solid #ffffff;
    background-color: transparent;
    
    /* Esquinas totalmente cuadradas */
    border-radius: 0px; 
    
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
    vertical-align: middle; 
    margin: 0;
}

/* 2. Cuando el usuario hace clic (Fondo blanco) */
input[type="checkbox"]:checked {
    background-color: #ffffff;
    border-color: #ffffff;
}

/* 3. Dibujamos la palomita (Tick) negra en el centro */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 16px;
    border: solid #000000;
    border-width: 0 3px 3px 0;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
input[type="date"] {
    color-scheme: dark; /* Esto hace que el icono del calendario se vuelva blanco en Chrome y Firefox */
}
        .opcion-btn {
        	font-family: 'hesanreg';
            border: 2px solid rgba(255,255,255,0.5);
            background: transparent;
            color: #fff;
            font-size: 1.2rem;
            font-weight: normal;
            border-radius: 0;
            padding: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
            transition: all 0.2s;
        }
        .opcion-btn.seleccionada { background: #fff; color: #b20000; border-color: #fff; transform: scale(1.02); }
        
        .btn-seguir { border: 2px solid #fff; background: transparent; color: #fff; border-radius: 50px; padding: 10px 40px; font-weight: bold; letter-spacing: 2px; }
        .btn-seguir:hover:not(:disabled) { background: #fff; color: #b20000; }
        .btn-seguir:disabled { opacity: 0.3; cursor: not-allowed; }