/* --- ESTÉTICA INDUSTRIAL OMNIA HARDWARE --- */
:root {
    --bg-darkest: #0b0d10;
    --bg-rack: #13171e;
    --bg-button: #1b212c;
    --bg-button-loaded: #242c3b;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --omnia-orange: #ff5500;
    --omnia-led: #ffaa00;
    --omnia-cyan: #00e5ff;
    --danger-red: #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: var(--bg-darkest); color: var(--text-main); padding: 15px; overflow-x: hidden; }

.app-container { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }

/* --- MONITOR SUPERIOR --- */
.broadcast-monitor {
    background: linear-gradient(135deg, #0f1319, #1c2330);
    border: 2px solid #2d3748; border-radius: 8px; padding: 20px;
    display: grid; grid-template-columns: 2fr 1.5fr 1fr; align-items: center; gap: 20px;
}
.track-info h1 { font-size: 1.4rem; color: var(--omnia-orange); letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.time-display-container { font-family: monospace; font-size: 2.2rem; color: #fff; text-shadow: 0 0 10px rgba(255,85,0,0.2); }

.progress-bar-container { grid-column: 1 / 3; width: 100%; background-color: #090b0e; height: 10px; border-radius: 4px; overflow: hidden; border: 1px solid #2d3748; }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--omnia-orange), var(--omnia-led)); transition: width 0.033s linear; }

/* VU Estilo Omnia */
.vu-meters-rack { display: flex; flex-direction: column; gap: 6px; background-color: #06080a; padding: 10px; border-radius: 6px; border: 1px solid #2d3748; }
.vu-channel { display: flex; align-items: center; gap: 8px; }
.vu-label { font-family: monospace; font-weight: bold; font-size: 0.8rem; color: var(--text-muted); width: 10px; }
.vu-bg { background-color: #12161f; flex-grow: 1; height: 12px; border-radius: 2px; overflow: hidden; position: relative; border: 1px solid #000; }
.vu-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #00ff66 65%, #ffaa00 85%, #ff0000 100%); transition: width 0.033s ease-out; }

.master-volume-box { display: flex; flex-direction: column; gap: 5px; font-size: 0.75rem; font-weight: bold; text-align: center; color: var(--text-muted); }
.master-volume-box input[type="range"] { width: 100%; accent-color: var(--omnia-orange); cursor: pointer; }

/* --- OMNIA VOLT HARDWARE RACK --- */
.omnia-hardware-rack {
    background-color: var(--bg-rack); border: 2px solid #374151; border-left: 6px solid var(--omnia-orange);
    border-radius: 6px; padding: 15px 20px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.5);
}
.rack-brand { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2d3748; padding-bottom: 8px; }
.rack-brand h3 { font-size: 0.95rem; font-weight: 900; color: #f3f4f6; letter-spacing: 2px; }

.btn-bypass {
    background-color: #242c3b; color: var(--text-muted); border: 1px solid #374151;
    padding: 5px 12px; font-weight: bold; font-size: 0.75rem; border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.btn-bypass.active { background-color: rgba(255, 85, 0, 0.15); color: var(--omnia-orange); border-color: var(--omnia-orange); text-shadow: 0 0 5px var(--omnia-orange); }

.rack-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.control-group { display: flex; flex-direction: column; gap: 4px; min-width: 145px; }
.control-group label { font-size: 0.65rem; font-weight: bold; color: var(--text-muted); letter-spacing: 0.5px; }
.control-group input[type="range"] { accent-color: var(--omnia-orange); cursor: pointer; height: 5px; }
.rack-value { font-family: monospace; font-size: 0.8rem; color: var(--omnia-cyan); font-weight: bold; text-align: right; }

.parameter-highlight { border: 1px solid rgba(255, 85, 0, 0.3); padding: 6px 10px; border-radius: 4px; background-color: rgba(0,0,0,0.2); }
.parameter-highlight label { color: var(--omnia-orange); }

.rack-separator { width: 1px; height: 40px; background-color: #2d3748; margin: 0 5px; }
.eq-knob input[type="range"] { accent-color: var(--omnia-cyan); }

/* --- AUTOMATIZACIÓN COLA CONTINUA --- */
.jazler-flow-zone { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; }
.dropzone {
    background-color: #090b0e; border: 2px dashed #374151; border-radius: 6px;
    padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; position: relative; transition: all 0.2s;
}
.dropzone.drag-over-next { border-color: var(--omnia-orange); background-color: rgba(255, 85, 0, 0.05); }
.dropzone-title { font-size: 0.7rem; font-weight: bold; color: var(--text-muted); position: absolute; top: -8px; left: 15px; background-color: var(--bg-darkest); padding: 0 5px; }
.next-track-title { font-size: 1.1rem; font-weight: bold; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-clear-next { background: none; border: none; color: var(--danger-red); font-size: 1.2rem; cursor: pointer; padding: 5px; }
.btn-trigger-next {
    background: linear-gradient(135deg, var(--omnia-orange), #cc4400); color: white; border: none;
    border-radius: 6px; font-weight: bold; font-size: 1rem; cursor: pointer; text-transform: uppercase; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.btn-trigger-next:disabled { background: #242c3b; color: #4b5563; cursor: not-allowed; box-shadow: none; }

/* --- CARTWALL / DISEÑO DE BOTONES --- */
.deck-tabs-wrapper { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #242c3b; padding-bottom: 5px; }
.tabs-container { display: flex; gap: 5px; }
.tab-btn {
    background-color: var(--bg-button); color: var(--text-muted); border: 1px solid #242c3b; border-bottom: none;
    padding: 10px 25px; border-radius: 6px 6px 0 0; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: all 0.15s;
}
.tab-btn.active { background-color: var(--omnia-orange); color: #fff; border-color: var(--omnia-orange); box-shadow: 0 -2px 6px rgba(255,85,0,0.3); }

.grid-buttons-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 15px; }
.jingle-btn {
    background-color: var(--bg-button); border: 1px solid #242c3b; border-radius: 6px;
    height: 90px; color: var(--text-muted); font-weight: bold; cursor: pointer; font-size: 0.9rem;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
    padding: 10px; position: relative; text-transform: uppercase; overflow: hidden; transition: all 0.15s;
}
.jingle-btn:hover { background-color: #242e3d; border-color: #374151; color: #fff; }
.jingle-btn.loaded { background-color: var(--bg-button-loaded); color: #fff; border-color: #374151; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

.jingle-btn.playing { background: linear-gradient(135deg, #d97706, var(--omnia-orange)) !important; color: white !important; border-color: #ff7733 !important; box-shadow: 0 0 14px rgba(255,85,0,0.6); animation: pulsePlaying 1.2s infinite alternate; }
.jingle-btn.is-next-queued { border: 2px dashed var(--omnia-cyan) !important; background-color: rgba(0,229,255,0.12) !important; }

.time-tag { font-family: monospace; font-size: 0.75rem; background-color: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; color: var(--omnia-cyan); }
.hotkey-tag { position: absolute; top: 4px; right: 6px; font-size: 0.65rem; color: var(--text-muted); font-weight: 800; background-color: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 2px; }

/* Identificadores de color lateral */
.jingle-btn.color-red { border-left: 5px solid var(--danger-red); }
.jingle-btn.color-blue { border-left: 5px solid #2563eb; }
.jingle-btn.color-green { border-left: 5px solid #16a34a; }
.jingle-btn.color-orange { border-left: 5px solid var(--omnia-orange); }

@keyframes pulsePlaying { from { filter: brightness(0.95); } to { filter: brightness(1.2); } }

/* --- SECCIÓN INFERIOR ACCIONES --- */
.global-actions { display: flex; justify-content: space-between; margin-top: 15px; gap: 15px; }
.btn-action-sm { background-color: #242c3b; color: #fff; border: none; padding: 4px 10px; font-size: 0.75rem; font-weight: bold; border-radius: 4px; cursor: pointer; }
.btn-action-md { background-color: #1e3a8a; border: 1px solid #2563eb; color: #fff; padding: 12px 25px; font-weight: bold; border-radius: 6px; cursor: pointer; }
.btn-danger-lg { background: linear-gradient(135deg, #b91c1c, #991b1b); color: white; border: none; padding: 12px 40px; font-weight: 900; font-size: 1.1rem; border-radius: 6px; cursor: pointer; letter-spacing: 1px; box-shadow: 0 4px 6px rgba(0,0,0,0.4); }

/* --- CONTEXT MENU --- */
.context-menu { position: absolute; background-color: #1c2330; border: 1px solid #374151; border-radius: 6px; width: 235px; box-shadow: 0 10px 20px rgba(0,0,0,0.6); display: none; z-index: 9999; padding: 5px 0; }
.context-menu ul { list-style: none; }
.menu-item { padding: 8px 15px; font-size: 0.85rem; cursor: pointer; font-weight: 600; color: #e5e7eb; }
.menu-item:hover { background-color: var(--omnia-orange); color: #fff; }
.menu-item.danger:hover { background-color: var(--danger-red); color: #fff; }
.menu-item-complex { padding: 6px 15px; font-size: 0.8rem; display: flex; flex-direction: column; gap: 4px; }
.menu-item-complex input[type="text"] { background-color: #090b0e; border: 1px solid #374151; color: white; padding: 4px; border-radius: 4px; font-weight: bold; text-align: center; text-transform: uppercase; }
.menu-item-complex input[type="range"] { accent-color: var(--omnia-orange); }

.menu-item-colors { padding: 6px 15px; font-size: 0.8rem; display: flex; flex-direction: column; gap: 6px; }
.color-palette { display: flex; gap: 8px; }
.color-opt { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 1px solid #fff; }
.color-default { background-color: var(--bg-button-loaded); }
.color-red { background-color: var(--danger-red); }
.color-blue { background-color: #2563eb; }
.color-green { background-color: #16a34a; }
.color-orange { background-color: var(--omnia-orange); }
hr { border: 0; border-top: 1px solid #2d3748; margin: 4px 0; }