/* ============================================================
   TEMA CLARO — claro.css
   Override global para todos los elementos con colores
   hardcodeados en oscuro que no usan variables CSS.
   Se carga en TODAS las páginas vía <link>.
   ============================================================ */

/* ── Selección de texto ─────────────────────────────────── */
html.light-theme ::selection {
    background: rgba(255,107,53,.22);
    color: #1a1a1a;
}

/* ── Scrollbars globales ────────────────────────────────── */
html.light-theme ::-webkit-scrollbar-track {
    background: rgba(0,0,0,.04);
}
html.light-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-color), #ff8c5a);
    border-radius: 10px;
}
html.light-theme ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-hover), var(--primary-color));
}

/* ── Inputs, selects y textareas globales ───────────────── */
html.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.light-theme select,
html.light-theme textarea {
    background: #fff;
    color: #1a1a1a;
    border-color: rgba(0,0,0,.15);
}
html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
    color: #aaa;
}
html.light-theme select option {
    background: #fff;
    color: #1a1a1a;
}

/* ── Páginas de auth (login / registro) ─────────────────── */
html.light-theme .auth-bg-overlay {
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,.6) 0%, rgba(244,244,244,.9) 100%),
        linear-gradient(180deg, rgba(244,244,244,.6) 0%, rgba(240,240,240,.88) 100%);
}
html.light-theme .auth-sphere-mount {
    opacity: .35;
}
html.light-theme .auth-card {
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(0,0,0,.1) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.8) inset !important;
}
html.light-theme .auth-card h2,
html.light-theme .auth-card h3,
html.light-theme .auth-card label,
html.light-theme .auth-card .auth-label {
    color: #1a1a1a;
}
html.light-theme .auth-card .auth-subtitle,
html.light-theme .auth-card .auth-description {
    color: #666;
}
html.light-theme .auth-divider {
    border-color: rgba(0,0,0,.1);
    color: #888;
}
html.light-theme .auth-switch-text {
    color: #666;
}

/* ── Hero / secciones destacadas ────────────────────────── */
html.light-theme .hero {
    background: rgba(255,255,255,.85) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.08) !important;
}
html.light-theme .hero h1 {
    background: linear-gradient(135deg, #1a1a1a, var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html.light-theme .hero .subtitle,
html.light-theme .hero p {
    -webkit-text-fill-color: #666;
    color: #666;
}

/* ── Panels y cards genéricos ───────────────────────────── */
html.light-theme .panel {
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,248,248,.99)) !important;
    border-color: rgba(255,107,53,.12) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.07) !important;
}
html.light-theme .panel h3 {
    color: #1a1a1a;
}

/* ── Búsqueda y sugerencias ─────────────────────────────── */
html.light-theme .search-form input,
html.light-theme .filter-bar input,
html.light-theme .filter-bar select,
html.light-theme .hero-search input {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.12);
    color: #1a1a1a;
}
html.light-theme .filter-bar button {
    color: #0c0d10;
}
html.light-theme .search-suggestions {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
}
html.light-theme .search-suggestion-item {
    color: #1a1a1a;
}
html.light-theme .search-suggestion-item:hover {
    background: rgba(0,0,0,.04);
}

/* ── Tabla de comparación ───────────────────────────────── */
html.light-theme .compare-table-wrapper {
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,248,248,.99)) !important;
    border-color: rgba(255,107,53,.12) !important;
}
html.light-theme .compare-table th,
html.light-theme .compare-table td {
    border-bottom-color: rgba(0,0,0,.06);
    color: #1a1a1a;
}
html.light-theme .compare-table thead th {
    background: rgba(0,0,0,.03) !important;
    color: #1a1a1a;
}
html.light-theme .compare-table .spec-key { color: #666; }
html.light-theme .compare-table .spec-val { color: #1a1a1a; }
html.light-theme .compare-table tbody tr:hover {
    background: rgba(0,0,0,.02) !important;
}

/* ── Filas de spec (panel lateral) ─────────────────────── */
html.light-theme .spec-row {
    border-bottom-color: rgba(0,0,0,.06);
}
html.light-theme .spec-key { color: #666; }
html.light-theme .spec-val { color: #1a1a1a; }

/* ── Tooltip de spec global ─────────────────────────────── */
html.light-theme #spec-tooltip-global {
    background: #fff !important;
    color: #1a1a1a !important;
    border-color: rgba(255,107,53,.25) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

/* ── Tooltip de CPU / placa base ────────────────────────── */
html.light-theme .cpu-tooltip {
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,245,245,.98)) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: #1a1a1a !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.8) inset !important;
}
html.light-theme .tooltip-cpu-name { color: #1a1a1a !important; }
html.light-theme .tooltip-cpu-brand { opacity: .9; }
html.light-theme .tooltip-cpu-img {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .tooltip-cpu-img-placeholder {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .tooltip-spec-row:nth-child(odd) {
    background: rgba(0,0,0,.04) !important;
}
html.light-theme .ts-label { color: #777; }
html.light-theme .ts-val   { color: #1a1a1a; }

/* ── Banner de conteo de cards ──────────────────────────── */
html.light-theme .card-count-banner {
    background: rgba(255,107,53,.07);
    color: #666;
}

/* ── Mfr select ─────────────────────────────────────────── */
html.light-theme .mfr-select {
    background: #fff !important;
    border-color: rgba(255,107,53,.28) !important;
    color: #1a1a1a !important;
}
html.light-theme .mfr-select option {
    background: #fff;
    color: #1a1a1a;
}
html.light-theme .manufacturer-note {
    background: rgba(255,107,53,.04) !important;
    border-color: rgba(255,107,53,.2) !important;
}
html.light-theme .manufacturer-note strong { color: #1a1a1a; }

/* ── Filtro lateral (comparador placas) ─────────────────── */
html.light-theme .side-filter {
    background: rgba(248,248,248,.97) !important;
    border-right-color: rgba(0,0,0,.08) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.08) !important;
}
html.light-theme .side-filter h4 { color: #1a1a1a; }
html.light-theme .side-filter-label { color: #555; }
html.light-theme .side-select {
    background: #f8f8f8 !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #1a1a1a !important;
}
html.light-theme .side-select option {
    background: #fff;
    color: #1a1a1a;
}
html.light-theme .side-filter-reset {
    background: rgba(255,107,53,.06) !important;
    border-color: rgba(255,107,53,.3) !important;
}
html.light-theme .side-filter-show-btn {
    background: rgba(248,248,248,.97) !important;
    box-shadow: 3px 0 16px rgba(0,0,0,.1) !important;
}
html.light-theme .side-filter-scroll {
    scrollbar-color: rgba(255,107,53,.4) transparent;
}

/* ── Modal compatible CPUs (procesadores / placas) ──────── */
html.light-theme .cpu-compat-modal {
    background: #fff !important;
    border-color: rgba(0,0,0,.12) !important;
}
html.light-theme .cpu-compat-modal-header {
    border-bottom-color: rgba(0,0,0,.08) !important;
}
html.light-theme .cpu-compat-modal-header p { color: rgba(0,0,0,.5); }
html.light-theme .cpu-compat-close { color: rgba(0,0,0,.45); }
html.light-theme .cpu-compat-close:hover { background: rgba(0,0,0,.07); color: rgba(0,0,0,.85); }
html.light-theme .cpu-compat-search-slot {
    border-bottom-color: rgba(0,0,0,.07) !important;
}
html.light-theme .cpu-compat-search {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #1a1a1a !important;
}
html.light-theme .cpu-compat-search::placeholder { color: rgba(0,0,0,.3); }
html.light-theme .cpu-compat-count  { color: rgba(0,0,0,.5) !important; }
html.light-theme .cpu-compat-empty  { color: rgba(0,0,0,.4) !important; }
html.light-theme .cpu-compat-card {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.09) !important;
}
html.light-theme .cpu-compat-card:hover {
    background: rgba(0,0,0,.06) !important;
    border-color: rgba(255,107,53,.35) !important;
}
html.light-theme .cpu-compat-img    { background: rgba(0,0,0,.04) !important; }
html.light-theme .cpu-compat-name   { color: #1a1a1a !important; }
html.light-theme .cpu-compat-brand  { color: #777 !important; }
html.light-theme .cpu-compat-specs span { color: #888 !important; }
html.light-theme .cpu-compat-overlay { background: rgba(0,0,0,.4) !important; }

/* ── Panel de detalles CPU ──────────────────────────────── */
html.light-theme .cpu-detail-panel {
    background: #fff !important;
    border-color: rgba(0,0,0,.12) !important;
}
html.light-theme .cpu-detail-header {
    border-bottom-color: rgba(0,0,0,.08) !important;
}
html.light-theme .cpu-detail-close { color: rgba(0,0,0,.45); }
html.light-theme .cpu-detail-close:hover { background: rgba(0,0,0,.07); color: rgba(0,0,0,.85); }
html.light-theme .cpu-detail-name   { color: #1a1a1a !important; }
html.light-theme .cpu-detail-family { color: rgba(0,0,0,.45) !important; }
html.light-theme .cpu-detail-img {
    background: rgba(0,0,0,.03) !important;
    border-radius: 10px;
}
html.light-theme .cpu-detail-spec-row {
    background: rgba(0,0,0,.02) !important;
}
html.light-theme .cpu-detail-spec-row:nth-child(even) {
    background: rgba(0,0,0,.045) !important;
}
html.light-theme .cpu-detail-spec-label { color: rgba(0,0,0,.5) !important; }
html.light-theme .cpu-detail-spec-val   { color: #1a1a1a !important; }

/* ── Carrusel ────────────────────────────────────────────── */
html.light-theme .carousel-card {
    background: rgba(255,255,255,.9) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .carousel-card:hover {
    background: rgba(255,107,53,.05) !important;
    border-color: rgba(255,107,53,.35) !important;
}
html.light-theme .carousel-card-img {
    background: rgba(0,0,0,.04) !important;
    border-bottom-color: rgba(0,0,0,.07) !important;
}
html.light-theme .carousel-card-name   { color: #1a1a1a; }
html.light-theme .carousel-card-specs span { color: #666; }
html.light-theme .carousel-arrow {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #444 !important;
}
html.light-theme .carousel-arrow:hover {
    background: linear-gradient(135deg,var(--primary-color),#ff8c5a) !important;
    color: #0c0d10 !important;
    border-color: transparent !important;
}

/* ── Marquee ─────────────────────────────────────────────── */
html.light-theme .marquee-card {
    background: var(--pn-bg, #f4f4f4) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: rgba(0,0,0,.75);
}
html.light-theme .marquee-card:hover {
    background: var(--pn-bg2, #ebebeb) !important;
    border-color: rgba(0,0,0,.18) !important;
}
html.light-theme .marquee-card-img { background: var(--pn-inset, #ffffff) !important; }
html.light-theme .marquee-card-name { color: rgba(0,0,0,.9); }
html.light-theme .marquee-card-spec { color: rgba(0,0,0,.5); }

/* ── Selection summary cards ────────────────────────────── */
html.light-theme .selection-card {
    background: rgba(255,255,255,.8) !important;
    border-color: rgba(0,0,0,.08) !important;
}

/* ── Estado vacío ────────────────────────────────────────── */
html.light-theme .empty { color: #999; }

/* ── Category cards (comparador landing) ────────────────── */
html.light-theme .category-card {
    background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(245,245,245,.98)) !important;
    border-color: rgba(255,107,53,.12) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
}
html.light-theme .category-card:hover {
    box-shadow: 0 18px 46px rgba(0,0,0,.1), 0 0 18px rgba(255,107,53,.12) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,248,248,1)) !important;
}
html.light-theme .category-title { color: #1a1a1a; }
html.light-theme .category-count { color: #666; }

/* ── Brand pills / filtros ──────────────────────────────── */
html.light-theme .brand-pill {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #333;
}
html.light-theme .brand-pill:hover {
    border-color: rgba(255,107,53,.5);
}

/* ── Item cards (comparador landing list) ───────────────── */
html.light-theme .item-card {
    background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(245,245,245,.98)) !important;
    border-color: rgba(255,107,53,.12) !important;
}
html.light-theme .item-card h3 { color: #1a1a1a; }
html.light-theme .item-meta    { color: #666; }
html.light-theme .item-actions button {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #333 !important;
}
html.light-theme .item-actions button:hover {
    border-color: rgba(255,107,53,.5) !important;
}

/* ── Página de perfil ────────────────────────────────────── */
/* auth/profile.php trae su propio tema claro (tokens --pf-*), no depende
   de este archivo — ver el <style> de esa página. */
html.light-theme .profile-info-card,
html.light-theme .settings-section {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .stat-card {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .theme-card {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.1) !important;
}
html.light-theme .theme-card.active {
    border-color: var(--primary-color) !important;
    background: rgba(255,107,53,.08) !important;
}

/* ── PCNotify toast ─────────────────────────────────────── */
html.light-theme .pcnotify-toast {
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
}
html.light-theme .pcnotify-title { color: #1a1a1a !important; }
html.light-theme .pcnotify-message { color: #444 !important; }

/* ── Export / share buttons ─────────────────────────────── */
html.light-theme .share-btn,
html.light-theme .export-btn {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #333 !important;
}
html.light-theme .share-btn:hover,
html.light-theme .export-btn:hover {
    border-color: rgba(255,107,53,.4) !important;
    color: var(--primary-color) !important;
}

/* ── Comparador: hover del card (fondo negro → blanco) ──── */
html.light-theme .processor-card:hover {
    background: #fff !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.1), 0 0 14px rgba(255,107,53,.14) !important;
}
html.light-theme .processor-card.selected:hover {
    background: #fff8f4 !important;
}

/* ── Bottleneck ──────────────────────────────────────────── */
html.light-theme .bn-hero {
    background: rgba(255,255,255,.85) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.08) !important;
}
html.light-theme .bn-hero h1 {
    background: linear-gradient(135deg, #1a1a1a 30%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html.light-theme .bn-hero p { color: #666 !important; }

html.light-theme .bn-form {
    background: rgba(255,255,255,.9) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}
html.light-theme .bn-form-group label { color: #555 !important; }
html.light-theme .bn-form-group label i {
    background: rgba(255,107,53,.1) !important;
}

html.light-theme .bn-search-input {
    background: #f8f8f8 !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #1a1a1a !important;
}
html.light-theme .bn-search-input::placeholder { color: #aaa !important; }
html.light-theme .bn-select-wrap::before { color: #999 !important; }

html.light-theme .bn-dropdown {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(255,107,53,.2) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.15) !important;
}
html.light-theme .bn-dropdown-item {
    color: #444 !important;
    border-bottom-color: rgba(0,0,0,.04) !important;
}
html.light-theme .bn-dropdown-item:hover {
    background: rgba(255,107,53,.08) !important;
    color: #1a1a1a !important;
}
html.light-theme .bn-dropdown-item.selected {
    background: rgba(255,107,53,.12) !important;
}
html.light-theme .bn-dropdown-item small { color: #888 !important; }

html.light-theme .bn-res-btn {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #555 !important;
}
html.light-theme .bn-res-btn:hover {
    border-color: rgba(255,107,53,.4) !important;
    color: #333 !important;
    background: rgba(255,107,53,.06) !important;
}

html.light-theme .bn-filter {
    background-color: #f4f4f4 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6rem center !important;
    background-size: 10px 6px !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #444 !important;
}
html.light-theme .bn-filter option { background: #fff; color: #1a1a1a; }

html.light-theme .bn-preview-card {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html.light-theme .bn-preview-card.cpu-preview { border-left-color: rgba(53,162,255,.5) !important; }
html.light-theme .bn-preview-card.gpu-preview { border-left-color: rgba(255,107,53,.5) !important; }
html.light-theme .bn-preview-img { background: rgba(0,0,0,.04) !important; }
html.light-theme .bn-preview-placeholder { color: rgba(0,0,0,.15) !important; }
html.light-theme .bn-preview-info h4 { color: #1a1a1a !important; }
html.light-theme .bn-preview-spec {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.07) !important;
    color: #666 !important;
}
html.light-theme .bn-preview-remove { color: #aaa !important; }

html.light-theme .bn-result-card {
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,248,248,.99)) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.1) !important;
}
html.light-theme .bn-verdict { border-bottom-color: rgba(0,0,0,.08) !important; }
html.light-theme .bn-verdict-text { color: #1a1a1a !important; }
html.light-theme .bn-verdict-sub .bn-tag { background: rgba(0,0,0,.05) !important; color: #555 !important; }

/* ── Score mode bar (botones de modo) ───────────────────── */
html.light-theme .score-mode-btn {
    border-color: rgba(0,0,0,.12) !important;
    background: rgba(0,0,0,.03) !important;
    color: #555 !important;
}
html.light-theme .score-mode-btn:hover {
    border-color: rgba(255,107,53,.4) !important;
    color: #1a1a1a !important;
}
html.light-theme .score-mode-btn.active {
    background: rgba(255,107,53,.08) !important;
    border-color: rgba(255,107,53,.5) !important;
    color: var(--primary-color) !important;
}
html.light-theme .score-mode-label { color: #666 !important; }

/* ── Ventajas / Desventajas (comparación visual) ────────── */
html.light-theme .adv-section-title { color: #1a1a1a; }
html.light-theme .tree-line-icon    { color: var(--primary-color); }
html.light-theme .adv-text          { color: #333; }
html.light-theme .tree-connector    { color: rgba(0,0,0,.2); }