/* 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 */
/* (la vitrina clara de las fotos y logos está en tienda-estilo.css, sección VITRINA) */
: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; } }

/* ===== Etiquetas de factura electrónica (listados de ventas, pedidos y panel de facturas) ===== */
.fe-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fe-badge.fe-ok { background: var(--color-success-light); color: var(--color-success); }
.fe-badge.fe-pend { background: var(--color-warning-light); color: var(--color-warning); }
.fe-badge.fe-rec { background: var(--color-background); color: var(--color-gray-dark); border-color: var(--color-border); }
.fe-badge.fe-sin { background: transparent; color: var(--color-gray); border: 1px dashed var(--color-border); }
.fe-badge:hover { filter: brightness(1.06); border-color: currentColor; }

/* ===== Menú lateral: botón principal «Nueva venta» ===== */
.sidebar-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 12px 10px; padding: 11px 14px; border-radius: 12px; background: var(--color-primary); color: var(--color-on-primary, #fff); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--shadow-sm); transition: filter .15s, transform .15s; }
.sidebar-cta:hover { filter: brightness(1.1); transform: translateY(-1px); color: var(--color-on-primary, #fff); }
.app-shell.is-rail .sidebar-cta { margin: 4px 8px 10px; padding: 11px 0; }
.app-shell.is-rail .sidebar-cta span { display: none; }

/* ===== Canales de venta ===== */
.canal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--cc, var(--color-primary)); background: color-mix(in srgb, var(--cc, var(--color-primary)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cc, var(--color-primary)) 28%, transparent); }
:root[data-theme="dark"] .canal-chip { color: color-mix(in srgb, var(--cc, #8fb0ff) 55%, #fff); }

/* ===== Listas pro: buscador rápido, totales, orden, paginación y CSV en todas las tablas ===== */
.listas-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.lb-izq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.lb-buscar { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 10px; padding: 0 10px; background: var(--color-surface); }
.lb-buscar i { color: var(--color-gray); font-size: 12px; }
.lb-buscar input { border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 13px; width: 190px; outline: none; color: var(--color-dark); }
.lb-info { font-size: 13px; color: var(--color-gray); } .lb-info strong { color: var(--color-dark); }
.listas-pie { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--color-gray); flex-wrap: wrap; }
.listas-pie:empty { display: none; }
.lp-tam { border: 1px solid var(--color-border); border-radius: 8px; padding: 5px 8px; background: var(--color-surface); color: var(--color-dark); font: inherit; font-size: 13px; }
th.lp-ordenable { cursor: pointer; user-select: none; }
th.lp-ordenable:hover { color: var(--color-primary-text, var(--color-primary)); }
th.lp-asc::after { content: " \25B2"; font-size: 9px; } th.lp-desc::after { content: " \25BC"; font-size: 9px; }
table tbody tr[hidden] { display: none !important; }