/* ==========================================================
   Champions Auth – HitPoints  |  champions-auth.css  v2.7

   Tipografías (cargadas en el tema Divi):
     'MulaRSlim ExtraBold'  – headings, botones, label login, puntos
     'MulaSlim Light'       – cuerpo, placeholder, mensajes, subtítulo OTP
     'SnyderSpeedBrush'     – nombre del usuario
   ========================================================== */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --champ-navy:        #1A237E;   /* azul oscuro / cabecera */
    --champ-body-bg:     #C8E8F7;   /* fondo claro del login  */
    --champ-cyan-border: #00C8F0;   /* borde cyan exterior    */
    --champ-yellow:      #FFC107;   /* botones                */
    --champ-yellow-dark: #E6A800;
    --champ-input-bg:    #A8C4D8;   /* fondo input / otp box  */
    --champ-input-border:#1A237E;   /* borde input            */
    --champ-red:         #FD3233;   /* fondo caja puntos      */
    --champ-green:       #2ECC40;
    --champ-white:       #FFFFFF;
    --champ-purple:      #6A2C8E;
    --champ-radius:      14px;
    --champ-shadow:      0 8px 32px rgba(0,0,0,0.25);
}

body.champ-no-scroll { overflow: hidden; }

/* ==========================================================
   LOGIN  –  [champions_login]
   ========================================================== */

.champ-login-wrapper {
    max-width:     380px;
    margin:        0 auto;
    border-radius: 18px;
    overflow:      hidden;
    /* Borde cyan exterior visible en las imágenes */
    outline:       4px solid var(--champ-cyan-border);
    box-shadow:    0 0 0 6px rgba(0,200,240,0.25), var(--champ-shadow);
}

/* ── Cabecera "Para continuar…" ── */
.champ-login-notice {
    background:   var(--champ-navy);
    color:        var(--champ-yellow);
    font-family:  'MulaRSlim ExtraBold', sans-serif;
    font-size:    clamp(14px, 3.5vw, 17px);
    text-align:   center;
    padding:      14px 20px;
    line-height:  1.35;
    letter-spacing: 0.2px;
}

/* ── Cuerpo (fondo celeste) ── */
.champ-login-body {
    background:  var(--champ-body-bg);
    padding:     28px 28px 32px;
}

/* ── Label "Ingresa tu E-Mail" ── */
.champ-login-label {
    display:        block;
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    color:          var(--champ-navy);
    font-size:      clamp(16px, 4vw, 20px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  10px;
}

/* ── Input email ── */
.champ-login-wrapper .champ-login-input,
.champ-login-wrapper input.champ-login-input,
input.champ-login-input {
    display:       block;
    width:         100%;
    padding:       1rem !important;
    border:        2.5px solid var(--champ-input-border) !important;
    border-radius: 10px !important;
    background:    var(--champ-input-bg) !important;
    font-family:   'MulaSlim Light', sans-serif !important;
    font-size:     15px !important;
    color:         var(--champ-navy) !important;
    box-sizing:    border-box !important;
    margin-bottom: 18px !important;
    outline:       none !important;
    transition:    border-color 0.2s, box-shadow 0.2s;
    line-height:   normal !important;
    height:        auto !important;
    box-shadow:    none !important;
}
.champ-login-wrapper .champ-login-input:focus,
input.champ-login-input:focus {
    border-color: var(--champ-yellow) !important;
    box-shadow:   0 0 0 3px rgba(255,193,7,0.25) !important;
}
.champ-login-wrapper .champ-login-input::placeholder,
input.champ-login-input::placeholder {
    color:       #7A9DB5 !important;
    font-family: 'MulaSlim Light', sans-serif !important;
}

/* ── Botón primario amarillo (compartido: login + overlays) ── */
.champ-btn-primary {
    display:        block;
    width:          100%;
    padding:        15px 20px;
    background:     var(--champ-yellow);
    color:          var(--champ-navy);
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    font-size:      clamp(17px, 4.5vw, 22px);
    text-transform: uppercase;
    letter-spacing: 2px;
    border:         none;
    border-radius:  50px;       /* pill */
    cursor:         pointer;
    transition:     background 0.18s, transform 0.1s;
    box-shadow:     0 4px 16px rgba(255,193,7,0.35);
    margin-top:     4px;
}
.champ-btn-primary:hover  { background: var(--champ-yellow-dark); }
.champ-btn-primary:active { transform: scale(0.98); }
.champ-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }

/* ── Mensajes ── */
.champ-msg {
    font-family: 'MulaSlim Light', sans-serif;
    font-size:   13px;
    min-height:  18px;
    text-align:  center;
    margin:      6px 0 10px;
    line-height: 1.4;
}
.champ-msg.error   { color: #C0392B; }
.champ-msg.success { color: #1A6B1A; }
.champ-msg.info    { color: var(--champ-navy); }

/* ── Botón volver ── */
.champ-btn-back {
    display:     block;
    width:       100%;
    margin-top:  14px;
    background:  transparent;
    border:      none;
    color:       var(--champ-navy);
    font-family: 'MulaSlim Light', sans-serif;
    font-size:   13px;
    cursor:      pointer;
    text-align:  center;
    opacity:     0.7;
    text-decoration: underline;
    padding:     4px;
}
.champ-btn-back:hover { opacity: 1; }

/* ── Paso OTP ── */
.champ-otp-title {
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    color:          var(--champ-navy);
    font-size:      clamp(24px, 6vw, 32px);
    text-transform: uppercase;
    text-align:     center;
    margin:         0 0 8px;
    letter-spacing: 1px;
}

.champ-otp-sub {
    font-family:  'MulaSlim Light', sans-serif;
    color:        var(--champ-navy);
    font-size:    14px;
    text-align:   center;
    margin-bottom: 22px;
    opacity:      0.85;
}

.champ-otp-inputs {
    display:         flex;
    gap:             10px;
    justify-content: center;
    margin-bottom:   22px;
}

/* 6 cajas — tamaño ajustado para caber en móvil */
.champ-otp-box {
    width:         50px;
    height:        62px;
    border:        2.5px solid var(--champ-input-border);
    border-radius: 12px;
    background:    var(--champ-input-bg);
    text-align:    center;
    font-family:   'MulaRSlim ExtraBold', sans-serif;
    font-size:     24px;
    color:         var(--champ-navy);
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
    caret-color:   transparent;
}
.champ-otp-box:focus {
    border-color: var(--champ-yellow);
    box-shadow:   0 0 0 3px rgba(255,193,7,0.3);
}

/* ==========================================================
   BIENVENIDA  –  [champions_bienvenida]
   ========================================================== */

.champ-bienvenida-wrapper {
    text-align: center;
    line-height: 1.15;
}

.champ-bienvenida-label {
    display:        block;
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    color:          var(--champ-yellow);
    font-size:      3rem;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.champ-nombre {
    display:    block;
    font-family: 'SnyderSpeedBrush', sans-serif;
    color:       var(--champ-white);
    font-size:   clamp(30px, 8vw, 52px);
    margin-top:  4px;
    opacity:     0;
    transform:   translateY(8px);
    transition:  opacity 0.4s ease, transform 0.4s ease;
}
.champ-nombre.visible {
    opacity:   1;
    transform: translateY(0);
}

/* ==========================================================
   PUNTOS  –  [champions_puntos]
   ========================================================== */

.champ-puntos-box {
    display:        inline-flex;
    flex-direction: column;
    align-items:    center;
    background:     var(--champ-red);   /* #FD3233 */
    border-radius:  16px;
    padding:        20px 40px 16px;
    box-shadow:     var(--champ-shadow);
    position:       relative;
    overflow:       hidden;
}
.champ-puntos-box::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 55%);
    pointer-events: none;
}

.champ-puntos-numero {
    display:     block;
    font-family: 'MulaRSlim ExtraBold', sans-serif;
    color:       var(--champ-white);
    font-size:   clamp(44px, 11vw, 72px);
    line-height: 1;
    letter-spacing: 4px;
    transition:  all 0.35s ease;
}

.champ-puntos-texto {
    display:        block;
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    color:          var(--champ-white);
    font-size:      28px;
    text-transform: uppercase;
    letter-spacing: 7px;
    margin-top:     6px;
    opacity:        0.9;
}

/* ==========================================================
   BOTÓN REDIMIR EN CARDS  –  [champions_redimir_btn]
   ========================================================== */

.champ-btn-redimir {
    display:        inline-block;
    padding:        10px 28px;
    background:     var(--champ-red);
    color:          var(--champ-white);
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    font-size:      15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border:         none;
    border-radius:  8px;
    cursor:         pointer;
    transition:     background 0.18s, transform 0.1s;
    box-shadow:     0 4px 12px rgba(253,50,51,0.35);
}
.champ-btn-redimir:hover  { filter: brightness(1.1); }
.champ-btn-redimir:active { transform: scale(0.97); }

/* ==========================================================
   OVERLAYS
   ========================================================== */

.champ-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.72);
    z-index:         999999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
}
.champ-overlay.active {
    display:   flex;
    animation: champFadeIn 0.2s ease forwards;
}
@keyframes champFadeIn { from { opacity:0 } to { opacity:1 } }

.champ-confirm-box,
.champ-form-box,
.champ-loading-box,
.champ-result-box {
    border-radius: 18px;
    padding:       28px 24px;
    max-width:     320px;
    width:         100%;
    position:      relative;
    box-shadow:    var(--champ-shadow);
    animation:     champSlideUp 0.25s ease forwards;
}
@keyframes champSlideUp {
    from { transform: translateY(20px); opacity:0; }
    to   { transform: translateY(0);    opacity:1; }
}

.champ-confirm-close {
    position:        absolute;
    top:             -14px;
    right:           -14px;
    width:           34px;
    height:          34px;
    background:      var(--champ-yellow);
    border:          none;
    border-radius:   50%;
    font-size:       14px;
    font-weight:     bold;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 3px 10px rgba(0,0,0,0.3);
    transition:      transform 0.15s;
    color:           #000;
    z-index:         1;
}
.champ-confirm-close:hover { transform: scale(1.1); }

/* ── Confirmación ── */
.champ-confirm-box { background: var(--champ-navy); text-align: center; }

.champ-confirm-vas {
    font-family: 'MulaSlim Light', sans-serif;
    color:       rgba(255,255,255,0.65);
    font-size:   12px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 4px;
}
.champ-confirm-title {
    font-family: 'MulaRSlim ExtraBold', sans-serif;
    color:       var(--champ-yellow);
    font-size:   clamp(18px, 5vw, 24px); text-transform: uppercase;
    margin:      0 0 16px; line-height: 1.2;
}
.champ-confirm-img-wrap {
    background:    var(--champ-yellow);
    border-radius: 12px;
    padding:       16px;
    margin:        0 auto 14px;
    max-width:     180px;
    min-height:    110px;
    display:       flex; align-items: center; justify-content: center;
}
#champ-confirm-img { max-width:150px; max-height:110px; object-fit:contain; display:block; }

.champ-confirm-cost {
    font-family: 'MulaSlim Light', sans-serif;
    color:       rgba(255,255,255,0.8); font-size:13px; margin-bottom:10px;
}
.champ-confirm-question {
    font-family: 'MulaRSlim ExtraBold', sans-serif;
    color:       var(--champ-white); font-size:18px; text-transform:uppercase; margin-bottom:16px;
}
.champ-confirm-btns { display:flex; gap:14px; }

.champ-btn-si, .champ-btn-no {
    flex:1; padding:13px 10px;
    font-family: 'MulaRSlim ExtraBold', sans-serif;
    font-size:18px; text-transform:uppercase;
    border:none; border-radius:10px; cursor:pointer;
    transition: filter 0.15s, transform 0.1s; letter-spacing:1px;
}
.champ-btn-si  { background: var(--champ-green); color:var(--champ-white); }
.champ-btn-no  { background: var(--champ-red);   color:var(--champ-white); }
.champ-btn-si:hover, .champ-btn-no:hover { filter: brightness(1.1); }
.champ-btn-si:active, .champ-btn-no:active { transform: scale(0.97); }

/* ── Formulario ── */
.champ-form-box { background: var(--champ-body-bg); }

.champ-form-title {
    font-family: 'MulaRSlim ExtraBold', sans-serif;
    color:       var(--champ-navy);
    font-size:   clamp(16px, 4.5vw, 20px); text-transform:uppercase;
    text-align:  center; line-height:1.25; margin:0 0 20px; letter-spacing:0.5px;
}
.champ-form-box .champ-form-input,
.champ-form-box input.champ-form-input,
input.champ-form-input {
    display:       block;
    width:         100%;
    padding:       1rem !important;
    margin-bottom: 10px !important;
    border:        2px solid rgba(26,35,126,0.3) !important;
    border-radius: 8px !important;
    background:    var(--champ-white) !important;
    font-family:   'MulaSlim Light', sans-serif !important;
    font-size:     14px !important;
    color:         #333 !important;
    box-sizing:    border-box !important;
    outline:       none !important;
    transition:    border-color 0.18s;
    line-height:   normal !important;
    height:        auto !important;
    box-shadow:    none !important;
}
.champ-form-box .champ-form-input:focus,
input.champ-form-input:focus {
    border-color: var(--champ-navy) !important;
}
.champ-form-box .champ-form-input::placeholder,
input.champ-form-input::placeholder {
    color: #aaa !important;
}
.champ-form-box input.champ-form-input.input-error,
input.champ-form-input.input-error {
    border-color: #C0392B !important;
}

.champ-form-footer {
    font-family:'MulaSlim Light', sans-serif;
    color:var(--champ-navy); font-size:11px; text-align:center;
    text-transform:uppercase; letter-spacing:0.5px; margin-top:14px; opacity:0.75; line-height:1.4;
}

/* ── Loading ── */
.champ-loading-box { background:var(--champ-navy); text-align:center; max-width:220px; }
.champ-spinner {
    width:40px; height:40px;
    border:4px solid rgba(255,255,255,0.2); border-top-color:var(--champ-yellow);
    border-radius:50%; margin:0 auto 14px;
    animation:champSpin 0.75s linear infinite;
}
@keyframes champSpin { to { transform:rotate(360deg); } }
.champ-loading-txt {
    font-family:'MulaSlim Light', sans-serif;
    color:rgba(255,255,255,0.8); font-size:14px; text-transform:uppercase; letter-spacing:1px; margin:0;
}

/* ── Resultado ── */
.champ-result-box { background:var(--champ-navy); text-align:center; }
.champ-result-msg {
    font-family:'MulaRSlim ExtraBold', sans-serif;
    color:var(--champ-white); font-size:clamp(16px,4.5vw,20px);
    text-transform:uppercase; line-height:1.35; margin:0 0 20px;
    white-space:pre-line; letter-spacing:0.5px;
}
.champ-result-msg.success { color: var(--champ-yellow); }
.champ-result-msg.error   { color: #FF6B6B; }

.champ-result-close {
    padding:12px 32px; background:var(--champ-yellow); color:#000;
    font-family:'MulaRSlim ExtraBold', sans-serif; font-size:16px;
    text-transform:uppercase; letter-spacing:1px;
    border:none; border-radius:8px; cursor:pointer;
    transition:background 0.15s, transform 0.1s;
}
.champ-result-close:hover  { background: var(--champ-yellow-dark); }
.champ-result-close:active { transform: scale(0.97); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 400px) {
    .champ-otp-box { width:40px; height:50px; font-size:18px; }
    .champ-otp-inputs { gap:5px; }
    .champ-login-body { padding:22px 18px 26px; }
    .champ-puntos-numero { font-size:36px; }
}
@media (max-width: 340px) {
    .champ-otp-box { width:34px; height:44px; font-size:15px; }
    .champ-otp-inputs { gap:4px; }
    .champ-btn-si, .champ-btn-no { font-size:15px; padding:11px 6px; }
}

/* ==========================================================
   TIENDAS PARTICIPANTES  –  [champions_tiendas]
   ========================================================== */

.champ-tiendas-wrapper {
    max-width:   900px;
    margin:      0 auto;
}

/* ── Filtros ── */
.champ-tiendas-filtros {
    display:         flex;
    flex-wrap:       wrap;
    gap:             14px;
    margin-bottom:   24px;
    background:      var(--champ-navy);
    border-radius:   14px;
    padding:         18px 20px;
}

.champ-tiendas-filtro-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1 1 180px;
}

.champ-tiendas-filtro-buscar { flex: 2 1 220px; }

.champ-tiendas-label {
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    color:          var(--champ-yellow);
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.champ-tiendas-select,
.champ-tiendas-input {
    padding:       10px 12px !important;
    border:        2px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    background:    rgba(255,255,255,0.1) !important;
    color:         var(--champ-white) !important;
    font-family:   'MulaSlim Light', sans-serif !important;
    font-size:     14px !important;
    outline:       none !important;
    width:         100%;
    box-sizing:    border-box !important;
    transition:    border-color 0.18s;
    height:        auto !important;
    line-height:   normal !important;
    box-shadow:    none !important;
    appearance:    none;
    -webkit-appearance: none;
}
.champ-tiendas-select option {
    background: var(--champ-navy);
    color:      var(--champ-white);
}
.champ-tiendas-select:focus,
.champ-tiendas-input:focus {
    border-color: var(--champ-yellow) !important;
}
.champ-tiendas-input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}

/* ── Contador ── */
.champ-tiendas-contador {
    font-family:  'MulaSlim Light', sans-serif;
    color:        rgba(255,255,255,0.7);
    font-size:    13px;
    margin-bottom: 16px;
    text-align:   right;
}

/* ── Estado loading / error ── */
.champ-tiendas-estado {
    text-align:  center;
    padding:     32px 20px;
    color:       rgba(255,255,255,0.7);
    font-family: 'MulaSlim Light', sans-serif;
}
.champ-tiendas-error { color: #FF6B6B; font-size:14px; }

/* ── Grid responsive ── */
.champ-tiendas-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   16px;
}

/* ── Card ── */
.champ-tienda-card {
    background:    #1A237E;
    border:        1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding:       18px 16px;
    transition:    transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    position:      relative;
    overflow:      hidden;
}
.champ-tienda-card::before {
    content:    '';
    position:   absolute;
    top:        0; left:0; right:0;
    height:     3px;
    background: linear-gradient(90deg, var(--champ-yellow), var(--champ-cyan-border));
}
.champ-tienda-card:hover {
    transform:    translateY(-3px);
    background:   #1A237E;
    border-color: var(--champ-yellow);
    box-shadow:   0 8px 24px rgba(0,0,0,0.35);
}

.champ-tienda-tipo {
    font-family:    'MulaSlim Light', sans-serif;
    color:          var(--champ-yellow);
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom:  6px;
}

.champ-tienda-nombre {
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    color:          var(--champ-white);
    font-size:      clamp(15px, 3vw, 18px);
    text-transform: uppercase;
    line-height:    1.2;
    margin:         0 0 12px;
    letter-spacing: 0.3px;
}

.champ-tienda-info {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-bottom:  12px;
}

.champ-tienda-ciudad,
.champ-tienda-contacto {
    font-family: 'MulaSlim Light', sans-serif;
    color:       rgba(255,255,255,0.75);
    font-size:   13px;
    line-height: 1.35;
}
.champ-tienda-contacto { color: rgba(255,255,255,0.55); font-size:12px; }

.champ-tienda-estado {
    display:        inline-block;
    font-family:    'MulaRSlim ExtraBold', sans-serif;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding:        3px 10px;
    border-radius:  20px;
    border:         1px solid currentColor;
}
.champ-tienda-estado--activo  { color: #6EFF9A; }
.champ-tienda-estado--inactivo{ color: #FF6B6B; }
.champ-tienda-estado--         { color: rgba(255,255,255,0.4); }

/* ── Responsive ── */
@media (max-width: 500px) {
    .champ-tiendas-filtros    { padding: 14px 14px; }
    .champ-tiendas-filtro-group { flex: 1 1 100%; }
    .champ-tiendas-grid       { grid-template-columns: 1fr; }
}