:root {
    --rojo: rgb(221, 29, 33);
    --azul: #005aaa;
    --azulclaro: #32beff;
    --gris: rgb(74, 74, 74);
    --amarillo: rgb(255, 198, 0);
    --naranja: rgb(246 133 55);
    --blanco: #ffffff;
    --gris-oscuro: #6e6e6e;
    --negro: #000000;
}

/* ========== Fondos ========== */
.bg-rojo {
    background-color: var(--rojo) !important;
}

.bg-azul {
    background-color: var(--azul) !important;
}

.bg-azulclaro {
    background-color: var(--azulclaro) !important;
}

.bg-gris {
    background-color: var(--gris) !important;
}

.bg-amarillo {
    background-color: var(--amarillo) !important;
}

.bg-naranja {
    background-color: var(--naranja) !important;
    color: var(--blanco) !important;
}

.bg-blanco {
    background-color: var(--blanco) !important;
}

.bg-negro {
    background-color: var(--negro) !important;
}

.bg-gris-oscuro {
    background-color: var(--gris-oscuro) !important;
}

/* ========== Colores de texto ========== */
.texto-rojo {
    color: var(--rojo) !important;
}

.texto-azul {
    color: var(--azul) !important;
}

.texto-azulclaro {
    color: var(--azulclaro) !important;
}

.texto-gris {
    color: var(--gris) !important;
}

.texto-amarillo {
    color: var(--amarillo) !important;
}

.texto-naranja {
    color: var(--naranja) !important;
}

.texto-blanco {
    color: var(--blanco) !important;
}

.texto-negro {
    color: var(--negro) !important;
}

.texto-gris-oscuro {
    color: var(--gris-oscuro) !important;
}

/* ========== Bordes ========== */
.borde-rojo {
    border: 2px solid var(--rojo) !important;
}

.borde-azul {
    border: 2px solid var(--azul) !important;
}

.borde-azulclaro {
    border: 2px solid var(--azulclaro) !important;
}

.borde-gris {
    border: 2px solid var(--gris) !important;
}

.borde-amarillo {
    border: 2px solid var(--amarillo) !important;
}

.borde-naranja {
    border: 2px solid var(--naranja) !important;
}

.borde-blanco {
    border: 2px solid var(--blanco) !important;
}

.borde-negro {
    border: 2px solid var(--negro) !important;
}

/* ========== Alert Haier (campaniaNoActiva, juegoFinalizado) ========== */
.alert-haier {
    background-color: #e6f0fa;
    border-color: var(--azul);
    color: var(--azul);
}

/* ========== Botones ========== */
.btn.bg-naranja,
.btn.bg-azulclaro,
.btn.bg-azul {
    padding: 0.5rem 2.5rem;
    min-width: 140px;
    width: auto !important;
}

/* ========== Checkboxes ========== */
.form-check-input:checked {
    background-color: var(--azul);
    border-color: var(--azul);
}

.form-check-input:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 0.25rem rgba(2, 138, 171, 0.25);
}

/* ----------------------------
    Pagina Contacto
----------------------------- */
.descripcionlateraltarjeta {
    color: white !important;
    background-color: var(--azul);
}

    .descripcionlateraltarjeta p {
        color: white !important;
    }

    .descripcionlateraltarjeta h3 {
        color: white !important;
    }

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

/* Tarjetas */
.tarjeta {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border: 4px solid var(--azul);
    color: #005BBB;
    text-decoration: none;
    padding: 40px 20px;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 220px; /* para que queden proporcionadas y centradas */
}

/* Hover */
    .tarjeta:hover {
        background: var(--azul);
        color: #ffffff;
    }

/* ============================== */
/*  FONDO DEGRADADO HAIER         */
/*  (todas las páginas públicas)  */
/* ============================== */

/* Degradado de azul Haier (arriba) a azul muy claro (abajo) */
body {
    background: linear-gradient(to bottom, #0277c7 0%, #a1cae6 100%);
    background-attachment: fixed;
}

/* Texto del contenido en blanco sobre el degradado */
main {
    color: #ffffff;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main label,
main span,
main li,
main a:not(.btn),
main .texto-azul,
main .texto-azulclaro,
main .texto-gris,
main .texto-gris-oscuro {
    color: #ffffff !important;
}

/* Componentes con fondo claro propio: mantienen texto legible (no blanco).
   .alert no se incluye aquí para conservar su color propio (rojo/azul). */
main .modal-content,
main .card-body {
    color: var(--gris-oscuro);
}

main .modal-content :is(h1, h2, h3, h4, h5, h6, p, span, label, a:not(.btn), th, td, li, small),
main .alert :is(h1, h2, h3, h4, h5, h6, p, span, a:not(.btn), li),
main .card-body :is(h1, h2, h3, h4, h5, h6, p, span, label, a:not(.btn), th, td, li, small) {
    color: inherit !important;
}

/* Dentro de esos componentes, respetar los colores de marca si se usan */
main .modal-content .texto-azul,
main .alert .texto-azul,
main .card-body .texto-azul {
    color: var(--azul) !important;
}

main .modal-content .texto-gris-oscuro,
main .alert .texto-gris-oscuro,
main .card-body .texto-gris-oscuro {
    color: var(--gris-oscuro) !important;
}

/* ============================== */
/*    RESPONSIVE GLOBAL MÓVIL     */
/* ============================== */
@media (max-width: 767.98px) {
    .zonaHeader img {
        max-height: 100px;
        max-width: 280px !important;
    }

    .zonaLandingBody,
    .zonaLandingBody_bronce,
    .zonaLandingBody_plata,
    .zonaLandingBody_oro {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .zonaLandingBody img.img-fluid,
    .zonaLandingBody_bronce img.img-fluid,
    .zonaLandingBody_plata img.img-fluid,
    .zonaLandingBody_oro img.img-fluid {
        max-height: 160px;
        width: auto;
    }

    .tarjeta {
        padding: 16px 10px;
        font-size: 0.9rem;
        max-width: 100%;
    }
}