/* ==========================================================================
   GLOBAL CSS - CALCULAHOY
   Acá van los estilos compartidos por todas las páginas (Ej: Cinta Macro)
   ========================================================================== */

/* === CINTA TICKER MACRO GLOBAL === */
.macro-dashboard { 
    background-color: #0f172a; 
    color: white; 
    padding: 0.6rem 0; 
    margin-bottom: 2rem; 
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    overflow: hidden; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); 
}

.macro-container { 
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap; 
    width: max-content; 
    animation: tickerAnim 35s linear infinite; 
    gap: 0; 
    border: none; 
    padding-bottom: 0; 
}

/* Pausa la animación cuando el usuario le pasa el mouse por arriba */
.macro-container:hover {
    animation-play-state: paused; 
}

.macro-track { 
    display: flex; 
    flex-wrap: nowrap; 
    width: max-content; 
}

.macro-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    background: transparent; 
    padding: 0 2rem; 
    border: none; 
    border-right: 1px solid rgba(255, 255, 255, 0.15); 
    min-width: max-content; 
    cursor: pointer; 
    text-decoration: none; 
    transition: background-color 0.2s ease; 
}

.macro-item:hover {
    background-color: rgba(255, 255, 255, 0.08); 
}

.macro-icon { 
    font-size: 1.5rem; 
    color: #10b981; /* Verde esmeralda por defecto */
}

.macro-info { display: flex; align-items: center; gap: 8px;}
.macro-info h3 { font-size: 0.75rem; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; margin: 0; }
.macro-info .value { font-size: 1.1rem; font-weight: 800; color: white; white-space: nowrap;}
.macro-info .sub { display: none; }

/* Enlace inferior derecho de la cinta */
.macro-link-container { text-align: right; max-width: 1200px; margin: 0.5rem auto 0 auto; padding: 0 1rem;}
.btn-small-link { font-size: 0.8rem; color: #94a3b8; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s; border-bottom: 1px dotted transparent; }
.btn-small-link:hover { color: #60a5fa; border-bottom-color: #60a5fa; }

/* Animación infinita */
@keyframes tickerAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === RESPONSIVE (MÓVILES) === */
@media (max-width: 600px) {
    .macro-container { animation: tickerAnim 20s linear infinite; } /* Un poco más rápido en celu */
    .macro-item { padding: 0 1.5rem; gap: 8px; } 
    .macro-info h3 { font-size: 0.7rem; }
    .macro-info .value { font-size: 0.95rem; }
}