/*
 * YUYDA - Motor predictivo determinista
 *
 * Copyright (C) 2024-2026 Daniel Comin
 * Developed by Daniel Comin <danicom@inetbc.net>
 *
 * Proprietary software. All rights reserved.
 * Unauthorized use, copying, modification, or distribution is prohibited.
 */

:root {
    --bg: #0d0d12; --bg2: #13131a; --bg3: #1a1a24;
    --fg: #ffffff; --dim: #d8d8e0; --border: #2a2a35;
    --green: #39ff14; --red: #ff3355; --amber: #ffaa00; --blue: #3b82f6;
    --cyan: #00e5ff; --magenta: #e040fb; --ticker: #39ff14; --label: #ffcc00;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: 'Consolas','Fira Code',monospace; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column; }

#topbar { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--bg2); border-bottom: 1px solid var(--border); }
#app-title { font-weight: 700; font-size: 1.1rem; }
#topbar nav { display: flex; gap: .4rem; margin-left: auto; }
#topbar a { color: var(--dim); text-decoration: none; padding: .2rem .6rem; border-radius: 3px; font-size: .85rem; }
#topbar a:hover { color: var(--fg); background: var(--bg3); }
#topbar a.active { color: var(--blue); background: var(--bg3); }

#status-strip { display: flex; gap: 1rem; padding: .25rem 1rem; background: var(--bg2); border-bottom: 1px solid var(--border); font-size: .75rem; color: var(--dim); min-height: 1.4rem; }
#viewport { flex: 1; padding: 1rem; overflow-y: auto; }

#footer { display: flex; align-items: center; gap: .5rem; padding: .25rem 1rem; background: var(--bg2); border-top: 1px solid var(--border); font-size: .7rem; color: var(--dim); }
#footer button { font-family: inherit; font-size: .7rem; padding: .1rem .4rem; background: var(--bg3); color: var(--dim); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; }
#footer button:hover { color: var(--fg); }
#footer-ts { margin-left: auto; }

[hidden] { display: none !important; }
.panel { padding: .5rem 1rem; background: var(--bg2); border-top: 1px solid var(--border); font-size: .75rem; color: var(--dim); max-height: 180px; overflow-y: auto; }