/* ============================================
   TCG Tracker — Search Page Styles
   Extracted from index.html inline <style>.
   Usa design tokens de design-tokens.css
   ============================================ */

/* ── Persistent search bar ── */
.search-bar-wrap {
    padding-top: var(--space-4);
    transition: padding var(--transition);
}

/* Search input focus polish */
.search-bar-wrap .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(34, 34, 59, 0.1);
}
.search-bar-wrap .form-control-lg {
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar-wrap.compact {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius);
}

/* ── Filters ── */
#filtro-stock, #filtro-tienda { margin-top: var(--space-1); }

/* ── Page title override ── */
h1.page-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-6);
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

/* ── DataTables search field ── */
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(34, 34, 59, 0.08);
}

/* ── Table header ── */
.table thead th {
    background: var(--color-primary);
    color: #fff;
}

/* ── Text truncate with ellipsis ── */
.text-truncate-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 120px;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    h1.page-title { font-size: 1.15rem; margin-bottom: var(--space-3); }
    #filter-collapse .col-12.col-md-3.text-end {
        display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    }
}
@media (max-width: 575.98px) {
    #results-area { padding: var(--space-2) !important; }
    .historial-stats { gap: var(--space-2); }
    .historial-stat { min-width: 70px; padding: var(--space-1) var(--space-2); }
    .historial-stat-value { font-size: 1rem; }
}

/* ── Card grid ── */
#vista-tarjetas-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
    align-items: stretch;
    width: 100%;
}
@media (min-width: 576px) {
    #vista-tarjetas-container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--space-4);
    }
}

#vista-tarjetas-container .card {
    display: flex;
    flex-direction: column;
}

/* ── Card image wrapper (5:7 TCG card ratio) ── */
.card-img-wrap {
    width: 100%;
    height: 0;
    padding-bottom: 140%;
    position: relative;
    background: var(--color-bg);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--color-surface);
    border-bottom: none;
}
.card-img-wrap .img-tarjeta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Card title clamp ── */
.card-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    text-align: center;
    margin-bottom: var(--space-2);
}

/* ── No-image placeholder ── */
.card-img-placeholder {
    width: 100%;
    height: 0;
    padding-bottom: 125%;
    position: relative;
    background: var(--color-bg);
    border-radius: var(--radius) var(--radius) 0 0;
}
.card-img-placeholder i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-border);
    font-size: 3rem;
}

/* ── Card body layout ── */
#vista-tarjetas-container .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
}

/* ── Store progress chips container ── */
#store-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
    margin-top: var(--space-2);
}

/* ── Auto-suggest dropdown ── */
.suggest-wrap {
    position: relative;
}
.suggest-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.suggest-list.open {
    display: block;
}
.suggest-list li {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: background var(--transition);
}
.suggest-list li.active,
.suggest-list li:hover {
    background: var(--color-bg);
}
.suggest-list li mark {
    background: transparent;
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    padding: 0;
}

/* ── Search button loading state ── */
.btn-accent .btn-spinner {
    display: none;
}
.btn-accent.is-loading .btn-buscar-text {
    display: none;
}
.btn-accent.is-loading .btn-spinner {
    display: inline-block;
}

/* ── Historial de precios ── */
.historial-stats {
    display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center;
    margin-bottom: var(--space-3);
}
.historial-stat {
    text-align: center; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius); background: var(--color-bg);
    min-width: 90px;
}
.historial-stat-value {
    font-size: 1.25rem; font-weight: 700; color: var(--color-primary);
}
.historial-stat-label {
    font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px;
}
.historial-empty {
    text-align: center; padding: var(--space-6) var(--space-3); color: var(--color-text-muted);
}
.historial-empty i { font-size: 2.5rem; display: block; margin-bottom: var(--space-2); }
.btn-historial {
    font-size: .7rem; padding: 2px 8px; border-radius: 20px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text-muted); cursor: pointer; transition: all .15s ease;
}
.btn-historial:hover {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.btn-wishlist {
    font-size: .75rem; padding: 2px 7px; border-radius: 20px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text-muted); cursor: pointer; transition: all .15s ease;
    line-height: 1.4;
}
.btn-wishlist:hover, .btn-wishlist.active {
    background: #ffc107; color: #212529; border-color: #ffc107;
}
.btn-alerta {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; padding: 2px 7px; border-radius: 20px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text-muted); cursor: pointer; transition: all .15s ease;
    text-decoration: none; line-height: 1.4;
}
.btn-alerta:hover {
    background: #0dcaf0; color: #212529; border-color: #0dcaf0;
}

/* ── Dark mode overrides (search page) ── */
[data-theme="dark"] #results-area {
    background: var(--color-surface) !important;
    color: var(--color-text);
}
[data-theme="dark"] .suggest-list li.active,
[data-theme="dark"] .suggest-list li:hover {
    background: var(--color-border);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-lg {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--color-text-muted);
}
[data-theme="dark"] .table {
    --bs-table-bg: var(--color-surface);
    --bs-table-color: var(--color-text);
    --bs-table-striped-bg: var(--color-bg);
    --bs-table-hover-bg: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .table thead th {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-border);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--color-border);
}
[data-theme="dark"] .card {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-header {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] .progress {
    background-color: var(--color-border);
}
[data-theme="dark"] .badge-stock-pill,
[data-theme="dark"] .badge {
    border-color: transparent;
}
[data-theme="dark"] .btn-outline-primary {
    color: var(--color-info);
    border-color: var(--color-info);
}
[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--color-info);
    color: #fff;
}
[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .btn-outline-success {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
[data-theme="dark"] .btn-outline-success:hover {
    background: var(--color-secondary);
    color: #fff;
}
[data-theme="dark"] .btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
[data-theme="dark"] .btn-outline-danger:hover {
    background: var(--color-danger);
    color: #fff;
}
[data-theme="dark"] .btn-outline-warning {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
[data-theme="dark"] .btn-outline-warning:hover {
    background: var(--color-accent);
    color: #000;
}
[data-theme="dark"] .text-muted {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--color-border) !important;
}
[data-theme="dark"] hr {
    border-color: var(--color-border);
    opacity: 1;
}
[data-theme="dark"] .input-group-text {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] .list-group-item {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}
[data-theme="dark"] .pagination .page-link {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] .pagination .page-link:hover {
    background: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background: var(--color-surface);
    color: var(--color-text-muted);
}
[data-theme="dark"] .alert-info    { background:#1a2a3a; color:#90caf9; border-color:#1e3a5f; }
[data-theme="dark"] .alert-success { background:#1a2e1a; color:#a5d6a7; border-color:#1b5e20; }
[data-theme="dark"] .alert-warning { background:#2a2010; color:#ffe082; border-color:#5f4100; }
[data-theme="dark"] .alert-danger  { background:#2a1010; color:#ef9a9a; border-color:#5f1010; }
[data-theme="dark"] .breadcrumb {
    background: transparent;
}
[data-theme="dark"] .breadcrumb-item a { color: var(--color-info); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--color-text-muted); }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-text-muted);
    border-color: transparent;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--color-surface);
    border-color: var(--color-border) var(--color-border) var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] .nav-tabs { border-color: var(--color-border); }
[data-theme="dark"] .aviso-sistema.alert-info    { background:#1a2a3a; color:#90caf9; }
[data-theme="dark"] .aviso-sistema.alert-warning { background:#2a2010; color:#ffe082; }
[data-theme="dark"] .aviso-sistema.alert-danger  { background:#2a1010; color:#ef9a9a; }
[data-theme="dark"] .aviso-sistema.alert-success { background:#1a2e1a; color:#a5d6a7; }

/* ── Empty state enhancement ── */
#search-empty-state .empty-state-text {
    color: var(--color-text-muted);
}

/* ── Filter clear button: more visible ── */
#filter-collapse .btn-link.text-muted {
    color: var(--color-danger) !important;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}
#filter-collapse .btn-link.text-muted:hover {
    opacity: 1;
}

/* ── Hero search icon: uses primary in light, accent in dark for better contrast ── */
.hero-search-icon { color: var(--color-primary); }
[data-theme="dark"] .hero-search-icon { color: var(--color-accent); }