html {
    font-size: 24px !important;
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    html {
        font-size: 20px !important;
    }
}

/* =========================================================================
   1. DECLARACIÓN DE LA FUENTE LOCAL
   ========================================================================= */
@font-face {
    font-family: 'HelveticaRoundedLTStd-Bd';
    /* Ruta relativa desde la carpeta 'css' hacia la carpeta 'fonts' */
    src: url('../fonts/makro/HelveticaRoundedLTStd-Bd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

@font-face {
    font-family: 'HelveticaRoundedLTStd-BdCn';
    /* Ruta relativa desde la carpeta 'css' hacia la carpeta 'fonts' */
    src: url('../fonts/makro/HelveticaRoundedLTStd-BdCn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

@font-face {
    font-family: 'HelveticaRoundedLTStd-BdCn';
    /* Ruta relativa desde la carpeta 'css' hacia la carpeta 'fonts' */
    src: url('../fonts/makro/HelveticaRoundedLTStd-BdCn.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente del sistema mientras carga la tuya */
}

html, body, input, select, textarea, button, .btn {
    font-family: HelveticaRoundedLTStd-BdCn, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footermk {
    font-family: HelveticaRoundedLTStd-BdCn, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    font-size: 10px;
    color: black;
    text-align: justify;
    background-color: rgba(255, 255, 255, 0.6); /* Fondo negro al 60% de opacidad */
    padding: 15px;
    border-radius: 8px; /* Bordes redondeados */
    display: block;
}

.texto-legible-mobile {
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.9), 0px 0px 10px rgba(255, 255, 255, 0.6);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #FDF6DF, 0 0 0 0.25rem #F8D69B;
}

body {
    /*margin-bottom: 5px;*/
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the body covers the full screen height */

    padding: 0;
    box-sizing: border-box;
    /* Ruta relativa desde la carpeta css hacia la carpeta images */
    background-image: url('/images/background.jpg');
    /* Evita que la imagen se repita como mosaico */
    background-repeat: no-repeat;
    /* Centra la imagen vertical y horizontalmente */
    background-position: center center;
    /* Hace que la imagen se fije al fondo mientras el usuario hace scroll */
    background-attachment: fixed;
    /* Fuerza a la imagen a estirarse y cubrir el 100% de la pantalla sin deformarse */
    background-size: cover;
    /* Color de respaldo por si la imagen tarda en cargar o no se encuentra */
    background-color: #FDF6DF;
    color: black;
    justify-items: center;
    align-content: center;
}

@media (max-width: 767.98px) {
    body {
        background-image: url('/images/backgroundm.jpg');
    }

    .logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-height: 120px;
    }

    .fondo-texto-mobile {
        background-color: rgba(255, 255, 255, 0.6); /* Fondo negro al 60% de opacidad */
        padding: 15px;
        border-radius: 8px; /* Bordes redondeados */
        display: block;
    }
}

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px; /* Optional: set a width to see it centered */
}
.slogan {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 350px; /* Optional: set a width to see it centered */
}

.logoColjuegos {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*width: 50%; /* Optional: set a width to see it centered */
}

.backform {
    border-radius: 20px !important;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-color: rgba(216, 39, 46, 0.90) !important;
    /*-webkit-backdrop-filter: blur(8px);*/
    border: 1px solid white;
}

.rounded {
    justify-items:center;
    align-content:center;

}

.form-switch .form-check-input,
.form-switch .form-check-input:checked
.form-switch .form-check-input:focus {
    border-color: #F8D69B !important;
    border: 3px solid #F8D69B;
}

.link {
color: #F8D69B;
text-decoration: underline;
cursor: pointer;
}

.link:hover {
    color: #FFD700;
}

footer {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.linkFooter {
    color: rgba(216, 39, 46, 0.90);
    text-decoration: underline;
    cursor: pointer;
}

.linkFooter:hover {
    color: #FFD700;
}


.bg-crema {
    background-color: #FDF6DF;
    /* rgba(253, 246, 223, 1)  */
}

.bg-makro {
    background-color: rgba(216, 39, 46, 0.90) !important;
}

.text-crema {
    color: #FDF6DF;
}

.text-white {
    color: #FDF6DF !important;
}

.text-makro {
    color: rgba(216, 39, 46, 0.90) !important;
}

.modal-header {
    padding: 0.5rem 0.5rem !important;
}


/* --- ESTILO GLOBAL PARA ABSOLUTAMENTE TODOS LOS BOTONES DEL SITIO --- */
.btn {
    /* text-transform: uppercase; */ /* Forzar texto en mayúsculas */
    /*letter-spacing: 0.5px;*/ /* Espaciado entre letras */
    /*padding: 0.6rem 0.5rem;*/ /* Hacerlos un poco más altos y cómodos */
    border-radius: 12px !important;
    font-size: larger;
    font-weight: bolder;
    font-family: HelveticaRoundedLTStd-BdCn, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.btn.btn-primary {
    background-color: #FDF6DF;
    /*border-color: #E74C4A;*/
    color: #D8272E;
    font-weight: 600;
    border-radius: 8px;
    /* Bordes más redondeados */
    transition: all 0.3s ease;
    /* Animación suave para efectos */
}

/* Efecto cuando el usuario pasa el mouse por encima (Hover) */
.btn.btn-light:hover,
.btn.btn-light:focus {
    background-color: #dc3545 !important;
    color: #ffffff !important;
/*    border: 2px solid #ffffff !important;*/
    /*background-color: white;
    color: #D8272E; */
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3); /* Sombra moderna */
}

.form-select.is-valid{
}

.form-select.is-valid {
}

.form-check-input:checked {
    background-color: #D8272E !important;
    border-color: #D8272E;
}

.form-control,
.form-select,
.input-group-text {
    /*    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
*/
    border: 2px solid #FDF6DF !important;
    border-radius: 20px !important;
    font-size: 1rem !important; /* Ajusta el tamaño de la letra si es necesario */
    background-color: rgba(216, 39, 46, 0.90) !important;
    border-color: #FDF6DF !important;
    color: #FDF6DF;
}

/* Aplica el efecto a todos los inputs de texto y cajas de selección del sitio */
.form-control:focus,
.form-select:focus {
    /* 1. Cambia el color del borde  */
    border-color: #FDF6DF !important;
    /* 4. Crea el resplandor difuminado alrededor del input (RGBA: 111, 66, 193 es el morado con 25% de opacidad) */
    box-shadow: 0 0 0 0.08rem rgba(253, 246, 223, 0.90) !important;
    /* Animación suave al entrar y salir del campo */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: #FDF6DF;
}

/* Cuando el input tiene focus, pinta el borde del icono del mismo color */
.input-group:focus-within .input-group-text {
    border-color: #FDF6DF !important;
    background-color: #FDF6DF !important; /* Un tono muy suave del color */
    color: #FDF6DF !important; /* Pinta el icono del mismo color */
    transition: all 0.15s ease-in-out;
}

/* Chrome, Firefox, Opera, Safari y Edge Moderno */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Blanco puro con 60% de opacidad */
    opacity: 1 !important; /* Fuerza a Firefox a respetar la opacidad del canal RGBA */
}

/* Internet Explorer 10-11 */
.form-control:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Edge Antiguo */
.form-control::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* =========================================================================
   ESTILO GLOBAL PARA CAMPOS DESHABILITADOS (ANIVERSARIO)
   Afecta a inputs, selects y textareas bloqueados por el sistema
   ========================================================================= */
.form-control:disabled,
.form-control[disabled],
.form-select:disabled,
.form-select[disabled] {
    /* 1. Forzamos el color del texto (ej: Blanco puro si el fondo es oscuro, o Negro nítido) */
    color: #ffffff !important;
    /* 2. Removemos la opacidad por defecto que aplican los celulares (iOS/Android) */
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important; /* Corrección obligatoria para Safari en iPhone */
    /* 3. Ajustamos un fondo sutil translúcido para denotar que está bloqueado */
    background-color: rgba(255, 255, 255, 0.15) !important;
    /* 4. Cambiamos el cursor del mouse a modo "Bloqueado" para mejorar la experiencia de usuario */
    cursor: not-allowed !important;
    /* 5. Mantenemos el borde grueso que configuramos en los pasos anteriores */
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.form-control[readonly] {
    /* 1. Forzamos el color del texto (ej: Blanco nítido) */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Corrección para Safari en iPhone */
    /* 2. Le asignamos un fondo que denote que es una caja informativa (Gris translúcido) */
    background-color: rgba(255, 255, 255, 0.08) !important;
    /* 3. Cambiamos el cursor al pasar el mouse por encima para indicar "Solo Lectura" */
    cursor: default !important;
    /* 4. Mantenemos el grosor imponente de borde, pero con un tono más suave */
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Evitamos que el borde se ilumine en blanco brillante si el usuario hace clic en un readonly */
.form-control[readonly]:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}

.contenedor-captcha-aniversario {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Fondo blanco translúcido */
    border: 2px solid #ffffff !important; /* Borde grueso blanco de 2px */
    border-radius: 8px !important; /* Bordes redondeados sutiles */
    padding: 12px !important;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}