body { font-family: 'Segoe UI', system-ui, sans-serif; background: #111; color: #fff; margin: 0; display: flex; min-height: 100vh; font-size: 0.9rem; }

/* Sidebar */
.sidebar { width: 240px; background: #0a0a0a; border-right: 1px solid #333; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; position: fixed; height: 100vh; overflow-y: auto; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { display: none; }
.main-content { flex: 1; padding: 2rem; margin-left: 260px; }

@keyframes shine {
    to { background-position: 200% center; }
}
h1 { background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C, #BF953F); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 15px rgba(255, 215, 0, 0.2); animation: shine 3s linear infinite; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.card { background: #161616; border: 1px solid #333; border-left: 4px solid #D4AF37; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }

.status-dot { height: 10px; width: 10px; background-color: #0f0; border-radius: 50%; display: inline-block; margin-right: 5px; }
.user-list { list-style: none; padding: 0; margin-top: 1rem; }
.user-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #333; }
.role-badge { font-size: 0.8rem; background: linear-gradient(45deg, #B8860B, #D4AF37); padding: 2px 8px; border-radius: 4px; color: #000; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.terminal { background: #000; color: #0f0; font-family: 'Courier New', monospace; padding: 1rem; border-radius: 8px; height: 300px; overflow-y: auto; border: 1px solid #333; font-size: 0.9rem; }
.log-entry { margin-bottom: 5px; border-bottom: 1px solid #111; padding-bottom: 2px; }
.log-error { color: #ff4444; }
.log-discord { color: #5865F2; } /* Discord Blurple */
.log-twitch { color: #a970ff; } /* Twitch Purple */
.log-time { color: #666; font-size: 0.8rem; margin-right: 10px; }
.text-online { color: #0f0; }
.text-offline { color: #f00; }

/* Form Elements */
input[type="text"], select { width: 100%; background: #222; border: 1px solid #444; color: #fff; padding: 10px; margin-bottom: 10px; border-radius: 4px; box-sizing: border-box; }
button.btn-save { background: linear-gradient(45deg, #B8860B, #D4AF37); border: none; padding: 10px 20px; color: #000; font-weight: bold; cursor: pointer; border-radius: 4px; width: 100%; }
button.btn-save:hover { opacity: 0.9; }

.time-input-group { display: flex; gap: 5px; margin-bottom: 5px; }
.btn-remove { background: #ff4444; color: white; border: none; border-radius: 4px; cursor: pointer; padding: 0 10px; }
.btn-add { background: #333; color: #D4AF37; border: 1px solid #D4AF37; padding: 5px 10px; cursor: pointer; border-radius: 4px; width: auto; display: inline-block; margin-bottom: 10px; font-size: 0.9rem; }

.btn-emoji { background: #2a2a2a; border: 1px solid #444; color: #fff; cursor: pointer; padding: 5px 8px; border-radius: 4px; font-size: 1.2rem; transition: 0.2s; }
.btn-emoji:hover { background: #444; transform: scale(1.1); }

.btn-approve { background: #0f0; color: #000; border: none; padding: 5px 10px; cursor: pointer; border-radius: 4px; font-weight: bold; }
.nav-link { color: #888; text-decoration: none; padding: 10px; border-radius: 6px; transition: all 0.3s ease; display: block; cursor: pointer; border-left: 3px solid transparent; }
.nav-link:hover, .nav-link.active { background: linear-gradient(90deg, #222, #0a0a0a); color: #D4AF37; padding-left: 15px; border-left: 3px solid #D4AF37; }
.nav-title { font-size: 0.85rem; text-transform: uppercase; color: #D4AF37; margin-top: 1.5rem; margin-bottom: 0.5rem; padding-left: 10px; font-weight: bold; letter-spacing: 1px; text-shadow: 0 0 5px rgba(212, 175, 55, 0.3); border-bottom: 1px solid rgba(212, 175, 55, 0.1); padding-bottom: 5px; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Emoji Picker Customization */
emoji-picker { width: 100%; --background: #1a1a1a; --border-color: #333; }

/* Context Menu (Click Derecho) */
.context-menu { display: none; position: absolute; background: #1a1a1a; border: 1px solid #D4AF37; z-index: 1000; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); min-width: 150px; }
.context-item { padding: 10px 15px; cursor: pointer; transition: 0.2s; color: #e0e0e0; font-size: 0.9rem; border-bottom: 1px solid #222; }
.context-item:hover { background: #D4AF37; color: #000; font-weight: bold; }

/* Indicador de Actividad en Vivo */
.live-indicator { display: inline-block; width: 8px; height: 8px; background-color: #00ff00; border-radius: 50%; margin-left: 8px; opacity: 0.8; transition: all 0.1s ease-in-out; vertical-align: middle; box-shadow: 0 0 5px rgba(0, 255, 0, 0.2); }
.live-indicator.pulse { opacity: 1; box-shadow: 0 0 15px #00ff00; transform: scale(1.5); }

/* Boss Timers & Golden Inputs */
.gold-form-control {
    background-color: #222 !important;
    border: 1px solid #444 !important;
    color: #D4AF37 !important;
}
.gold-form-control:focus {
    background-color: #111 !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5) !important;
    outline: none;
}
.gold-form-control::placeholder { color: #666 !important; }
.gold-table-head th {
    color: #D4AF37 !important;
    border-bottom: 2px solid #D4AF37 !important;
    font-family: monospace;
    text-transform: uppercase;
}