/* ACTUALIZADO FARCOS (16/09/2024) */
/* Estilos propios del proyecto */


/******************************************************************************************/
/***********************************HTML, BODY Y BÁSICOS***********************************/
/******************************************************************************************/
html, body {
    font-size: 13px;
    font-family:  "Red Hat Display", sans-serif;
    font-weight: 500;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;    
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: url("../../images/fondo.png");
    background-repeat: repeat; /* mosaico */
}


::placeholder { font-style: italic; }
p { font-size: 12px;
    color:black;
}

.btn-default, .btn-default:link, .btn-default:visited, .btn-default:focus {
    background-color: var(--colorPrincipal);
    color: #FFFFFF;
    padding: 7px 25px;
}



/******************************************************************************************/
/*********************************************
********************************************/
/******************************************************************************************/
.h1, h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4.85rem); }
.h_2, h_2 { font-size: 3rem; }
.h2, h2 { font-size: clamp(2.2rem, 2rem + 3vw, 3rem); }
.h3, h3 { font-size: 2.5rem; }
.h4, h4 { font-size: 4rem; }
.h5, h5 { font-size: 1rem; }

/******************************************************************************************/
/****************************************COLORES*******************************************/
/******************************************************************************************/
/*DEFINICIÓN DE COLORES*/
:root {
    --colorPrincipal: #FD8204; /*Naranaja*/
    --colorSecundario: #002D74; /*Azul*/
    --colorAccent: #F1E916; /*Amarillo*/
    --colorGris: #F2EFEA; /*Gris claro fondo*/
    --colorGrisOscuro: #343F44;
}
.colorPrincipal { color: var(--colorPrincipal) !important; }
.colorSecundario { color: var(--colorSecundario) !important; }
.colorAccent { color: var(--colorAccent) !important; }
.colorGris { color: var(--colorGris) !important; }
.colorGrisOscuro { color: var(--colorGrisOscuro) !important; }

/*TEXTOS*/
.text-principal {color: var(--colorPrincipal)  !important;}
.text-secundario {color: var(--colorSecundario) !important;}
.text-accent {color: var(--colorAccent) !important;}
.text-gris {color: var(--colorGris) !important;}
.text-grisOscuro {color: var(--colorGrisOscuro) !important;}
.text-error { color: red !important; }

/*BACKGROUNDS*/
.bg-Secundario {background-color:var(--colorSecundario) !important; }
.bg-Principal {background-color: var(--colorPrincipal) !important; }
.bg-gris { background-color: var(--colorGris) !important; }
.bg-grisOscuro {background-color: var(--colorGrisOscuro) !important;}
.bg-Accent { background-color: var(--colorAccent) !important; }

.border-Principal { border-color:  var(--colorPrincipal) !important;

}

/******************************************************************************************/
/****************************************ENLACES*******************************************/
/******************************************************************************************/
a { color: var(--colorPrincipal);  background-color: transparent; transition: color 0.3s ease;}
a:hover { opacity: 0.6; text-decoration: none; color:var(--colorPrincipal); }






/******************************************************************************************/
/****************************************BOTONES*******************************************/
/******************************************************************************************/
.btn:hover { color: #FFFFFF !important; opacity: 0.8; }
.btn:focus { outline: none !important; box-shadow: none !important; }

.btn:disabled {
    pointer-events: none; /* Desactiva la interacción del mouse */
    background-color: #ccc; /* Cambia el color de fondo cuando el botón está deshabilitado */
    color: #666; /* Cambia el color del texto */
    cursor: not-allowed; /* Cambia el cursor a 'no permitido' */
}

    .btn:disabled:hover {
        background-color: #ccc; /* Mantiene el fondo sin cambios en el hover cuando está deshabilitado */
    }

.btn-naranja {

    background-color: var(--colorPrincipal) !important;
    font-family: "Red Hat Display", Sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 1px;
    border-radius: 50px 50px 50px 50px;

}

.btn-secundario {

    background-color: var(--colorSecundario) !important;
    font-family: "Red Hat Display", Sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 1px;
    border-radius: 50px 50px 50px 50px;
    padding: 10px 30px 10px 30px;
    color: white;
}


.btn-outline-Secundario {
    --bs-btn-color: var(--colorSecundario) !important;
    --bs-btn-border-color: var(--colorSecundario) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg:var(--colorSecundario) !important;
    --bs-btn-hover-border-color:var(--colorSecundario) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg:var(--colorSecundario) !important;
    --bs-btn-active-border-color:var(--colorSecundario) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--colorSecundario) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--colorSecundario) !important;
    --bs-gradient: none;
}



/******************************************************************************************/
/****************************************FONDO*******************************************/
/******************************************************************************************/




.bg-header {
  background: url(../../images/cabecera.png) right center / cover no-repeat;
  color: white;
   justify-content: center;
  background-size: contain;
  background-position: right top; /* mantiene el foco a la derecha */
  aspect-ratio: 1440 / 994;
}


/* móvil (≤576px): usa otra imagen */
@media (max-width: 575.98px){
  .bg-header{
    background-image: url(../../images/Mobile-cabecera.png); /* tu imagen móvil */
    background-position: right top;  /* mantiene el foco a la derecha */
    background-size: contain;
    aspect-ratio: 3 / 4;             /* más vertical; ajusta si quieres */
  }
}

/* opcional: también para ≤768px */
@media (max-width: 767.98px){
  .bg-header{
    background-image: url(../../images/Mobile-cabecera.png);
  }
}










/* el contenedor ocupa el 100% de la altura de la sección */
.bg-header-gracias{
  background: url(../../images/gracias3.png) right top / cover no-repeat;
  color: #fff;
}


/* móvil (≤576px): usa otra imagen */
@media (max-width: 575.98px){
  .bg-header-gracias{
    background-image: url(../../images/Mobile-gracias.png); /* tu imagen móvil */
    background-position: right top;  /* mantiene el foco a la derecha */
  }
}

/* opcional: también para ≤768px */
@media (max-width: 767.98px){
  .bg-header-gracias{
    background-image: url(../../images/Mobile-gracias.png);
  }
}

    .bg-header-gracias > .container {
        height: 100%;
        display: flex;
        align-items: center;
    } 








 .bg-footer{
    background: url('../../images/Pie-min.jpg') center/cover no-repeat;
    color: white;
    display: flex;
    align-items: start;
    justify-content: center;
    background-size: cover;
    background-position: bottom;
    aspect-ratio: 1440 / 600;
 }

.badge-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--colorSecundario);
    color: white;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    margin-inline: auto;
}


.block-transparente {
  background: rgba(255, 255, 255, 0.7); /* blanco con transparencia */
  border-radius: 1rem;                  /* bordes redondeados */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* sombra suave */
  backdrop-filter: blur(6px);           /* efecto de desenfoque detrás */
  -webkit-backdrop-filter: blur(2px);   /* compatibilidad Safari */
}


.form-label {
    margin-bottom: .5rem;
    color: var(--colorSecundario) !important;
    font-weight: 800;
    font-size:14.5px;
}

.pt-10{
    padding-top: 10% !important;
}




/***FONDOS ARENAS*****/


.fondosarenas{
  position: relative;
  overflow: hidden;
  isolation: isolate;             
  background-color: #f2dcc4;    
}


.fondosarenas::before{
  content: "";
  position: absolute;
  inset: 0;                      
  background-image: url("../../images/Arenas2.jpg"); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;         
  mix-blend-mode: multiply;
  opacity: .9;                     
  pointer-events: none;
  z-index: 0;
}


.fondosarenas > .container{
  position: relative;
  z-index: 1;
}


@media (max-width: 575.98px){
  .fondosarenas::before{
    opacity: .75;                 
    background-position: center top;
  }
}


  .text-shadow    { text-shadow: 0 2px 6px rgba(0,0,0,.5); }
  .text-shadow-white {
    text-shadow: 0 2px 6px rgba(255, 255, 255, .5);
}

  .accordion-button:focus {

    box-shadow: none !important;
}

    /** Retoque checkbox */
.form-check .form-check-input {
    width: 1.7em;
    height: 1.7em;
    margin-top: -0.25em;
    margin-right: 10px;
}




/* base del botón nativo */
input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .45rem .9rem;
    border-radius: .375rem 0 0 .375rem;
    border: 1px solid #ced4da; /* gris borde por defecto */
    background-color: #e9ecef; /* gris claro por defecto */
    color: #212529; /* texto oscuro */
    transition: filter .15s ease, opacity .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button {
    margin-right: .75rem;
    padding: .45rem .9rem;
    border-radius: .375rem 0 0 .375rem;
    border: 1px solid #ced4da;
    background-color: #e9ecef;
    color: #212529;
    transition: filter .15s ease, opacity .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

/* focus del input (borde/halo) */
input[type="file"]:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* hover genérico */
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
    filter: brightness(.95);
}

/* ---------- variantes de color (bootstrap 5 por defecto) ---------- */
/* primary */
.file-primary::file-selector-button,
.file-primary::-webkit-file-upload-button {
    background-color: #002D74 !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

/******************************************************************************************/
/************************************MENSAJE CARGANDO**************************************/
/******************************************************************************************/
#materialLoading {
    font-family: "Red Hat Display", sans-serif;
    color: black;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: table;
    z-index: 9999;
}

#materialLoadingCentered {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
}

#materialLoadingContent {
    text-align: center;
}

    #materialLoadingContent .spinner-container {
        background-color: #FFFFFF;
        text-align: center;
        border-radius: 7px;
        padding: 40px 20px;
    }

        #materialLoadingContent .spinner-container .texto {
            padding-top: 10px;
            font-size: 16px;
            font-weight: bold;
        }

        #materialLoadingContent .spinner-container .spinner-border {
            text-align: center;
            color: var(--colorPrincipal);
            width: 3rem;
            height: 3rem;
        }

#materialLoading.hide {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}

    #materialLoading.hide #materialLoadingCentered {
        transform: scale(0.8);
        transition: transform 0.2s ease-out;
    }

#materialLoading.show {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

    #materialLoading.show #materialLoadingCentered {
        transform: scale(1);
        transition: transform 0.2s ease-in;
    }



/*Select idiomas*/

.lang-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all .15s ease-in-out;
}

    .lang-select:hover {
        border-color: #999;
    }

    .lang-select:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255,128,0,0.3);
        border-color: #ff8000;
    }