@font-face {
	font-family: 'D-DINExp';
	src: url('../Fonts/D-DINExp.otf');
} 
@font-face {
	font-family: 'D-DINExp-Bold';
	src: url('../Fonts/D-DINExp-Bold.otf');
}
@font-face {
	font-family: 'D-DIN-PRO-400-Regular';
	src: url('../Fonts/D-DIN-PRO-400-Regular.otf');
}
@font-face {
	font-family: 'D-DIN-PRO-900-Heavy';
	src: url('../Fonts/D-DIN-PRO-900-Heavy.otf');
}
@font-face {
	font-family: 'D-DIN-PRO-700-Bold';
	src: url('../Fonts/D-DIN-PRO-700-Bold.otf');
}
@font-face {
	font-family: 'HighVoltage Rough';
	src: url('../Fonts/HighVoltage Rough.ttf');
}
@font-face {
	font-family: 'MyriadPro-Regular';
	src: url('../Fonts/MyriadPro-Regular.otf');
}
body {

	font-family: "MyriadPro-Regular", sans-serif;

}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wrapper {
    flex: 1;
}
.opciones-menu {
	color:#222654; text-decoration:none;
}
.opciones-menu:hover {
	color:#222654; text-decoration: underline;
	
}
.mio-4 {
	width: 27% !important;
}
.logo-cabecera {
	max-width: 15% !important;
	width: 15% !important;
}
.logo-cabecera img{
	max-width: 15% !important;
	width: 15% !important;
}
.simovil { display:none;}
.fondo-seccion3 {
	font-family: 'D-DIN-PRO-400-Regular', sans-serif;
	color: #0C4890;
  background-image: url("../images/fondo_seccion3.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100%,100%;	
}
.footer {
	font-family: 'D-DIN-PRO-400-Regular', sans-serif !important;
    background: #222654 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 10px 0 10px 10px !important;
    width: 100% !important;
    margin: 0Px !important;
}
.imagen-footer {
	width:60%; display: block;
}
.footer a{ color: #fff; }
h1 {
	font-family: 'HighVoltage Rough', sans-serif;
	color: #222654;
}
h3 {
	font-family: 'HighVoltage Rough', sans-serif;
	color: #222654;
}
p {
	font-family: 'D-DIN-PRO-400-Regular', sans-serif;
	color: #222654;
}
/* =========================================
   1. SCROLLBARS (Barras de desplazamiento)
   ========================================= */
/* Para navegadores basados en WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;  /* Scroll vertical más fino */
    height: 6px; /* Scroll horizontal más fino */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Fondo del carril claro */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #222654; /* El azul oscuro corporativo */
    border-radius: 10px; /* Redondeado para que parezca moderno */
}

::-webkit-scrollbar-thumb:hover {
    background: #181a3d; /* Un tono un poco más oscuro al pasar el ratón */
}

/* Para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #222654 #f1f1f1;
}
@media (max-width: 900px) {
	h1 {font-size: 1.5rem;}
	.notablet{ display:none;}
}
@media (max-width: 600px) {
	h1 {font-size: 1.5rem;}
	.nomovil { display:none;}
	.simovil { display:block;}
	.logo-cabecera {
		max-width:45% !important;
		width:45% !important;
	}	
	.logo-cabecera img{
		max-width:45% !important;
		width:45% !important;
	}	
	.mio-4 {
		width: 100% !important;
	}	
	.contenedor-footer {text-align: center !important;}
	.imagen-footer {
		width:20%; display: inline-block;text-align: center !important;
	}	
}
/* =========================================
   2. MODALES
   ========================================= */
.modal-content {
    background-color: #222654 !important;
    color: #ffffff; /* Pasamos el texto a blanco para que se lea bien sobre el fondo oscuro */
    border-radius: 16px !important; /* Esquinas redondeadas del contenedor */
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra elegante */
}

/* Ajustar los bordes de la cabecera y el pie del modal para que no desentonen */
.modal-header, .modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Forzar que los textos que antes eran negros o azules ahora sean blancos o amarillos */
.modal-content h1, 
.modal-content h2, 
.modal-content h3, 
.modal-content h4, 
.modal-content h5, 
.modal-content h6, 
.modal-content .text-dark,
.modal-content .text-primary {
    color: #ffffff !important;
}

.modal-header {
    background-color: transparent !important; /* Quitamos el fondo anterior de las cabeceras */
}

/* =========================================
   3. INPUTS (Campos a rellenar)
   ========================================= */
.form-control, .form-select {
    border-radius: 0 !important; /* Esquinas totalmente cuadradas */
    border: 1px solid #ced4da;
    font-family: 'D-DIN-PRO-400-Regular', sans-serif !important;
}

/* Asegurar que el texto que escribes dentro del input se vea oscuro (por si hereda el blanco del modal) */
.form-control {
    color: #212529 !important;
}

/* Ajuste para los grupos de inputs (como el del ojo de la contraseña) para que sean cuadrados */
.input-group > .form-control,
.input-group > .btn {
    border-radius: 0 !important;
}

/* =========================================
   4. BOTONES
   ========================================= */
/* Aplicamos a todos los botones para unificar la marca corporativa */
.btn {
    border-radius: 50px !important; /* Esquinas en semicírculo (tipo píldora) */
    background-color: #fdc12d !important;
    color: #222654 !important;
    border: none !important;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease; /* Transición suave al pasar el ratón */
}
/* Efecto hover (cuando pasas el ratón por encima) */
.btn:hover {
    background-color: #e5ad28 !important; /* Un amarillo un poco más oscuro */
    transform: translateY(-2px); /* Pequeño efecto de elevación 3D */
    box-shadow: 0 4px 10px rgba(253, 193, 45, 0.3);
}

.btn-primary {
	border-radius: 5px !important;
    background-color: #222654 !important;
    color: #fff !important;	
}
.bootbox-accept {
    border-radius: 50px !important; /* Esquinas en semicírculo (tipo píldora) */
    background-color: #fdc12d !important;
    color: #222654 !important;
    border: none !important;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease; /* Transición suave al pasar el ratón */
}
.bootbox-accept:hover {
    background-color: #e5ad28 !important; /* Un amarillo un poco más oscuro */
    transform: translateY(-2px); /* Pequeño efecto de elevación 3D */
    box-shadow: 0 4px 10px rgba(253, 193, 45, 0.3);
}
/* =========================================
   6. BOTÓN DE CERRAR MODAL (Flotante)
   ========================================= */

/* 1. Es vital que el modal permita que elementos sobresalgan de él */
.modal-content {
    position: relative;
    overflow: visible !important; 
}

/* 2. El diseño del botón flotante */
.btn-close {
    position: absolute !important;
    top: -15px !important;   /* Lo sube la mitad de su tamaño hacia arriba */
    right: -15px !important; /* Lo saca la mitad de su tamaño hacia la derecha */
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    
    background-color: #ffffff !important; /* Fondo blanco para que la X azul destaque */
    border: 2px solid #222654 !important; /* Borde color corporativo */
    border-radius: 50% !important; /* Círculo perfecto */
    opacity: 1 !important; /* Quitamos la transparencia por defecto de Bootstrap */
    z-index: 1060 !important; /* Nos aseguramos de que esté por encima de todo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Sombra para que flote visualmente */
    
    /* Forzamos que anule cualquier clase como 'btn-close-white' que tuvieras en el HTML */
    filter: none !important;

    /* 3. Inyectamos la 'X' exactamente con el código de color #222654 (%23222654 en el SVG) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222654'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-size: 50% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    transition: transform 0.2s ease !important; /* Para hacer una animación fluida */
}

/* Efecto al pasar el ratón */
.btn-close:hover {
    transform: scale(1.15) !important; /* Crece un poquito para dar feedback de que es pulsable */
}

.btn-file-custom { cursor: pointer; }
placeholder {
	font-family: 'D-DIN-PRO-400-Regular', sans-serif;
}
#buscar::placeholder {
    color: #fff !important; /* Pon el color que necesites (ej. tu amarillo corporativo) */
    opacity: 1 !important;     /* Truco vital para Bootstrap */
}
/* =========================================
   5. CHECKBOXES PERSONALIZADOS
   ========================================= */

/* 1. Doblar el tamaño del checkbox */
.form-check-input {
    width: 2em !important;
    height: 2em !important;
    margin-top: 0 !important; /* Reseteamos el margen para poder alinearlo bien */
    cursor: pointer;
}

/* 2. Alinear el texto con el nuevo tamaño gigante */
.form-check-label {
    margin-left: 0.5rem; /* Separación entre el checkbox y la letra */
    padding-top: 0.35rem; /* Bajamos un poco el texto para que quede centrado verticalmente */
    cursor: pointer;
}

/* 3. Cambiar el color al marcarlo (Fondo y Borde) */
.form-check-input:checked {
    background-color: #222654 !important;
    border-color: #222654 !important;
}

/* 4. Cambiar el halo de luz (Focus) que sale al hacer clic */
.form-check-input:focus {
    border-color: #222654 !important;
    /* Creamos una sombra con tu color corporativo pero al 25% de opacidad */
    box-shadow: 0 0 0 0.25rem rgba(34, 38, 84, 0.25) !important; 
}
/* Estilos personalizados para tu carrusel */
    .seccion-carrusel {
        background-color: #fdc12d;
        padding: 60px 0; /* Espacio arriba y abajo */
    }
    .swiper-slide img {
        height: 300px; /* Altura fija para que todas las fotos queden alineadas */
        object-fit: cover; /* Evita que las fotos se deformen */
        border-radius: 12px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }
    
    /* Colorear las flechas con tu azul corporativo */
    .swiper-button-next, .swiper-button-prev {
        color: #222654 !important;
        background-color: rgba(255, 255, 255, 0.8); /* Círculo blanco semitransparente de fondo */
        width: 45px !important;
        height: 45px !important;
        border-radius: 50%;
    }
    .swiper-button-next::after, .swiper-button-prev::after {
        font-size: 20px !important; /* Tamaño de la flecha */
        font-weight: bold;
    }
    
/* Centramos el contenido dentro de cada slide */
.miCarruselMultiple .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; 
}

/* Controlamos el tamaño máximo y la proporción de la imagen */
.miCarruselMultiple .swiper-slide img {
    width: 100%;
    /* Pon un límite de altura para que en PC no se salgan de la pantalla */
    max-height: 450px; 
    
    /* EL TRUCO ESTÁ AQUÍ. Elige una de las dos opciones: */
    
    /* Opción A: object-fit: contain; -> Muestra la imagen 100% completa siempre, pero puede dejar bordes vacíos a los lados si la proporción no cuadra. */
    object-fit: contain; 
    
    /* Opción B (Más usada): object-fit: cover; -> Rellena todo el cuadro sin deformar la imagen, aunque puede recortar un poquito los bordes superior/inferior. */
    /* object-fit: cover; */
    
    border-radius: 10px; /* Opcional: le da un toque suave a los bordes */
} 
.swiper-backface-hidden .swiper-slide {
  background: #fff;
  border-radius: 10px;
}
/* =========================================
   7. BARRA DE NAVEGACIÓN SUPERIOR (Navbar)
   ========================================= */

/* Color del texto de los enlaces y del logotipo/marca */
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-brand,
.navbar-light .navbar-text {
    color: #222654 !important;
    font-weight: 500;
}

/* Efecto al pasar el ratón por encima de los enlaces y enlaces activos */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
    color: #fdc12d !important; /* Tu amarillo corporativo para destacar */
}

/* Cambiar el color de los iconos de FontAwesome dentro de la navbar */
.navbar-light .navbar-nav .nav-link i,
.navbar-light .navbar-brand i {
    color: #222654 !important;
}

.navbar-light .navbar-nav .nav-link:hover i {
    color: #fdc12d !important;
}

/* Borde del botón del menú en móviles */
.navbar-light .navbar-toggler {
    border-color: rgba(34, 38, 84, 0.2) !important;
}
/* Borde inferior sólido corporativo (Sin difuminar) */
.navbar {
    border-bottom: 3px solid #222654 !important;
}
/* =========================================
   8. TABLAS CORPORATIVAS (Alternancia de color)
   ========================================= */

/* 1. Color de las líneas separadoras (Verticales y horizontales) */
.tabla-hella, 
.tabla-hella th, 
.tabla-hella td {
    border: 1px solid #222654 !important;
}

/* 2. Color general del texto de los datos en azul corporativo */
.tabla-hella tbody td {
    color: #222654 !important;
}

/* Forzar que los textos pequeños e iconos también sean azules (anulando el text-muted de Bootstrap) */
.tabla-hella tbody td small,
.tabla-hella tbody td .text-muted,
.tabla-hella tbody td i {
    color: #222654 !important;
    opacity: 0.9; /* Le damos un pelín de transparencia para que parezca "muted" pero en azul */
}

/* 3. Filas Impares (Fondo Amarillo) */
.tabla-hella tbody tr:nth-child(odd) td {
    background-color: #fdc12d !important;
}

/* 4. Filas Pares (Fondo Gris) */
.tabla-hella tbody tr:nth-child(even) td {
    background-color: #9092a9 !important;
}
/* Caja con scroll vertical automático */
.caja-scroll {
    max-height: 300px; /* Cambia este 300px por la altura que necesites */
    overflow-y: auto;  /* Añade la barra vertical SOLO si es necesario */
    overflow-x: hidden; /* Oculta la barra horizontal por si acaso */
}