/* "Hoy conviene" (WP-C): hero promise, home strip, ticker items, good-price badges.
   Mobile first (390 px); colours come from css/tokens.css so light and dark both work. */

/* --- Hero promise (replaces the 3-step "Armá tu lista" guide) --- */
.hoy-hero {
    max-width: 560px;
    margin: -1rem auto 1rem;
    padding: 0 0.5rem;
    transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease;
}

.hoy-hero-title {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-heading);
}

.hoy-hero-sub {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.hero.is-searching .hoy-hero,
.hero:has(#searchResults.show) .hoy-hero {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The strip steps aside while search results are on screen. */
.hero.is-searching #hoy-conviene-mount,
.hero:has(#searchResults.show) #hoy-conviene-mount {
    display: none;
}

/* --- Strip --- */
.hoy {
    max-width: 640px;
    margin: 1rem auto 0;
    padding: 0.9rem 0.9rem 0.75rem;
    text-align: left;
    background: var(--surface-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

.hoy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.hoy-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
}

.hoy-date {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.hoy-settings {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-full);
    background: var(--surface-control);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.hoy-settings:hover,
.hoy-settings:focus-visible {
    color: var(--text-primary);
    border-color: var(--brand-primary);
}

.hoy-block {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.hoy-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

/* The founder's home: the deals list opens on tap (a new visitor's zone chips head it), and
   "Ver todas las ofertas" stays visible while it is closed. */
.hoy-block--deals .hoy-block-head {
    align-items: center;
    flex-wrap: wrap;
}

.hoy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 32px;
    margin-left: auto;
    padding: 0 0.65rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-full);
    background: none;
    color: var(--text-link, var(--brand-primary));
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.hoy-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

[data-theme="light"] .hoy-toggle {
    color: var(--brand-primary);
}

.hoy-deals-body[hidden] {
    display: none;
}

.hoy-block-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.hoy-muted {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

.hoy-empty {
    margin: 0.2rem 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.hoy-warn {
    margin: 0 0 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, 0.12);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.hoy-fine {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.hoy-asof {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

.hoy-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;   /* WCAG 2.2 target size */
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-link, var(--brand-primary));
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.hoy-link:hover {
    text-decoration: underline;
}

[data-theme="light"] .hoy-link,
[data-theme="light"] .hoy-more {
    color: var(--brand-primary);
}

.hoy-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-link, var(--brand-primary));
    text-decoration: none;
}

.hoy-more:hover {
    text-decoration: underline;
}

/* --- Onboarding --- */
.hoy-onb {
    position: relative;
    margin-top: 0.75rem;
    padding: 0.75rem 0.8rem 0.8rem;
    border-radius: var(--radius-md);
    background: var(--brand-overlay-light);
    border: 1px solid var(--brand-overlay-medium);
}

.hoy-onb-close {
    position: absolute;
    top: 0.25rem;
    right: 0.35rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--text-tertiary);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.hoy-onb-step {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.hoy-onb-q {
    margin: 0.15rem 0 0.1rem;
    padding-right: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
}

.hoy-onb-help {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.hoy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.hoy-chip {
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hoy-chip:hover {
    border-color: var(--brand-primary);
}

.hoy-chip.is-on {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.hoy-chip--more {
    border-style: dashed;
    color: var(--text-secondary);
}

/* Onboarding nobody asked for yet: one compact row (question + chips + close), so the deals
   stay on the first screen of a phone (final review confirmed 25). */
.hoy-onb--row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.6rem;
    padding: 0.45rem 2.2rem 0.45rem 0.7rem;
}

.hoy-onb--row .hoy-onb-close {
    top: 50%;
    transform: translateY(-50%);
}

.hoy-onb-row-q {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-heading);
}

.hoy-chips--row {
    margin-top: 0;
    gap: 0.35rem;
}

.hoy-chip--sm {
    min-height: 32px;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
}

/* A new visitor's head: the title and the date on one line (no zone pill: the zone chips head
   the deals, see .hoy-zone). */
.hoy-head--compact {
    align-items: baseline;
    flex-wrap: wrap;
}

.hoy-head--compact .hoy-date {
    margin: 0;
}

/* "Ofertas de hoy en [Rosario] [AMBA] [Otra zona]": the zone question as the deals' title
   (final review confirmed 25). .is-shown marks the zone the deals are for until the user picks. */
.hoy-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.3rem;
}

.hoy-chip.is-shown {
    border-color: var(--brand-primary);
    color: var(--text-link);
    font-weight: 700;
}

.hoy-onb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.75rem;
}

.hoy-btn {
    min-height: 38px;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-full);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.hoy-btn--primary {
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.hoy-btn--primary:hover {
    background: var(--brand-primary-hover);
}

.hoy-btn--primary[disabled] {
    opacity: 0.7;
    cursor: progress;
}

.hoy-btn--ghost {
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-primary);
}

.hoy-btn--wide {
    width: 100%;
}

/* --- Bank of the day --- */
.hoy-bank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.hoy-bank-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hoy-bank-pct {
    flex-shrink: 0;
    min-width: 3.1rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--success-surface-softer);
    color: var(--success-text);
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}

.hoy-bank-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hoy-bank-main {
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--text-primary);
}

.hoy-bank-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* --- Deals --- */
.hoy-deals {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hoy-deals li + li {
    border-top: 1px solid var(--border-subtle);
}

/* the deal (a link to the chain, or a button that searches it) and its history button */
.hoy-deals li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hoy-deal {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 56px;
    padding: 0.45rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.hoy-deal-history {
    flex-shrink: 0;
    min-height: 36px;
    margin-left: 0;
}

.hoy-deal:hover .hoy-deal-name,
.hoy-deal:focus-visible .hoy-deal-name {
    color: var(--text-link, var(--brand-primary));
}

.hoy-deal-img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #fff;
}

.hoy-deal-img--empty {
    display: inline-block;
    background: var(--surface-control);
}

.hoy-deal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.hoy-deal-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.25;
    color: var(--text-primary);
}

.hoy-deal-meta {
    margin-top: 0.1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hoy-deal-meta strong {
    color: var(--text-heading);
    font-weight: 700;
}

.hoy-deal-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
    max-width: 38%;
}

.hoy-tag {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.hoy-tag--gap,
.hoy-tag--drop {
    background: var(--success-surface-softer);
    color: var(--success-text);
}

.hoy-tag--low {
    border: 1px solid var(--success-border-soft);
    color: var(--success-text);
    font-weight: 600;
}

.hoy-tag--multi {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-strong);
}

[data-theme="dark"] .hoy-tag--multi,
:root:not([data-theme]) .hoy-tag--multi {
    color: #fbbf24;
}

/* What the gap percentage is measured against (the region's typical price). */
.hoy-tag-ref {
    max-width: 9.5rem;
    font-size: 0.68rem;
    line-height: 1.2;
    text-align: right;
    color: var(--text-tertiary);
}

/* --- Tu jugada --- */
.hoy-jugada-main {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.hoy-jugada-main strong {
    color: var(--text-heading);
}

.hoy-jugada-sub {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.hoy-jugada-save {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--success-text);
}

.hoy-jugada-with {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.hoy-jugada-bank {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* --- Ticker items fed from deals (the ticker frame is styled in css/styles.css) --- */
/* the strip already shows every deal: no ticker (js/hoy.js renderTicker) */
.price-ticker.hoy-ticker-off {
    display: none;
}

.price-ticker-item.hoy-ticker-lead {
    font-weight: 700;
    color: var(--text-primary);
    cursor: default;
}

.hoy-ticker-price {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.hoy-ticker-multi {
    color: var(--warning-strong);
    font-weight: 600;
}

/* own class instead of app.js's .ticker-variation.down (#22c55e is 2.3:1 on the light page) */
.price-ticker-item .hoy-ticker-pct {
    color: var(--success-text);
}

/* --- Good-price badge (search cards and Ver Precios) --- */
.hoy-badge-row {
    margin: 0.15rem 0 0.1rem;
    text-align: left;       /* the card text is left-aligned */
    align-self: flex-start;
}

.hoy-badge {
    display: inline-block;
    max-width: 100%;
    padding: 0.12rem 0.5rem;
    border-radius: 8px;
    background: var(--success-surface-softer);
    color: var(--success-text);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.hoy-badge--drop7d {
    background: transparent;
    border: 1px solid var(--success-border-soft);
}

.hoy-badge-chain {
    font-weight: 500;
    opacity: 0.85;
}

.hoy-price-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0 0.25rem 0.25rem;
}

.hoy-price-badges .hoy-badge strong {
    font-weight: 800;
}

.hoy-price-badges-note {
    flex-basis: 100%;
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* Light theme: the shared success/warning tokens are too pale for 11-12 px text on these
   tinted chips (2.8-3.8:1). Darker shades keep them >= 4.5:1; the "llevando N" label is the
   multi-buy disclosure, so it must stay readable. */
[data-theme="light"] .hoy-tag--gap,
[data-theme="light"] .hoy-tag--drop,
[data-theme="light"] .hoy-tag--low,
[data-theme="light"] .hoy-badge,
[data-theme="light"] .hoy-bank-pct,
[data-theme="light"] .hoy-jugada-save,
[data-theme="light"] .price-ticker-item .hoy-ticker-pct {
    color: #047857;
}

[data-theme="light"] .hoy-tag--multi,
[data-theme="light"] .hoy-ticker-multi {
    color: #92400e;
}

/* Phone: a tighter frame, so the strip's first deal is on the first screen, clear of the
   floating cart button, even under two or three rows of 'Más buscados' chips (final review
   confirmed 25). The H1 says the promise; its second line, which restates it, waits for wider
   screens. */
@media (max-width: 480px) {
    .hoy-hero {
        margin-bottom: 0.75rem;
    }

    .hoy-hero-title {
        margin-bottom: 0;
    }

    .hoy-hero-sub {
        display: none;
    }

    .hoy {
        margin-top: 0.5rem;
        padding: 0.7rem 0.8rem 0.65rem;
    }

    .hoy-block {
        margin-top: 0.6rem;
        padding-top: 0.55rem;
    }

    .hoy-block--zone {
        margin-top: 0.45rem;
        padding-top: 0.45rem;
    }

    .hoy-zone {
        margin-bottom: 0.2rem;
    }

    .hoy-deal {
        min-height: 52px;
        padding: 0.35rem 0;
    }

    .hoy-deal-tags {
        gap: 0.1rem;
    }

    .hoy-deal-tags .hoy-tag {
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .hoy-more {
        margin-top: 0.35rem;
    }

    .hoy-asof {
        margin-top: 0.55rem;
    }
}

@media (min-width: 769px) {
    .hoy-hero-title {
        font-size: 1.6rem;
    }

    .hoy-hero-sub {
        font-size: 1rem;
    }

    .hoy {
        padding: 1.1rem 1.2rem 0.9rem;
    }
}