/* Tema claro / oscuro: logos, selector y ajustes que no se resuelven solo con variables.
   Los colores salen de las variables (--color-*): ver includes/tema_oscuro.php. */

/* El logo correcto según el tema (<img class="mh-logo-claro"> + <img class="mh-logo-oscuro">). Nunca se invierte con filtros. */
.mh-logo-oscuro { display: none !important; }
:root[data-theme="dark"] .mh-logo-claro { display: none !important; }
:root[data-theme="dark"] .mh-logo-oscuro { display: inline-block !important; }
/* Botón de tema: muestra la luna en claro y el sol en oscuro */
.mh-solo-oscuro { display: none !important; }
:root[data-theme="dark"] .mh-solo-claro { display: none !important; }
:root[data-theme="dark"] .mh-solo-oscuro { display: inline-flex !important; }

/* Selector de apariencia en el menú del usuario */
.tema-selector { padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.tema-selector-t { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-gray); margin-bottom: 6px; }
.tema-selector-op { display: flex; gap: 4px; background: var(--color-background); border-radius: var(--border-radius-md, 10px); padding: 3px; }
.tema-selector-op button { flex: 1; border: 0; background: transparent; color: var(--color-gray-dark); font: inherit; font-size: 12.5px; padding: 6px 4px; border-radius: var(--border-radius-sm, 8px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tema-selector-op button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary-text, var(--color-primary)); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ===== Ajustes del tema oscuro que no salen de variables ===== */
:root[data-theme="dark"] { color-scheme: dark; }
/* Fotos de producto (casi siempre sobre fondo blanco): dentro de un marco, no como un rectángulo blanco suelto */
:root[data-theme="dark"] .tienda-card-foto { background: var(--color-surface-alt); padding: 10px; box-sizing: border-box; }
:root[data-theme="dark"] .tienda-card-foto img { background: #fff; border-radius: var(--border-radius-md, 10px); }
:root[data-theme="dark"] .tienda-footer { border-top: 1px solid var(--color-border); }
/* Interruptores y elementos con colores fijos en theme-unified.css */
:root[data-theme="dark"] .cfg-switch span { background: var(--color-border); }
:root[data-theme="dark"] .campana-chip-aviso { background: var(--color-warning-light); color: var(--color-warning); }
:root[data-theme="dark"] img.mh-img-claro-solo { filter: none; }
/* Impresión y PDF: siempre en claro */
@media print {
    :root[data-theme="dark"] { color-scheme: light; }
}

/* Texto sobre fondos suaves de marca: oscuro en claro, claro en oscuro */
:root { --color-primary-ink: var(--color-primary-darkest); }
:root[data-theme="dark"] { --color-primary-ink: var(--color-primary-text); }
/* Botones y etiquetas de color vivo: en oscuro el texto va oscuro para que se lea (el blanco no alcanza contraste) */
:root[data-theme="dark"] .btn-success, :root[data-theme="dark"] .btn-danger, :root[data-theme="dark"] .btn-warning,
:root[data-theme="dark"] .btn-info, :root[data-theme="dark"] .btn-accent,
:root[data-theme="dark"] .panel-badge { color: var(--color-background) !important; }
:root[data-theme="dark"] .btn-secondary { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); }
:root[data-theme="dark"] .btn-secondary:hover { background: var(--color-border); }
/* Tienda: elementos con fondo del color de acento (en oscuro el acento es claro → texto oscuro) */
:root[data-theme="dark"] .tienda-carrito-badge,
:root[data-theme="dark"] .tienda-hero-acciones .btn-light,
:root[data-theme="dark"] .tienda-banner-contacto .btn-light,
:root[data-theme="dark"] .tienda-categoria-flecha,
:root[data-theme="dark"] .tienda-badge-descuento,
:root[data-theme="dark"] .tienda-card-add.agregado,
:root[data-theme="dark"] .tienda-container .btn-accent,
:root[data-theme="dark"] .tienda-banner .tienda-hero-slide-caption .btn,
:root[data-theme="dark"] .tienda-cat-n,
:root[data-theme="dark"] .tienda-etq-agotado { color: var(--color-background); }

/* Botón de tema de la tienda: arriba (escritorio), en el menú del celular y en el pie */
.tienda-tema-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; background: none; border: 0; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; }
.tienda-tema-pie { width: auto; justify-content: center; margin: 0 auto 6px; color: rgba(255,255,255,.72); font-size: 13px; }
.tienda-tema-pie:hover { color: #fff; }
@media (min-width: 769px) { .tienda-menu-movil .tienda-tema-fila { display: none; } }
@media (max-width: 768px) { .tienda-tema-btn { display: none !important; } }