/* ============================================================
 * StarkTrade 5.0K - style-dashboard-pro.css
 * Reloj de Sincronización + Panel de Decisiones Vitaminado
 * ============================================================ */

/* ─── Reloj de Sincronización ──────────────────────────────── */
#sync-clock-card {
    border-color: #1f3242;
    background:
        radial-gradient(circle at 0% 0%, rgba(0,207,255,0.06), transparent 60%),
        var(--bg-card);
}
#sync-clock-card.sc-imminent {
    border-color: #00cfff;
    box-shadow: 0 0 18px rgba(0,207,255,0.25);
}

.sc-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.sc-clock {
    display: flex; flex-direction: column; gap: 4px;
}
.sc-day {
    font-size: 0.65rem; letter-spacing: 3px; color: var(--text-secondary);
}
.sc-time {
    font-size: 1.8rem; font-weight: 700; letter-spacing: 2px;
    color: var(--text-primary);
    text-shadow: 0 0 12px rgba(0,207,255,0.25);
    font-variant-numeric: tabular-nums;
}
.sc-market {
    font-size: 0.65rem; color: var(--text-secondary); letter-spacing: 1.5px;
}
.sc-market-on {
    color: var(--accent-neon); font-weight: 700;
    text-shadow: 0 0 8px rgba(0,255,65,0.35);
}

.sc-cron-row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 700px) { .sc-cron-row { grid-template-columns: 1fr; } }

.sc-cron-item {
    background: #07070a; border: 1px solid var(--border);
    border-radius: 3px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.sc-cron-label {
    font-size: 0.55rem; letter-spacing: 1.5px; color: var(--text-secondary);
}
.sc-cron-cd {
    font-size: 1.4rem; font-weight: 700; letter-spacing: 2px;
    color: #00cfff; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(0,207,255,0.25);
}
.sc-cron-meta {
    font-size: 0.55rem; color: var(--text-secondary); letter-spacing: 1px;
}
.sc-imminent .sc-cron-cd {
    color: var(--accent-neon);
    text-shadow: 0 0 10px rgba(0,255,65,0.4);
    animation: pulse 1s infinite;
}

/* Reglas de logs/filtros/leyenda migradas a style-logs.css */

/* ─── Layout Modular: Reorganización Dashboard ──────────────── */
.card.extra-wide {
    grid-column: span 3;
}

.card-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-column .card {
    flex: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Ajustes de Termómetro para que no se deforme al escalar */
#confluence-card .confluence-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

/* Ajustes de Rechazos para coherencia visual */
#rejection-card .rej-last {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* FIX UI: gate_reason + reasoning truncado a 140 chars puede contener
     * strings sin espacios; debe envolver hacia abajo en vez de cortarse. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ─── Nueva Columna: Diagnóstico + Winrate ─────────────────── */
#diag-winrate-column .card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#winrate-card .wr-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#winrate-card .wr-meta {
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

#diag-terminal-card {
    min-height: 180px; /* Asegura un área de trabajo mínima */
}

/* ─── Responsive: Ajustes de Spans ─────────────────────────── */
@media (max-width: 1200px) {
    .card.extra-wide { grid-column: span 2; }
}

@media (max-width: 768px) {
    .sc-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .sc-time { font-size: 1.4rem; letter-spacing: 1.5px; }
    .sc-cron-row { grid-template-columns: 1fr; }
    .sc-cron-cd { font-size: 1.2rem; }
    .sc-cron-label { font-size: 0.5rem; }
    
    .card.extra-wide { grid-column: auto; }
    .card-column { gap: 14px; }
}