/* Botón flotante de modo oscuro / claro (tienda y producto) */
.tema-toggle {
    position: fixed;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid #3a3a3a;
    border-radius: 50%;
    background: #161616;
    color: #f2f2f2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tema-toggle:hover {
    transform: translateY(-50%) scale(1.08);
    border-color: var(--rojo, #e10600);
}

.tema-toggle:focus-visible {
    outline: 2px solid var(--rojo, #e10600);
    outline-offset: 2px;
}

.tema-toggle .material-symbols-outlined {
    font-size: 1.5rem;
    line-height: 1;
}

html[data-theme="light"] .tema-toggle {
    border-color: #d0d0d0;
    background: #fff;
    color: #e08a00;
}

/* ---------------------------- Modo claro ---------------------------- */
html[data-theme="light"] .pagina-tienda,
html[data-theme="light"] .pagina-producto {
    --t-bg: #f4f4f5;
    --t-panel: #ffffff;
    --t-text: #1a1a1a;
    --t-muted: #5e5e5e;
    --t-line: #dcdcdf;
    --t-media: #f0f0f2;
    --t-input: #ffffff;
    --t-link: #0a64c8;
    --t-btn-hover: #c40500;
}

html[data-theme="light"] body:has(.pagina-tienda) {
    background: #f4f4f5;
}

/* Tienda */
html[data-theme="light"] .tienda-card h3 a {
    color: var(--t-text);
}

html[data-theme="light"] .tienda-card h3 a:hover {
    color: var(--rojo);
}

html[data-theme="light"] .tienda-card-media {
    border-color: var(--t-line);
}

html[data-theme="light"] .tienda-vista:hover {
    border-color: #888;
}

html[data-theme="light"] .tienda-vista.activo {
    border-color: #1a1a1a;
}

html[data-theme="light"] .tienda-card-ventas {
    color: #6b6b6b;
}

html[data-theme="light"] .tienda-badge--alt {
    color: var(--t-text);
}

/* Producto */
html[data-theme="light"] .prod-rel-card:hover,
html[data-theme="light"] .prod-chip:hover {
    border-color: #999;
}

html[data-theme="light"] .prod-bar {
    background: #dcdcdf;
}

html[data-theme="light"] .prod-pol-chev,
html[data-theme="light"] .prod-com time {
    color: #7a7a7a;
}

html[data-theme="light"] .prod-thumb.prod-ar-thumb {
    background: #fff;
}

html[data-theme="light"] .prod-thumb.prod-ar-thumb:hover,
html[data-theme="light"] .prod-thumb.prod-ar-thumb:focus-visible {
    background: #fdeaea;
}

html[data-theme="light"] .prod-chip.activo {
    color: var(--t-text);
}

html[data-theme="light"] .prod-foto {
    background: #fff;
}