/* ============================================================
   market-styles.css — Estilos del módulo Mercado
   ============================================================
   Soporta 6 temas: noche, dia, dark, oro, azul, rosa
   El mercado hereda las variables --albion-* del tema activo.
   ============================================================ */

/* === Variables adicionales del mercado === */
:root {
  --albion-gold-dim: var(--albion-gold, #fbbf24);
  --market-radius: 12px;
  --market-gap: 12px;
}

/* === CRÍTICO: Forzar panelMercado a ocupar todo el ancho disponible === */
/* y heredar el fondo del tema activo correctamente */
/* Usamos --bg-body (confiable en todos los temas) como fallback si --albion-bg no está */
#panelMercado.container.view-panel {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: var(--albion-bg, var(--bg-body)) !important;
  color: var(--albion-text, var(--text-main)) !important;
}

/* Asegurar que las variables albion estén disponibles en el panelMercado */
/* Si el tema no las define, usar las variables generales del tema */
#panelMercado {
  --albion-bg: var(--albion-bg, var(--bg-body));
  --albion-bg-subtle: var(--albion-bg-subtle, var(--bg-input-field));
  --albion-surface: var(--albion-surface, var(--bg-card));
  --albion-border: var(--albion-border, var(--border-color));
  --albion-border-strong: var(--albion-border-strong, var(--border-focus));
  --albion-text: var(--albion-text, var(--text-main));
  --albion-text-muted: var(--albion-text-muted, var(--text-muted));
  --albion-text-dim: var(--albion-text-dim, var(--text-muted));
  --albion-gold: var(--albion-gold, var(--accent-gold));
  --albion-gold-bright: var(--albion-gold-bright, var(--accent-gold));
  --albion-profit: var(--albion-profit, var(--success));
  --albion-loss: var(--albion-loss, var(--danger));
  --albion-cyan: var(--albion-cyan, var(--accent-blue));
}

/* === CRÍTICO: Asegurar que las variables albion estén disponibles === */
/* en todo el panelMercado y sus hijos */
#panelMercado,
#marketContainer {
  background: var(--albion-bg, var(--bg-body)) !important;
  color: var(--albion-text, var(--text-main)) !important;
}

/* === OVERRIDE: Forzar variables correctas por tema en #panelMercado === */
/* Esto anula cualquier bloque legacy "FORCE DARK GOLD" que pueda estar en style.css */
/* Usa selectores [data-theme="X"] #panelMercado que son más específicos que #panelMercado solo */

[data-theme="noche"] #panelMercado {
  --albion-bg: #0E171C !important;
  --albion-bg-subtle: #0c1920 !important;
  --albion-surface: #1F303A !important;
  --albion-border: #476e86 !important;
  --albion-border-strong: #70b2d6 !important;
  --albion-text: #fafafa !important;
  --albion-text-muted: #9ca8b5 !important;
  --albion-text-dim: #6b7a87 !important;
  --albion-gold: #fbbf24 !important;
  --albion-gold-bright: #ffbc05 !important;
  --albion-profit: #a0b910 !important;
  --albion-loss: #fa3b3b !important;
  --albion-cyan: #70b2d6 !important;
}

[data-theme="dia"] #panelMercado {
  --albion-bg: #DDD0C8 !important;
  --albion-bg-subtle: #CBBBAB !important;
  --albion-surface: #F0E6DF !important;
  --albion-border: #B8A496 !important;
  --albion-border-strong: #6B5C50 !important;
  --albion-text: #2E1F15 !important;
  --albion-text-muted: #5a4d42 !important;
  --albion-text-dim: #8a7d70 !important;
  --albion-gold: #9E7508 !important;
  --albion-gold-bright: #7A5A06 !important;
  --albion-profit: #71c161 !important;
  --albion-loss: #fa1919 !important;
  --albion-cyan: #3A6A8B !important;
}

[data-theme="dark"] #panelMercado {
  --albion-bg: #0d0d14 !important;
  --albion-bg-subtle: #0a0a12 !important;
  --albion-surface: #14141f !important;
  --albion-border: rgba(139, 92, 246, 0.18) !important;
  --albion-border-strong: #8b5cf6 !important;
  --albion-text: #fafafa !important;
  --albion-text-muted: #94a3b8 !important;
  --albion-text-dim: #64748b !important;
  --albion-gold: #f59e0b !important;
  --albion-gold-bright: #fbbf24 !important;
  --albion-profit: #22c55e !important;
  --albion-loss: #ef4444 !important;
  --albion-cyan: #06b6d4 !important;
}

[data-theme="oro"] #panelMercado {
  --albion-bg: #0a0a0f !important;
  --albion-bg-subtle: #0f0f17 !important;
  --albion-surface: #14141e !important;
  --albion-border: rgba(245, 158, 11, 0.2) !important;
  --albion-border-strong: #f59e0b !important;
  --albion-text: #fafafa !important;
  --albion-text-muted: #d4d4d8 !important;
  --albion-text-dim: #a1a1aa !important;
  --albion-gold: #f59e0b !important;
  --albion-gold-bright: #d97706 !important;
  --albion-profit: #22c55e !important;
  --albion-loss: #ef4444 !important;
  --albion-cyan: #06b6d4 !important;
}

[data-theme="azul"] #panelMercado {
  --albion-bg: #e8e8ec !important;
  --albion-bg-subtle: #eef2ff !important;
  --albion-surface: #ffffff !important;
  --albion-border: #e0e7ff !important;
  --albion-border-strong: #6366f1 !important;
  --albion-text: #1e1b4b !important;
  --albion-text-muted: #4b5563 !important;
  --albion-text-dim: #9ca3af !important;
  --albion-gold: #d97706 !important;
  --albion-gold-bright: #b45309 !important;
  --albion-profit: #16a34a !important;
  --albion-loss: #dc2626 !important;
  --albion-cyan: #06b6d4 !important;
}

[data-theme="rosa"] #panelMercado {
  --albion-bg: #FFB0B7 !important;
  --albion-bg-subtle: #fff5f7 !important;
  --albion-surface: #ffffff !important;
  --albion-border: #fecdd3 !important;
  --albion-border-strong: #e11d48 !important;
  --albion-text: #881337 !important;
  --albion-text-muted: #58182c !important;
  --albion-text-dim: #9d2949 !important;
  --albion-gold: #d97706 !important;
  --albion-gold-bright: #b45309 !important;
  --albion-profit: #16a34a !important;
  --albion-loss: #dc2626 !important;
  --albion-cyan: #0891b2 !important;
}

/* El dashboard-content padre también debe ceder el padding */
.dashboard-content:has(#panelMercado.active) {
  padding: 0 !important;
}

/* Fallback para navegadores sin :has */
@media (min-width: 769px) {
  .dashboard-content > #panelMercado.container.view-panel.active {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* === Contenedor principal === */
#marketContainer {
  width: 100%;
  color: var(--albion-text);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
}

#marketContainer * {
  box-sizing: border-box;
}

/* === Header de filtros === */
.market-header-filters {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* === Inputs y selects === */
#marketContainer input[type="number"],
#marketContainer select {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  outline: none;
  transition: border-color 0.15s ease;
}

#marketContainer input[type="number"]:focus,
#marketContainer select:focus {
  border-color: var(--albion-gold) !important;
}

#marketContainer input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--albion-gold);
}

#marketContainer button {
  font-family: var(--font-body, inherit);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#marketContainer button:hover:enabled {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#marketContainer button:active:enabled {
  transform: translateY(0);
}

/* Transiciones suaves para cards + optimización GPU */
#marketContainer .market-items-grid > div {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
  content-visibility: auto;
  contain-intrinsic-size: 180px;
  will-change: transform;
}

/* === FIX: optimización de transición de tema ===
   ANTES: #marketContainer * aplicaba transition a CADA elemento del DOM = cientos de repaints simultáneos al cambiar tema.
   AHORA: solo #marketContainer + 4 elementos clave (.market-item-card, .market-popup-section, .market-hero-card, .market-toolbar-card)
   tienen transición breve. Las variables CSS (--albion-bg, --albion-text, etc.) cambian instantáneamente
   sin transición individual por elemento. */
#marketContainer,
#marketContainer .market-item-card,
#marketContainer .market-popup-section,
#marketContainer .market-hero-card,
#marketContainer .market-toolbar-card {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* === OPTIMIZACIÓN DE TEMA — patrón "no-transitions during theme change" ===
   Cuando <html> tiene la clase .theme-changing (durante 1 frame en setTheme()),
   se deshabilitan TODAS las transiciones a nivel global. Esto hace que el cambio
   de data-theme sea INSTANTÁNEO en lugar de animar 30+ cards durante 200ms.
   Sin esta regla, Mercado se siente lento al cambiar tema por la cantidad de
   cards visibles que animan color/background en paralelo. */
.theme-changing,
.theme-changing * {
  transition: none !important;
}

/* === Grid de items: RESPONSIVE AMPLIO === */
@media (min-width: 640px) {
  #marketContainer .market-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 900px) {
  #marketContainer .market-items-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1200px) {
  #marketContainer .market-items-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (min-width: 1500px) {
  #marketContainer .market-items-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* === Quick stats === */
@media (min-width: 640px) {
  #marketContainer .market-stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* === Scrollbar === */
#marketContainer ::-webkit-scrollbar,
#marketPopupOverlay ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#marketContainer ::-webkit-scrollbar-track,
#marketPopupOverlay ::-webkit-scrollbar-track {
  background: var(--albion-bg-subtle);
}

#marketContainer ::-webkit-scrollbar-thumb,
#marketPopupOverlay ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--albion-gold) 40%, transparent);
  border-radius: 3px;
}

/* === Animaciones === */
@keyframes market-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes market-zoom-in {
  from { transform: scale(0.95) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes market-spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === POPUP MODAL CENTRADO (ya no drawer lateral) === */
.market-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  /* === FIX v31: z-index 1100 para que el popup quede ENCIMA del dashboard-header (z-index: 100)
     y encima del loading overlay de Contrabando (z-index: 50).
     Antes: z-index: 50 → el dashboard-header (z-index: 100) se superponía al popup,
     cortando la parte superior y haciéndolo ver descentrado. === */
  z-index: 1100 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px);
  display: block !important;
  overflow-y: auto !important;
  padding: 16px !important;
  opacity: 0;
  animation: market-fade-in 0.2s ease forwards;
  transition: opacity 0.2s ease;
}

/* === FIX v31: padding-left solo cuando el sidebar está visible (>= 981px).
   Antes: @media (min-width: 769px) aplicaba padding-left: 280px incluso entre
   769px y 980px, donde el sidebar está oculto (translateX(-100%)), dejando
   280px de espacio vacío a la izquierda del popup → parecía descentrado. === */
@media (min-width: 981px) {
  .market-popup-overlay {
    padding-left: 280px !important; /* Evitar que el modal quede oculto bajo la barra de navegación lateral */
  }
}

.market-popup-modal {
  width: 100% !important;
  max-width: 1350px !important;
  margin: 4vh auto !important;
  background: var(--albion-bg) !important;
  color: var(--albion-text) !important;
  border: 2px solid var(--albion-border-strong) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--albion-gold) 10%, transparent) !important;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  animation: market-zoom-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Línea decorativa superior del modal */
.market-popup-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--albion-gold), transparent);
  border-radius: 16px 16px 0 0;
  z-index: 20;
}

/* Header del modal */
.market-popup-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--albion-bg) !important;
  border-bottom: 1px solid var(--albion-border-strong) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-radius: 14px 14px 0 0 !important;
}

/* Body del modal — 3 columnas en desktop */
.market-popup-body {
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

/* En tablet/laptop mediana: 2 columnas */
@media (max-width: 1300px) {
  .market-popup-body {
    grid-template-columns: 1fr 1fr !important;
  }
  .market-popup-col-3 {
    grid-column: 1 / -1 !important;
  }
}

/* En móvil/tablet vertical (601px-850px): 1 columna apilada, modal flex column */
@media (max-width: 850px) {
  .market-popup-body {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .market-popup-modal {
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 12px !important;
    margin: 2vh auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .market-popup-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  .market-popup-overlay {
    padding: 8px !important;
    padding-left: 8px !important;
  }
  .market-popup-header {
    padding: 12px 14px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

/* === FIX v2: móvil pequeño (<480px): full-width casi sin padding ===
   Las reglas específicas de mobile (<600px) están en el bloque FIX v9 más abajo.
   Este bloque se mantiene solo para compatibilidad con tablets pequeñas. */
@media (max-width: 480px) {
  .market-popup-overlay {
    padding: 4px !important;
    padding-left: 4px !important;
  }
}

/* Columnas del popup */
.market-popup-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sección dentro del popup */
.market-popup-section {
  background: var(--albion-surface) !important;
  border: 1px solid var(--albion-border) !important;
  border-radius: 10px;
  padding: 14px;
}

.market-popup-section-title {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--albion-text-dim) !important;
  margin: 0 0 10px 0 !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* === Profit neto destacado === */
.market-profit-box {
  background: color-mix(in srgb, var(--albion-profit) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--albion-profit) 40%, transparent) !important;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.market-profit-box.loss {
  background: color-mix(in srgb, var(--albion-loss) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--albion-loss) 40%, transparent) !important;
}

.market-profit-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  font-family: var(--font-mono, monospace) !important;
  color: var(--albion-profit) !important;
  line-height: 1.1;
}

.market-profit-box.loss .market-profit-value {
  color: var(--albion-loss) !important;
}

.market-profit-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--albion-text-dim) !important;
  margin-bottom: 6px;
}

.market-roi-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: var(--albion-profit);
  color: var(--albion-bg);
}

.market-profit-box.loss .market-roi-badge {
  background: var(--albion-loss);
  color: var(--albion-bg);
}

/* === Tabla de desglose financiero === */
.market-fin-table {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

.market-fin-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.market-fin-label {
  color: var(--albion-text-muted);
}

.market-fin-value {
  color: var(--albion-text);
  font-weight: 600;
}

.market-fin-divider {
  height: 1px;
  background: var(--albion-border);
  margin: 8px 0;
}

.market-fin-total {
  font-size: 14px;
  font-weight: 700;
}

/* === Material card === */
.market-mat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--albion-border);
  border-radius: 8px;
  background: var(--albion-bg-subtle);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.market-mat-card:last-child {
  margin-bottom: 0;
}

.market-mat-img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
  background: transparent;
}

/* === Botón close === */
.market-popup-close {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px 10px !important;
  color: var(--albion-text-dim) !important;
  font-size: 22px !important;
  line-height: 1;
  border-radius: 6px !important;
}

.market-popup-close:hover {
  color: var(--albion-text) !important;
  background: var(--albion-bg-subtle) !important;
}

/* === Focus visible === */
#marketContainer button:focus-visible,
#marketContainer input:focus-visible,
#marketContainer select:focus-visible {
  outline: 2px solid var(--albion-gold);
  outline-offset: 2px;
}

/* === Ajustes por tema === */
[data-theme="dark"] #marketContainer button:hover:enabled {
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary, #8b5cf6) 25%, transparent);
}

[data-theme="noche"] #marketContainer button:hover:enabled {
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary, #d84f29) 20%, transparent);
}

/* ============================================================
   FIX: TOGGLES DE "BUSCAR ITEM" RESPONSIVE EN GRID
   ============================================================
   En móvil los toggles Premium/FOCO/Armaduras/Consumibles/Refinacion/Monturas/Filtro
   pasan de flex-wrap desordenado a grid 2 columnas. En tablet 3 cols. En desktop flex.
   ============================================================ */
@media (max-width: 768px) {
  .search-controls-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  /* Cada toggle ocupa 1 celda del grid */
  .search-controls-grid > * {
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* El botón Filtro ocupa toda una fila (porque tiene texto + icono) */
  .search-controls-grid > button {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .search-controls-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .search-controls-grid > button {
    grid-column: auto !important;
  }
}
/* En desktop >768px: flex-wrap normal (heredado del inline style) */

/* ============================================================
   FIX v9: MERCADO EXPIRADO — cards borrosas + overlay con mensaje
   Cuando el usuario tiene is_expired=true, initMarket() renderiza
   cards demo estáticas (injectDemoMarketCards) envueltas en
   .market-expired-blur-content con blur+grayscale, y encima
   muestra .market-expired-overlay con el mensaje de bloqueo.
   No se llama a la API de market (las cards son estáticas).
   ============================================================ */
.market-expired-blur-wrapper {
  position: relative;
  min-height: 400px;
}
.market-expired-blur-content {
  filter: grayscale(0.85) blur(3px) brightness(0.7);
  opacity: 0.45;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}
.market-expired-blur-content * {
  pointer-events: none !important;
}
.market-expired-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: auto;
}
/* En móvil: reducir el padding del overlay para que el mensaje quepa bien */
@media (max-width: 640px) {
  .market-expired-overlay {
    padding: 12px;
    align-items: flex-start;
    overflow-y: auto;
  }
}

/* ============================================================
   FIX v7: BOTÓN FAVORITO REDESEÑADO
   Era un cuadrado grande 52x52 con estrella 44px (parecía "caja").
   Ahora: icono 24px en touch-target circular 40px con glow dorado.
   El inline style ya tiene la mayoría; aquí añadimos hover/focus.
   ============================================================ */
.market-fav-btn:hover {
  background: color-mix(in srgb, var(--albion-gold) 12%, transparent) !important;
  color: var(--albion-gold) !important;
}
.market-fav-btn:focus-visible {
  outline: 2px solid var(--albion-gold);
  outline-offset: 2px;
}
/* En móvil (<480px): reducimos aún más para no romper layout del header */
@media (max-width: 480px) {
  .market-fav-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
    font-size: 20px !important;
  }
}

/* ============================================================
   FIX v8: HERO CARD (Mejor Oportunidad) — botón ⭐ absoluto
   En móvil, el profit text "silver de profit" se solapaba con el ⭐.
   Ahora el ⭐ es position:absolute top-right (ver market.js renderHeroCard).
   En móvil (<640px): ocultamos el chevron decorativo para liberar espacio.
   ============================================================ */
@media (max-width: 640px) {
  .market-hero-card .hero-chevron-desktop-only {
    display: none !important;
  }
  /* En móvil: el ⭐ del hero card puede ser un poco más pequeño para no tapar el nombre */
  .market-hero-card .market-fav-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    padding: 4px !important;
  }
}
/* En desktop: el profit text del hero tiene padding-right para no chocar con el ⭐ absoluto */
@media (min-width: 641px) {
  .market-hero-card .market-fav-btn {
    top: 10px !important;
    right: 12px !important;
  }
}

/* ============================================================
   FIX v9: POPUP DE MERCADO — REDISEÑO COMPLETO MÓVIL
   ============================================================
   Problemas previos (reportados por usuario + VLM):
   - En anchos estrechos (360-390px) el header satura: imagen 40px
     + 3 botones de acción (⭐40px + 🔄 + ✕) + título largo → el
     título se trunca ("Cultist Nature St...") y los botones se
     amontonan.
   - Subtítulo del header ("Bastón desenfrenado T4.2 · ...") se
     corta a la derecha por `white-space: nowrap`.
   - "PROFIT NETO (1 ud)" puede desbordar en <360px.
   - Bordes internos de las secciones a veces desfasados por
     `box-sizing` no aplicado o padding desigual.
   - Botones de cantidad (1, 10, 100, 1000) + input se apretaban
     sin espacio claro en <390px.
   Solución v9 (REDISEÑO TOTAL):
   1) Header: imagen 32px, action buttons 32px touch-target (con
      padding interno 4px y font 18px), título font 14px con
      `white-space: normal` (permite 2 líneas), subtítulo font 10px
      con `overflow-wrap: anywhere`.
   2) Body: padding uniforme 10px, gap 8px, box-sizing border-box
      en TODO.
   3) Section: padding 10px, border-radius 8px uniforme, border
      1px solid var(--albion-border) consistente.
   4) Quantity row: flex-wrap + gap 4px + min-width 0 en hijos
      para que se acomoden sin overflow.
   5) Profit box: font 22px en <600px y 18px en <380px.
   6) Breakdown table: label `flex: 1; min-width: 0` + value
      `text-align: right` para alineación perfecta.
   7) Close button: 32x32px, font 18px.
   ============================================================ */
@media (max-width: 600px) {
  /* === Overlay: padding mínimo para maximizar espacio === */
  .market-popup-overlay {
    padding: 6px !important;
    padding-left: 6px !important;
  }

  /* === Modal: flex column, ocupa casi toda la pantalla === */
  .market-popup-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 96vh !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    border-width: 1px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* === Header: fijo, COMPACTO, sin overflow === */
  .market-popup-header {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 14px 14px 0 0 !important;
    border-bottom: 1px solid var(--albion-border-strong) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    display: flex !important;
  }
  /* Imagen del header: 32px (más compacta que 40px anterior) */
  .market-popup-header > img,
  .market-popup-header > .market-mat-img,
  .market-popup-header > div:first-child {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
  }
  /* Header info: título + subtítulo — flex 1 con min-width 0 */
  .market-popup-header > div:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Título: 14px, permite 2 líneas, overflow-wrap */
  .market-popup-header > div:nth-child(2) > div:first-child {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--albion-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  /* Subtítulo: 10px, overflow-wrap para no cortar */
  .market-popup-header > div:nth-child(2) > div:last-child {
    font-size: 10px !important;
    margin-top: 2px !important;
    color: var(--albion-text-dim) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* === Action buttons (⭐ 🔄 ✕): touch-target 32px, compactos === */
  .market-popup-header .market-fav-btn,
  .market-popup-header button.market-popup-close,
  .market-popup-header > div:last-of-type button,
  .market-popup-header button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
    font-size: 18px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* El contenedor de acciones: gap 6px para que los 3 botones (⭐🔄✕) no se amontonen */
  .market-popup-header > div:last-of-type,
  .market-popup-header .market-fav-btn ~ div,
  .market-popup-header div[style*="display:flex"] {
    gap: 6px !important;
  }
  /* Close button específico: hereda tamaño compacto */
  .market-popup-close {
    padding: 4px !important;
    font-size: 18px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  /* === Body: scrollable, flex column (no grid en móvil) === */
  .market-popup-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* === Columnas internas: full width, gap uniforme === */
  .market-popup-col {
    width: 100% !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .market-popup-col-3 {
    grid-column: auto !important;
  }

  /* === Secciones internas: padding y border consistentes === */
  .market-popup-section {
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--albion-border) !important;
    background: var(--albion-surface) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .market-popup-section-title {
    font-size: 11px !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--albion-border) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  /* === Quantity row: botones + input bien distribuidos === */
  .market-popup-section label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  .market-popup-section label + div[style*="display:flex"],
  .market-popup-section > div[style*="display:flex"][style*="align-items:center"][style*="gap"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  /* Inputs dentro del popup: ancho flexible, no fijo 100px */
  .market-popup-section input[type="text"],
  .market-popup-section input[type="number"] {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: 100px !important;
    height: 28px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
  /* Botones de preset (1, 10, 100, 1000) */
  .market-popup-section button {
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  /* Select (preset de retorno) */
  .market-popup-section select {
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 4px !important;
    max-width: 60% !important;
    box-sizing: border-box !important;
  }

  /* === Profit box: compacto pero visible === */
  .market-profit-box {
    padding: 12px !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .market-profit-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 4px 0 !important;
    overflow-wrap: anywhere !important;
  }
  .market-profit-label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .market-roi-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin-top: 6px !important;
    display: inline-block !important;
  }

  /* === Tabla financiera: compacta y alineada === */
  .market-fin-table {
    font-size: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .market-fin-row {
    padding: 4px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .market-fin-label {
    color: var(--albion-text-muted) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .market-fin-value {
    color: var(--albion-text) !important;
    font-weight: 600 !important;
    text-align: right !important;
    font-family: var(--font-mono, monospace) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .market-fin-divider {
    height: 1px !important;
    background: var(--albion-border) !important;
    margin: 6px 0 !important;
    width: 100% !important;
  }
  .market-fin-total {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  /* Labels COSTOS / INGRESOS / PROFIT FINAL dentro del breakdown */
  .market-fin-table > div[style*="text-transform"],
  .market-fin-table > div[style*="uppercase"] {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }

  /* === Material cards: layout horizontal compacto === */
  .market-mat-card {
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 6px !important;
    border: 1px solid var(--albion-border) !important;
    background: var(--albion-bg-subtle) !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .market-mat-card:last-child {
    margin-bottom: 0 !important;
  }
  .market-mat-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
  }
  /* Texto del material: que ocupe el espacio disponible */
  .market-mat-card > div[style*="flex"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .market-mat-card > div[style*="flex"] > div {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Precio del material: alineado a la derecha */
  .market-mat-card > div[style*="font-family"][style*="monospace"] {
    flex-shrink: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* === Ciudades de venta: filas compactas === */
  .market-popup-section > div > div[style*="display:flex;justify-content:space-between"] {
    padding: 4px 0 !important;
    border-bottom: 1px dashed var(--albion-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .market-popup-section > div > div[style*="display:flex;justify-content:space-between"]:last-child {
    border-bottom: none !important;
  }
}

/* === Móvil muy pequeño (<380px): aún más compacto === */
@media (max-width: 380px) {
  .market-popup-overlay {
    padding: 4px !important;
  }
  .market-popup-modal {
    border-radius: 12px !important;
  }
  .market-popup-header {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  /* Imagen del header aún más pequeña en <380px */
  .market-popup-header > img,
  .market-popup-header > .market-mat-img,
  .market-popup-header > div:first-child {
    width: 28px !important;
    height: 28px !important;
  }
  /* Título: 13px en <380px */
  .market-popup-header > div:nth-child(2) > div:first-child {
    font-size: 13px !important;
  }
  /* Action buttons: 28px en <380px */
  .market-popup-header .market-fav-btn,
  .market-popup-header button.market-popup-close,
  .market-popup-header > div:last-of-type button,
  .market-popup-header button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 16px !important;
  }
  .market-popup-close {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 16px !important;
    padding: 2px !important;
  }
  .market-popup-body {
    padding: 8px !important;
    gap: 6px !important;
  }
  .market-popup-section {
    padding: 8px !important;
  }
  .market-profit-value {
    font-size: 18px !important;
  }
  .market-mat-img {
    width: 28px !important;
    height: 28px !important;
  }
  /* En <380px los botones de preset son aún más compactos */
  .market-popup-section button {
    padding: 0 6px !important;
    font-size: 10px !important;
  }
}