/* Flujo de fondos diario. Pantalla negra, linea de tiempo horizontal. */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: #07090d;
    color: #e8eef7;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
}
.pagina { max-width: 1440px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
.bajada { color: #94a3b8; margin: 0 0 16px; }
.barra {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 16px;
}
.grupo { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
label { display: block; font-size: 0.75rem; color: #94a3b8; margin-bottom: 4px; }
input, select {
    border: 1px solid #243044;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    background: #0f141c;
    color: #e8eef7;
    min-width: 180px;
}
.quien { margin: 0; color: #e2e8f0; font-size: 0.9rem; align-self: center; }
.error {
    color: #fecaca;
    background: #2a1215;
    border: 1px solid #7f1d1d;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 0 12px;
}
button {
    border-radius: 8px;
    border: 1px solid #334155;
    background: transparent;
    color: #dbe7ff;
    padding: 8px 12px;
    font: inherit;
    cursor: pointer;
}
button.activo, button.primario { background: #2563eb; border-color: #2563eb; color: #fff; }
.tarjeta {
    background: #10151d;
    border: 1px solid #1c2430;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi { border-left: 5px solid #60a5fa; }
.kpi h2 { margin: 0; font-size: 1.4rem; }
.kpi p { margin: 0 0 6px; color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.aviso {
    background: #2a2118;
    border: 1px solid #9a3412;
    color: #fdba74;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}
.estado { color: #94a3b8; text-align: center; padding: 28px 0; }
.lienzo { position: relative; }
.visor {
    position: relative;
    height: 520px;
    cursor: grab;
    touch-action: none;
}
.visor.arrastrando { cursor: grabbing; }
.carrera {
    position: relative;
    height: 10px;
    margin-top: 10px;
    border-radius: 99px;
    background: #1c2430;
    cursor: pointer;
}
.carro {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 99px;
    background: #64748b;
    min-width: 28px;
}
.nota { color: #94a3b8; font-size: 0.82rem; line-height: 1.45; }
.nota strong { color: #e2e8f0; }
@media (max-width: 720px) {
    .visor { height: 380px; }
}