/* ==========================================================
   Champions Tiendas Participantes  |  champions-tiendas.css

   Tipografías (deben estar cargadas en el tema):
     'MulaRSlim ExtraBold'  – labels, nombres de tienda
     'MulaSlim Light'       – textos, filtros, info
   ========================================================== */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --ct-navy:        #1A237E;
    --ct-cyan:        #00C8F0;
    --ct-yellow:      #FFC107;
    --ct-white:       #FFFFFF;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.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(--ct-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(--ct-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(--ct-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(--ct-navy);
    color:      var(--ct-white);
}
.champ-tiendas-select:focus,
.champ-tiendas-input:focus {
    border-color: var(--ct-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; }

/* ── Spinner ─────────────────────────────────────────────── */
.champ-spinner {
    width:        40px;
    height:       40px;
    border:       4px solid rgba(255,255,255,0.2);
    border-top-color: var(--ct-yellow);
    border-radius: 50%;
    animation:    ctSpin 0.75s linear infinite;
}
@keyframes ctSpin { to { transform: rotate(360deg); } }

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

/* ── Card ────────────────────────────────────────────────── */
.champ-tienda-card {
    background:    var(--ct-navy);
    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(--ct-yellow), var(--ct-cyan));
}
.champ-tienda-card:hover {
    transform:    translateY(-3px);
    background:   var(--ct-navy);
    border-color: var(--ct-yellow);
    box-shadow:   0 8px 24px rgba(0,0,0,0.35);
}

.champ-tienda-tipo {
    font-family:    'MulaSlim Light', sans-serif;
    color:          var(--ct-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(--ct-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; }

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