/* =========================================================
   0) Variables
   =======================================================*/
:root {
    --card-max: 760px;
    --overlap: clamp(28px, 6vw, 60px);
    --pad-y: clamp(5px, 5vw, 5px);
    --pad-x: clamp(40px, 7vw, 84px);
    --banner-scale: .65;
}

/* =========================================================
   1) Layout base
   =======================================================*/
body {
    min-height: 100vh;
    background: url("../images/fondo.png") center no-repeat fixed;
    display: flex;
    flex-direction: column;
}

/* =========================================================
   2) Header (sticky, delgado)
   =======================================================*/
.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    backdrop-filter: saturate(160%) blur(6px);
}

    /* Marca / logo */
    .site-header .brand {
        display: flex;
        align-items: center;
        gap: .75rem;
        /*padding: 6px 12px;*/
    }

.brand img {
    height: 64px;
    width: auto;
}

@media (max-width: 767.98px) {
    .brand img {
        height: 40px;
    }
}

/* Navegación */
.site-header .nav-link {
    color: #212529;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

    .site-header .nav-link:hover,
    .site-header .nav-link:focus {
        color: #5499ff;
        text-decoration: none;
    }

    .site-header .nav-link.active {
        color: #0d6efd;
        font-weight: 700;
    }

        .site-header .nav-link.active::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 3px;
            border-radius: 3px;
        }

.dropdown-menu .dropdown-item {
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        color: #0d6efd;
        background-color: transparent;
    }

.site-header .navbar {
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}
    .site-header .navbar-nav .nav-link,
    .site-header .navbar .dropdown-toggle {
        padding-top: 6px;
        padding-bottom: 6px;
        line-height: 1.1;
    }

.site-header .navbar-toggler {
    padding-top: 6px;
    padding-bottom: 6px;
    align-self: center;
}

@media (min-width: 992px) {
    .site-header .navbar .container,
    .site-header .navbar .container-fluid {
        flex-wrap: nowrap;
    }
}

.site-header .dropdown-menu form {
    margin: 0;
}

    .site-header .dropdown-menu form .dropdown-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        text-align: left;
        border: 0;
        background: transparent;
        padding: .25rem 1rem;
    }

/* =========================================================
   3) Main / Cards y banners
   =======================================================*/
.form-card {
    max-width: var(--card-max);
    width: 100%;
    margin: calc(-1 * var(--overlap)) auto 0;
    padding-top: calc(var(--pad-y) + var(--overlap));
    padding-right: var(--pad-x);
    padding-bottom: var(--pad-y);
    padding-left: var(--pad-x);
    background: rgba(3,52,128,.88);
    backdrop-filter: blur(2px);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Banner de indicaciones/premio */
.refiere-banner {
    width: 100%;
    max-width: calc( (var(--card-max) - 48px) * var(--banner-scale) );
    margin: clamp(8px, 2vh, 24px) auto 0;
    display: block;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

.premio-banner {
    width: 100%;
    max-width: calc( (var(--card-max) - 148px) * var(--banner-scale) );
    margin: clamp(8px, 2vh, 24px) auto 0;
    display: block;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}



/* =========================================================
   4) Componentes (badges, toasts, rewards)
   =======================================================*/
/* Puntos totales */
.points-badge {
    display: inline-block;
    background: linear-gradient(#cfe3fb, #b9d3f6);
    color: #1a3f7a;
    border: 3px solid #6f9fd6;
    border-radius: 16px;
    padding: 12px 22px;
    min-width: 220px;
    text-align: center;
}

    .points-badge .label {
        display: block;
        font-weight: 600;
        font-size: .95rem;
        opacity: .9;
        margin-bottom: 2px;
    }

    .points-badge .value {
        display: block;
        font-weight: 800;
        font-size: clamp(1.4rem, 3.2vw, 2rem);
        letter-spacing: .5px;
    }

/* Toaster */
#toastContainer {
    z-index: 1080;
}

@media (max-width: 576px) {
    #toastContainer {
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100%;
        padding: .75rem;
    }

        #toastContainer .toast {
            width: 100%;
            max-width: 100%;
            margin: .25rem 0;
        }
}

/* Rewards grid */
.rewards-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
}

@media (min-width: 768px) {
    .rewards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

.reward-card {
    --card-b: #9bb8e3;
    --card-bg: rgba(255,255,255,.08);
    width: min(320px, 100%);
    border-radius: 12px;
    border: 3px solid var(--card-b);
    background: var(--card-bg);
    padding: 18px 22px;
    color: #eaf1ff;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
}

    .reward-card .coin {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #ffd872, #f0b640 60%, #d79a23);
        color: #1d2540;
        display: grid;
        place-items: center;
        font-weight: 800;
        box-shadow: inset 0 0 0 3px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.2);
    }

    .reward-card .amount {
        font-size: clamp(1.4rem, 2.6vw, 1.8rem);
        font-weight: 800;
        letter-spacing: .5px;
    }

    .reward-card .sub {
        grid-column: 2/3;
        margin-top: -6px;
        font-size: .95rem;
        opacity: .95;
    }

    .reward-card:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,.12);
        box-shadow: 0 6px 16px rgba(0,0,0,.18);
    }

    .reward-card.active {
        border-color: #cfe3fb;
        box-shadow: 0 0 0 3px rgba(255,255,255,.18);
        background: rgba(255,255,255,.18);
    }

/* Reward cards deshabilitados (visual y accesible) */
.rewards-grid .reward-card:disabled,
.rewards-grid .reward-card[aria-disabled="true"] {
    opacity: .55; 
    filter: grayscale(.25); 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none; 
    background: var(--card-bg); 
    border-color: #8ea9cf; 
}

    .rewards-grid .reward-card:disabled:hover,
    .rewards-grid .reward-card:disabled:focus,
    .rewards-grid .reward-card[aria-disabled="true"]:hover,
    .rewards-grid .reward-card[aria-disabled="true"]:focus {
        transform: none;
        box-shadow: none;
        outline: 0;
    }

    .rewards-grid .reward-card:disabled .coin,
    .rewards-grid .reward-card[aria-disabled="true"] .coin {
        opacity: .8;
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
    }

    .rewards-grid .reward-card:disabled .amount,
    .rewards-grid .reward-card:disabled .sub,
    .rewards-grid .reward-card[aria-disabled="true"] .amount,
    .rewards-grid .reward-card[aria-disabled="true"] .sub {
        opacity: .85;
    }


/* =========================================================
   5) Footer
   =======================================================*/
.site-footer {
    text-align: center;
    padding: 18px 12px 26px;
    font-size: .9rem;
    color: #0b2e6b;
}

    .site-footer .muted {
        opacity: .75;
    }

/* =========================================================
   6) BlockUI (solo móviles)
   =======================================================*/
/* Solo teléfonos (xs). Si quieres incluir tablets pequeñas, cambia a 767.98px */
@media (max-width: 575.98px) {
    /* Contenedor que crea jQuery blockUI */
    .blockUI.blockMsg {
        width: auto !important; /* anula el 30% fijo SOLO en móvil */
        max-width: 92vw !important; /* usa ~90% del ancho de pantalla */
        left: 50% !important; /* centra horizontal */
        transform: translateX(-50%) !important;
    }
        /* La card ocupa todo el contenedor en móvil */
        .blockUI.blockMsg .card {
            width: 100%;
        }
}


.form-card .prose p,
.form-card .prose li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

@media (max-width: 575.98px) {
    .form-card .prose p,
    .form-card .prose li {
        text-align: left;
    }
}


.password-rules-popover .popover-body {
    padding: .75rem 1rem;
}

    .password-rules-popover .popover-body ul {
        padding-left: 1.25rem;
        margin: 0;
    }

    .password-rules-popover .popover-body li {
        margin: .125rem 0;
    }

.password-rules-icon {
    cursor: help;
    line-height: 1;
    font-size: 1rem;
}

.password-rules-popover .popover-header {
    font-weight: 600;
}


/* =========================================================
   History cards (puntos) — borde claro, fondo controlable
   =======================================================*/
.hist-card {
    --hist-b: #9bb8e3; /* azul claro del borde */
    border-color: var(--hist-b) !important;
    color: #eaf1ff; /* texto legible sobre form-card */
    transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Fondo transparente: deja ver el background de .form-card */
.hist-card--transparent {
    background: transparent !important;
}

/* Hover sutil */
.hist-card:hover {
    background: rgba(255,255,255,.04);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Círculo para iconos del historial */
.hist-icon {
    width: 64px;
    height: 64px;
    min-width: 64px; /* evita que flex lo reduzca */
    min-height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px; /* base fija: no shrink, no grow */
    overflow: hidden;
}

    /* Tamaño del glifo y sin altura de línea extra */
    .hist-icon i {
        line-height: 1;
        font-size: 28px; 
    }
/*
@media (max-width: 360px) {
    .hist-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        flex-basis: 56px;
    }

        .hist-icon i {
            font-size: 24px;
        }
}*/

/* Ajustes responsivos para tarjetas del historial */

/* Móviles comunes */
@media (max-width: 420px) {
    .hist-card {
        gap: .75rem;
    }

    .hist-left {
        gap: .75rem;
    }

    /* Oculta el círculo (fa-store) para ganar ancho */
    .hist-icon {
        display: none !important;
    }

    /* Bloque derecho más compacto */
    .hist-coin {
        width: 36px !important;
        height: 36px !important;
    }

    .hist-amount {
        font-size: 1.125rem !important; /* ~18px */
    }

    .hist-unit {
        font-size: .75rem;
    }

    /* Evita que el bloque derecho se “coma” el texto */
    .hist-right {
        flex: 0 0 auto;
    }

    .hist-left {
        min-width: 0;
    }
    /* permite que el texto haga wrap */
}

/* Muy angosto (apilar derecha debajo del texto) */
@media (max-width: 360px) {
    .hist-card {
        flex-direction: column; /* apilar */
        align-items: stretch;
    }

    .hist-right {
        align-items: flex-end;
        text-align: right;
        margin-top: .25rem;
    }
}