/* ============================================
   TCG Tracker — Centro de Precios
   ============================================ */

/* ── Hero ── */
.precios-hero { padding: var(--space-4) 0 0; }
.precios-hero-title {
    font-size: 2rem; font-weight: 800; letter-spacing: -.5px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.precios-hero-sub { color: var(--color-text-muted); font-size: 1.05rem; max-width: 520px; margin: .5rem auto 0; }

/* ── Search bar ── */
.precios-search-wrap { max-width: 640px; margin: 0 auto; position: relative; }
.precios-search-bar {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    transition: box-shadow .2s;
}
.precios-search-bar:focus-within { box-shadow: 0 4px 32px rgba(67,97,238,.18); }
.precios-search-bar .input-group-text {
    background: var(--color-surface); border: none; color: var(--color-text-muted); padding-left: 1.2rem;
}
.precios-search-bar .form-control {
    border: none; background: var(--color-surface); font-size: 1.1rem;
}
.precios-search-bar .form-control:focus { box-shadow: none; }
.precios-search-bar .btn { border-radius: 0; padding: .6rem 1.5rem; font-weight: 600; }

/* ── Suggest ── */
.precios-suggest-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--color-surface); border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto;
    display: none;
}
.precios-suggest-list.open { display: block; }
.precios-suggest-item {
    padding: .6rem 1.2rem; cursor: pointer; font-size: .95rem;
    transition: background .12s;
}
.precios-suggest-item:hover { background: var(--color-bg); }
.precios-suggest-item mark { background: rgba(67,97,238,.15); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ── Cards ── */
.precios-card {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden;
    transition: box-shadow .2s;
}
.precios-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.precios-card-header {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border);
    display: flex; justify-content: space-between; align-items: center;
}
.precios-card-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.precios-card-body { padding: 1rem 1.25rem; }

/* ── Period btns ── */
.precios-period-btns { display: flex; gap: 4px; }
.precios-period-btn {
    padding: 4px 12px; border-radius: 20px; border: 1px solid var(--color-border);
    background: transparent; color: var(--color-text-muted); font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.precios-period-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.precios-period-btn.active {
    background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* ── Top cartas grid ── */
.precios-top-grid { display: flex; flex-direction: column; gap: 2px; }
.precios-top-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .5rem; border-radius: var(--radius);
    cursor: pointer; transition: background .15s;
}
.precios-top-item:hover { background: var(--color-bg); }
.precios-top-rank {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-bg); color: var(--color-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.precios-top-item:nth-child(1) .precios-top-rank { background: #ffd166; color: #5c4813; }
.precios-top-item:nth-child(2) .precios-top-rank { background: #c0c0c0; color: #444; }
.precios-top-item:nth-child(3) .precios-top-rank { background: #cd7f32; color: #fff; }
.precios-top-info { flex: 1; min-width: 0; }
.precios-top-name {
    font-weight: 600; font-size: .95rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.precios-top-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.precios-tag {
    font-size: .7rem; padding: 1px 8px; border-radius: 10px;
    background: var(--color-bg); color: var(--color-text-muted); font-weight: 500;
}
.precios-tag--green { background: rgba(42,157,143,.12); color: #2a9d8f; }
.precios-tag--red { background: rgba(230,57,70,.1); color: #e63946; }
.precios-top-avg {
    text-align: right; font-size: 1.15rem; font-weight: 700; color: var(--color-primary);
    flex-shrink: 0;
}
.precios-top-avg small { display: block; font-size: .65rem; font-weight: 400; color: var(--color-text-muted); }

/* ── Cambios ── */
.precios-cambio-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem .5rem; border-radius: var(--radius);
    cursor: pointer; transition: background .15s;
}
.precios-cambio-item:hover { background: var(--color-bg); }
.precios-cambio-name {
    flex: 1; font-weight: 600; font-size: .9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.precios-cambio-prices { font-size: .8rem; flex-shrink: 0; }
.precios-cambio-pct { font-weight: 700; font-size: .9rem; flex-shrink: 0; min-width: 65px; text-align: right; }

/* ── Recientes ── */
.precios-recientes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3);
}
.precios-reciente-item {
    padding: .75rem; border-radius: var(--radius); background: var(--color-bg);
    cursor: pointer; transition: all .15s;
}
.precios-reciente-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.precios-reciente-name {
    font-weight: 600; font-size: .9rem; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.precios-reciente-precio { font-size: 1.2rem; font-weight: 700; color: var(--color-primary); }
.precios-reciente-meta { font-size: .75rem; color: var(--color-text-muted); margin-top: 2px; }

/* ── Empty state ── */
.precios-empty-state {
    text-align: center; padding: var(--space-6) var(--space-3); color: var(--color-text-muted);
}
.precios-empty-state i { font-size: 3rem; display: block; margin-bottom: var(--space-2); }
.precios-empty-state h3 { font-size: 1.1rem; margin-bottom: .5rem; }

.precios-empty-chart {
    text-align: center; padding: var(--space-6) var(--space-3); color: var(--color-text-muted);
}
.precios-empty-chart i { font-size: 2.5rem; display: block; margin-bottom: var(--space-2); }

/* ── Historial stats (reuse from search.css) ── */
.precios-card .historial-stats { padding: 0; }

/* ── Dark mode ── */
[data-theme="dark"] .precios-search-bar { box-shadow: 0 4px 24px rgba(0,0,0,.3); }
[data-theme="dark"] .precios-search-bar:focus-within { box-shadow: 0 4px 32px rgba(67,97,238,.25); }
[data-theme="dark"] .precios-card { box-shadow: 0 2px 12px rgba(0,0,0,.2); }
[data-theme="dark"] .precios-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .precios-suggest-list { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .precios-reciente-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .precios-hero-title { font-size: 1.5rem; }
    .precios-search-bar .btn { padding: .5rem 1rem; font-size: .9rem; }
    .precios-cambio-prices { display: none; }
    .precios-card-header { flex-direction: column; gap: .5rem; align-items: flex-start; }
    .precios-period-btns { width: 100%; justify-content: flex-start; }
    #precios-chart-wrap { height: 260px !important; }
    .precios-top-avg { font-size: 1rem; }
    .precios-top-name { font-size: .85rem; }
}
@media (max-width: 575.98px) {
    .precios-hero-title { font-size: 1.25rem; }
    .precios-hero-sub { font-size: .9rem; }
    .precios-recientes-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .precios-reciente-item { padding: .5rem; }
    .precios-reciente-precio { font-size: 1rem; }
    .precios-card-body { padding: .75rem; }
    .precios-top-meta { gap: 4px; }
    .precios-tag { font-size: .65rem; padding: 1px 6px; }
    #precios-chart-wrap { height: 220px !important; }
    .historial-stats { gap: var(--space-2); }
    .historial-stat { min-width: 65px; }
}