/* ============================================================
   ComBack - App Cliente (userapp) - CSS de la pagina 'home'
   Externalizado desde home.html (extra_css). Cache-busted con ?v=asset_version.
   ============================================================ */

/* ===== HEADER ===== */
    .app-header {
        background: linear-gradient(135deg, var(--header-gradient-start) 0%, var(--header-gradient-end) 100%);
        color: #fff;
        /* padding-top bajo para que el logo+buscador queden al MISMO nivel que
           el boton flotante "Ingresar" (que va en top:12). */
        padding: 14px 20px 18px;
    }
    /* Logo + buscador en la MISMA fila. padding-right reserva el espacio del
       boton flotante "Ingresar" (top-cta-ingresar, arriba-derecha) para que
       queden al mismo nivel y con simetria. */
    .header-top {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-right: 52px;
    }
    /* Logo ComBack (PNG real). Blanco sobre el header morado (que ya volvio a
       tener fondo tras el fix del CSS), asi que se ve con buen contraste. */
    .header-logo-img {
        flex-shrink: 0;
        height: 34px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);  /* logo blanco sobre el morado */
    }

    /* Search: fondo blanco + texto oscuro = alto contraste. flex:1 en la fila
       (no ocupa todo el ancho porque comparte fila con el logo). */
    .search-bar {
        position: relative;
        flex: 1;
        min-width: 0;
    }
    .search-bar input {
        width: 100%;
        padding: 11px 14px 11px 40px;
        border: none;
        border-radius: 14px;
        font-size: 0.9rem;
        background: #fff;
        color: var(--text-primary);
        outline: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .search-bar input::placeholder { color: var(--text-tertiary); }
    .search-bar i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
    }
    /* Dinamico: cuando el boton flotante "Ingresa ya!" se EXPANDE (cada 8s), el
       buscador se CONTRAE para hacerle espacio (en vez de quedar tapado) y luego
       vuelve. Sincronizado con el ciclo de 8s de .top-cta-ingresar (base.html).
       Solo en movil: en desktop ese boton se va a la esquina inferior. */
    .search-bar { transition: margin-right 0.35s ease; }
    @media (max-width: 768px) {
        .search-bar.search-yield { animation: cbSearchYield 8s ease-in-out infinite; }
    }
    @keyframes cbSearchYield {
        0%, 12%   { margin-right: 0; }
        18%, 35%  { margin-right: 122px; }
        45%, 100% { margin-right: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .search-bar.search-yield { animation: none; }
    }
    /* Mientras se ESCRIBE (buscador enfocado -> body.searching), suspendemos las
       animaciones para que nada se mueva ni tape: el buscador queda a ancho
       completo y el boton "Ingresa ya!" se queda colapsado (icono). */
    @media (max-width: 768px) {
        body.searching .search-bar.search-yield { animation: none; margin-right: 0; }
        body.searching .top-cta-ingresar {
            animation: none;
            width: 44px;
            transition: width 0.25s ease;
        }
        body.searching .top-cta-ingresar span { animation: none; opacity: 0; max-width: 0; padding-right: 0; }
    }

    /* ===== BURBUJAS ESTABLECIMIENTOS ===== */
    .section-title {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 20px 20px 10px;
    }

    .bubbles-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding: 0 20px 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bubbles-scroll::-webkit-scrollbar { display: none; }

    .bubble {
        flex: 0 0 auto;
        text-align: center;
        text-decoration: none;
        color: inherit;
        scroll-snap-align: start;
        width: 76px;
    }
    .bubble-img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cb-orange) 60%, var(--cb-orange-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 6px;
        overflow: hidden;
        border: 3px solid var(--card-bg);
        box-shadow: 0 2px 12px rgba(113,104,252,0.2);
        transition: transform 0.2s;
    }
    .bubble:hover .bubble-img { transform: scale(1.08); }
    .bubble-img img { width: 100%; height: 100%; object-fit: cover; }
    .bubble-img .initials {
        color: #fff;
        font-weight: 700;
        font-size: 1.2rem;
    }
    .bubble-name {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--text-secondary);
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ===== FILTROS ===== */
    .filters-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 20px 4px;
        scrollbar-width: none;
    }
    .filters-scroll::-webkit-scrollbar { display: none; }

    /* ===== T57d: Fila de 2 dropdowns (Ciudad | Categoría) en vista lista ===== */
    .filters-row {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        padding: 14px 14px 8px;
    }
    .filter-select-wrap {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .filter-select-label {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .filter-select-label i {
        color: var(--cb-orange);
        font-size: 0.78rem;
    }
    .filter-select {
        width: 100%;
        padding: 11px 32px 11px 14px;
        border: 1.5px solid var(--border-color);
        border-radius: 12px;
        background: var(--card-bg);
        color: var(--text-primary);
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* Flecha custom via background image */
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23999' d='M6 8L0 0h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 12px center;
    }
    .filter-select:focus {
        border-color: var(--cb-orange);
        box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
    }
    .filter-gps-btn {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        border: 1.5px dashed var(--cb-orange);
        background: transparent;
        color: var(--cb-orange);
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
    }
    .filter-gps-btn:hover {
        background: var(--cb-orange);
        color: #fff;
    }
    .filter-gps-btn.detecting {
        opacity: 0.5;
        pointer-events: none;
    }

    /* ===== SELECTOR DE CIUDAD (T37) ===== */
    .city-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .city-bar::-webkit-scrollbar { display: none; }
    .city-bar .city-label {
        flex: 0 0 auto;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-right: 4px;
    }
    .city-bar .city-label i { color: var(--cb-orange); }
    .city-chip {
        flex: 0 0 auto;
        padding: 7px 16px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 600;
        text-decoration: none;
        border: 2px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-secondary);
        transition: all 0.2s;
        cursor: pointer;
    }
    .city-chip:hover, .city-chip.active {
        background: var(--cb-orange);
        color: #fff;
        border-color: var(--cb-orange);
        text-decoration: none;
    }
    .city-chip.gps-btn {
        background: transparent;
        border-style: dashed;
        color: var(--cb-orange);
    }
    .city-chip.gps-btn:hover {
        background: var(--cb-orange);
        color: #fff;
    }
    .city-chip.gps-btn.detecting {
        opacity: 0.5;
        pointer-events: none;
    }
    .filter-chip {
        flex: 0 0 auto;
        padding: 7px 18px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 600;
        text-decoration: none;
        border: 2px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-secondary);
        transition: all 0.2s;
        cursor: pointer;
    }
    .filter-chip:hover, .filter-chip.active {
        background: var(--cb-orange);
        color: #fff;
        border-color: var(--cb-orange);
        text-decoration: none;
    }

    /* ===== BANNERS CAROUSEL ===== */
    .banners-scroll {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 0 20px 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .banners-scroll::-webkit-scrollbar { display: none; }

    .banner-card {
        flex: 0 0 85%;
        max-width: 340px;
        border-radius: 16px;
        overflow: hidden;
        scroll-snap-align: start;
        position: relative;
        background: var(--card-bg);
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        color: inherit;
    }
    .banner-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
    .banner-card .banner-info {
        padding: 10px 14px;
    }
    .banner-card .banner-merchant {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--cb-orange);
    }
    .banner-card .banner-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* ===== T54/T57: HERO DE CATEGORIAS (estilo Rappi, centrado) ===== */
    .cat-hero {
        padding: 8px 14px 18px;
    }
    .cat-hero-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 14px;
        padding: 0 2px;
    }
    .cat-hero-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .cat-hero-card {
        position: relative;
        border-radius: 20px;
        padding: 22px 14px 18px;
        text-decoration: none;
        color: var(--text-primary);
        background: var(--card-bg);
        box-shadow: var(--shadow-sm);
        transition: transform 0.18s, box-shadow 0.18s;
        overflow: hidden;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;  /* T57: contenido centrado verticalmente */
        align-items: center;       /* T57: contenido centrado horizontalmente */
        text-align: center;
    }
    .cat-hero-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(111,66,193,0.18);
        text-decoration: none;
        color: var(--text-primary);
    }
    .cat-hero-card::after {
        content: '';
        position: absolute;
        right: -22px;
        bottom: -22px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        opacity: 0.10;
        z-index: 0;
    }
    /* T57: icono mas grande y centrado */
    .cat-hero-icon {
        font-size: 1.8rem;
        margin-bottom: 12px;
        z-index: 1;
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    }
    .cat-hero-name {
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.2;
        z-index: 1;
        position: relative;
    }
    .cat-hero-count {
        font-size: 0.72rem;
        color: var(--text-secondary);
        margin-top: 4px;
        z-index: 1;
        position: relative;
        font-weight: 600;
    }
    /* T57c: tarjeta con 0 locales en la ciudad seleccionada — atenuada */
    .cat-hero-card.cat-hero-empty {
        opacity: 0.5;
    }
    .cat-hero-card.cat-hero-empty:hover {
        opacity: 0.75;
    }
    /* T57c: link "Ver todos los locales" debajo del cat-hero */
    .cat-hero-seeall {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        padding: 14px 18px;
        background: var(--card-bg);
        border: 1.5px dashed var(--border-color);
        border-radius: 14px;
        text-decoration: none;
        color: var(--text-primary);
        font-weight: 700;
        font-size: 0.9rem;
        transition: all 0.2s;
    }
    .cat-hero-seeall:hover {
        border-color: var(--cb-orange);
        background: rgba(255,107,0,0.06);
        color: var(--text-primary);
        text-decoration: none;
    }
    .cat-hero-seeall > i:first-child {
        color: var(--cb-orange);
        font-size: 1rem;
    }
    /* Colores por categoria */
    .cat-hero-card[data-cat="Restaurantes"] .cat-hero-icon { background: linear-gradient(135deg, #FF6B6B, #FF8E53); }
    .cat-hero-card[data-cat="Restaurantes"]::after { background: #FF6B6B; }
    .cat-hero-card[data-cat="Entretenimiento"] .cat-hero-icon { background: linear-gradient(135deg, var(--cb-primary), var(--cb-magenta)); }
    .cat-hero-card[data-cat="Entretenimiento"]::after { background: var(--cb-primary); }
    .cat-hero-card[data-cat="Moda"] .cat-hero-icon { background: linear-gradient(135deg, var(--cb-magenta), #FFB400); }
    .cat-hero-card[data-cat="Moda"]::after { background: var(--cb-magenta); }
    .cat-hero-card[data-cat="Fitness"] .cat-hero-icon { background: linear-gradient(135deg, #28a745, #5dca7c); }
    .cat-hero-card[data-cat="Fitness"]::after { background: #28a745; }
    .cat-hero-card[data-cat="Servicios"] .cat-hero-icon { background: linear-gradient(135deg, #2980B9, #6dd5fa); }
    .cat-hero-card[data-cat="Servicios"]::after { background: #2980B9; }
    .cat-hero-card[data-cat="Cafeteria"] .cat-hero-icon { background: linear-gradient(135deg, #8B5E3C, #C8865A); }
    .cat-hero-card[data-cat="Cafeteria"]::after { background: #8B5E3C; }
    /* Default para tipos sin color especifico */
    .cat-hero-card .cat-hero-icon { background: linear-gradient(135deg, var(--cb-primary, var(--cb-primary)), var(--cb-primary-light, var(--cb-magenta))); }
    @media (min-width: 600px) {
        .cat-hero-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    }
    @media (min-width: 1024px) {
        .cat-hero-grid { grid-template-columns: repeat(4, 1fr); }
    }

    /* ===== CARDS ESTABLECIMIENTOS (T51: grid vertical 2 cols en mobile) ===== */
    .merchant-list {
        padding: 0 14px 8px;  /* T51b: reducido bottom padding */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .merchant-item {
        display: flex;
        flex-direction: column;
        background: var(--card-bg);
        border-radius: 16px;
        padding: 12px 10px 10px;
        text-decoration: none;
        color: inherit;
        box-shadow: var(--shadow-sm);
        transition: transform 0.18s, box-shadow 0.18s;
        min-width: 0;
        height: 100%;
        min-height: 135px;  /* T51c: reducido a 135 */
        position: relative;  /* T51c: contenedor del badge de tipo */
    }
    .merchant-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        text-decoration: none;
        color: inherit;
    }
    .merchant-item-logo {
        /* Alto FIJO; el ancho se acomoda al logo (mas ancho para horizontales
           tipo RUDO) hasta un maximo. La grilla queda pareja por el alto igual. */
        height: 68px;
        width: fit-content;
        min-width: 68px;
        max-width: 140px;
        border-radius: 12px;   /* esquinas sutiles */
        /* Degradado solo de fondo para las INICIALES (cuando no hay logo). */
        background: linear-gradient(135deg, var(--cb-orange) 60%, var(--cb-orange-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
        margin: 0 auto 6px;
        box-sizing: border-box;
    }
    /* Con logo: SIN fondo ni borde blanco extra. El logo se muestra completo y
       proporcional, con el alto fijo y el ancho ajustado a su forma. Universal. */
    .merchant-item-logo.has-logo { background: transparent; }
    .merchant-item-logo img {
        height: 100%;
        width: auto;
        max-width: 140px;
        object-fit: contain;
        display: block;
    }
    .merchant-item-logo .initials { color: #fff; font-weight: 700; font-size: 1.25rem; }
    /* T51c: badge con icono del tipo en esquina superior izquierda de la CARD
       (afuera del logo, para que se vea como una etiqueta). */
    .merchant-type-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cb-orange) 60%, var(--cb-orange-light) 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.18);
        z-index: 2;
    }
    /* T-QR: badge de % de cashback en esquina sup. derecha. Se rellena desde el
       cache del dispositivo (localStorage cb_rates); oculto si no hay dato. */
    .merchant-cb-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        display: none;
        align-items: center;
        gap: 3px;
        padding: 3px 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, #28a745 55%, #5dca7c 100%);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(0,0,0,0.18);
        z-index: 2;
    }
    .merchant-cb-badge.is-shown { display: inline-flex; }
    .merchant-cb-badge i { font-size: 0.66rem; opacity: 0.9; }
    .merchant-item-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .merchant-item-name {
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
    }
    /* T51b: descripcion en UNA sola linea con ellipsis */
    .merchant-item-desc {
        font-size: 0.72rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    /* T51b: las tags ahora viven embebidas en el badge superior, quitamos
       la fila de tags abajo para ahorrar espacio. */
    .merchant-item-tags { display: none; }
    .merchant-item-arrow { display: none; }

    /* ===== EMPTY ===== */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-tertiary);
    }
    .empty-state i { font-size: 3rem; margin-bottom: 12px; }

    /* T57: Boton "Volver" con flecha palpitante + borde tipo circuito morado.
       Sin fondo solido — solo borde animado que recorre el contorno. */
    .cb-back-btn-circuit {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 18px;
        padding: 10px 22px 10px 18px;
        border-radius: 28px;
        text-decoration: none;
        color: var(--cb-primary);
        font-weight: 700;
        font-size: 0.92rem;
        background: transparent;
        z-index: 0;
        overflow: visible;
    }
    .cb-back-btn-circuit:hover {
        color: var(--cb-primary);
        text-decoration: none;
        background: rgba(111,66,193,0.05);
    }
    /* Borde "circuito": gradiente animado morado→rosa→morado que recorre
       el contorno. Usamos mask-composite para que solo se vea el borde. */
    .cb-back-btn-circuit::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(90deg,
            var(--cb-primary) 0%,
            var(--cb-magenta) 25%,
            var(--cb-primary) 50%,
            var(--cb-magenta) 75%,
            var(--cb-primary) 100%);
        background-size: 300% 100%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
                      linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        animation: cbCircuitFlow 2.2s linear infinite;
        z-index: -1;
    }
    @keyframes cbCircuitFlow {
        0%   { background-position: 0% 50%; }
        100% { background-position: 300% 50%; }
    }
    /* Flecha palpitante: pequeño desplazamiento + opacidad */
    .cb-back-btn-circuit i {
        animation: cbArrowPulse 1.4s ease-in-out infinite;
        font-size: 0.95rem;
    }
    @keyframes cbArrowPulse {
        0%, 100% { transform: translateX(0); opacity: 1; }
        50%      { transform: translateX(-6px); opacity: 0.5; }
    }

    /* ===== TABLET ===== */
    @media (min-width: 600px) {
        .merchant-list {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .banner-card { flex: 0 0 45%; max-width: 420px; }
        .bubble { width: 84px; }
        .bubble-img { width: 72px; height: 72px; }
    }

    /* ===== DESKTOP ===== */
    @media (min-width: 1024px) {
        .page-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        .app-header {
            padding: 24px calc((100% - 1200px) / 2 + 20px) 20px;
        }
        .merchant-list {
            grid-template-columns: repeat(4, 1fr);
        }
        .banner-card { flex: 0 0 32%; max-width: 380px; }
    }