/* Contenedor principal para las 3 filas */
.act-main-wrapper {
    width: 100%;
    background-color: #010F27;
    /* Fondo Dark global */
    font-family: 'Montserrat', sans-serif;
    border-bottom: 1px solid #1a263e;
}

/* Estilos comunes para cada fila */
.act-ticker-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 8px 0;
    /* Menos padding para que no quede gigante */
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Separador sutil */
}

.act-ticker-wrap:last-child {
    border-bottom: none;
}

/* El elemento que se mueve */
.act-ticker {
    display: inline-block;
    white-space: nowrap;
    animation: act-marquee 80s linear infinite;
}

/* Pausar animación al pasar el mouse */
.act-ticker-wrap:hover .act-ticker {
    animation-play-state: paused;
}

/* Items individuales */
.act-ticker-item {
    display: inline-block;
    padding: 0 20px;
    font-size: 13px;
    /* Un poco más chico para que entren bien las 3 filas */
    color: #1ed6fe;
    line-height: 1.4;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

.act-currency-code {
    font-weight: 700;
    margin-right: 5px;
    color: #1ed6fe;
}

.act-currency-value {
    color: #1ed6fe;
    font-weight: 400;
    opacity: 0.9;
}

/* Estilo para items destacados (Blue/Tarjeta/CCL) */
.act-highlight .act-currency-code {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(30, 214, 254, 0.3);
}

/* Estilo para Criptos */
.act-crypto-logo {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Estilo para Fila 3: Fecha, Hora y Clima */
.act-date-time {
    font-weight: 700;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding-right: 30px;
    margin-right: 10px;
}

.act-date {
    text-transform: capitalize;
    margin-right: 10px;
}

.act-time-box {
    color: #1ed6fe;
    background: rgba(30, 214, 254, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.act-weather {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.act-city-name {
    font-weight: 600;
    color: #ffffff;
}

.act-temp {
    color: #1ed6fe;
    font-weight: 700;
}

.act-weather-icon {
    font-size: 1.2em;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
}

/* Animación: Mueve del 0% al -50% */
@keyframes act-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .act-ticker-item {
        padding: 0 10px;
        font-size: 11px;
    }

    .act-crypto-logo {
        width: 12px;
        height: 12px;
    }

    .act-date-time {
        padding-right: 15px;
    }

    .act-weather-icon {
        font-size: 1em;
    }
}

/* --- SOPORTE MULTI-TEMA (CLARO CREMA / OSCURO AZUL LRD) --- */

/* 1. MODO CLARO (Crema por defecto) */
.act-main-wrapper {
    background-color: #fdf6e3 !important;
    border-bottom: 1px solid #eee8d5 !important;
}

.act-ticker-item,
.act-currency-code,
.act-currency-value,
.act-temp,
.act-city-name,
.act-date-time {
    color: #010F27 !important;
    text-shadow: none !important;
}

.act-highlight .act-currency-code {
    color: #010F27 !important;
    text-shadow: none !important;
}

.act-time-box {
    color: #010F27 !important;
    background: rgba(1, 15, 39, 0.1) !important;
}

.act-date-time {
    border-right: 1px solid rgba(1, 15, 39, 0.2) !important;
}

/* 2. MODO OSCURO (Restauramos colores oscuros si la página tiene la clase .dark-theme) */
html.dark-theme .act-main-wrapper,
body.dark-theme .act-main-wrapper {
    background-color: #010F27 !important;
    border-bottom: 1px solid #1a263e !important;
}

html.dark-theme .act-ticker-item,
body.dark-theme .act-ticker-item {
    color: #1ed6fe !important;
}

html.dark-theme .act-currency-code,
html.dark-theme .act-currency-value,
html.dark-theme .act-temp,
body.dark-theme .act-currency-code,
body.dark-theme .act-currency-value,
body.dark-theme .act-temp {
    color: #1ed6fe !important;
}

html.dark-theme .act-highlight .act-currency-code,
html.dark-theme .act-city-name,
html.dark-theme .act-date-time,
body.dark-theme .act-highlight .act-currency-code,
body.dark-theme .act-city-name,
body.dark-theme .act-date-time {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(30, 214, 254, 0.3) !important;
}

html.dark-theme .act-time-box,
body.dark-theme .act-time-box {
    color: #1ed6fe !important;
    background: rgba(30, 214, 254, 0.1) !important;
}

html.dark-theme .act-date-time,
body.dark-theme .act-date-time {
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}