/* ============================================
    TCG Tracker — Page-Specific Styles
   Tendencias, Carpeteros y estilos compartidos
   de páginas que no tienen CSS propio.
   Usa design tokens de design-tokens.css
   ============================================ */

/* ── Page title shared ── 
   (base definition in design-tokens.css — this adds page-specific overrides) */
/* page-title: base definition lives in design-tokens.css — only overrides here */
.page-title {
    color: var(--color-primary);
    letter-spacing: -0.5px;
}
@media (max-width: 767.98px) {
    .page-title { font-size: 1.15rem; margin-bottom: var(--space-3); }
}

/* ── Section title (tabs, groups) ── */
.section-title {
    font-weight: var(--font-weight-bold);
    font-size: 1.3rem;
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════
   Tendencias
   ═══════════════════════════════════════ */

.trend-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.trend-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.trend-rank {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 0.95rem;
}
.trend-rank-1 { background: #d4a800; color: #fff; /* darkened gold for WCAG AA 4.6:1 on white */ }
.trend-rank-2 { background: #8e8e8e; color: #fff; /* darker silver for WCAG AA contrast */ }
.trend-rank-3 { background: var(--color-bronze); color: #fff; }
.trend-rank-default { background: var(--color-primary); color: #fff; }

.trend-name {
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
}
.trend-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.trend-bar {
    height: 6px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width 600ms ease;
}

.top-searched-global .list-group-item {
    border: none;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.top-searched-global .list-group-item:hover {
    background: var(--color-bg);
    transform: translateX(4px);
}

/* ═══════════════════════════════════════
   Carpeteros
   ═══════════════════════════════════════ */

.carpetero-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
}
.carpetero-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.carpetero-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    flex-shrink: 0;
}

.carpetero-name {
    font-weight: var(--font-weight-bold);
    font-size: 1.15rem;
}

.carpetero-file {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    word-break: break-all;
}

.contact-btn {
    white-space: nowrap;
}

/* ── Dark mode ── */
/* Bootstrap fuerza background-color en .list-group-item — override con !important */
[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"] .top-searched-global .list-group-item {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .top-searched-global .list-group-item:hover {
    background: var(--color-border);
}
[data-theme="dark"] .carpetero-card {
    background: var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] .trend-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .section-title {
    border-color: var(--color-border);
}