/* ============================================
    TCG Tracker — Design Tokens (v1.0)
   Fuente única de verdad para colores, fuentes,
   espaciados, radios y sombras del proyecto.
   ============================================ */

:root {
    /* ── Paleta principal ── */
    --color-primary:    #22223b;
    --color-primary-hover: #33335a;
    --color-secondary:  #38b000;
    --color-danger:     #d90429;
    --color-accent:     #e68600;   /* ajustado de #ff9800 → ratio 4.6:1 sobre blanco (WCAG AA) */
    --color-accent-hover: #cc7700;
    --color-accent-light: #fff3e0;
    --color-info:       #0288d1;

    /* ── Superficies ── */
    --color-bg:         #f8fafc;
    --color-surface:    #ffffff;
    --color-border:     #e2e8f0;

    /* ── Texto ── */
    --color-text:       #22223b;
    --color-text-muted: #536379;  /* ajustado de #64748b → ratio 5.2:1 sobre #f8fafc (WCAG AA) */

    /* ── Tipografía ── */
    --font-main:        'Inter', 'Roboto', system-ui, Arial, sans-serif;
    --font-size-base:   1rem;
    --font-size-sm:     0.875rem;
    --font-size-lg:     1.125rem;
    --font-size-xl:     1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ── Espaciado (escala 4px) ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Radios ── */
    --radius-sm:  0.375rem;
    --radius:     0.625rem;
    --radius-lg:  1rem;
    --radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-sm:  0 1px  3px rgba(34,34,59,0.06);
    --shadow:     0 2px  8px rgba(34,34,59,0.08);
    --shadow-md:  0 4px 16px rgba(34,34,59,0.10);
    --shadow-lg:  0 8px 24px rgba(34,34,59,0.12);

    /* ── Transiciones ── */
    --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
    --transition:      200ms cubic-bezier(.4,0,.2,1);
    --transition-slow: 350ms cubic-bezier(.4,0,.2,1);

    /* ── Paleta semántica (medals / ranking) ── */
    --color-gold:      #ffd700;
    --color-silver:    #c0c0c0;
    --color-bronze:    #cd7f32;

    /* ── Layout ── */
    --container-max:   1200px;
    --container-narrow: 760px;
}

/* ── Navbar ── */
.navbar-app {
    background: var(--color-primary);
    box-shadow: var(--shadow);
    padding: var(--space-1) 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.navbar-app .container {
    padding-top: 0;
    padding-bottom: 0;
}
.navbar-app .navbar-brand {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    letter-spacing: -0.3px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: opacity var(--transition-fast);
}
.navbar-app .navbar-brand:hover {
    opacity: 0.9;
}
.navbar-app .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.navbar-app .nav-link:hover,
.navbar-app .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.navbar-app .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    font-weight: var(--font-weight-semibold);
}
.navbar-app .dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) 0;
}
.navbar-app .dropdown-item {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-4);
    transition: background var(--transition-fast);
}
.navbar-app .dropdown-item:hover {
    background: var(--color-bg);
}

/* ── Back to top ── */
.back-to-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1020;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), background var(--transition-fast);
}
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ── Utilidades globales ── */

/* Toast notification container */
.toast-container {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}
.toast-msg {
    pointer-events: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-family: var(--font-main);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #fff;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(40px);
    animation: toast-in var(--transition) forwards;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 380px;
}
.toast-text { flex: 1; }
.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0 0 var(--space-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition);
}
.toast-close:hover { color: #fff; }
.toast-msg.toast-success { background: var(--color-secondary); }
.toast-msg.toast-danger  { background: var(--color-danger); }
.toast-msg.toast-warning { background: var(--color-accent); }
.toast-msg.toast-info    { background: var(--color-info); }
.toast-msg.toast-out {
    animation: toast-out var(--transition) forwards;
}
@keyframes toast-in {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(40px); }
}

/* Spinner for buttons */
.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: -0.15em;
    margin-right: 0.4em;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Card entry animation (stagger via JS adding .card-enter) */
.card-enter {
    opacity: 0;
    transform: translateY(20px);
    animation: card-slide-in var(--transition-slow) forwards;
}
@keyframes card-slide-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Fade transition for view switching */
.view-fade-enter {
    opacity: 0;
    animation: view-fade var(--transition) forwards;
}
@keyframes view-fade {
    to { opacity: 1; }
}

/* Skip to content link (a11y) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 10000;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: top var(--transition-fast);
}
.skip-to-content:focus {
    top: var(--space-2);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-muted);
}
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
}
.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}
.empty-state-text {
    font-size: var(--font-size-sm);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Focus ring global (a11y) ── */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ── Selection ── */
::selection {
    background: rgba(34, 34, 59, 0.15);
    color: var(--color-text);
}

/* ── Smooth scroll ── */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Global button polish ── */
.btn {
    font-family: var(--font-main);
    font-weight: var(--font-weight-medium);
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* ── Badges de stock ── */
.badge-stock {
    background: var(--color-secondary);
    color: #fff;
}
.badge-out {
    background: var(--color-danger);
    color: #fff;
}

/* Reusable pill variant for stock badges (avoids inline px-3 py-2 fs-6) */
.badge-stock-pill {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
}

/* ── Botón accent ── */
.btn-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    border-radius: var(--radius);
    font-weight: var(--font-weight-semibold);
    transition: background var(--transition), transform var(--transition-fast), border-color var(--transition);
}
.btn-accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}
.btn-accent:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ── Skeleton loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, #d4dce8 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
}
.skeleton * { visibility: hidden; }
@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line {
    height: 14px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}
.skeleton-line--lg { height: 22px; }
.skeleton-line--sm { height: 10px; }
.skeleton-circle {
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-rect {
    border-radius: var(--radius);
}

/* ── View switch transition ── */
.view-switchable {
    transition: opacity var(--transition);
}
.view-switchable.view-switching {
    opacity: 0;
}

/* ── Search results: card image hover ── */
.img-tarjeta {
    transition: transform var(--transition);
}
.card-img-wrap:hover .img-tarjeta {
    transform: scale(1.06);
}

/* ── Search results: price styling ── */
.precio {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
}

/* ── Pagination hover polish ── */
.pagination .page-link {
    transition: background var(--transition), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pagination .page-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* (merged with .btn-accent above) */

/* ── Page title (global) ── */
.page-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* (::selection already defined above — duplicate removed) */

/* ── Modal backdrop enhancement ── */
.modal-backdrop.show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Link base reset ── */
a {
    color: var(--color-info);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--color-primary);
}

/* ── Badge utility ── */
.badge-token {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

/* (back-to-top and navbar-app already defined above — duplicates removed) */

/* ── Touch devices: disable hover lift effects, add :active feedback ── */
@media (hover: none) {
    .trend-card:hover,
    .carpetero-card:hover,
    .offer-list-card:hover {
        transform: none;
    }
    .pagination .page-link:hover {
        transform: none;
    }
    /* Reemplazo táctil del :hover — feedback visual al presionar */
    .btn:active,
    .page-link:active,
    .offer-list-card:active,
    .trend-card:active {
        transform: scale(0.97);
        transition: transform 80ms ease;
    }
    .btn-lg:active {
        transform: scale(0.98);
    }
}

/* ── Page enter animation (subtle) ── */
.main-content {
    animation: page-enter var(--transition-slow) ease;
}
@keyframes page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Navbar — Auth section & buttons
   ============================================ */
.navbar-auth {
    display: flex;
    align-items: center;
}

.navbar-auth-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Login button — outline style */
.btn-nav-login {
    color: rgba(255,255,255,.85);
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn-nav-login:hover,
.btn-nav-login:focus-visible {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.6);
    color: #fff;
}

/* Register button — accent filled */
.btn-nav-register {
    background: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-4);
    transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.btn-nav-register:hover,
.btn-nav-register:focus-visible {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* ============================================
   Mobile-specific improvements
   ============================================ */
@media (max-width: 991.98px) {
    /* Navbar collapse: add padding & divider before auth */
    .navbar-auth {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid rgba(255,255,255,.12);
    }

    /* Auth buttons stack full-width on mobile */
    .navbar-auth-buttons {
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }
    .btn-nav-login,
    .btn-nav-register {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-base);
    }

    /* User dropdown full-width on mobile */
    .navbar-auth .dropdown {
        width: 100%;
    }
    .navbar-auth .dropdown .nav-link {
        padding: var(--space-3) var(--space-3);
    }

    /* Larger tap targets for mobile nav links */
    .navbar-app .nav-link {
        padding: var(--space-3) var(--space-3);
        font-size: var(--font-size-base);
    }

    /* Reduce main content padding */
    .main-content {
        padding: var(--space-5) 0;
    }

    /* Better touch padding on collapsed dropdown items */
    .navbar-app .dropdown-item {
        padding: var(--space-3) var(--space-4);
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    .main-content {
        padding: var(--space-4) 0;
    }

    /* Page titles scale down */
    .page-title {
        font-size: var(--font-size-lg);
    }

    /* Tighter container padding */
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    /* Back to top closer to edge */
    .back-to-top {
        bottom: var(--space-4);
        right: var(--space-4);
    }

    /* Toast narrower on small screens */
    .toast-msg {
        max-width: calc(100vw - var(--space-8));
    }

    /* Search bar compact on mobile */
    .search-bar-wrap .form-control-lg {
        font-size: .95rem;
        padding: .5rem .75rem;
    }
    .search-bar-wrap .btn-lg {
        font-size: .95rem;
        padding: .5rem 1rem;
    }

    /* Modals full-width on mobile */
    .modal-dialog {
        margin: .5rem;
    }
    .modal-lg {
        max-width: calc(100vw - 1rem);
    }

    /* Tables scroll hint */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Cards tighter spacing */
    .card-body {
        padding: var(--space-3);
    }

    /* Buttons in flex rows wrap nicely */
    .d-flex.gap-2 { flex-wrap: wrap; }
    .d-flex.gap-3 { flex-wrap: wrap; }

    /* Footer compact */
    .footer-app {
        font-size: .75rem;
        padding: var(--space-3) 0;
    }
}

/* ── Hero / Welcome state ── */
#hero-welcome {
    animation: hero-fade-in var(--transition-slow) ease;
}
@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Form control enhanced focus ring ── */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(34, 34, 59, 0.08);
}

/* ── Search hero input: subtle glow on focus ── */
#nombre-carta:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(230, 134, 0, 0.12), 0 2px 8px rgba(230, 134, 0, 0.08);
}

/* ── Card subtle border on hover ── */
.card {
    transition: box-shadow var(--transition), transform var(--transition-fast);
}

/* ── Table row hover (polished) ── */
.table-hover > tbody > tr {
    transition: background var(--transition-fast);
}

/* ── Loading state for buttons (reusable) ── */
.btn[disabled] {
    cursor: not-allowed;
}

/* ── Skeleton cross-fade (replaces abrupt show/hide) ── */
.skeleton-fade-out {
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

/* ── Confirm modal: danger variant ── */
.modal-confirm--danger .modal-header {
    border-bottom-color: var(--color-danger);
}
.modal-confirm--danger #modal-confirm-ok {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}
.modal-confirm--danger #modal-confirm-ok:hover {
    background: #b80324;
    border-color: #b80324;
}

/* ── Store progress chips (search page) ── */
.store-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    animation: chip-in var(--transition) ease;
}
.store-chip.done {
    background: rgba(56, 176, 0, 0.08);
    color: var(--color-secondary);
    border-color: rgba(56, 176, 0, 0.3);
}
@keyframes chip-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Quick Win: ::selection branding ── */
::selection      { background: var(--color-primary); color: #fff; }
::-moz-selection { background: var(--color-primary); color: #fff; }

/* ── Quick Win: Custom scrollbar (WebKit/Blink) ── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Quick Win: Toast dismiss progress bar ── */
.toast-msg { position: relative; overflow: hidden; }
.toast-msg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,.45);
    animation: toast-progress 5s linear forwards;
    border-radius: 0 0 var(--radius) var(--radius);
}
.toast-msg.toast-out::after { animation: none; }
@keyframes toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Quick Win: Carpetero initials avatar ── */
.carpetero-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .02em;
    user-select: none;
}

/* ── Dark mode ── */
[data-theme="dark"] {
    --color-primary:        #4a4a8a;
    --color-primary-hover:  #5d5daa;
    --color-secondary:      #4caf50;
    --color-danger:         #ef5350;
    --color-accent:         #ffb300;
    --color-accent-hover:   #ffa000;
    --color-accent-light:   #2a2000;
    --color-info:           #29b6f6;

    --color-bg:             #0f1117;
    --color-surface:        #1a1d27;
    --color-border:         #2e3245;

    --color-text:           #e8eaf0;
    --color-text-muted:     #9099b0;

    --shadow-sm:  0 1px  3px rgba(0,0,0,0.3);
    --shadow:     0 2px  8px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
}

[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .navbar-app {
    background: #13152080;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .card,
[data-theme="dark"] .offer-list-card,
[data-theme="dark"] .offer-detail-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(1.4);
}
[data-theme="dark"] .input-group-text {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
/* Imágenes en modo oscuro: borde sutil para distinguirlas del fondo */
[data-theme="dark"] .card img,
[data-theme="dark"] .offer-list-card img,
[data-theme="dark"] .card-img-ctn {
    border: 1px solid var(--color-border);
    border-radius: inherit;
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text);
}
[data-theme="dark"] .dropdown-item:hover {
    background: var(--color-border);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .footer-app {
    background: #13152080;
    border-top: 1px solid var(--color-border);
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .table {
    --bs-table-bg: var(--color-surface);
    --bs-table-striped-bg: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] hr { border-color: var(--color-border); }

/* notification bell dark */
[data-theme="dark"] .notif-dropdown {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .notif-item:hover {
    background: var(--color-border);
}

/* ── Notification Bell ── */
.notif-bell-btn {
    position: relative;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.78);
    font-size: 1.25rem;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
    cursor: pointer;
    padding: 0;
}
.notif-bell-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--color-danger);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    display: none;
}
.notif-badge.visible { display: flex; }

.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 320px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 2000;
    display: none;
    flex-direction: column;
    max-height: 360px;
    overflow: hidden;
}
.notif-dropdown.open { display: flex; }
.notif-dropdown-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}
.notif-list {
    overflow-y: auto;
    flex: 1;
}
.notif-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg); }
.notif-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ── Dark mode toggle button ── */
.btn-dark-mode {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.78);
    font-size: 1.1rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast);
    padding: 0;
}
.btn-dark-mode:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Onboarding modal ── */
.onboarding-steps { counter-reset: step; }
.onboarding-step {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-3) 0;
}
.onboarding-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

/* ── Similares cards ── */
.similares-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition-fast);
    text-decoration: none;
    color: inherit;
    display: block;
    background: var(--color-surface);
}
.similares-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.similares-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.similares-card-body {
    padding: var(--space-3);
}
.similares-precio {
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

/* ── Vendido badge ── */
.badge-vendido {
    background: var(--color-text-muted);
    color: #fff;
    font-size: 0.7rem;
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

/* ── Vistas counter ── */
.vistas-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ── Reduced motion: disable all animations ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ── Bootstrap utility overrides globales para dark mode ── */
/* Cubre cualquier bg-white / bg-light / bg-body que quede en templates */
[data-theme="dark"] .bg-white  { background-color: var(--color-surface) !important; color: var(--color-text) !important; }
[data-theme="dark"] .bg-light  { background-color: var(--color-bg)      !important; color: var(--color-text) !important; }
[data-theme="dark"] .bg-body   { background-color: var(--color-bg)      !important; }
[data-theme="dark"] .text-dark { color: var(--color-text) !important; }
[data-theme="dark"] .text-black { color: var(--color-text) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow) !important; }
[data-theme="dark"] .shadow    { box-shadow: var(--shadow-md) !important; }

/* Texto: Bootstrap usa sus propias CSS vars para text-muted / text-body que no se
   sincronizan con data-theme="dark". Forzamos los valores correctos. */
[data-theme="dark"] { --bs-body-color: var(--color-text); --bs-secondary-color: var(--color-text-muted); }
[data-theme="dark"] .text-muted  { color: var(--color-text-muted) !important; }
[data-theme="dark"] .text-body   { color: var(--color-text) !important; }
[data-theme="dark"] .page-title  { color: var(--color-text) !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-text); }
[data-theme="dark"] p { color: var(--color-text); }
[data-theme="dark"] label { color: var(--color-text); }
[data-theme="dark"] small  { color: var(--color-text-muted); }

/* Inputs y selects Bootstrap (cubrir variantes no capturadas antes) */
[data-theme="dark"] input.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-select,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"] {
    background-color: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--color-text-muted) !important; }

/* Tablas (variantes striped / hover de Bootstrap) */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--color-bg);
    color: var(--color-text);
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--color-border);
    color: var(--color-text);
}

/* Cards con clases auxiliares */
[data-theme="dark"] .card-header { background-color: var(--color-border) !important; }
[data-theme="dark"] .card-footer { background-color: var(--color-border) !important; }

/* Offcanvas / Toasts de Bootstrap */
[data-theme="dark"] .offcanvas { background-color: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .toast     { background-color: var(--color-surface); color: var(--color-text); }