/**
 * Marítima Andina - Barra Superior de Métricas en Vivo y TRM (Header Ticker)
 *
 * CONFIGURACIÓN REQUERIDA EN ELEMENTOR (igual que CY Colombia):
 * ─────────────────────────────────────────────────────────────
 * 1. Editar la SECCIÓN que contiene este widget → Diseño
 *    • Ancho de contenido: "Ancho Completo" (Full Width)
 *    • Columnas: "Ancho Completo" (Stretch columns)
 *    • Padding superior/inferior: 0px
 *    • Padding izquierdo/derecho: 0px
 * 2. Editar la COLUMNA → Diseño
 *    • Padding: 0px en todos los lados
 * 3. En "Avanzado" del widget → Margen/Relleno: todos en 0
 */

/* ── 1. Wrappers de Elementor: sin restricciones de ancho ── */
.elementor-widget-mta_exchange_bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-mta_exchange_bar .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ── 2. La barra en sí: mismo patrón que CY Colombia ── */
.mta-exchange-bar {
  /* Patrón CY: width:100% simple, funciona con sección Full Width en Elementor */
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Diseño visual */
  background: linear-gradient(90deg, #03101d 0%, #061a2f 50%, #07223d 100%);
  color: #ffffff;
  height: 38px;
  min-height: 38px;
  z-index: 9999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(4, 18, 32, 0.25);
  font-family: inherit;
  font-size: 11.5px;
  padding: 0;
}

.mta-ticker-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.mta-ticker-wrap.is-dragging,
.mta-ticker-wrap:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.mta-ticker-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: mtaTickerScroll 36s linear infinite;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.mta-ticker-content:hover,
.mta-ticker-wrap:hover .mta-ticker-content {
  animation-play-state: paused;
}

.mta-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  color: #ffffff;
  font-size: 11.5px;
  flex-shrink: 0;
}

.mta-ticker-item .ticker-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34c4e9;
  font-size: 10px;
  font-weight: 750;
}

.mta-ticker-item strong.ticker-val {
  font-weight: 650;
  color: #ffffff;
  font-size: 11.5px;
}

.mta-ticker-item .ticker-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 1.5px 6px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

.mta-ticker-item .ticker-badge.green {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}

.mta-ticker-item .ticker-badge.cyan {
  background: rgba(52, 196, 233, 0.18);
  border-color: rgba(52, 196, 233, 0.4);
  color: #34c4e9;
}

.mta-ticker-sep {
  color: rgba(52, 196, 233, 0.4);
  font-size: 10px;
  margin: 0 -4px;
}

@keyframes mtaTickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Modo Estático / Fallback */
.mta-exchange-bar .mta-exchange-wrap {
  width: 100%;
  max-width: 1364px;
  margin: auto;
  padding: 0 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  display: flex;
  box-sizing: border-box;
}
.mta-exchange-bar .mta-exchange-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #34c4e9;
  font-size: 10px;
  font-weight: 750;
}
.mta-exchange-bar .mta-exchange-value {
  font-size: 12px;
  font-weight: 700;
}
.mta-exchange-bar .mta-exchange-date {
  opacity: 0.75;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 12px;
  font-size: 10px;
}

/* ── 3. Responsive ── */
@media (max-width: 560px) {
  .mta-exchange-bar {
    height: 34px;
    min-height: 34px;
  }
  .mta-ticker-item {
    padding: 0 12px;
    font-size: 10.5px;
  }
  .mta-ticker-item .ticker-badge {
    display: none; /* Ocultar badges en móvil para ahorrar espacio */
  }
  .mta-ticker-sep {
    margin: 0 -6px;
  }
}